Merge pull request AdaptiveConsulting#276 from wenfeng-xing/test-addon

chore: add the test addon
iandilling-adaptive · Dec 22, 2022 · 8102456 · 8102456
2 parents 1f8ae74 + 22b25b1
commit 8102456
Show file tree

Hide file tree

Showing 7 changed files with 1,006 additions and 27 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,8 +96,23 @@ 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 {
   type: 'stock' | 'currency';
 }

diff --git a/packages/ui-kit-components/src/components/Button/button.test.tsx b/packages/ui-kit-components/src/components/Button/button.test.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import '@testing-library/jest-dom';
 
 import { act, fireEvent, render, screen } from '@testing-library/react';

diff --git a/packages/ui-kit-components/src/components/IndexTickers/IndexTickers.test.tsx b/packages/ui-kit-components/src/components/IndexTickers/IndexTickers.test.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';

diff --git a/packages/ui-kit-components/src/components/TextSearch/TextSearch.test.tsx b/packages/ui-kit-components/src/components/TextSearch/TextSearch.test.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import '@testing-library/jest-dom';
 
 import { render, screen, fireEvent, within } from '@testing-library/react';

diff --git a/packages/ui-kit-components/src/utils/useIsDarkMode.test.tsx b/packages/ui-kit-components/src/utils/useIsDarkMode.test.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { renderHook, RenderResult } from '@testing-library/react-hooks';
+import { renderHook, RenderResult } from '@testing-library/react';
 import { createTheme, ThemeProvider, Palette } from '@mui/material';
 import UseIsDarkMode from './useIsDarkMode';
 
 describe('Test UseIsDarkMode', () => {
   describe('Given the UseIsDarkMode hook', () => {
     describe('When the theme is dark', () => {
-      let res: RenderResult<boolean>;
+      let res: { current: boolean };
       beforeEach(() => {
         const theme = createTheme({
           palette: {
@@ -26,7 +26,7 @@ describe('Test UseIsDarkMode', () => {
     });
 
     describe('When the theme is light', () => {
-      let res: RenderResult<boolean>;
+      let res: { current: boolean };
       beforeEach(() => {
         const theme = createTheme({
           palette: {