Skip to content

Commit

Permalink
chore(deps): update dependency @testing-library/user-event to v14 (#5…
Browse files Browse the repository at this point in the history
…3816)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: sembauke <semboot699@gmail.com>
  • Loading branch information
renovate[bot] and Sembauke committed Feb 21, 2024
1 parent 73c6fb8 commit 6630058
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 38 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"@testing-library/cypress": "9.0.0",
"@testing-library/dom": "8.20.1",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/user-event": "13.5.0",
"@testing-library/user-event": "14.5.2",
"@types/jest": "29.5.12",
"@types/lodash": "4.14.202",
"@types/node": "18.19.17",
Expand Down
11 changes: 5 additions & 6 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 4 additions & 5 deletions tools/ui-components/src/button/button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ describe('<Button />', () => {
).toHaveAttribute('type', 'submit');
});

it('should trigger the onClick prop on click', () => {
it('should trigger the onClick prop on click', async () => {
const onClick = jest.fn();

render(<Button onClick={onClick}>Hello world</Button>);

const button = screen.getByRole('button', { name: /hello world/i });

userEvent.click(button);
await userEvent.click(button);

expect(onClick).toHaveBeenCalledTimes(1);
});
Expand All @@ -56,7 +56,7 @@ describe('<Button />', () => {
expect(button).not.toHaveAttribute('disabled', 'true');
});

it('should not trigger the onClick prop if the button is disabled', () => {
it('should not trigger the onClick prop if the button is disabled', async () => {
const onClick = jest.fn();

render(
Expand All @@ -66,8 +66,7 @@ describe('<Button />', () => {
);

const button = screen.getByRole('button', { name: /hello world/i });

userEvent.click(button);
await userEvent.click(button);

expect(onClick).not.toHaveBeenCalled();
});
Expand Down
4 changes: 2 additions & 2 deletions tools/ui-components/src/close-button/close-button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ describe('<CloseButton>', () => {
).toBeInTheDocument();
});

it('should call "onClick" handler on button click', () => {
it('should call "onClick" handler on button click', async () => {
const onClick = jest.fn();
render(<CloseButton onClick={onClick} />);

userEvent.click(screen.getByRole('button'));
await userEvent.click(screen.getByRole('button'));

expect(onClick).toHaveBeenCalledTimes(1);
});
Expand Down
36 changes: 18 additions & 18 deletions tools/ui-components/src/drop-down/drop-down.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { MenuItem } from './menu-item/menu-item';
import { Dropdown } from './drop-down';

describe('<DropDownButton>', () => {
it('should render button with text', () => {
it('should render button with text', async () => {
render(
<Dropdown>
<Dropdown.Toggle>Some Button</Dropdown.Toggle>
Expand All @@ -17,14 +17,14 @@ describe('<DropDownButton>', () => {
</Dropdown>
);
const dropdownTrigger = screen.getByText('Some Button');
userEvent.click(dropdownTrigger);
await userEvent.click(dropdownTrigger);
const unorderedList = screen.getByRole('menu');
const item = within(unorderedList).getAllByText('Option');
expect(unorderedList).toBeInTheDocument();
expect(dropdownTrigger).toBeInTheDocument();
expect(item.length).toBe(3);
});
it('should render button with direction to up', () => {
it('should render button with direction to up', async () => {
render(
<Dropdown dropup={true}>
<Dropdown.Toggle>Some Button</Dropdown.Toggle>
Expand All @@ -36,14 +36,14 @@ describe('<DropDownButton>', () => {
</Dropdown>
);
const dropdownTrigger = screen.getByText('Some Button');
userEvent.click(dropdownTrigger);
await userEvent.click(dropdownTrigger);
const unorderedList = screen.getByRole('menu');
expect(unorderedList).toHaveClass(
'list-none bg-foreground-secondary text-center border-1 border-solid border-background-quaternary focus:outline-transparent origin-top-right absolute w-full min-w-max py-1 px-0 z-10 transform -translate-y-full top-0'
);
});

it("should have the role 'button' and render the correct text", () => {
it("should have the role 'button' and render the correct text", async () => {
render(
<Dropdown>
<Dropdown.Toggle>test</Dropdown.Toggle>
Expand All @@ -53,13 +53,13 @@ describe('<DropDownButton>', () => {
</Dropdown>
);
const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const item = within(unorderedList).getByText('Hello world');
expect(item).toBeInTheDocument();
});

it('should trigger the onClick prop on click', () => {
it('should trigger the onClick prop on click', async () => {
const onClick = jest.fn();

render(
Expand All @@ -72,16 +72,16 @@ describe('<DropDownButton>', () => {
);

const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const Item = within(unorderedList).getByText('Hello world');

userEvent.click(Item);
await userEvent.click(Item);

expect(onClick).toHaveBeenCalledTimes(1);
});

it('should reflect the disabled state using the aria-disabled attribute', () => {
it('should reflect the disabled state using the aria-disabled attribute', async () => {
render(
<Dropdown>
<Dropdown.Toggle>test</Dropdown.Toggle>
Expand All @@ -92,7 +92,7 @@ describe('<DropDownButton>', () => {
);

const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const Item = within(unorderedList).getByText('Hello world');

Expand All @@ -102,7 +102,7 @@ describe('<DropDownButton>', () => {
expect(Item).toBeEnabled();
});

it('should not trigger the onClick prop if the button is disabled', () => {
it('should not trigger the onClick prop if the button is disabled', async () => {
const onClick = jest.fn();

render(
Expand All @@ -117,15 +117,15 @@ describe('<DropDownButton>', () => {
);

const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const Item = within(unorderedList).getByText('Hello world');
userEvent.click(Item);
await userEvent.click(Item);

expect(onClick).not.toHaveBeenCalled();
});

it('should render an anchor element if the `href` prop is defined', () => {
it('should render an anchor element if the `href` prop is defined', async () => {
render(
<Dropdown>
<Dropdown.Toggle>test</Dropdown.Toggle>
Expand All @@ -136,15 +136,15 @@ describe('<DropDownButton>', () => {
);

const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const Item = within(unorderedList).getByText('freeCodeCamp');

expect(Item).toBeInTheDocument();
expect(Item).toHaveAttribute('href', 'https://www.freecodecamp.org');
});

it('should render a button element if the `href` and `disabled` props are both defined', () => {
it('should render a button element if the `href` and `disabled` props are both defined', async () => {
render(
<Dropdown>
<Dropdown.Toggle>test</Dropdown.Toggle>
Expand All @@ -157,7 +157,7 @@ describe('<DropDownButton>', () => {
);

const dropDownTrigger = screen.getByText('test');
userEvent.click(dropDownTrigger);
await userEvent.click(dropDownTrigger);
const unorderedList = screen.getByRole('menu');
const Item = within(unorderedList).getByText('freeCodeCamp');

Expand Down
4 changes: 2 additions & 2 deletions tools/ui-components/src/tabs/tabs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { render, screen } from '@testing-library/react';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '.';

describe('<Tabs />', () => {
it('should switch tabs content if the tab trigger is pressed', () => {
it('should switch tabs content if the tab trigger is pressed', async () => {
render(
<Tabs defaultValue='code'>
<TabsList>
Expand All @@ -22,7 +22,7 @@ describe('<Tabs />', () => {
expect(codeContent).toBeInTheDocument();

const tabsTrigger = screen.getByText('Tests');
userEvent.click(tabsTrigger);
await userEvent.click(tabsTrigger);
const testContent = screen.getByText('Here is the test for the code.');
expect(testContent).toBeInTheDocument();
expect(codeContent).not.toBeInTheDocument();
Expand Down
8 changes: 4 additions & 4 deletions tools/ui-components/src/toggle-button/toggle-button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ describe('<ToggleButton />', () => {
expect(screen.getByRole('button', { name: /on/i })).toBeInTheDocument();
});

it('should call onChange when clicked', () => {
it('should call onChange when clicked', async () => {
const onChange = jest.fn();
render(<ToggleButton onChange={onChange}>On</ToggleButton>);

userEvent.click(screen.getByRole('button', { name: /on/i }));
await userEvent.click(screen.getByRole('button', { name: /on/i }));

expect(onChange).toHaveBeenCalledTimes(1);
});
Expand Down Expand Up @@ -49,15 +49,15 @@ describe('<ToggleButton />', () => {
);
});

it('should not trigger onChange if disabled prop is true', () => {
it('should not trigger onChange if disabled prop is true', async () => {
const onChange = jest.fn();
render(
<ToggleButton disabled={true} onChange={onChange}>
On
</ToggleButton>
);

userEvent.click(screen.getByRole('button', { name: /on/i }));
await userEvent.click(screen.getByRole('button', { name: /on/i }));

expect(onChange).not.toHaveBeenCalled();
});
Expand Down

0 comments on commit 6630058

Please sign in to comment.