p5.js-web-editor/client/modules/IDE/components/Toolbar.test.jsx
ov 05e43c70b7
Minimal Viable Navigation Menu (#1510)
* 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>
2020-07-31 15:20:42 +02:00

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());
});
});