Skip to content

Commit

Permalink
Improve context menu navigation test
Browse files Browse the repository at this point in the history 
- await tick can now be replaced with new helper

- remove unnecessary snapshots - not rendering anything particularly useful

- add missing test for `next` navigation assertion
  • Loading branch information
@cee-chen
cee-chen committed Nov 1, 2023
1 parent f645a57 commit e094692
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 148 deletions.
133 changes: 0 additions & 133 deletions src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,139 +28,6 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
</div>
`;

exports[`EuiContextMenu props panels and initialPanelId navigates back to the previous panel when clicking the title button 1`] = `
<div
class="euiContextMenu emotion-euiContextMenu"
style="height: 0px;"
>
<div
class="euiContextMenuPanel emotion-euiContextMenuPanel-euiContextMenu__panel"
tabindex="-1"
>
<button
class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
data-test-subj="contextMenuPanelTitleButton"
type="button"
>
<span
class="euiContextMenu__icon emotion-euiContextMenu__icon"
color="inherit"
data-euiicon-type="arrowLeft"
/>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
2
</span>
</button>
<div>
<div>
2
</div>
</div>
</div>
</div>
`;

exports[`EuiContextMenu props panels and initialPanelId navigates back to the previous panel when clicking the title button 2`] = `
<div
class="euiContextMenu emotion-euiContextMenu"
style="height: 0px; width: 400px;"
>
<div
class="euiContextMenuPanel emotion-euiContextMenuPanel-transitioning-out-euiContextMenu__panel"
tabindex="-1"
>
<button
class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
data-test-subj="contextMenuPanelTitleButton"
type="button"
>
<span
class="euiContextMenu__icon emotion-euiContextMenu__icon"
color="inherit"
data-euiicon-type="arrowLeft"
/>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
2
</span>
</button>
<div>
<div>
2
</div>
</div>
</div>
<div
class="euiContextMenuPanel emotion-euiContextMenuPanel-transitioning-in-euiContextMenu__panel"
tabindex="-1"
>
<button
class="euiContextMenuItem euiContextMenuPanel__title emotion-euiContextMenuItem-m-center-euiContextMenuPanel__title"
data-test-subj="contextMenuPanelTitleButton"
type="button"
>
<span
class="euiContextMenu__icon emotion-euiContextMenu__icon"
color="inherit"
data-euiicon-type="arrowLeft"
/>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
1
</span>
</button>
<div>
<button
class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
type="button"
>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
2a
</span>
<span
class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
data-euiicon-type="arrowRight"
/>
</button>
<button
class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
type="button"
>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
2b
</span>
<span
class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
data-euiicon-type="arrowRight"
/>
</button>
<button
class="euiContextMenuItem emotion-euiContextMenuItem-m-center"
type="button"
>
<span
class="euiContextMenuItem__text emotion-euiContextMenuItem__text"
>
2c
</span>
<span
class="euiContextMenu__arrow emotion-euiContextMenuItem__arrow"
data-euiicon-type="arrowRight"
/>
</button>
</div>
</div>
</div>
`;

exports[`EuiContextMenu props panels and initialPanelId renders the referenced panel 1`] = `
<div
class="euiContextMenu emotion-euiContextMenu"
Expand Down
37 changes: 22 additions & 15 deletions src/components/context_menu/context_menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
*/

import React from 'react';
import { act, fireEvent } from '@testing-library/react';
import { render } from '../../test/rtl';
import { fireEvent } from '@testing-library/react';
import { render, waitForEuiContextMenuPanelTransition } from '../../test/rtl';
import { shouldRenderCustomStyles } from '../../test/internal';
import { requiredProps } from '../../test';

Expand Down Expand Up @@ -64,9 +64,6 @@ const panel0 = {

const panels = [panel0, panel1, panel2, panel3];

export const tick = (ms = 0) =>
act(() => new Promise((resolve) => setTimeout(resolve, ms)));

describe('EuiContextMenu', () => {
shouldRenderCustomStyles(<EuiContextMenu />);

Expand Down Expand Up @@ -139,26 +136,36 @@ describe('EuiContextMenu', () => {
expect(container.firstChild).toMatchSnapshot();
});

it('navigates back to the previous panel when clicking the title button', async () => {
it('navigates to the next panel', async () => {
const onPanelChange = jest.fn();
const { container, getByTestSubject } = render(
const { getByText } = render(
<EuiContextMenu
panels={panels}
initialPanelId={2}
initialPanelId={1}
onPanelChange={onPanelChange}
/>
);
fireEvent.click(getByText('2a'));
await waitForEuiContextMenuPanelTransition();

await tick(20);

expect(container.firstChild).toMatchSnapshot();
expect(onPanelChange).toHaveBeenCalledWith({
panelId: 2,
direction: 'next',
});
});

// Navigate to a different panel.
it('navigates back to the previous panel when clicking the title button', async () => {
const onPanelChange = jest.fn();
const { getByTestSubject } = render(
<EuiContextMenu
panels={panels}
initialPanelId={2}
onPanelChange={onPanelChange}
/>
);
fireEvent.click(getByTestSubject('contextMenuPanelTitleButton'));
await waitForEuiContextMenuPanelTransition();

await tick(20);

expect(container.firstChild).toMatchSnapshot();
expect(onPanelChange).toHaveBeenCalledWith({
panelId: 1,
direction: 'previous',
Expand Down

0 comments on commit e094692

Please sign in to comment.