From b575781e222cd5c1e4327dbaa14456bc20821284 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 8 Jul 2022 10:43:35 -0400 Subject: [PATCH 1/5] Use @storybook/testing-library for Storybook play functions This should make writing play functions easier, since we can use the full testing-library query suite --- webview/package.json | 1 + .../src/stories/ComparisonTable.stories.tsx | 9 ++++--- webview/src/stories/Plots.stories.tsx | 20 +++++++--------- yarn.lock | 24 ++++++++++++++++--- 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/webview/package.json b/webview/package.json index 26362fd627..f000def4c2 100644 --- a/webview/package.json +++ b/webview/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.8.2", + "@storybook/testing-library": "^0.0.13", "@tippyjs/react": "^4.2.6", "@vscode/webview-ui-toolkit": "^1.0.0", "classnames": "^2.2.6", diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index cd2616572d..687e661873 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/react/types-6-0' import { configureStore } from '@reduxjs/toolkit' -import { within } from '@testing-library/react' +import { screen, userEvent, within } from '@storybook/testing-library' import React from 'react' import { Provider, useDispatch } from 'react-redux' import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions' @@ -62,12 +62,11 @@ export const WithPinnedColumn = Template.bind({}) WithPinnedColumn.parameters = { chromatic: { delay: 300 } } -WithPinnedColumn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const mainHeader = await canvas.findByTestId('main-header') +WithPinnedColumn.play = async () => { + const mainHeader = await screen.findByTestId('main-header') const pin = within(mainHeader).getByRole('button') - pin.click() + userEvent.click(pin) } const removeSingleImage = ( diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index cc74f66ef0..ad42643d3f 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit' import React from 'react' import { Provider, useDispatch } from 'react-redux' import { Story, Meta } from '@storybook/react/types-6-0' -import { within, waitFor } from '@testing-library/react' +import { screen, userEvent, within } from '@storybook/testing-library' import { PlotsData, DEFAULT_SECTION_COLLAPSED, @@ -196,22 +196,20 @@ export const ZoomedInPlot = Template.bind({}) ZoomedInPlot.parameters = { chromatic: { delay: 300 } } -ZoomedInPlot.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const plots = await canvas.findAllByTestId(/^plot_/) - const plot = await waitFor(() => within(plots[0]).getByRole('button')) +ZoomedInPlot.play = async () => { + const plots = await screen.findAllByTestId(/^plot_/) + const plot = await within(plots[0]).findByRole('button') - plot.click() + userEvent.click(plot) } export const MultiviewZoomedInPlot = Template.bind({}) MultiviewZoomedInPlot.parameters = { chromatic: { delay: 300 } } -MultiviewZoomedInPlot.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const plot = await canvas.findByTestId('plots-section_template-multi_1') - const plotButton = await waitFor(() => within(plot).getByRole('button')) +MultiviewZoomedInPlot.play = async () => { + const plot = await screen.findByTestId('plots-section_template-multi_1') + const plotButton = await within(plot).findByRole('button') - plotButton.click() + userEvent.click(plotButton) } diff --git a/yarn.lock b/yarn.lock index 0e7fd7d5b2..e421f7972a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2470,7 +2470,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@6.5.9": +"@storybook/client-logger@6.5.9", "@storybook/client-logger@^6.4.0": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.9.tgz#dc1669abe8c45af1cc38f74c6f4b15ff33e63014" integrity sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg== @@ -2682,7 +2682,7 @@ lodash "^4.17.21" regenerator-runtime "^0.13.7" -"@storybook/instrumenter@6.5.9": +"@storybook/instrumenter@6.5.9", "@storybook/instrumenter@^6.4.0": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.9.tgz#885d9dec31b7b7fa6ea29b446105480450e527b8" integrity sha512-I2nu/6H0MAy8d+d3LY/G6oYEFyWlc8f2Qs2DhpYh5FiCgIpzvY0DMN05Lf8oaXdKHL3lPF/YLJH17FttekXs1w== @@ -2962,6 +2962,17 @@ read-pkg-up "^7.0.1" regenerator-runtime "^0.13.7" +"@storybook/testing-library@^0.0.13": + version "0.0.13" + resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.0.13.tgz#417c87d4ea62895092ec5fdf67027ae201254f45" + integrity sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw== + dependencies: + "@storybook/client-logger" "^6.4.0" + "@storybook/instrumenter" "^6.4.0" + "@testing-library/dom" "^8.3.0" + "@testing-library/user-event" "^13.2.1" + ts-dedent "^2.2.0" + "@storybook/theming@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa" @@ -3112,7 +3123,7 @@ dependencies: defer-to-connect "^2.0.0" -"@testing-library/dom@^8.5.0": +"@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0": version "8.14.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.14.0.tgz#c9830a21006d87b9ef6e1aae306cf49b0283e28e" integrity sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA== @@ -3150,6 +3161,13 @@ "@testing-library/dom" "^8.5.0" "@types/react-dom" "^18.0.0" +"@testing-library/user-event@^13.2.1": + version "13.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295" + integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg== + dependencies: + "@babel/runtime" "^7.12.5" + "@tippyjs/react@^4.2.6": version "4.2.6" resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71" From 22b25464ec0aa8f9690721ae432796ce9c0b7f25 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 8 Jul 2022 10:53:05 -0400 Subject: [PATCH 2/5] Stop using screen --- webview/src/stories/ComparisonTable.stories.tsx | 6 +++--- webview/src/stories/Plots.stories.tsx | 12 +++++++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index 687e661873..7379331735 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/react/types-6-0' import { configureStore } from '@reduxjs/toolkit' -import { screen, userEvent, within } from '@storybook/testing-library' +import { userEvent, within } from '@storybook/testing-library' import React from 'react' import { Provider, useDispatch } from 'react-redux' import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions' @@ -62,8 +62,8 @@ export const WithPinnedColumn = Template.bind({}) WithPinnedColumn.parameters = { chromatic: { delay: 300 } } -WithPinnedColumn.play = async () => { - const mainHeader = await screen.findByTestId('main-header') +WithPinnedColumn.play = async ({ canvasElement }) => { + const mainHeader = await within(canvasElement).findByTestId('main-header') const pin = within(mainHeader).getByRole('button') userEvent.click(pin) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index ad42643d3f..7b5e56faa1 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit' import React from 'react' import { Provider, useDispatch } from 'react-redux' import { Story, Meta } from '@storybook/react/types-6-0' -import { screen, userEvent, within } from '@storybook/testing-library' +import { userEvent, within } from '@storybook/testing-library' import { PlotsData, DEFAULT_SECTION_COLLAPSED, @@ -196,8 +196,8 @@ export const ZoomedInPlot = Template.bind({}) ZoomedInPlot.parameters = { chromatic: { delay: 300 } } -ZoomedInPlot.play = async () => { - const plots = await screen.findAllByTestId(/^plot_/) +ZoomedInPlot.play = async ({ canvasElement }) => { + const plots = await within(canvasElement).findAllByTestId(/^plot_/) const plot = await within(plots[0]).findByRole('button') userEvent.click(plot) @@ -207,8 +207,10 @@ export const MultiviewZoomedInPlot = Template.bind({}) MultiviewZoomedInPlot.parameters = { chromatic: { delay: 300 } } -MultiviewZoomedInPlot.play = async () => { - const plot = await screen.findByTestId('plots-section_template-multi_1') +MultiviewZoomedInPlot.play = async ({ canvasElement }) => { + const plot = await within(canvasElement).findByTestId( + 'plots-section_template-multi_1' + ) const plotButton = await within(plot).findByRole('button') userEvent.click(plotButton) From 2292037738f8a2dcf4e83d9592660a13424954d9 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 20:38:23 -0400 Subject: [PATCH 3/5] Remove chromatic delay on MultiView Zoomed plot --- webview/src/stories/Plots.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 7b5e56faa1..833333cb49 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -204,9 +204,6 @@ ZoomedInPlot.play = async ({ canvasElement }) => { } export const MultiviewZoomedInPlot = Template.bind({}) -MultiviewZoomedInPlot.parameters = { - chromatic: { delay: 300 } -} MultiviewZoomedInPlot.play = async ({ canvasElement }) => { const plot = await within(canvasElement).findByTestId( 'plots-section_template-multi_1' From b20d192033cc4a2e1f0a81369af4306f31d0a2db Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 21:22:46 -0400 Subject: [PATCH 4/5] Remove chromatic delays --- webview/src/stories/ComparisonTable.stories.tsx | 3 --- webview/src/stories/Plots.stories.tsx | 3 --- 2 files changed, 6 deletions(-) diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index 7379331735..69035dadec 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -59,9 +59,6 @@ const Template: Story = ({ plots, revisions }) => { export const Basic = Template.bind({}) export const WithPinnedColumn = Template.bind({}) -WithPinnedColumn.parameters = { - chromatic: { delay: 300 } -} WithPinnedColumn.play = async ({ canvasElement }) => { const mainHeader = await within(canvasElement).findByTestId('main-header') const pin = within(mainHeader).getByRole('button') diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 833333cb49..4825f3ac6f 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -193,9 +193,6 @@ VirtualizedPlots.args = { VirtualizedPlots.parameters = chromaticParameters export const ZoomedInPlot = Template.bind({}) -ZoomedInPlot.parameters = { - chromatic: { delay: 300 } -} ZoomedInPlot.play = async ({ canvasElement }) => { const plots = await within(canvasElement).findAllByTestId(/^plot_/) const plot = await within(plots[0]).findByRole('button') From db47df5a7b1d0da979bac52c063a6762c3733f72 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 21:28:32 -0400 Subject: [PATCH 5/5] Await multiview plot --- webview/src/stories/Plots.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 4825f3ac6f..be1df04a5d 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -205,6 +205,7 @@ MultiviewZoomedInPlot.play = async ({ canvasElement }) => { const plot = await within(canvasElement).findByTestId( 'plots-section_template-multi_1' ) + await within(plot).findByRole('graphics-document') const plotButton = await within(plot).findByRole('button') userEvent.click(plotButton)