Add button testing and jest dependencies. (#3532)

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "plugins": ["@typescript-eslint"],
+    "plugins": ["@typescript-eslint", "jest-dom"],
     "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
     "rules": {
         "@next/next/no-img-element": "off",

components/lib/button/Button.spec.js

@@ -0,0 +1,82 @@
+import { render } from '@testing-library/react';
+import { Button } from './Button';  
+import '@testing-library/jest-dom';
+
+describe('Button', () => {
+    test('when visible is false Button return null', () => {
+        const { container } = render(<Button label={'test'} visible={false} />);
+
+        expect(container.getElementsByClassName('p-button').length).toBe(0);
+    });
+
+    test('when visible is true Button render correctly', () => {
+        const { container } = render(<Button label={'test'} visible={true} />);
+
+        expect(container.getElementsByClassName('p-button').length).toBe(1);
+    });
+
+    test('when visible is false Button return null', () => {
+        const { container } = render(<Button label={'test'} iconPos={'bottom'} visible={true} />);
+
+        expect(container.getElementsByClassName('p-button-vertical').length).toBe(1);
+    });
+
+    test('when label is empty it returns empty button', async () => {
+        const { container } = render(<Button visible={true} />);
+        const button = container.getElementsByClassName('p-button-label p-c');
+
+        expect(button[0].innerHTML).toBe('&nbsp;');
+    });
+
+    test('when badge is true it renders Button with badge', () => {
+        const { container } = render(<Button badge={'test'} />);
+
+        expect(container.getElementsByClassName('p-badge').length).toBe(1);
+    });
+
+    test('when badge is true it renders Button with badge', () => {
+        const { container } = render(<Button />);
+
+        expect(container.getElementsByClassName('p-badge').length).toBe(0);
+    });
+
+    test('when click the button if loading is true it renders Button with loading icon', () => {
+        const { container } = render(<Button loading={'test'} />);
+
+        expect(container.getElementsByClassName('p-button-icon').length).toBe(1);
+    });
+
+    test('when click the button if loading is false it renders Button without loading icon', () => {
+        const { container } = render(<Button />);
+
+        expect(container.getElementsByClassName('p-button-loading-icon').length).toBe(0);
+    });
+
+    test('when label is true it renders Button with default aria label', () => {
+        const { container } = render(<Button />);
+        const hasAreaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
+
+        expect(hasAreaLabel).toBe(null);
+    });
+
+    test('when aria-label prop is not exist aria-label prop should be equal to label prop ', () => {
+        const { container } = render(<Button label={'test'} />);
+        const getAreaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
+
+        expect(getAreaLabel).toBe('test');
+    });
+
+    test('when label prop is not exist label prop should be equal to aria-label prop', () => {
+        const { container } = render(<Button aria-label={'test'} />);
+        const getAreaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
+
+        expect(getAreaLabel).toBe('test');
+    });
+    //
+    test('....', () => {
+        const { container } = render(<Button label={'test'} badge={'lost'} />);
+        const getAreaLabel = container.getElementsByClassName('p-button')[0].getAttribute('aria-label');
+
+        expect(getAreaLabel).toBe('test lost');
+    });
+});

jest.config.js

@@ -0,0 +1,19 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

package.json

@@ -15,7 +15,8 @@
         "format:check": "prettier --check \"{components,pages,service,api-generator}/**/*.{js,ts,tsx}\"",
         "lint": "next lint --max-warnings=0",
         "lint:fix": "next lint --fix",
-        "type:check": "tsc"
+        "type:check": "tsc",
+        "test": "jest --watch --coverage"
     },
     "dependencies": {
         "chart.js": "3.9.1",
@@ -46,6 +47,8 @@
         "@rollup/plugin-commonjs": "^23.0.2",
         "@rollup/plugin-node-resolve": "^14.1.0",
         "@rollup/plugin-replace": "^5.0.1",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^12.1.2",
         "@types/node": "^18.11.7",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
@@ -54,12 +57,15 @@
         "eslint": "8.24.0",
         "eslint-config-next": "13.0.0",
         "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-jest-dom": "^4.0.2",
         "gulp": "^4.0.2",
         "gulp-concat": "^2.6.1",
         "gulp-flatten": "^0.4.0",
         "gulp-rename": "^2.0.0",
         "gulp-uglify": "^3.0.2",
         "gulp-uglifycss": "^1.1.0",
+        "jest": "^29.2.1",
+        "jest-environment-jsdom": "^29.2.1",
         "prettier": "2.7.1",
         "rollup": "^2.79.1",
         "rollup-plugin-postcss": "^4.0.0",