Merge pull request #1372 from ghalestrilo/fix/rename-file-set-unsaved

Fixes #681 - File name update triggers editor change detection

Author: catarak

client/components/__test__/FileNode.test.jsx

@@ -0,0 +1,71 @@
+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,
+        authenticated: false
+      };
+      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

@@ -136,10 +136,13 @@ export function createFolder(formProps) {
 }
 
 export function updateFileName(id, name) {
-  return {
-    type: ActionTypes.UPDATE_FILE_NAME,
-    id,
-    name
+  return (dispatch) => {
+    dispatch(setUnsavedChanges(true));
+    dispatch({
+      type: ActionTypes.UPDATE_FILE_NAME,
+      id,
+      name
+    });
   };
 }
 

client/modules/IDE/actions/project.js

@@ -133,6 +133,7 @@ export function saveProject(selectedFile = null, autosave = false) {
     }
     const formParams = Object.assign({}, state.project);
     formParams.files = [...state.files];
+
     if (selectedFile) {
       const fileToUpdate = formParams.files.find(file => file.id === selectedFile.id);
       fileToUpdate.content = selectedFile.content;