mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-18 05:02:24 +08:00
Components: move to RTL
This commit is contained in:
parent
fdeb1a3eee
commit
584c6899d0
@ -53,9 +53,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"css": "^3.0.0",
|
||||
"enzyme": "^3.9.0",
|
||||
"jest": "^26.0.0",
|
||||
"jest-enzyme": "^7.0.2"
|
||||
"jest": "^26.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
@ -1,108 +1,70 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { Link } from './link';
|
||||
import React, { AnchorHTMLAttributes } from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ThemeProvider, themes, convert } from '@storybook/theming';
|
||||
import { Link, LinkProps } from './link';
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
const MIDDLE_BUTTON = 1;
|
||||
const RIGHT_BUTTON = 2;
|
||||
|
||||
const createEvent = (options: any) => ({
|
||||
button: LEFT_BUTTON,
|
||||
preventDefault: jest.fn(),
|
||||
...options,
|
||||
});
|
||||
const renderLink = (props: any) => shallow(<Link {...{ children: 'Content', ...props }} />);
|
||||
|
||||
const setup = ({ props, event }: any) => ({
|
||||
e: createEvent(event),
|
||||
result: renderLink(props),
|
||||
onClick: props.onClick || jest.fn(),
|
||||
});
|
||||
function ThemedLink(props: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) {
|
||||
return (
|
||||
<ThemeProvider theme={convert(themes.light)}>
|
||||
<Link {...props} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
describe('Link', () => {
|
||||
describe('events', () => {
|
||||
it('should call onClick on a plain left click', () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { button: LEFT_BUTTON },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).toHaveBeenCalledWith(e);
|
||||
expect(e.preventDefault).toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { button: LEFT_BUTTON });
|
||||
expect(handleClick).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on a middle click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { button: MIDDLE_BUTTON },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { button: MIDDLE_BUTTON });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on a right click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { button: RIGHT_BUTTON },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { button: RIGHT_BUTTON });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on alt+click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { altKey: true },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { altKey: true });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on ctrl+click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { ctrlKey: true },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { ctrlKey: true });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on cmd+click / win+click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { metaKey: true },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { metaKey: true });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shouldn't call onClick on shift+click", () => {
|
||||
const { result, onClick, e } = setup({
|
||||
props: { onClick: jest.fn() },
|
||||
event: { shiftKey: true },
|
||||
});
|
||||
|
||||
result.simulate('click', e);
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
expect(e.preventDefault).not.toHaveBeenCalled();
|
||||
const handleClick = jest.fn();
|
||||
render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
|
||||
userEvent.click(screen.getByText('Content'), { shiftKey: true });
|
||||
expect(handleClick).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -3,7 +3,7 @@
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": [
|
||||
"jest"
|
||||
"jest", "@testing-library/jest-dom"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
|
Loading…
x
Reference in New Issue
Block a user