Improved Jest config, Github Action, added Button UI test

.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

.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

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)/)']
 }

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 .",

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')
+    })
+})