Skip to content

Commit

Permalink
[EuiContextMenu] Add RTL test helper (#7335)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Nov 2, 2023
1 parent 8b67ea6 commit 5cab9cb
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 149 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
2 changes: 2 additions & 0 deletions src/test/rtl/component_helpers.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,5 @@ export declare const waitForEuiToolTipVisible: () => Promise<void>;
export declare const waitForEuiToolTipHidden: () => Promise<void>;

export declare const showEuiComboBoxOptions: () => Promise<void>;

export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;
26 changes: 25 additions & 1 deletion src/test/rtl/component_helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,36 @@ export const waitForEuiToolTipHidden = async () =>
});

/**
* Doot doo
* EuiComboBox
*/

export const showEuiComboBoxOptions = async () => {
fireEvent.click(screen.getByTestSubject('comboBoxToggleListButton'));
await waitForEuiPopoverOpen();
await waitFor(() => {
expect(screen.getByRole('listbox')).toBeInTheDocument();
});
};

/**
* EuiContextMenu
*/

export const waitForEuiContextMenuPanelTransition = async () => {
// Used document instead of container or screen due to context menus living in portals
const getPanels = () => document.querySelectorAll('.euiContextMenuPanel');

// 2 panels will appear for the transition animation
await waitFor(() => {
expect(getPanels().length).toEqual(2);
});

// Outgoing panel will be removed on animation end
fireEvent.animationEnd(getPanels()[0]);
if (getPanels().length > 1) {
fireEvent.animationEnd(getPanels()[1]);
}

// Transition/animation is done once we're back to 1 panel
expect(getPanels().length).toEqual(1);
};

0 comments on commit 5cab9cb

Please sign in to comment.