mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-22 09:36:43 +03:00
Replace enzyme with React testing library in ui (#917)
* Replace enzyme with React testing library in ui * Mock Math.random()
This commit is contained in:
parent
623e4b42a6
commit
57ec0534b2
|
@ -1,6 +1,5 @@
|
|||
module.exports = {
|
||||
preset: 'ts-jest',
|
||||
setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
|
||||
testEnvironment: 'jsdom',
|
||||
moduleNameMapper: {
|
||||
'\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',
|
||||
|
|
|
@ -58,18 +58,17 @@
|
|||
"@babel/preset-typescript": "^7.15.0",
|
||||
"@storybook/addon-essentials": "^6.3.12",
|
||||
"@storybook/react": "^6.3.12",
|
||||
"@testing-library/dom": "^8.10.1",
|
||||
"@testing-library/react": "^12.1.2",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/color": "^3.0.2",
|
||||
"@types/enzyme": "^3.10.10",
|
||||
"@types/enzyme-adapter-react-16": "^1.0.6",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/react": "^16.14.18",
|
||||
"@types/styled-components": "^5.1.15",
|
||||
"@typescript-eslint/eslint-plugin": "^5.1.0",
|
||||
"@typescript-eslint/parser": "^5.1.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"csstype": "^3.0.9",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.6",
|
||||
"enzyme-to-json": "^3.6.2",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-jest": "^25.2.2",
|
||||
|
@ -86,7 +85,8 @@
|
|||
"stylelint-config-styled-components": "^0.1.1",
|
||||
"stylelint-processor-styled-components": "^1.10.0",
|
||||
"ts-jest": "^27.0.7",
|
||||
"typescript": "~4.4.4"
|
||||
"typescript": "~4.4.4",
|
||||
"webpack": "^5.59.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.3.0 || ^17.0.0",
|
||||
|
|
|
@ -24,22 +24,7 @@ export interface ContextMenuProps {
|
|||
}
|
||||
|
||||
export default class ContextMenu extends Component<ContextMenuProps> {
|
||||
constructor(props: ContextMenuProps) {
|
||||
super(props);
|
||||
this.updateItems(props.items);
|
||||
}
|
||||
|
||||
menu?: HTMLDivElement | null;
|
||||
items?: React.ReactNode[];
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps: ContextMenuProps) {
|
||||
if (
|
||||
nextProps.items !== this.props.items ||
|
||||
nextProps.visible !== this.props.visible
|
||||
) {
|
||||
this.updateItems(nextProps.items);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.amendPosition();
|
||||
|
@ -84,8 +69,8 @@ export default class ContextMenu extends Component<ContextMenuProps> {
|
|||
this.menu!.style.left = `${left}px`;
|
||||
}
|
||||
|
||||
updateItems(items: Item[]) {
|
||||
this.items = items.map((item) => {
|
||||
renderItems() {
|
||||
return this.props.items.map((item) => {
|
||||
if (isReactButtonElement(item)) return item;
|
||||
const value = item.value || item.name;
|
||||
return (
|
||||
|
@ -113,7 +98,7 @@ export default class ContextMenu extends Component<ContextMenuProps> {
|
|||
top={this.props.y}
|
||||
visible={this.props.visible}
|
||||
>
|
||||
{this.items}
|
||||
{this.renderItems()}
|
||||
</ContextMenuWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Button } from '../src';
|
||||
|
||||
describe('Button', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Button>Text</Button>);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
const { container } = render(<Button>Text</Button>);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should handle the click event', () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(<Button onClick={onClick}>ClickMe</Button>);
|
||||
render(<Button onClick={onClick}>ClickMe</Button>);
|
||||
|
||||
wrapper.find('button').simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button'));
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,17 +1,16 @@
|
|||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Container } from '../src';
|
||||
|
||||
describe('Container', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Container
|
||||
themeData={{ theme: 'default', scheme: 'default', light: false }}
|
||||
>
|
||||
Text
|
||||
</Container>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ContextMenu } from '../src';
|
||||
import { items } from '../src/ContextMenu/data';
|
||||
|
||||
describe('ContextMenu', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<ContextMenu
|
||||
items={items}
|
||||
onClick={() => {
|
||||
|
@ -16,15 +16,15 @@ describe('ContextMenu', function () {
|
|||
y={100}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
it('should handle the click event', () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(
|
||||
<ContextMenu items={items} onClick={onClick} x={100} y={100} />
|
||||
render(
|
||||
<ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
|
||||
);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Dialog } from '../src';
|
||||
|
||||
describe('Dialog', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Dialog
|
||||
onDismiss={() => {
|
||||
// noop
|
||||
|
@ -15,11 +15,11 @@ describe('Dialog', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Dialog
|
||||
title="Dialog Title"
|
||||
open
|
||||
|
@ -34,11 +34,11 @@ describe('Dialog', function () {
|
|||
Hello Dialog!
|
||||
</Dialog>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders modal', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Dialog
|
||||
modal
|
||||
onDismiss={() => {
|
||||
|
@ -49,12 +49,12 @@ describe('Dialog', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should handle dismiss event', () => {
|
||||
const onDismiss = jest.fn();
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<Dialog
|
||||
open
|
||||
onDismiss={onDismiss}
|
||||
|
@ -64,13 +64,13 @@ describe('Dialog', function () {
|
|||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onDismiss).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||
expect(onDismiss).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle submit event', () => {
|
||||
const onSubmit = jest.fn();
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<Dialog
|
||||
open
|
||||
onDismiss={() => {
|
||||
|
@ -80,7 +80,7 @@ describe('Dialog', function () {
|
|||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button').last().simulate('click');
|
||||
expect(onSubmit).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Submit' }));
|
||||
expect(onSubmit).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { mountToJson } from 'enzyme-to-json';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Editor } from '../src';
|
||||
import 'codemirror/mode/javascript/javascript';
|
||||
|
||||
|
@ -25,17 +24,17 @@ describe('Editor', function () {
|
|||
|
||||
return range;
|
||||
};
|
||||
const wrapper = mount(<Editor value="var a = 1;" />);
|
||||
const { container } = render(<Editor value="var a = 1;" />);
|
||||
|
||||
it('renders correctly', () => {
|
||||
expect(mountToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('calls getBoundingClientRect', () => {
|
||||
expect(getBoundingClientRect).toBeCalled();
|
||||
expect(getBoundingClientRect).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls getClientRects', () => {
|
||||
expect(getClientRects).toBeCalled();
|
||||
expect(getClientRects).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,19 +1,31 @@
|
|||
import React from 'react';
|
||||
import { shallow, mount } from 'enzyme';
|
||||
import { shallowToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Form } from '../src';
|
||||
import { schema, uiSchema, formData } from '../src/Form/schema';
|
||||
|
||||
describe('Form', function () {
|
||||
let random: () => number;
|
||||
|
||||
beforeAll(() => {
|
||||
random = Math.random;
|
||||
Math.random = jest.fn(() => 0.25546350798039463);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
Math.random = random;
|
||||
console.log(Math.random());
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const wrapper = shallow(
|
||||
const { container } = render(
|
||||
<Form formData={formData} schema={schema} uiSchema={uiSchema} />
|
||||
);
|
||||
expect(shallowToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with primary button', () => {
|
||||
const wrapper = shallow(
|
||||
const { container } = render(
|
||||
<Form
|
||||
primaryButton
|
||||
submitText="Custom button"
|
||||
|
@ -22,19 +34,19 @@ describe('Form', function () {
|
|||
uiSchema={uiSchema}
|
||||
/>
|
||||
);
|
||||
expect(shallowToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with no button', () => {
|
||||
const wrapper = shallow(
|
||||
const { container } = render(
|
||||
<Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit />
|
||||
);
|
||||
expect(shallowToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should handle the submit event', () => {
|
||||
const onSubmit = jest.fn();
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<Form
|
||||
formData={formData}
|
||||
schema={schema}
|
||||
|
@ -43,7 +55,7 @@ describe('Form', function () {
|
|||
/>
|
||||
);
|
||||
|
||||
wrapper.find('form').simulate('submit');
|
||||
expect(onSubmit).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Submit' }));
|
||||
expect(onSubmit).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Notification } from '../src';
|
||||
|
||||
describe('Notification', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(<Notification>Message</Notification>);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
const { container } = render(<Notification>Message</Notification>);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Notification
|
||||
type="error"
|
||||
onClose={() => {
|
||||
|
@ -20,16 +20,14 @@ describe('Notification', function () {
|
|||
Message
|
||||
</Notification>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should handle the click event', () => {
|
||||
const onClose = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Notification onClose={onClose}>Message</Notification>
|
||||
);
|
||||
render(<Notification onClose={onClose}>Message</Notification>);
|
||||
|
||||
wrapper.find('button').simulate('click');
|
||||
expect(onClose).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button'));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SegmentedControl } from '../src';
|
||||
|
||||
describe('SegmentedControl', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<SegmentedControl
|
||||
values={['Button1', 'Button2', 'Button3']}
|
||||
selected="Button1"
|
||||
|
@ -15,11 +15,11 @@ describe('SegmentedControl', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
it('should handle the click event', () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<SegmentedControl
|
||||
values={['Button1', 'Button2', 'Button3']}
|
||||
selected="Button1"
|
||||
|
@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
|
|||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Button1' }));
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { render, mount, CommonWrapper, ReactWrapper } from 'enzyme';
|
||||
import { renderToJson, mountToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Select } from '../src';
|
||||
import { options } from '../src/Select/options';
|
||||
|
||||
describe('Select', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Select
|
||||
options={options}
|
||||
onChange={() => {
|
||||
|
@ -14,11 +14,11 @@ describe('Select', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Select
|
||||
options={options}
|
||||
onChange={() => {
|
||||
|
@ -34,32 +34,30 @@ describe('Select', function () {
|
|||
menuPlacement="top"
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should select another option', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(
|
||||
<Select options={options} onInputChange={onChange} />
|
||||
const { container } = render(
|
||||
<Select options={options} onChange={onChange} />
|
||||
);
|
||||
|
||||
const input = wrapper.find('input');
|
||||
(input.at(0).instance() as unknown as HTMLInputElement).value = 'two';
|
||||
input.first().simulate('change');
|
||||
expect(mountToJson(wrapper)).toMatchSnapshot();
|
||||
input.first().simulate('keyDown', { keyCode: 13 });
|
||||
expect(onChange).toBeCalled();
|
||||
userEvent.type(screen.getByRole('combobox'), 'two');
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
userEvent.type(screen.getByRole('combobox'), '{enter}');
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't find any results", () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(<Select options={options} onChange={onChange} />);
|
||||
const { container } = render(
|
||||
<Select options={options} onChange={onChange} />
|
||||
);
|
||||
|
||||
const input = wrapper.find('input');
|
||||
(input.at(0).instance() as unknown as HTMLInputElement).value = 'text';
|
||||
input.first().simulate('change');
|
||||
expect(mountToJson(wrapper)).toMatchSnapshot(); // 'No results found'
|
||||
input.first().simulate('keyDown', { keyCode: 13 });
|
||||
expect(onChange).not.toBeCalled();
|
||||
userEvent.type(screen.getByRole('combobox'), 'text');
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
userEvent.type(screen.getByRole('combobox'), '{enter}');
|
||||
expect(onChange).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,22 +1,21 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { Slider } from '../src';
|
||||
|
||||
describe('Slider', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Slider
|
||||
onChange={() => {
|
||||
// noop
|
||||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Slider
|
||||
label="Hi"
|
||||
min={1}
|
||||
|
@ -28,15 +27,15 @@ describe('Slider', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should handle the change event', () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount(<Slider value={1} onChange={onChange} />);
|
||||
render(<Slider value={1} onChange={onChange} />);
|
||||
|
||||
wrapper.find('input').simulate('change');
|
||||
expect(onChange).toBeCalled();
|
||||
expect(onChange).toBeCalledWith(1);
|
||||
fireEvent.change(screen.getByRole('slider'), { target: { value: '2' } });
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
expect(onChange).toHaveBeenCalledWith(2);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Tabs } from '../src';
|
||||
import { tabs, simple10Tabs } from '../src/Tabs/data';
|
||||
|
||||
describe('Tabs', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
onClick={() => {
|
||||
|
@ -14,11 +14,11 @@ describe('Tabs', function () {
|
|||
}}
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
onClick={() => {
|
||||
|
@ -27,11 +27,11 @@ describe('Tabs', function () {
|
|||
selected="Tab2"
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders tabs without inner components', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Tabs
|
||||
tabs={simple10Tabs}
|
||||
onClick={() => {
|
||||
|
@ -40,14 +40,14 @@ describe('Tabs', function () {
|
|||
selected="5"
|
||||
/>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should select tab', () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
|
||||
render(<Tabs tabs={tabs} onClick={onClick} />);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
expect(onClick).toBeCalled();
|
||||
userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react';
|
||||
import { render } from 'enzyme';
|
||||
import { renderToJson } from 'enzyme-to-json';
|
||||
import { render } from '@testing-library/react';
|
||||
import { Toolbar, Divider, Spacer, Button } from '../src';
|
||||
|
||||
describe('Toolbar', function () {
|
||||
it('renders correctly', () => {
|
||||
const wrapper = render(
|
||||
const { container } = render(
|
||||
<Toolbar>
|
||||
<Button>1</Button>
|
||||
<Divider />
|
||||
|
@ -13,11 +12,11 @@ describe('Toolbar', function () {
|
|||
<Button>2</Button>
|
||||
</Toolbar>
|
||||
);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with props', () => {
|
||||
const wrapper = render(<Toolbar borderPosition="top" />);
|
||||
expect(renderToJson(wrapper)).toMatchSnapshot();
|
||||
const { container } = render(<Toolbar borderPosition="top" />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
exports[`ContextMenu renders correctly 1`] = `
|
||||
<div
|
||||
class="sc-jRQBWg deJyZB"
|
||||
style="top: 100px; left: 100px;"
|
||||
>
|
||||
<button
|
||||
value="Menu Item 1"
|
||||
|
|
|
@ -1,19 +1,139 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Editor renders correctly 1`] = `
|
||||
<Editor
|
||||
autofocus={false}
|
||||
foldGutter={true}
|
||||
lineNumbers={true}
|
||||
lineWrapping={false}
|
||||
mode="javascript"
|
||||
readOnly={false}
|
||||
value="var a = 1;"
|
||||
<div
|
||||
class="sc-jrQzAO bvXojw"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
class="CodeMirror cm-s-default"
|
||||
translate="no"
|
||||
>
|
||||
<div
|
||||
className="sc-jrQzAO bvXojw"
|
||||
style="overflow: hidden; position: relative; width: 3px; height: 0px;"
|
||||
>
|
||||
<textarea
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-vscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="min-width: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-hscrollbar"
|
||||
cm-not-content="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
style="height: 100%; min-height: 1px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="CodeMirror-scrollbar-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
</styled.div>
|
||||
</Editor>
|
||||
<div
|
||||
class="CodeMirror-gutter-filler"
|
||||
cm-not-content="true"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-scroll"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-sizer"
|
||||
style="margin-left: 0px; min-width: 3px;"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-lines"
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
role="presentation"
|
||||
style="position: relative; outline: none;"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-measure"
|
||||
>
|
||||
<pre
|
||||
class="CodeMirror-line"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
role="presentation"
|
||||
style="padding-right: .1px;"
|
||||
>
|
||||
<span
|
||||
class="cm-keyword"
|
||||
>
|
||||
var
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="cm-def"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="cm-operator"
|
||||
>
|
||||
=
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="cm-number"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
;
|
||||
</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div
|
||||
style="position: relative; z-index: 1;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-cursors"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-code"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; height: 50px; width: 1px;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutters"
|
||||
>
|
||||
<div
|
||||
class="CodeMirror-gutter CodeMirror-linenumbers"
|
||||
style="width: 1px;"
|
||||
/>
|
||||
<div
|
||||
class="CodeMirror-gutter CodeMirror-foldgutter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -19,7 +19,8 @@ exports[`Slider renders with props 1`] = `
|
|||
disabled=""
|
||||
>
|
||||
<label>
|
||||
Hi
|
||||
Hi
|
||||
|
||||
</label>
|
||||
<input
|
||||
disabled=""
|
||||
|
|
|
@ -120,9 +120,10 @@ exports[`Tabs renders with props 1`] = `
|
|||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px"
|
||||
style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px;"
|
||||
>
|
||||
Selected Tab2
|
||||
Selected
|
||||
Tab2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
import Enzyme from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
|
||||
Enzyme.configure({ adapter: new Adapter() });
|
23
yarn.lock
23
yarn.lock
|
@ -5066,11 +5066,12 @@ __metadata:
|
|||
"@rjsf/core": ^3.2.0
|
||||
"@storybook/addon-essentials": ^6.3.12
|
||||
"@storybook/react": ^6.3.12
|
||||
"@testing-library/dom": ^8.10.1
|
||||
"@testing-library/react": ^12.1.2
|
||||
"@testing-library/user-event": ^13.5.0
|
||||
"@types/base16": ^1.0.2
|
||||
"@types/codemirror": ^5.60.5
|
||||
"@types/color": ^3.0.2
|
||||
"@types/enzyme": ^3.10.10
|
||||
"@types/enzyme-adapter-react-16": ^1.0.6
|
||||
"@types/jest": ^27.0.2
|
||||
"@types/json-schema": ^7.0.9
|
||||
"@types/prop-types": ^15.7.4
|
||||
|
@ -5080,13 +5081,11 @@ __metadata:
|
|||
"@types/styled-components": ^5.1.15
|
||||
"@typescript-eslint/eslint-plugin": ^5.1.0
|
||||
"@typescript-eslint/parser": ^5.1.0
|
||||
babel-loader: ^8.2.3
|
||||
base16: ^1.0.0
|
||||
codemirror: ^5.63.3
|
||||
color: ^3.2.1
|
||||
csstype: ^3.0.9
|
||||
enzyme: ^3.11.0
|
||||
enzyme-adapter-react-16: ^1.15.6
|
||||
enzyme-to-json: ^3.6.2
|
||||
eslint: ^7.32.0
|
||||
eslint-config-prettier: ^8.3.0
|
||||
eslint-plugin-jest: ^25.2.2
|
||||
|
@ -5109,6 +5108,7 @@ __metadata:
|
|||
stylelint-processor-styled-components: ^1.10.0
|
||||
ts-jest: ^27.0.7
|
||||
typescript: ~4.4.4
|
||||
webpack: ^5.59.1
|
||||
peerDependencies:
|
||||
"@types/react": ^16.3.0 || ^17.0.0
|
||||
"@types/styled-components": ^5.1.15
|
||||
|
@ -6293,7 +6293,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@testing-library/dom@npm:^8.0.0":
|
||||
"@testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.10.1":
|
||||
version: 8.10.1
|
||||
resolution: "@testing-library/dom@npm:8.10.1"
|
||||
dependencies:
|
||||
|
@ -6322,6 +6322,17 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@testing-library/user-event@npm:^13.5.0":
|
||||
version: 13.5.0
|
||||
resolution: "@testing-library/user-event@npm:13.5.0"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.12.5
|
||||
peerDependencies:
|
||||
"@testing-library/dom": ">=7.21.4"
|
||||
checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@tootallnate/once@npm:1":
|
||||
version: 1.1.2
|
||||
resolution: "@tootallnate/once@npm:1.1.2"
|
||||
|
|
Loading…
Reference in New Issue
Block a user