Storybook interaction test for TextSearch

iandilling-adaptive · Dec 21, 2022 · ea078f2 · ea078f2
1 parent 5d58fd3
commit ea078f2
Show file tree

Hide file tree

Showing 3 changed files with 1,001 additions and 24 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -22,8 +22,10 @@
     "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-interactions": "^6.5.12",
     "@storybook/addon-links": "^6.5.12",
+    "@storybook/addon-storyshots": "^6.5.15",
     "@storybook/addon-storysource": "^6.5.12",
     "@storybook/builder-vite": "^0.2.2",
+    "@storybook/jest": "^0.0.10",
     "@storybook/react": "^6.5.12",
     "@storybook/testing-library": "^0.0.13",
     "@ui-kit-2022/components": "0.0.1",

diff --git a/docs/src/components/TextSearch.stories.tsx b/docs/src/components/TextSearch.stories.tsx
@@ -1,5 +1,7 @@
 import { action } from '@storybook/addon-actions';
+import { expect } from '@storybook/jest';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 import { TextSearch, TextSearchOptionBase } from '@ui-kit-2022/components';
 import * as React from 'react';
 
@@ -94,6 +96,22 @@ BasicTextSearch.args = {
     { label: 'Another Option' },
     { label: 'A fourth option' },
   ],
+  disablePortal: true,
+};
+
+BasicTextSearch.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByRole('combobox');
+  await userEvent.click(input);
+  await userEvent.click(
+    canvas.getByRole('presentation').querySelectorAll('[role="option"]')[0],
+  );
+  expect(input.value).toBe('Option 1');
+  await userEvent.click(input);
+  await userEvent.click(
+    canvasElement.querySelector('.MuiAutocomplete-clearIndicator') as HTMLElement,
+  );
+  await userEvent.click(input);
 };
 
 interface Option extends TextSearchOptionBase {