✅ write tests for toolbar

Author: ghalestrilo

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,54 +2,106 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Toolbar } from '../../modules/IDE/components/Toolbar';
 
+
+const initialProps = {
+  isPlaying: false,
+  preferencesIsVisible: false,
+  stopSketch: jest.fn(),
+  setProjectName: jest.fn(),
+  openPreferences: jest.fn(),
+  showEditProjectName: jest.fn(),
+  hideEditProjectName: jest.fn(),
+  infiniteLoop: false,
+  autorefresh: false,
+  setAutorefresh: jest.fn(),
+  setTextOutput: jest.fn(),
+  setGridOutput: jest.fn(),
+  startSketch: jest.fn(),
+  startAccessibleSketch: jest.fn(),
+  saveProject: jest.fn(),
+  currentUser: 'me',
+  originalProjectName: 'testname',
+
+  owner: {
+    username: 'me'
+  },
+  project: {
+    name: 'testname',
+    isEditingName: false,
+    id: 'id',
+  },
+};
+
+
 describe('<Toolbar />', () => {
   let component;
-  let props = {};
+  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 getState = () => component.state();
-  const getUpdatedName = () => getState().updatedName;
   const setProps = (additionalProps) => {
     props = {
-      isPlaying: false,
-      preferencesIsVisible: false,
-      stopSketch: jest.fn(),
-      setProjectName: jest.fn(),
-      openPreferences: jest.fn(),
-      owner: {
-        username: ''
-      },
+      ...props,
+      ...additionalProps,
+
       project: {
-        name: '',
-        isEditingName: false,
-        id: '',
+        ...props.project,
+        ...(additionalProps || {}).project
       },
-      showEditProjectName: jest.fn(),
-      hideEditProjectName: jest.fn(),
-      infiniteLoop: false,
-      autorefresh: false,
-      setAutorefresh: jest.fn(),
-      setTextOutput: jest.fn(),
-      setGridOutput: jest.fn(),
-      startSketch: jest.fn(),
-      startAccessibleSketch: jest.fn(),
-      saveProject: jest.fn(),
-      currentUser: '',
-      ...additionalProps
     };
   };
 
+  // Test Cases
 
   describe('with valid props', () => {
     beforeEach(() => {
       setProps();
       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({}));
+    });
   });
 });