diff --git a/client/components/__test__/FileNode.test.jsx b/client/components/__test__/FileNode.test.jsx new file mode 100644 index 00000000..8b72261d --- /dev/null +++ b/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('', () => { + 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(); + }); + + 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(); + }); + }); + }); + }); +}); diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index 5edcf74d..f220b9ea 100644 --- a/client/modules/IDE/actions/files.js +++ b/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({ diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index c345de87..df27c136 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/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 {