chore: fix tests and vitest support added

web3ui · Jun 18, 2022 · 9207383 · 9207383
1 parent 80817bd
commit 9207383
Show file tree

Hide file tree

Showing 51 changed files with 3,402 additions and 2,390 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 **/dist
 **/*.tsbuildinfo
 **/.DS_Store
-.env
+.env
+**/coverage
diff --git a/.storybook/preview.js → .storybook/preview.ts b/.storybook/preview.js → .storybook/preview.ts
@@ -1,3 +1,7 @@
+import { initialize } from 'msw-storybook-addon';
+// Start Mock Service Worker
+initialize({ onUnhandledRequest: 'bypass' });
+
 export const parameters = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "scripts": {
         "build": "nx run-many --target=build --all --parallel --verbose=true",
         "test": "nx affected --target=test --all --parallel --verbose=true",
+        "test:ui": "nx affected --target=test:ui --all --parallel --verbose=true",
         "nm:clear": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
         "nx:clear": "nx clear-cache",
         "nx:graph": "nx graph --skip-nx-cache",
@@ -48,11 +49,14 @@
         "@typescript-eslint/eslint-plugin": "~5.18.0",
         "@typescript-eslint/parser": "~5.18.0",
         "@vitejs/plugin-react": "^1.3.2",
+        "@vitest/ui": "^0.15.1",
         "eslint": "~8.12.0",
         "eslint-config-prettier": "8.1.0",
         "fast-glob": "^3.2.11",
         "jest": "^28.1.0",
         "jest-styled-components": "^7.0.8",
+        "msw": "^0.42.1",
+        "msw-storybook-addon": "^1.6.3",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-lazily": "^0.9.1",
@@ -65,6 +69,10 @@
         "typescript": "^4.6.3",
         "vite": "^2.9.5",
         "vite-plugin-dts": "^1.1.1",
-        "vite-tsconfig-paths": "^3.4.1"
+        "vite-tsconfig-paths": "^3.4.1",
+        "vitest": "^0.15.1"
+    },
+    "msw": {
+        "workerDirectory": "public"
     }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -17,7 +17,10 @@
         }
     },
     "scripts": {
-        "build": "vite build"
+        "build": "vite build",
+        "test": "vitest run",
+        "test:coverage": "vitest run --coverage",
+        "test:ui": "vitest --ui"
     },
     "peerDependencies": {
         "react": "^18.0.0",

diff --git a/packages/core/src/lib/Accordion/Accordion.tsx b/packages/core/src/lib/Accordion/Accordion.tsx
@@ -61,9 +61,19 @@ const Accordion: React.FC<AccordionProps> = ({
             >
                 <DivStyled>
                     {isOpen ? (
-                        <Minus fill={getThemeColor(theme)} fontSize="2px" />
+                        <Minus
+                            title="minus icon"
+                            titleId="accordion minus icon"
+                            fill={getThemeColor(theme)}
+                            fontSize="2px"
+                        />
                     ) : (
-                        <Plus fill={getThemeColor(theme)} fontSize="10px" />
+                        <Plus
+                            title="plus icon"
+                            titleId="accordion plus icon"
+                            fill={getThemeColor(theme)}
+                            fontSize="10px"
+                        />
                     )}
 
                     <H4Styled data-testid="test-accordion-title">
@@ -77,9 +87,17 @@ const Accordion: React.FC<AccordionProps> = ({
                     )}
                     {hasLockIcon &&
                         (isOpen ? (
-                            <LockOpen fill={getThemeColor(theme)} />
+                            <LockOpen
+                                title="lock open icon"
+                                titleId="accordion lock open icon"
+                                fill={getThemeColor(theme)}
+                            />
                         ) : (
-                            <LockClosed fill={getThemeColor(theme)} />
+                            <LockClosed
+                                title="lock closed icon"
+                                titleId="accordion lock closed icon"
+                                fill={getThemeColor(theme)}
+                            />
                         ))}
                     {tagText && (
                         <Tag text={tagText} color={theme} tone="dark" />

diff --git a/packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core/src/lib/Breadcrumbs/Breadcrumbs.test.tsx
@@ -1,4 +1,3 @@
-
 import { fireEvent, waitFor, screen, render } from '@testing-library/react';
 import { composeStories } from '@storybook/testing-react';
 import * as stories from './Breadcrumbs.stories';
@@ -14,96 +13,108 @@ const separatorId = 'breadcrumbs-separator-test-id';
 const breadcrumbId = 'breadcrumb-test-id';
 
 test('Renders - Breadcrumbs One', () => {
-  render(<One />);
-  expect(screen.getByTestId(navId)).not.toBeNull();
-  expect(screen.queryByTestId(separatorId)).toBeNull();
-  expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
-  expect(screen.queryByTestId(olId)).not.toBeNull();
+    render(<One />);
+    expect(screen.getByTestId(navId)).not.toBeNull();
+    expect(screen.queryByTestId(separatorId)).toBeNull();
+    expect(
+        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+    ).toBeDefined();
+    expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
-xtest('Renders - Breadcrumbs One: Hover Test', async () => {
-  render(<One />);
-  // TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
-  const breadcrumbElement = screen.getByTestId(breadcrumbId);
-  fireEvent.mouseOver(breadcrumbElement);
-  await waitFor(() => breadcrumbElement);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
+test.skip('Renders - Breadcrumbs One: Hover Test', async () => {
+    render(<One />);
+    // TODO: Hover/MouseOver Event does not work as expected so it passes. Need to Fix
+    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    fireEvent.mouseOver(breadcrumbElement);
+    await waitFor(() => breadcrumbElement);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
 });
 
 test('Renders - Breadcrumbs Two', async () => {
-  render(<Two />);
-  expect(screen.getByTestId(navId)).not.toBeNull();
-  expect(screen.queryByTestId(separatorId)).not.toBeNull();
-  expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
-  expect(screen.queryByTestId(olId)).not.toBeNull();
+    render(<Two />);
+    expect(screen.getByTestId(navId)).not.toBeNull();
+    expect(screen.queryByTestId(separatorId)).not.toBeNull();
+    expect(
+        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+    ).toBeDefined();
+    expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
-xtest('Renders - Breadcrumbs Two: Hover Test', async () => {
-  render(<Two />);
-  // TODO: Hover Event does not work as expected so it passes. Need to Fix
-  const breadcrumbElement = screen.getByTestId(breadcrumbId);
-  fireEvent.mouseOver(breadcrumbElement);
-  await waitFor(() => breadcrumbElement);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
-  fireEvent.mouseOver(breadcrumbElement1);
-  await waitFor(() => breadcrumbElement1);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
+test.skip('Renders - Breadcrumbs Two: Hover Test', async () => {
+    render(<Two />);
+    // TODO: Hover Event does not work as expected so it passes. Need to Fix
+    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    fireEvent.mouseOver(breadcrumbElement);
+    await waitFor(() => breadcrumbElement);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
+    fireEvent.mouseOver(breadcrumbElement1);
+    await waitFor(() => breadcrumbElement1);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
 });
 
 test('Renders - Breadcrumbs Three', () => {
-  render(<Three />);
-  expect(screen.getByTestId(navId)).not.toBeNull();
-  expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(1);
-  expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
-  expect(screen.queryByTestId(olId)).not.toBeNull();
+    render(<Three />);
+    expect(screen.getByTestId(navId)).not.toBeNull();
+    expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(
+        1,
+    );
+    expect(
+        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+    ).toBeDefined();
+    expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
-xtest('Renders - Breadcrumbs Three: Hover Test', async () => {
-  render(<Three />);
-  // TODO: Hover Event does not work as expected so it passes. Need to Fix
-  const breadcrumbElement = screen.getByTestId(breadcrumbId);
-  fireEvent.mouseOver(breadcrumbElement);
-  await waitFor(() => breadcrumbElement);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
-  fireEvent.mouseOver(breadcrumbElement1);
-  await waitFor(() => breadcrumbElement1);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  // third breadcrumb should not change color on hover
-  const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
-  fireEvent.mouseOver(breadcrumbElement2);
-  await waitFor(() => breadcrumbElement2);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
+test.skip('Renders - Breadcrumbs Three: Hover Test', async () => {
+    render(<Three />);
+    // TODO: Hover Event does not work as expected so it passes. Need to Fix
+    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    fireEvent.mouseOver(breadcrumbElement);
+    await waitFor(() => breadcrumbElement);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
+    fireEvent.mouseOver(breadcrumbElement1);
+    await waitFor(() => breadcrumbElement1);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    // third breadcrumb should not change color on hover
+    const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
+    fireEvent.mouseOver(breadcrumbElement2);
+    await waitFor(() => breadcrumbElement2);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
 });
 
 test('Renders - Breadcrumbs Four', () => {
-  render(<Four />);
-  expect(screen.getByTestId(navId)).not.toBeNull();
-  expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(1);
-  expect(screen.queryByTestId(breadcrumbId)?.querySelector('svg')).toBeDefined();
-  expect(screen.queryByTestId(olId)).not.toBeNull();
+    render(<Four />);
+    expect(screen.getByTestId(navId)).not.toBeNull();
+    expect(screen.queryAllByTestId(separatorId).length).toBeGreaterThanOrEqual(
+        1,
+    );
+    expect(
+        screen.queryByTestId(breadcrumbId)?.querySelector('svg'),
+    ).toBeDefined();
+    expect(screen.queryByTestId(olId)).not.toBeNull();
 });
 
-xtest('Renders - Breadcrumbs Four: Hover Test', async () => {
-  render(<Four />);
-  // TODO: Hover Event does not work as expected so it passes. Need to Fix
-  const breadcrumbElement = screen.getByTestId(breadcrumbId);
-  fireEvent.mouseOver(breadcrumbElement);
-  await waitFor(() => breadcrumbElement);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
-  fireEvent.mouseOver(breadcrumbElement1);
-  await waitFor(() => breadcrumbElement1);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  // third breadcrumb should change color on hover
-  const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
-  fireEvent.mouseOver(breadcrumbElement2);
-  await waitFor(() => breadcrumbElement2);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
-  // third breadcrumb should not change color on hover
-  const breadcrumbElement3 = screen.getByTestId(`${breadcrumbId}-3`);
-  fireEvent.mouseOver(breadcrumbElement3);
-  await waitFor(() => breadcrumbElement3);
-  expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
+test.skip('Renders - Breadcrumbs Four: Hover Test', async () => {
+    render(<Four />);
+    // TODO: Hover Event does not work as expected so it passes. Need to Fix
+    const breadcrumbElement = screen.getByTestId(breadcrumbId);
+    fireEvent.mouseOver(breadcrumbElement);
+    await waitFor(() => breadcrumbElement);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    const breadcrumbElement1 = screen.getByTestId(`${breadcrumbId}-1`);
+    fireEvent.mouseOver(breadcrumbElement1);
+    await waitFor(() => breadcrumbElement1);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    // third breadcrumb should change color on hover
+    const breadcrumbElement2 = screen.getByTestId(`${breadcrumbId}-2`);
+    fireEvent.mouseOver(breadcrumbElement2);
+    await waitFor(() => breadcrumbElement2);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.blueDark}`);
+    // third breadcrumb should not change color on hover
+    const breadcrumbElement3 = screen.getByTestId(`${breadcrumbId}-3`);
+    fireEvent.mouseOver(breadcrumbElement3);
+    await waitFor(() => breadcrumbElement3);
+    expect(breadcrumbElement).toHaveStyleRule(`background: ${color.grey}`);
 });
diff --git a/packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx b/packages/core/src/lib/Breadcrumbs/Breadcrumbs.tsx
@@ -51,7 +51,12 @@ function renderList(
                     data-testid={'breadcrumbs-separator-test-id'}
                 >
                     {separator ?? (
-                        <ChevronRight fill="currentColor" fontSize={24} />
+                        <ChevronRight
+                            title="chevron right icon"
+                            titleId="breadcrumbs chevron right icon"
+                            fill="currentColor"
+                            fontSize={24}
+                        />
                     )}
                 </BreadcrumbsSeparator>,
             );

diff --git a/packages/core/src/lib/Button/Button.stories.tsx b/packages/core/src/lib/Button/Button.stories.tsx
@@ -42,7 +42,9 @@ PrimaryWithIcon.args = {
     text: 'Primary with icon',
     theme: 'primary',
     type: 'button',
-    icon: <Plus fontSize="5px" height={'10px'} width={'10px'} />,
+    icon: (
+        <Plus fontSize="5px" height={'10px'} width={'10px'} title="plus icon" />
+    ),
 };
 
 export const PrimaryWithIconAfter = Template.bind({});