GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

make canvas interaction tests more robust

Browse Source
This commit is contained in:
Jeppe Reinhold 2022-11-11 22:48:18 +01:00
parent ffa44b5df0
commit 9be25a1946
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
View File

@ -2,7 +2,7 @@
/// <reference types="@testing-library/jest-dom" />;
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { userEvent, waitFor, within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
import { Canvas } from '../Canvas';
import { Story as StoryComponent } from '../Story';
@ -29,21 +29,23 @@ type Story = StoryObj<typeof meta>;
const expectAmountOfStoriesInSource =
(amount: number): Story['play'] =>
async ({ canvasElement }) => {
// TODO: it's bad that we have to resort to querySelector here, our markup isn't very accessible
const canvas = within(canvasElement);
// Arrange - find the story element
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const story = within(canvasElement.querySelector('.docs-story')!);
// Arrange - find the "Show code" button
let showCodeButton = canvas.getByText('Show code');
await waitFor(() => {
showCodeButton = canvas.getByText('Show code');
expect(showCodeButton).toBeInTheDocument();
});
// Act - click button to show code
await userEvent.click(story.getByText('Show code'));
await userEvent.click(showCodeButton);
// Arrange - find the story element
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const source = within(canvasElement.querySelector('pre')!);
// Assert - check that the correct amount of stories' source is shown
const booleanControlNodes = await source.findAllByText('BooleanControl');
expect(booleanControlNodes).toHaveLength(amount);
await waitFor(async () => {
const booleanControlNodes = await canvas.findAllByText('BooleanControl');
expect(booleanControlNodes).toHaveLength(amount);
});
};
export const MultipleChildren: Story = {
@ -108,20 +110,11 @@ export const MixedChildrenStories: Story = {
);
},
play: async (args) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
await expectAmountOfStoriesInSource(2)!(args);
// this function will also expand the source code
await expectAmountOfStoriesInSource(2)(args);
const canvas = within(args.canvasElement);
// Arrange - find canvas element
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const story = within(args.canvasElement.querySelector('.docs-story')!);
// Assert - find two headlines
expect(story.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2);
// Arrange - find source code element
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const source = within(args.canvasElement.querySelector('pre')!);
// Assert - headlines are not in source code
expect(source.queryByText(/Headline for Boolean Controls/i)).not.toBeInTheDocument();
// Assert - only find two headlines, those in the story, and none in the source code
expect(canvas.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2);
},
};

7
scripts/.eslintrc.js
View File

@ -28,5 +28,12 @@ module.exports = {
'import/extensions': ['error', 'always'],
},
},
{
files: ['*.stories.*'],
rules: {
// allow expect in stories
'jest/no-standalone-expect': ['off'],
},
},
],
};