Skip to content

Commit

Permalink
fix: adjust some tests (#4135)
Browse files Browse the repository at this point in the history 
* fix: adjust some tests

* save

* save

* ups
  • Loading branch information
@sarahgm
sarahgm authored Aug 29, 2024
1 parent 77fe4ad commit e59191b
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 128 deletions.
12 changes: 8 additions & 4 deletions packages/components/src/Dialog/Dialog.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export const StickyFooter: Story = {
};

export const WithDialogController: Story = {
render: args => {
render: () => {
const [open, setDialogOpen] = useState(false);
const handleAction = (action: 'save' | 'delete') => {
switch (action) {
Expand All @@ -200,10 +200,14 @@ export const WithDialogController: Story = {
return (
<>
<Menu onAction={handleAction} label="Settings">
<Menu.Item key="save">Save</Menu.Item>
<Menu.Item key="delete">Delete</Menu.Item>
<Menu.Item key="save" id="save">
Save
</Menu.Item>
<Menu.Item key="delete" id="delete">
Delete
</Menu.Item>
</Menu>
<Dialog.Trigger open={open} onOpenChange={setDialogOpen} {...args}>
<Dialog.Trigger open={open} onOpenChange={setDialogOpen}>
<Dialog closeButton>
{({ close }) => (
<Stack space={5}>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/Dialog/Dialog.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,7 @@ test('dialog supports size', () => {
test('renders nothing by default', () => {
render(
<Dialog.Trigger>
<Button>Open</Button>
<Dialog>
<Dialog.Headline>Headline</Dialog.Headline>Content
</Dialog>
Expand Down
178 changes: 59 additions & 119 deletions packages/components/src/Menu/Menu.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import {
act,
cleanup,
fireEvent,
render,
renderHook,
screen,
} from '@testing-library/react';
import { cleanup, fireEvent, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { Theme, ThemeProvider, cva, useSmallScreen } from '@marigold/system';
import { Theme, cva } from '@marigold/system';
import { Button } from '../Button';
import { setup } from '../test.utils';
import { ActionMenu } from './ActionMenu';
import { Menu } from './Menu';

Expand Down Expand Up @@ -64,6 +58,8 @@ const theme: Theme = {
},
};

const { render } = setup({ theme });

/**
* We need to mock `matchMedia` because JSOM does not
* implements it.
Expand All @@ -80,12 +76,10 @@ afterEach(cleanup);

test('renders the button but no menu by default', () => {
render(
<ThemeProvider theme={theme}>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);

const button = screen.queryByText('Choose');
Expand All @@ -104,12 +98,10 @@ test('opens menu when trigger is clicked', () => {
'screen and (min-width: 64em)',
]);
render(
<ThemeProvider theme={theme}>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);

const button = screen.getByText('Choose');
Expand All @@ -134,12 +126,10 @@ test('closes menu when item is selected', () => {
'screen and (min-width: 64em)',
]);
render(
<ThemeProvider theme={theme}>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);

const button = screen.getByText('Choose');
Expand All @@ -157,12 +147,10 @@ test('closes menu when item is selected', () => {

test('closes menu when trigger is clicked', () => {
render(
<ThemeProvider theme={theme}>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);

const button = screen.getByText('Choose');
Expand All @@ -178,14 +166,14 @@ test('closes menu when trigger is clicked', () => {

test('closes menu when clicked outside', async () => {
render(
<ThemeProvider theme={theme}>
<>
<Button>outside</Button>

<Menu label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
</>
);

const button = screen.getByText('Choose');
Expand All @@ -204,12 +192,10 @@ test('closes menu when clicked outside', async () => {
test('return action item', async () => {
const spy = jest.fn();
render(
<ThemeProvider theme={theme}>
<Menu label="Choose" onAction={spy}>
<Menu.Item id="burger">Burger</Menu.Item>
<Menu.Item id="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu label="Choose" onAction={spy}>
<Menu.Item id="burger">Burger</Menu.Item>
<Menu.Item id="pizza">Pizza</Menu.Item>
</Menu>
);

const button = screen.getByText('Choose');
Expand All @@ -224,12 +210,10 @@ test('return action item', async () => {

test('uses base classes from "Menu" in theme', () => {
render(
<ThemeProvider theme={theme}>
<Menu data-testid="menu" label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu data-testid="menu" label="Choose">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);
const button = screen.getByText('Choose');
fireEvent.click(button);
Expand All @@ -240,12 +224,10 @@ test('uses base classes from "Menu" in theme', () => {

test('supports "Menu" variant classnames from theme', () => {
render(
<ThemeProvider theme={theme}>
<Menu data-testid="menu" label="Choose" variant="one">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu data-testid="menu" label="Choose" variant="one">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);
const button = screen.getByText('Choose');
fireEvent.click(button);
Expand All @@ -263,12 +245,10 @@ test('supports "Menu" variant classnames from theme', () => {

test('supports "Menu" sizes from theme', () => {
render(
<ThemeProvider theme={theme}>
<Menu data-testid="menu" label="Choose" size="large">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu data-testid="menu" label="Choose" size="large">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);
const button = screen.getByRole('button');
fireEvent.click(button);
Expand All @@ -279,44 +259,14 @@ test('supports "Menu" sizes from theme', () => {
);
});

test('renders as tray', () => {
let resize: Function;
window.addEventListener = jest.fn().mockImplementation((event, cb) => {
if (event === 'resize') resize = cb;
});

const { result } = renderHook(() => useSmallScreen());
window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
act(() => resize());
expect(result.current).toBeTruthy();

render(
<ThemeProvider theme={theme}>
<Menu label="Choose" data-testid="menu">
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
);

const button = screen.getByText('Choose');
fireEvent.click(button);

const item = screen.getByText('Burger');
// eslint-disable-next-line testing-library/no-node-access
expect(item.parentElement?.parentElement?.className).toMatchInlineSnapshot(
`"!fixed !bottom-0 !left-0 !top-auto !max-h-fit w-full"`
);
});

test('renders action menu', () => {
render(
<ThemeProvider theme={theme}>
<>
<ActionMenu>
<Menu.Item key="one">Settings</Menu.Item>
<Menu.Item key="two">Delete</Menu.Item>
</ActionMenu>
</ThemeProvider>
</>
);
const button = screen.getByRole('button');
expect(button).toBeInTheDocument();
Expand All @@ -327,12 +277,10 @@ test('renders action menu', () => {

test('supports open property', () => {
render(
<ThemeProvider theme={theme}>
<Menu data-testid="menu" label="Choose" open={true}>
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu data-testid="menu" label="Choose" open={true}>
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);

const item = screen.getByText('Burger');
Expand All @@ -342,16 +290,10 @@ test('supports open property', () => {
test('supports onOpenChange property', () => {
const onOpenChange = jest.fn();
render(
<ThemeProvider theme={theme}>
<Menu
data-testid="menu"
label="Choose"
onOpenChange={() => onOpenChange()}
>
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
</ThemeProvider>
<Menu data-testid="menu" label="Choose" onOpenChange={() => onOpenChange()}>
<Menu.Item key="burger">Burger</Menu.Item>
<Menu.Item key="pizza">Pizza</Menu.Item>
</Menu>
);
expect(onOpenChange).toBeCalledTimes(0);
fireEvent.click(screen.getByRole('button'));
Expand All @@ -360,18 +302,16 @@ test('supports onOpenChange property', () => {

test('supports Menu with sections', () => {
render(
<ThemeProvider theme={theme}>
<Menu aria-label="Menu with sections" open>
<Menu.Section title="Food">
<Menu.Item key="burger">🍔 Burger</Menu.Item>
<Menu.Item key="pizza">🍕 Pizza</Menu.Item>
</Menu.Section>
<Menu.Section title="Fruits">
<Menu.Item key="apple">🍎 Apple</Menu.Item>
<Menu.Item key="banana">🍌 Banana</Menu.Item>
</Menu.Section>
</Menu>
</ThemeProvider>
<Menu aria-label="Menu with sections" open>
<Menu.Section title="Food">
<Menu.Item key="burger">🍔 Burger</Menu.Item>
<Menu.Item key="pizza">🍕 Pizza</Menu.Item>
</Menu.Section>
<Menu.Section title="Fruits">
<Menu.Item key="apple">🍎 Apple</Menu.Item>
<Menu.Item key="banana">🍌 Banana</Menu.Item>
</Menu.Section>
</Menu>
);
expect(screen.getByText('Food')).toBeInTheDocument();
expect(screen.getByText('Fruits')).toBeInTheDocument();
Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/Select/Select.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ test('option list opens when button is clicked', () => {

test('option list closes when button is clicked', async () => {
render(
<Select data-testid="select-id">
<Select data-testid="select-id" label="Movies">
<Select.Option id="Harry Potter">Harry Potter</Select.Option>
<Select.Option id="Lord of the Rings">Lord of the Rings</Select.Option>
<Select.Option id="Star Wars">Star Wars</Select.Option>
Expand Down Expand Up @@ -506,15 +506,15 @@ test('error is there', () => {
test('supports text slots in select', () => {
render(
<Select label="Label">
<Select.Option id="one">
<Select.Option id="one" textValue="one">
<Text slot="label">one</Text>
<Text slot="description">description for one</Text>
</Select.Option>
<Select.Option id="two">
<Select.Option id="two" textValue="two">
<Text slot="label">two</Text>
<Text slot="description">description for two</Text>
</Select.Option>
<Select.Option id="three">
<Select.Option id="three" textValue="three">
<Text slot="label">three</Text>
<Text slot="description">description for three</Text>
</Select.Option>
Expand All @@ -524,7 +524,7 @@ test('supports text slots in select', () => {
const button = screen.getByRole('button');
fireEvent.click(button);

const label = screen.getByText('one');
const label = screen.getByLabelText('one');
const description = screen.getByText('description for one');

expect(label).toBeInTheDocument();
Expand Down

0 comments on commit e59191b

Please sign in to comment.