Use testing-library instead of enzyme for tests
This commit is contained in:
Andrew Nicolaou
parent
840e27b3fd
commit
9d55fa378a
|
|
@ -1,183 +0,0 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { FileNode } from '../../modules/IDE/components/FileNode';
|
||||
|
||||
describe('<FileNode />', () => {
|
||||
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;
|
||||
|
||||
describe('with valid props, regardless of filetype', () => {
|
||||
['folder', 'file'].forEach((fileType) => {
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
...props,
|
||||
id: '0',
|
||||
name: 'test.jsx',
|
||||
fileType,
|
||||
canEdit: true,
|
||||
children: [],
|
||||
authenticated: false,
|
||||
setSelectedFile: jest.fn(),
|
||||
deleteFile: jest.fn(),
|
||||
updateFileName: jest.fn(),
|
||||
resetSelectedFile: jest.fn(),
|
||||
newFile: jest.fn(),
|
||||
newFolder: jest.fn(),
|
||||
showFolderChildren: jest.fn(),
|
||||
hideFolderChildren: jest.fn(),
|
||||
openUploadFileModal: jest.fn(),
|
||||
setProjectName: jest.fn(),
|
||||
};
|
||||
component = shallow(<FileNode {...props} />);
|
||||
});
|
||||
|
||||
describe('when changing name', () => {
|
||||
beforeEach(() => {
|
||||
input = component.find('.sidebar__file-item-input');
|
||||
renameTriggerButton = component
|
||||
.find('.sidebar__file-item-option')
|
||||
.first();
|
||||
component.setState({ isEditing: true });
|
||||
});
|
||||
|
||||
describe('to an empty name', () => {
|
||||
const newName = '';
|
||||
beforeEach(() => changeName(newName));
|
||||
|
||||
it('should not save', () => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('as file with valid props', () => {
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
...props,
|
||||
id: '0',
|
||||
name: 'test.jsx',
|
||||
fileType: 'file',
|
||||
canEdit: true,
|
||||
children: [],
|
||||
authenticated: false,
|
||||
setSelectedFile: jest.fn(),
|
||||
deleteFile: jest.fn(),
|
||||
updateFileName: jest.fn(),
|
||||
resetSelectedFile: jest.fn(),
|
||||
newFile: jest.fn(),
|
||||
newFolder: jest.fn(),
|
||||
showFolderChildren: jest.fn(),
|
||||
hideFolderChildren: jest.fn(),
|
||||
openUploadFileModal: jest.fn()
|
||||
};
|
||||
component = shallow(<FileNode {...props} />);
|
||||
});
|
||||
|
||||
describe('when changing name', () => {
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
// Failure Scenarios
|
||||
|
||||
describe('to an extensionless filename', () => {
|
||||
const newName = 'extensionless';
|
||||
beforeEach(() => changeName(newName));
|
||||
});
|
||||
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.setProjectName).not.toHaveBeenCalled());
|
||||
it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
|
||||
});
|
||||
|
||||
describe('to just an extension', () => {
|
||||
const newName = '.jsx';
|
||||
beforeEach(() => changeName(newName));
|
||||
|
||||
it('should not save', () => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('as folder with valid props', () => {
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
...props,
|
||||
id: '0',
|
||||
children: [],
|
||||
name: 'filename',
|
||||
fileType: 'folder',
|
||||
canEdit: true,
|
||||
authenticated: false,
|
||||
setSelectedFile: jest.fn(),
|
||||
deleteFile: jest.fn(),
|
||||
updateFileName: jest.fn(),
|
||||
resetSelectedFile: jest.fn(),
|
||||
newFile: jest.fn(),
|
||||
newFolder: jest.fn(),
|
||||
showFolderChildren: jest.fn(),
|
||||
hideFolderChildren: jest.fn(),
|
||||
openUploadFileModal: jest.fn()
|
||||
};
|
||||
component = shallow(<FileNode {...props} />);
|
||||
});
|
||||
|
||||
describe('when changing name', () => {
|
||||
beforeEach(() => {
|
||||
input = component.find('.sidebar__file-item-input');
|
||||
renameTriggerButton = component
|
||||
.find('.sidebar__file-item-option')
|
||||
.first();
|
||||
component.setState({ isEditing: true });
|
||||
});
|
||||
|
||||
describe('to a foldername', () => {
|
||||
const newName = 'newfoldername';
|
||||
beforeEach(() => changeName(newName));
|
||||
|
||||
it('should save', () => expect(props.updateFileName).toBeCalledWith(props.id, newName));
|
||||
it('should update name', () => expect(getUpdatedName()).toEqual(newName));
|
||||
});
|
||||
|
||||
describe('to a filename', () => {
|
||||
const newName = 'filename.jsx';
|
||||
beforeEach(() => changeName(newName));
|
||||
|
||||
it('should not save', () => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
it('should reset name', () => expect(getUpdatedName()).toEqual(props.name));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { NavComponent } from './../Nav';
|
||||
|
||||
import { NavComponent } from '../Nav';
|
||||
|
||||
describe('Nav', () => {
|
||||
const props = {
|
||||
|
|
@ -46,17 +46,9 @@ describe('Nav', () => {
|
|||
id: 'root-file'
|
||||
}
|
||||
};
|
||||
const getWrapper = () => shallow(<NavComponent {...props} />);
|
||||
|
||||
test('it renders main navigation', () => {
|
||||
const nav = getWrapper();
|
||||
expect(nav.exists('.nav')).toEqual(true);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer
|
||||
.create(<NavComponent {...props} />)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
const { asFragment } = render(<NavComponent {...props} />);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,105 +0,0 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { ToolbarComponent } 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('<ToolbarComponent />', () => {
|
||||
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(() => {
|
||||
setProps();
|
||||
component = shallow(<ToolbarComponent {...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(<ToolbarComponent {...props} />);
|
||||
});
|
||||
|
||||
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({}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,346 +1,253 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Nav renders correctly 1`] = `
|
||||
<header>
|
||||
<nav
|
||||
className="nav"
|
||||
title="main-navigation"
|
||||
>
|
||||
<ul
|
||||
className="nav__items-left"
|
||||
<DocumentFragment>
|
||||
<header>
|
||||
<nav
|
||||
class="nav"
|
||||
title="main-navigation"
|
||||
>
|
||||
<li
|
||||
className="nav__item-logo"
|
||||
<ul
|
||||
class="nav__items-left"
|
||||
>
|
||||
<test-file-stub
|
||||
aria-label="p5.js Logo"
|
||||
className="svg__logo"
|
||||
focusable="false"
|
||||
role="img"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
className="nav__item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
<li
|
||||
class="nav__item-logo"
|
||||
>
|
||||
<span
|
||||
className="nav__item-header"
|
||||
>
|
||||
File
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
className="nav__item-header-triangle"
|
||||
aria-label="p5.js Logo"
|
||||
classname="svg__logo"
|
||||
focusable="false"
|
||||
role="img"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
className="nav__dropdown"
|
||||
</li>
|
||||
<li
|
||||
class="nav__item"
|
||||
>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
<button>
|
||||
<span
|
||||
class="nav__item-header"
|
||||
>
|
||||
New
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
File
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
classname="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="nav__dropdown"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
Duplicate
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
<button>
|
||||
New
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
<button>
|
||||
Duplicate
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<a
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
style={Object {}}
|
||||
<button>
|
||||
Share
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
Open
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className="nav__item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
<button>
|
||||
Download
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<a>
|
||||
Open
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="nav__item"
|
||||
>
|
||||
<span
|
||||
className="nav__item-header"
|
||||
>
|
||||
Edit
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
className="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
className="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
<button>
|
||||
<span
|
||||
class="nav__item-header"
|
||||
>
|
||||
Tidy Code
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
Edit
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
classname="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Tidy Code
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⇧+Tab
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Find
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃+F
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Find Next
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃+G
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Find Previous
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⇧+⌃+G
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="nav__item"
|
||||
>
|
||||
<button>
|
||||
<span
|
||||
class="nav__item-header"
|
||||
>
|
||||
Sketch
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
classname="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Add File
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Add Folder
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Run
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃+Enter
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Stop
|
||||
<span
|
||||
class="nav__keyboard-shortcut"
|
||||
>
|
||||
⇧+⌃+Enter
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
class="nav__item"
|
||||
>
|
||||
<button>
|
||||
<span
|
||||
class="nav__item-header"
|
||||
>
|
||||
Help
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
classname="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<button>
|
||||
Keyboard Shortcuts
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
<a
|
||||
href="https://p5js.org/reference/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
⇧
|
||||
+Tab
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
Reference
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="nav__dropdown-item"
|
||||
>
|
||||
Find
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃
|
||||
+F
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Find Next
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃
|
||||
+G
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Find Previous
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
⇧
|
||||
+
|
||||
⌃
|
||||
+G
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className="nav__item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="nav__item-header"
|
||||
>
|
||||
Sketch
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
className="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
className="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Add File
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Add Folder
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Run
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
⌃
|
||||
+Enter
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Stop
|
||||
<span
|
||||
className="nav__keyboard-shortcut"
|
||||
>
|
||||
⇧
|
||||
+
|
||||
⌃
|
||||
+Enter
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li
|
||||
className="nav__item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<span
|
||||
className="nav__item-header"
|
||||
>
|
||||
Help
|
||||
</span>
|
||||
<test-file-stub
|
||||
aria-hidden="true"
|
||||
className="nav__item-header-triangle"
|
||||
focusable="false"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
className="nav__dropdown"
|
||||
>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<button
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
Keyboard Shortcuts
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<a
|
||||
href="https://p5js.org/reference/"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Reference
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="nav__dropdown-item"
|
||||
>
|
||||
<a
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
style={Object {}}
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<a>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { configure } from 'enzyme';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
import '@babel/polyfill';
|
||||
|
||||
configure({ adapter: new Adapter() });
|
||||
// See: https://github.com/testing-library/jest-dom
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import '@testing-library/jest-dom';
|
||||
|
|
|
|||
|
|
@ -206,12 +206,14 @@ export class FileNode extends React.Component {
|
|||
</div>
|
||||
}
|
||||
<button
|
||||
aria-label="Name"
|
||||
className="sidebar__file-item-name"
|
||||
onClick={this.handleFileClick}
|
||||
>
|
||||
{this.state.updatedName}
|
||||
</button>
|
||||
<input
|
||||
data-testid="input"
|
||||
type="text"
|
||||
className="sidebar__file-item-input"
|
||||
value={this.state.updatedName}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import { FileNode } from './FileNode';
|
||||
|
||||
export default {
|
||||
title: 'IDE/FileNode',
|
||||
component: FileNode
|
||||
};
|
||||
|
||||
export const Show = () => (
|
||||
<FileNode
|
||||
id="nodeId"
|
||||
parantId="parentId"
|
||||
name="File name"
|
||||
fileType="jpeg"
|
||||
isSelectedFile
|
||||
isFolderClosed={false}
|
||||
setSelectedFile={action('setSelectedFile')}
|
||||
deleteFile={action('deleteFile')}
|
||||
updateFileName={action('updateFileName')}
|
||||
resetSelectedFile={action('resetSelectedFile')}
|
||||
newFile={action('newFile')}
|
||||
newFolder={action('newFolder')}
|
||||
showFolderChildren={action('showFolderChildren')}
|
||||
hideFolderChildren={action('hideFolderChildren')}
|
||||
openUploadFileModal={action('openUploadFileModal')}
|
||||
canEdit
|
||||
authenticated
|
||||
/>
|
||||
);
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import React from 'react';
|
||||
import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
|
||||
import { FileNode } from './FileNode';
|
||||
|
||||
describe('<FileNode />', () => {
|
||||
const changeName = (newFileName) => {
|
||||
const renameButton = screen.getByText(/Rename/i);
|
||||
fireEvent.click(renameButton);
|
||||
|
||||
const input = screen.getByTestId('input');
|
||||
fireEvent.change(input, { target: { value: newFileName } });
|
||||
fireEvent.blur(input);
|
||||
};
|
||||
|
||||
const expectFileNameToBe = async (expectedName) => {
|
||||
const name = screen.getByLabelText(/Name/i);
|
||||
await waitFor(() => within(name).queryByText(expectedName));
|
||||
};
|
||||
|
||||
const renderFileNode = (fileType, extraProps = {}) => {
|
||||
const props = {
|
||||
...extraProps,
|
||||
id: '0',
|
||||
name: fileType === 'folder' ? 'afolder' : 'test.jsx',
|
||||
fileType,
|
||||
canEdit: true,
|
||||
children: [],
|
||||
authenticated: false,
|
||||
setSelectedFile: jest.fn(),
|
||||
deleteFile: jest.fn(),
|
||||
updateFileName: jest.fn(),
|
||||
resetSelectedFile: jest.fn(),
|
||||
newFile: jest.fn(),
|
||||
newFolder: jest.fn(),
|
||||
showFolderChildren: jest.fn(),
|
||||
hideFolderChildren: jest.fn(),
|
||||
openUploadFileModal: jest.fn(),
|
||||
setProjectName: jest.fn(),
|
||||
};
|
||||
|
||||
render(<FileNode {...props} />);
|
||||
|
||||
return props;
|
||||
};
|
||||
|
||||
describe('fileType: file', () => {
|
||||
it('cannot change to an empty name', async () => {
|
||||
const props = renderFileNode('file');
|
||||
|
||||
changeName('');
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
|
||||
it('can change to a valid filename', async () => {
|
||||
const newName = 'newname.jsx';
|
||||
const props = renderFileNode('file');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName));
|
||||
await expectFileNameToBe(newName);
|
||||
});
|
||||
|
||||
it('must have an extension', async () => {
|
||||
const newName = 'newname';
|
||||
const props = renderFileNode('file');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
|
||||
it('can change to a different extension', async () => {
|
||||
const newName = 'newname.gif';
|
||||
const props = renderFileNode('file');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
|
||||
it('cannot be just an extension', async () => {
|
||||
const newName = '.jsx';
|
||||
const props = renderFileNode('file');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
});
|
||||
|
||||
describe('fileType: folder', () => {
|
||||
it('cannot change to an empty name', async () => {
|
||||
const props = renderFileNode('folder');
|
||||
|
||||
changeName('');
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
|
||||
it('can change to another name', async () => {
|
||||
const newName = 'foldername';
|
||||
const props = renderFileNode('folder');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName));
|
||||
await expectFileNameToBe(newName);
|
||||
});
|
||||
|
||||
it('cannot have a file extension', async () => {
|
||||
const newName = 'foldername.jsx';
|
||||
const props = renderFileNode('folder');
|
||||
|
||||
changeName(newName);
|
||||
|
||||
await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
|
||||
await expectFileNameToBe(props.name);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -17,21 +17,36 @@ class Toolbar extends React.Component {
|
|||
super(props);
|
||||
this.handleKeyPress = this.handleKeyPress.bind(this);
|
||||
this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
|
||||
this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
|
||||
|
||||
this.state = {
|
||||
projectNameInputValue: props.project.name,
|
||||
};
|
||||
}
|
||||
|
||||
handleKeyPress(event) {
|
||||
if (event.key === 'Enter') {
|
||||
this.props.hideEditProjectName();
|
||||
this.projectNameInput.blur();
|
||||
}
|
||||
}
|
||||
|
||||
handleProjectNameChange(event) {
|
||||
this.props.setProjectName(event.target.value);
|
||||
this.setState({ projectNameInputValue: event.target.value });
|
||||
}
|
||||
|
||||
validateProjectName() {
|
||||
if ((this.props.project.name.trim()).length === 0) {
|
||||
this.props.setProjectName(this.originalProjectName);
|
||||
handleProjectNameSave() {
|
||||
const newProjectName = this.state.projectNameInputValue.trim();
|
||||
if (newProjectName.length === 0) {
|
||||
this.setState({
|
||||
projectNameInputValue: this.props.project.name,
|
||||
});
|
||||
} else {
|
||||
this.props.setProjectName(newProjectName);
|
||||
this.props.hideEditProjectName();
|
||||
if (this.props.project.id) {
|
||||
this.props.saveProject();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +123,6 @@ class Toolbar extends React.Component {
|
|||
className="toolbar__project-name"
|
||||
onClick={() => {
|
||||
if (canEditProjectName) {
|
||||
this.originalProjectName = this.props.project.name;
|
||||
this.props.showEditProjectName();
|
||||
setTimeout(() => this.projectNameInput.focus(), 0);
|
||||
}
|
||||
|
|
@ -130,16 +144,11 @@ class Toolbar extends React.Component {
|
|||
type="text"
|
||||
maxLength="128"
|
||||
className="toolbar__project-name-input"
|
||||
value={this.props.project.name}
|
||||
aria-label="New sketch name"
|
||||
value={this.state.projectNameInputValue}
|
||||
onChange={this.handleProjectNameChange}
|
||||
ref={(element) => { this.projectNameInput = element; }}
|
||||
onBlur={() => {
|
||||
this.validateProjectName();
|
||||
this.props.hideEditProjectName();
|
||||
if (this.props.project.id) {
|
||||
this.props.saveProject();
|
||||
}
|
||||
}}
|
||||
onBlur={this.handleProjectNameSave}
|
||||
onKeyPress={this.handleKeyPress}
|
||||
/>
|
||||
{(() => { // eslint-disable-line
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
import React from 'react';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import lodash from 'lodash';
|
||||
|
||||
|
||||
import { ToolbarComponent } from './Toolbar';
|
||||
|
||||
const renderComponent = (extraProps = {}) => {
|
||||
const props = lodash.merge({
|
||||
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',
|
||||
},
|
||||
}, extraProps);
|
||||
|
||||
render(<ToolbarComponent {...props} />);
|
||||
|
||||
return props;
|
||||
};
|
||||
|
||||
describe('<ToolbarComponent />', () => {
|
||||
it('sketch owner can switch to sketch name editing mode', async () => {
|
||||
const props = renderComponent();
|
||||
const sketchName = screen.getByLabelText('Edit sketch name');
|
||||
|
||||
fireEvent.click(sketchName);
|
||||
|
||||
await waitFor(() => expect(props.showEditProjectName).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('non-owner can\t switch to sketch editing mode', async () => {
|
||||
const props = renderComponent({ currentUser: 'not-me' });
|
||||
const sketchName = screen.getByLabelText('Edit sketch name');
|
||||
|
||||
fireEvent.click(sketchName);
|
||||
|
||||
expect(sketchName).toBeDisabled();
|
||||
await waitFor(() => expect(props.showEditProjectName).not.toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('sketch owner can change name', async () => {
|
||||
const props = renderComponent({ project: { isEditingName: true } });
|
||||
|
||||
const sketchNameInput = screen.getByLabelText('New sketch name');
|
||||
fireEvent.change(sketchNameInput, { target: { value: 'my new sketch name' } });
|
||||
fireEvent.blur(sketchNameInput);
|
||||
|
||||
await waitFor(() => expect(props.setProjectName).toHaveBeenCalledWith('my new sketch name'));
|
||||
await waitFor(() => expect(props.saveProject).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
it('sketch owner can\'t change to empty name', async () => {
|
||||
const props = renderComponent({ project: { isEditingName: true } });
|
||||
|
||||
const sketchNameInput = screen.getByLabelText('New sketch name');
|
||||
fireEvent.change(sketchNameInput, { target: { value: '' } });
|
||||
fireEvent.blur(sketchNameInput);
|
||||
|
||||
await waitFor(() => expect(props.setProjectName).not.toHaveBeenCalled());
|
||||
await waitFor(() => expect(props.saveProject).not.toHaveBeenCalled());
|
||||
});
|
||||
});
|
||||
|
|
@ -215,7 +215,7 @@ class IDEView extends React.Component {
|
|||
warnIfUnsavedChanges={this.warnIfUnsavedChanges}
|
||||
cmController={this.cmController}
|
||||
/>
|
||||
<Toolbar />
|
||||
<Toolbar key={this.props.project.id} />
|
||||
{this.props.ide.preferencesIsVisible &&
|
||||
<Overlay
|
||||
title="Settings"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -99,14 +99,14 @@
|
|||
"@storybook/addons": "^5.3.6",
|
||||
"@storybook/react": "^5.3.6",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"@testing-library/jest-dom": "^5.10.1",
|
||||
"@testing-library/react": "^10.2.1",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
"babel-eslint": "^9.0.0",
|
||||
"babel-loader": "^8.0.0",
|
||||
"babel-plugin-transform-react-remove-prop-types": "^0.2.12",
|
||||
"css-loader": "^3.4.2",
|
||||
"cssnano": "^4.1.10",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.2",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-config-airbnb": "^16.1.0",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue