GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

add interaction component test

Browse Source
This commit is contained in:
Norbert de Langen 2024-11-18 16:18:51 +01:00
parent 14f3ab4cc0
commit adf6180170
2 changed files with 75 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
code/core/src/manager/components/sidebar/ContextMenu.tsx
View File

@ -58,6 +58,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API)
data-displayed={isOpen ? 'on' : 'off'}
closeOnOutsideClick
placement="bottom-end"
data-testid="context-menu"
onVisibleChange={(visible) => {
if (!visible) {
handlers.onClose();

77
code/core/src/manager/components/sidebar/Tree.stories.tsx
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, within } from '@storybook/test';
import { expect, fn, userEvent, within } from '@storybook/test';
import { type ComponentEntry, type IndexHash, ManagerContext } from '@storybook/core/manager-api';
@ -19,12 +19,45 @@ const managerContext: any = {
autodocs: 'tag',
docsMode: false,
},
testProviders: {},
testProviders: {
'component-tests': {
type: 'experimental_TEST_PROVIDER',
id: 'component-tests',
render: () => 'Component tests',
contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>,
runnable: true,
watchable: true,
},
'visual-tests': {
type: 'experimental_TEST_PROVIDER',
id: 'visual-tests',
render: () => 'Visual tests',
contextMenu: () => null,
runnable: true,
},
},
},
api: {
on: fn().mockName('api::on'),
off: fn().mockName('api::off'),
getElements: fn(() => ({})),
emit: fn().mockName('api::emit'),
getElements: fn(() => ({
'component-tests': {
type: 'experimental_TEST_PROVIDER',
id: 'component-tests',
render: () => 'Component tests',
contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>,
runnable: true,
watchable: true,
},
'visual-tests': {
type: 'experimental_TEST_PROVIDER',
id: 'visual-tests',
render: () => 'Visual tests',
contextMenu: () => null,
runnable: true,
},
})),
},
};
@ -254,3 +287,41 @@ export const SkipToCanvasLinkFocused: Story = {
await expect(link).toBeVisible();
},
};
// SkipToCanvas Link only shows on desktop widths
export const WithContextContent: Story = {
...DocsOnlySingleStoryComponents,
parameters: {
chromatic: { viewports: [1280] },
viewport: {
options: {
desktop: {
name: 'Desktop',
styles: {
width: '100%',
height: '100%',
},
},
},
},
},
globals: {
viewport: { value: 'desktop' },
},
play: async ({ canvasElement }) => {
const screen = await within(canvasElement);
const link = await screen.findByText('TooltipBuildList');
await userEvent.hover(link);
const contextButton = await screen.findByTestId('context-menu');
await userEvent.click(contextButton);
const body = await within(document.body);
const tooltip = await body.findByTestId('tooltip');
await expect(tooltip).toBeVisible();
expect(tooltip).toHaveTextContent('TEST_PROVIDER_CONTEXT_CONTENT');
},
};