✅ write test file for <FileNode />

Author: ghalestrilo

client/components/__test__/FileNode.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FileNode } from '../../modules/IDE/components/FileNode';
+
+beforeAll(() => {});
+describe('<FileNode />', () => {
+  let component;
+  let props = {};
+
+  describe('with valid props', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        id: '0',
+        children: [],
+        name: 'test.jsx',
+        fileType: 'dunno',
+        setSelectedFile: jest.fn(),
+        deleteFile: jest.fn(),
+        updateFileName: jest.fn(),
+        resetSelectedFile: jest.fn(),
+        newFile: jest.fn(),
+        newFolder: jest.fn(),
+        showFolderChildren: jest.fn(),
+        hideFolderChildren: jest.fn(),
+        canEdit: true,
+      };
+      component = shallow(<FileNode {...props} />);
+    });
+
+    describe('when changing name', () => {
+      let input;
+      let renameTriggerButton;
+      const changeName = (newFileName) => {
+        renameTriggerButton.simulate('click');
+        input.simulate('change', { target: { value: newFileName } });
+        input.simulate('blur');
+      };
+
+      beforeEach(() => {
+        input = component.find('.sidebar__file-item-input');
+        renameTriggerButton = component
+          .find('.sidebar__file-item-option')
+          .first();
+        component.setState({ isEditing: true });
+      });
+      it('should render', () => expect(component).toBeDefined());
+
+      // it('should debug', () => console.log(component.debug()));
+
+      describe('to a valid filename', () => {
+        const newName = 'newname.jsx';
+        beforeEach(() => changeName(newName));
+
+        it('should save the name', () => {
+          expect(props.updateFileName).toBeCalledWith(props.id, newName);
+        });
+      });
+
+      describe('to an empty filename', () => {
+        const newName = '';
+        beforeEach(() => changeName(newName));
+
+        it('should not save the name', () => {
+          expect(props.updateFileName).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

client/modules/IDE/actions/files.js

@@ -135,7 +135,10 @@ export function createFolder(formProps) {
   };
 }
 
+let callcount = 0;
 export function updateFileName(id, name) {
+  callcount += 1;
+  console.log(`called ${callcount} times`);
   return (dispatch) => {
     dispatch(setUnsavedChanges(true));
     dispatch({

client/modules/IDE/components/FileNode.jsx

@@ -49,7 +49,7 @@ export class FileNode extends React.Component {
   }
 
   get updatedName() {
-    return this.state.updatedName;
+    return this.state.updatedName || this.props.name;
   }
 
   commitFileNameChange() {
@@ -91,10 +91,9 @@ export class FileNode extends React.Component {
     const hasEmptyFilename = newFileName === '';
     const hasOnlyExtension = newFileExtension && newFileName === newFileExtension[0];
     if (hasEmptyFilename || hasNoExtension || notSameExtension || hasOnlyExtension || hasExtensionIfFolder) {
+      this.setState({ updatedName: this.originalFileName });
       this.props.updateFileName(this.props.id, this.originalFileName);
-      return;
-    }
-    this.commitFileNameChange();
+    } else this.commitFileNameChange();
   }
 
   toggleFileOptions(e) {
@@ -242,7 +241,7 @@ export class FileNode extends React.Component {
                     <li>
                       <button
                         onClick={() => {
-                          this.originalFileName = this.updatedName;
+                          this.originalFileName = this.props.name;
                           this.showEditFileName();
                           setTimeout(() => this.fileNameInput.focus(), 0);
                           setTimeout(() => this.hideFileOptions(), 0);