test(ui): add button test

xiejay97 · xiejay97 · commit 4bd3740c8c96 · 2022-08-23T10:55:28.000+08:00
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,5 @@
+const { getJestProjects } = require('@nrwl/jest');
+
+module.exports = {
+  projects: getJestProjects(),
+};
diff --git a/jest.config.ts b/jest.config.ts
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@nrwl/web": "14.5.6",
     "@nrwl/workspace": "14.5.6",
     "@stackblitz/sdk": "^1.8.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@types/fs-extra": "^9.0.13",
     "@types/glob": "^7.2.0",
diff --git a/packages/hooks/jest.config.js b/packages/hooks/jest.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   displayName: 'hooks',
   preset: '../../jest.preset.js',
   transform: {
diff --git a/packages/hooks/project.json b/packages/hooks/project.json
@@ -42,7 +42,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/packages/hooks"],
       "options": {
-        "jestConfig": "packages/hooks/jest.config.ts",
+        "jestConfig": "packages/hooks/jest.config.js",
         "passWithNoTests": true
       }
     }
diff --git a/packages/hooks/tsconfig.lib.json b/packages/hooks/tsconfig.lib.json
@@ -7,7 +7,7 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
-    "jest.config.ts",
+    "jest.config.js",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
diff --git a/packages/hooks/tsconfig.spec.json b/packages/hooks/tsconfig.spec.json
@@ -6,7 +6,6 @@
     "types": ["jest", "node"]
   },
   "include": [
-    "jest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.tsx",
diff --git a/packages/icons/jest.config.js b/packages/icons/jest.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   displayName: 'icons',
   preset: '../../jest.preset.js',
   transform: {
diff --git a/packages/icons/project.json b/packages/icons/project.json
@@ -42,7 +42,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/packages/icons"],
       "options": {
-        "jestConfig": "packages/icons/jest.config.ts",
+        "jestConfig": "packages/icons/jest.config.js",
         "passWithNoTests": true
       }
     }
diff --git a/packages/icons/tsconfig.lib.json b/packages/icons/tsconfig.lib.json
@@ -7,7 +7,7 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
-    "jest.config.ts",
+    "jest.config.js",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
diff --git a/packages/icons/tsconfig.spec.json b/packages/icons/tsconfig.spec.json
@@ -6,7 +6,6 @@
     "types": ["jest", "node"]
   },
   "include": [
-    "jest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.tsx",
diff --git a/packages/site/jest.config.js b/packages/site/jest.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   displayName: 'site',
   preset: '../../jest.preset.js',
   transform: {
diff --git a/packages/site/project.json b/packages/site/project.json
@@ -91,7 +91,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/packages/site"],
       "options": {
-        "jestConfig": "packages/site/jest.config.ts",
+        "jestConfig": "packages/site/jest.config.js",
         "passWithNoTests": true
       }
     }
diff --git a/packages/site/tsconfig.app.json b/packages/site/tsconfig.app.json
@@ -6,7 +6,7 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
-    "jest.config.ts",
+    "jest.config.js",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
diff --git a/packages/site/tsconfig.spec.json b/packages/site/tsconfig.spec.json
@@ -7,7 +7,6 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "include": [
-    "jest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.tsx",
diff --git a/packages/ui/components/button/Button.spec.tsx b/packages/ui/components/button/Button.spec.tsx
@@ -1,26 +1,81 @@
 import type { DButtonProps } from './Button';
-import type { RenderResult } from '@testing-library/react';
 
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { SearchOutlined } from '@react-devui/icons';
 
 import { PREFIX } from '../../__tests__';
 import { DButton } from './Button';
 
 describe('DButton', () => {
-  let buttonRender: (props: DButtonProps) => RenderResult;
+  let buttonRender: (props: DButtonProps) => void;
+  let buttonReRender: (props: DButtonProps) => void;
   let buttonEl: HTMLElement;
 
   beforeEach(() => {
     buttonRender = (props) => {
-      const renderResult = render(<DButton data-testid="button" {...props} />);
-      buttonEl = renderResult.getByTestId('button');
-      return renderResult;
+      const { rerender } = render(<DButton data-testid="button" {...props} />);
+      buttonReRender = (props) => {
+        rerender(<DButton data-testid="button" {...props} />);
+      };
+      buttonEl = screen.getByTestId('button');
     };
   });
 
   it('should `dType` work', () => {
     const type = 'secondary';
     buttonRender({ dType: type });
-    expect(buttonEl.classList.contains(`${PREFIX}button--${type}`)).toBeTruthy();
+    expect(buttonEl).toHaveClass(`${PREFIX}button--${type}`);
+  });
+
+  it('should `dTheme` work', () => {
+    const theme = 'success';
+    buttonRender({ dTheme: theme });
+    expect(buttonEl).toHaveClass(`t-${theme}`);
+  });
+
+  it('should `dLoading` work', () => {
+    buttonRender({ dLoading: true });
+    expect(buttonEl).toHaveClass('is-loading');
+    expect(buttonEl).toBeDisabled();
+  });
+
+  it('should `dBlock` work', () => {
+    buttonRender({ dBlock: true });
+    expect(buttonEl).toHaveClass(`${PREFIX}button--block`);
+  });
+
+  it('should `dVariant` work', () => {
+    const variant = 'circle';
+    buttonRender({ dVariant: variant });
+    expect(buttonEl).toHaveClass(`${PREFIX}button--${variant}`);
+  });
+
+  it('should `dSize` work', () => {
+    const size = 'smaller';
+    buttonRender({ dSize: size });
+    expect(buttonEl).toHaveClass(`${PREFIX}button--${size}`);
+  });
+
+  it('should `dIcon` work', () => {
+    buttonRender({ dIcon: <SearchOutlined data-testid="icon" /> });
+    expect(screen.getByTestId('icon')).toBeTruthy();
+  });
+
+  it('should `dIconRight` work', () => {
+    buttonRender({ dIconRight: true });
+    expect(buttonEl).toHaveClass(`${PREFIX}button--icon-right`);
+  });
+
+  it('should `wave` work', () => {
+    buttonRender({ dType: 'link', dTheme: 'primary' });
+    expect(buttonEl.querySelector(`.${PREFIX}wave`)).not.toBeTruthy();
+
+    fireEvent.click(buttonEl);
+    expect(buttonEl.querySelector(`.${PREFIX}wave`)).not.toBeTruthy();
+
+    buttonReRender({ dType: 'primary', dTheme: 'primary' });
+    fireEvent.click(buttonEl);
+    expect(buttonEl.querySelector(`.${PREFIX}wave`)).toBeTruthy();
   });
 });
diff --git a/packages/ui/jest.config.js b/packages/ui/jest.config.js
@@ -1,9 +1,9 @@
-import path from 'path';
+const path = require('path');
 
-import { readdirSync, statSync } from 'fs-extra';
+const { readdirSync, statSync } = require('fs-extra');
 
-const collectCoverageFrom: string[] = [];
-const loop = (dirPath: string) => {
+const collectCoverageFrom = [];
+const loop = (dirPath) => {
   const files = readdirSync(dirPath);
   for (const file of files) {
     const filePath = path.join(dirPath, file);
@@ -16,7 +16,7 @@ const loop = (dirPath: string) => {
 };
 loop(__dirname);
 
-export default {
+module.exports = {
   displayName: 'ui',
   preset: '../../jest.preset.js',
   transform: {
@@ -27,4 +27,5 @@ export default {
   collectCoverageFrom,
   coverageReporters: ['clover', 'json', 'lcov', 'text'],
   coverageDirectory: '../../coverage/packages/ui',
+  setupFilesAfterEnv: ['./jest.setup.js'],
 };
diff --git a/packages/ui/jest.setup.js b/packages/ui/jest.setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/packages/ui/project.json b/packages/ui/project.json
@@ -47,7 +47,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/packages/ui"],
       "options": {
-        "jestConfig": "packages/ui/jest.config.ts",
+        "jestConfig": "packages/ui/jest.config.js",
         "passWithNoTests": true
       }
     }
diff --git a/packages/ui/tsconfig.lib.json b/packages/ui/tsconfig.lib.json
@@ -7,7 +7,8 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
-    "jest.config.ts",
+    "jest.setup.js",
+    "jest.config.js",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
diff --git a/packages/ui/tsconfig.spec.json b/packages/ui/tsconfig.spec.json
@@ -3,10 +3,9 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "@testing-library/jest-dom"]
   },
   "include": [
-    "jest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.tsx",
diff --git a/packages/utils/jest.config.js b/packages/utils/jest.config.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   displayName: 'utils',
   preset: '../../jest.preset.js',
   transform: {
diff --git a/packages/utils/project.json b/packages/utils/project.json
@@ -42,7 +42,7 @@
       "executor": "@nrwl/jest:jest",
       "outputs": ["coverage/packages/utils"],
       "options": {
-        "jestConfig": "packages/utils/jest.config.ts",
+        "jestConfig": "packages/utils/jest.config.js",
         "passWithNoTests": true
       }
     }
diff --git a/packages/utils/tsconfig.lib.json b/packages/utils/tsconfig.lib.json
@@ -7,7 +7,7 @@
   },
   "files": ["../../node_modules/@nrwl/react/typings/cssmodule.d.ts", "../../node_modules/@nrwl/react/typings/image.d.ts"],
   "exclude": [
-    "jest.config.ts",
+    "jest.config.js",
     "**/*.spec.ts",
     "**/*.test.ts",
     "**/*.spec.tsx",
diff --git a/packages/utils/tsconfig.spec.json b/packages/utils/tsconfig.spec.json
@@ -6,7 +6,6 @@
     "types": ["jest", "node"]
   },
   "include": [
-    "jest.config.ts",
     "**/*.test.ts",
     "**/*.spec.ts",
     "**/*.test.tsx",
diff --git a/packages/vscode-extension/tsconfig.lib.json b/packages/vscode-extension/tsconfig.lib.json
@@ -7,5 +7,5 @@
     "lib": ["ES2020"]
   },
   "include": ["**/*.ts"],
-  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"]
+  "exclude": ["jest.config.js", "**/*.spec.ts", "**/*.test.ts"]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export default {`
	`1`	`+module.exports = {`
`2`	`2`	`displayName: 'hooks',`
`3`	`3`	`preset: '../../jest.preset.js',`
`4`	`4`	`transform: {`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`	`"executor": "@nrwl/jest:jest",`
`43`	`43`	`"outputs": ["coverage/packages/hooks"],`
`44`	`44`	`"options": {`
`45`		`- "jestConfig": "packages/hooks/jest.config.ts",`
	`45`	`+ "jestConfig": "packages/hooks/jest.config.js",`
`46`	`46`	`"passWithNoTests": true`
`47`	`47`	`}`
`48`	`48`	`}`