✅ write tests for toolbar

client/components/__test__/FileNode.test.jsx

@@ -34,7 +34,8 @@ describe('<FileNode />', () => {
           newFolder: jest.fn(),
           showFolderChildren: jest.fn(),
           hideFolderChildren: jest.fn(),
-          openUploadFileModal: jest.fn()
+          openUploadFileModal: jest.fn(),
+          setProjectName: jest.fn(),
         };
         component = shallow(<FileNode {...props} />);
       });
@@ -108,16 +109,14 @@ describe('<FileNode />', () => {
       describe('to an extensionless filename', () => {
         const newName = 'extensionless';
         beforeEach(() => changeName(newName));
-
-        it('should not save', () => expect(props.updateFileName).not.toHaveBeenCalled());
-        it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
       });
-
+      it('should not save', () => expect(props.setProjectName).not.toHaveBeenCalled());
+      it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
       describe('to different extension', () => {
         const newName = 'name.gif';
         beforeEach(() => changeName(newName));
 
-        it('should not save', () => expect(props.updateFileName).not.toHaveBeenCalled());
+        it('should not save', () => expect(props.setProjectName).not.toHaveBeenCalled());
         it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
       });
 

client/components/__test__/Toolbar.test.jsx

@@ -2,33 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Toolbar } from '../../modules/IDE/components/Toolbar';
 
-describe('<Toolbar />', () => {
-  let component;
-  let props = {};
-  let input;
-  let renameTriggerButton;
-  const changeName = (newFileName) => {
-    renameTriggerButton.simulate('click');
-    input.simulate('change', { target: { value: newFileName } });
-    input.simulate('blur');
-  };
-  const getState = () => component.state();
-  const getUpdatedName = () => getState().updatedName;
-  const setProps = (additionalProps) => {
-    props = {
+
+const initialProps = {
   isPlaying: false,
   preferencesIsVisible: false,
   stopSketch: jest.fn(),
   setProjectName: jest.fn(),
   openPreferences: jest.fn(),
-      owner: {
-        username: ''
-      },
-      project: {
-        name: '',
-        isEditingName: false,
-        id: '',
-      },
   showEditProjectName: jest.fn(),
   hideEditProjectName: jest.fn(),
   infiniteLoop: false,
@@ -39,11 +19,46 @@ describe('<Toolbar />', () => {
   startSketch: jest.fn(),
   startAccessibleSketch: jest.fn(),
   saveProject: jest.fn(),
-      currentUser: '',
-      ...additionalProps
+  currentUser: 'me',
+  originalProjectName: 'testname',
+
+  owner: {
+    username: 'me'
+  },
+  project: {
+    name: 'testname',
+    isEditingName: false,
+    id: 'id',
+  },
+};
+
+
+describe('<Toolbar />', () => {
+  let component;
+  let props = initialProps;
+  let input;
+  let renameTriggerButton;
+  const changeName = (newFileName) => {
+    component.find('.toolbar__project-name').simulate('click', { preventDefault: jest.fn() });
+    input = component.find('.toolbar__project-name-input');
+    renameTriggerButton = component.find('.toolbar__edit-name-button');
+    renameTriggerButton.simulate('click');
+    input.simulate('change', { target: { value: newFileName } });
+    input.simulate('blur');
+  };
+  const setProps = (additionalProps) => {
+    props = {
+      ...props,
+      ...additionalProps,
+
+      project: {
+        ...props.project,
+        ...(additionalProps || {}).project
+      },
     };
   };
 
+  // Test Cases
 
   describe('with valid props', () => {
     beforeEach(() => {
@@ -51,5 +66,42 @@ describe('<Toolbar />', () => {
       component = shallow(<Toolbar {...props} />);
     });
     it('renders', () => expect(component).toBeDefined());
+
+    describe('when use owns sketch', () => {
+      beforeEach(() => setProps({ currentUser: props.owner.username }));
+
+      describe('when changing sketch name', () => {
+        beforeEach(() => {
+          setProps({
+            project: { isEditingName: true, name: 'testname' },
+            setProjectName: jest.fn(name => component.setProps({ project: { name } })),
+          });
+          component = shallow(<Toolbar {...props} />);
+        });
+
+        // it('should debug', () => console.log(component.debug()));
+
+        describe('to a valid name', () => {
+          beforeEach(() => changeName('hello'));
+          it('should save', () => expect(props.setProjectName).toBeCalledWith('hello'));
+        });
+
+
+        describe('to an empty name', () => {
+          beforeEach(() => changeName(''));
+          it('should set name to empty', () => expect(props.setProjectName).toBeCalledWith(''));
+          it(
+            'should detect empty name and revert to original',
+            () => expect(props.setProjectName).toHaveBeenLastCalledWith(initialProps.project.name)
+          );
+        });
+      });
+    });
+
+    describe('when user does not own sketch', () => {
+      beforeEach(() => setProps({ currentUser: 'not-the-owner' }));
+
+      it('should disable edition', () => expect(component.find('.toolbar__edit-name-button')).toEqual({}));
+    });
   });
 });