05e43c70b7
* Minimal Viable Navigation Menu Translation with new namespace I18Next configuration leaning on default separator and namespace Broom: i18n + debug:false * Minimal Viable Navigation Menu Test entry for Toolbar.test.jsx * Translation.json : Changes in translation for new namespace About : broom About lines 17-26 Nav component : changes in keys KeyboardShortcutModal.jsx: Key now in Common * Voice Over Labels in Preferences:index Labels included in translations.json * Voice Over Labels in Preferences:index Labels included in translations.json * Voice Over Labels in Preferences:index Labels included in translations.json * Voice Over Labels in Preferences:index Labels included in translations.json Snapshot updated npm run test -- -u * translations.json ARIA labels adjacent to respective label Updated names to call the labels Common namespace without currently used entries * Update Nav.jsx Missing Common.p5logoARIA key * Update Toolbar.test.jsx Deleting commented line 78 * Update in keys Co-authored-by: Andrew Nicolaou <me@andrewnicolaou.co.uk>
85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
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',
|
|
},
|
|
t: jest.fn()
|
|
}, 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());
|
|
});
|
|
});
|