From 1011e62a48a95378bebbccd0065e27f3b4825573 Mon Sep 17 00:00:00 2001
From: Misha Topchilo <20854498+miksrv@users.noreply.github.com>
Date: Sun, 6 Oct 2024 09:13:36 -0700
Subject: [PATCH] Improved Jest config, Github Action, added Button UI test

---
 .github/workflows/checks.yml          |  5 +-
 .github/workflows/sonarcloud.yml      |  2 +-
 jest.config.ts                        |  1 -
 package.json                          |  2 +
 src/components/button/Button.test.tsx | 96 +++++++++++++++++++++++++++
 5 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 src/components/button/Button.test.tsx

diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index acc1f6c..ef514b3 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -60,9 +60,8 @@ jobs:
                       ${{ runner.os }}-dist-
                       ${{ runner.os }}-
 
-            # - name: UI Unit Tests
-            #  run: yarn test
-            #  working-directory: client
+            - name: UI Unit Tests
+              run: yarn test
 
             - if: ${{ steps.cache-build.outputs.cache-hit != 'true' }}
               name: Build UI
diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml
index d2f560f..4f75506 100644
--- a/.github/workflows/sonarcloud.yml
+++ b/.github/workflows/sonarcloud.yml
@@ -48,7 +48,7 @@ jobs:
               run: yarn install
 
             - name: UI Unit Tests
-              run: yarn test
+              run: yarn test:coverage
 
             - name: Extract version from tag
               id: version
diff --git a/jest.config.ts b/jest.config.ts
index c396932..4da3d6a 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -9,7 +9,6 @@ const config: Config = {
         '^.+\\.tsx?$': ['ts-jest', { useESM: true }]
     },
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.d.ts'],
-    collectCoverage: true,
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
     transformIgnorePatterns: ['node_modules/(?!(module-to-transform)/)']
 }
diff --git a/package.json b/package.json
index b6ece57..ca0a014 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
         "release": "changeset publish",
         "start": "webpack serve --config example/webpack.config.js",
         "test": "jest",
+        "test:coverage": "jest --coverage",
+        "test:watch": "jest --watch --testNamePattern",
         "eslint:check": "eslint",
         "eslint:fix": "eslint --fix",
         "prettier:check": "prettier --check .",
diff --git a/src/components/button/Button.test.tsx b/src/components/button/Button.test.tsx
new file mode 100644
index 0000000..2dc393a
--- /dev/null
+++ b/src/components/button/Button.test.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+
+import '@testing-library/jest-dom/jest-globals'
+import '@testing-library/jest-dom'
+
+import Button, { ButtonProps } from './Button'
+
+import { fireEvent, screen } from '@testing-library/dom'
+import { render } from '@testing-library/react'
+
+describe('Button Component', () => {
+    const defaultProps: ButtonProps = {
+        label: 'Click Me',
+        mode: 'primary',
+        size: 'medium'
+    }
+
+    it('renders the button with label', () => {
+        render(<Button {...defaultProps} />)
+        const buttonElement = screen.getByText(/Click Me/i)
+        expect(buttonElement).toBeInTheDocument()
+    })
+
+    it('applies the correct className based on mode and size', () => {
+        render(
+            <Button
+                {...defaultProps}
+                className='custom-class'
+            />
+        )
+        const buttonElement = screen.getByText(/Click Me/i)
+        expect(buttonElement).toHaveClass('custom-class')
+        expect(buttonElement).toHaveClass('button')
+        expect(buttonElement).toHaveClass('primary')
+        expect(buttonElement).toHaveClass('medium')
+    })
+
+    it('displays the spinner when loading is true', () => {
+        const { container } = render(
+            <Button
+                {...defaultProps}
+                loading={true}
+            />
+        )
+
+        const iconElement = container.querySelector('svg')
+        expect(iconElement).toBeInTheDocument()
+    })
+
+    it('renders an icon if icon prop is provided', () => {
+        const { container } = render(
+            <Button
+                {...defaultProps}
+                icon='CheckCircle'
+            />
+        )
+        const iconElement = container.querySelector('svg')
+        expect(iconElement).toBeInTheDocument()
+    })
+
+    it('handles click events', () => {
+        const handleClick = jest.fn()
+        render(
+            <Button
+                {...defaultProps}
+                onClick={handleClick}
+            />
+        )
+        const buttonElement = screen.getByText(/Click Me/i)
+        fireEvent.click(buttonElement)
+        expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders a link if the link prop is provided', () => {
+        render(
+            <Button
+                {...defaultProps}
+                link='https://example.com'
+            />
+        )
+        const linkElement = screen.getByRole('link')
+        expect(linkElement).toHaveAttribute('href', 'https://example.com')
+    })
+
+    it('renders noindex attribute when noIndex is true', () => {
+        render(
+            <Button
+                {...defaultProps}
+                link='https://example.com'
+                noIndex={true}
+            />
+        )
+        const linkElement = screen.getByRole('link')
+        expect(linkElement).toHaveAttribute('rel', 'noindex nofollow')
+    })
+})