Added tests

.github/workflows/storybook-deploy.yml

@@ -23,9 +23,9 @@ jobs:
           node-version: '20.x'
       - name: Install dependencies
         run: npm install
-      - uses: bitovi/[email protected].1
+      - uses: bitovi/[email protected].3
         with:
           path: storybook-static
           checkout: false
-        env:
-          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
+          env:
+            GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}

src/components/Atomic/Button/Button.types.ts

@@ -8,6 +8,7 @@ export type ButtonSizesType = (typeof buttonSizes)[keyof typeof buttonSizes]
 export type Props = {
     children: ReactNode
     className?: string
+    dataTestId?: string
     disabled?: boolean
     fullWidth?: boolean
     htmlType?: 'submit' | 'button' | 'reset'
@@ -22,7 +23,6 @@ export type Props = {
     style?: CSSProperties
     tabIndex?: number
     variant?: ButtonVariantsType
-    dataTestId?: string
 }
 
 export const defaultProps: Partial<Props> = {

src/components/Atomic/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+import ColorPicker from './ColorPicker'
+
+describe('<ColorPicker>', () => {
+    it('renders without crashing', () => {
+        const { container, asFragment } = render(<ColorPicker />)
+        expect(container).toBeInTheDocument()
+
+        expect(asFragment()).toMatchSnapshot()
+    })
+})

src/components/Atomic/ColorPicker/ColorPicker.tsx

@@ -12,7 +12,7 @@ import { rgbToHex, hexToRgbA } from '../_utils/commonStyles'
 import { colors } from '../_utils/colors'
 
 const ColorPicker: FC<Props> = (props) => {
-    const { defaultColor: defaultColorProps, className, id, menuProps, portalTarget, onToggle, onColorChange } = { ...defaultProps, ...props }
+    const { defaultColor: defaultColorProps, className, dataTestId, id, menuProps, portalTarget, onToggle, onColorChange } = { ...defaultProps, ...props }
     const defaultColor: RGBColor = useMemo(() => {
         if (typeof defaultColorProps === 'string') {
             if (defaultColorProps.length === 7) {
@@ -89,6 +89,7 @@ const ColorPicker: FC<Props> = (props) => {
             }}
         >
             <ChromePicker
+                className='color-picker'
                 color={color}
                 onChange={handleChange}
                 styles={{
@@ -106,8 +107,8 @@ const ColorPicker: FC<Props> = (props) => {
         <div className={className} id={id} ref={ref}>
             <div
                 css={[styles.colorPicker, getValue(color).startsWith('#') ? styles.hex : styles.rgba]}
+                data-test-id={dataTestId}
                 onClick={() => setOpen((prev) => !prev)}
-                ref={refs.setReference}
             >
                 <div
                     css={styles.color}

src/components/Atomic/ColorPicker/ColorPicker.types.ts

@@ -4,6 +4,7 @@ import { RGBColor } from 'react-color'
 
 export type Props = {
     className?: string
+    dataTestId?: string
     defaultColor?: RGBColor | string
     id?: string
     menuProps?: {

src/components/Atomic/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ColorPicker> renders without crashing 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 4px;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 1px solid;
+  width: 115px;
+}
+
+.emotion-1 {
+  width: 40px;
+  height: 16px;
+  border-radius: 8px;
+}
+
+.emotion-2 {
+  font-size: 12px;
+  display: block;
+  padding: 0 8px;
+}
+
+<div>
+    <div
+      class="emotion-0"
+    >
+      <div
+        class="emotion-1"
+        style="background: rgb(34, 97, 174);"
+      />
+      <span
+        class="emotion-2"
+      >
+        #2261ae
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/components/Atomic/ConditionalWrapper/ConditionalWrapper.test.tsx

@@ -12,4 +12,22 @@ describe('<ConditionalWrapper>', () => {
 
         expect(asFragment()).toMatchSnapshot()
     })
+
+    it('renders children directly when condition is false', () => {
+        const { getByText } = render(
+            <ConditionalWrapper condition={false} wrapper={(e) => <div>{e}</div>}>
+                <div>inner content</div>
+            </ConditionalWrapper>
+        )
+        expect(getByText('inner content')).toBeInTheDocument()
+    })
+
+    it('renders children within wrapper when condition is true', () => {
+        const { container } = render(
+            <ConditionalWrapper condition={true} wrapper={(e) => <div className='wrapper'>{e}</div>}>
+                <div>inner content</div>
+            </ConditionalWrapper>
+        )
+        expect(container.querySelector('.wrapper')).toBeInTheDocument()
+    })
 })

src/components/Atomic/ConfirmButton/ConfirmButton.test.tsx

@@ -0,0 +1,79 @@
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import ConfirmButton from './ConfirmButton'
+
+describe('<ConfirmButton>', () => {
+    it('renders without crashing', () => {
+        const { container, asFragment } = render(
+            <ConfirmButton body={<div>body</div>} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'>
+                Action
+            </ConfirmButton>
+        )
+        expect(container).toBeInTheDocument()
+
+        expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('opens ConfirmModal when clicked', () => {
+        const { getByRole, queryByRole } = render(
+            <ConfirmButton body={<div>body</div>} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'>
+                Action
+            </ConfirmButton>
+        )
+        const button = getByRole('button')
+        fireEvent.click(button)
+        const modal = queryByRole('dialog')
+        expect(modal).toBeInTheDocument()
+    })
+
+    it('calls onConfirm when confirm button in modal is clicked', () => {
+        const mockOnConfirm = jest.fn()
+        const { getByRole, getByText } = render(
+            <ConfirmButton body={<div>body</div>} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={mockOnConfirm} title='Title'>
+                Action
+            </ConfirmButton>
+        )
+        const button = getByRole('button')
+        fireEvent.click(button)
+        const confirmButton = getByText('Confirm')
+        fireEvent.click(confirmButton)
+        expect(mockOnConfirm).toHaveBeenCalled()
+    })
+
+    it('closes ConfirmModal when closeOnConfirm is true', async () => {
+        const { getByRole, queryByRole } = render(
+            <ConfirmButton closeOnConfirm body={<div>body</div>} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'>
+                Action
+            </ConfirmButton>
+        )
+        const button = getByRole('button')
+        fireEvent.click(button)
+        const confirmButton = getByRole('button', { name: /Confirm/i })
+        fireEvent.click(confirmButton)
+        const modal = queryByRole('dialog')
+
+        await waitFor(() => {
+            expect(modal).not.toBeInTheDocument()
+        })
+    })
+
+    it('does not close ConfirmModal when closeOnConfirm is false', () => {
+        const { getByRole, queryByRole } = render(
+            <ConfirmButton
+                body={<div>body</div>}
+                cancelButtonText='Cancel'
+                closeOnConfirm={false}
+                confirmButtonText='Confirm'
+                onConfirm={() => {}}
+                title='Title'
+            >
+                Action
+            </ConfirmButton>
+        )
+        const button = getByRole('button')
+        fireEvent.click(button)
+        const confirmButton = getByRole('button', { name: /Confirm/i })
+        fireEvent.click(confirmButton)
+        const modal = queryByRole('dialog')
+        expect(modal).toBeInTheDocument()
+    })
+})

src/components/Atomic/ConfirmButton/ConfirmButton.tsx

@@ -17,7 +17,7 @@ const ConfirmButton: FC<Props> = (props) => {
 
     return (
         <>
-            <Button {...rest} loading={loading} onClick={(e) => setShow(true)}>
+            <Button {...rest} loading={loading} onClick={() => setShow(true)}>
                 {children}
             </Button>
             <ConfirmModal

src/components/Atomic/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConfirmButton> renders without crashing 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-transition: all 0.25s;
+  transition: all 0.25s;
+  font-family: 'Poppins',sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  text-align: center;
+  border-radius: 8px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: 1px solid;
+  padding: 10px 24px;
+  font-size: 14px;
+  line-height: 16px;
+  height: 48px;
+}
+
+<button
+    class="emotion-0"
+    tabindex="1"
+    type="submit"
+  >
+    Action
+  </button>
+</DocumentFragment>
+`;

src/components/Atomic/ConfirmModal/ConfirmModal.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import ConfirmModal from './ConfirmModal'
+
+describe('<ConfirmModal>', () => {
+    it('renders without crashing', () => {
+        const { getByText, asFragment } = render(
+            <ConfirmModal
+                body={<div>ConfirmModal</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                onClose={() => {}}
+                onConfirm={() => {}}
+                show={true}
+                title='Title'
+            />
+        )
+        expect(getByText('ConfirmModal')).toBeInTheDocument()
+
+        expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('calls onClose when cancel button is clicked', () => {
+        const onClose = jest.fn()
+        const { getByText } = render(
+            <ConfirmModal
+                body={<div>Body</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                onClose={onClose}
+                onConfirm={() => {}}
+                show={true}
+                title='Title'
+            />
+        )
+        fireEvent.click(getByText('Cancel'))
+        expect(onClose).toHaveBeenCalled()
+    })
+
+    it('calls onConfirm when confirm button is clicked', () => {
+        const onConfirm = jest.fn()
+        const { getByText } = render(
+            <ConfirmModal
+                body={<div>Body</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                onClose={() => {}}
+                onConfirm={onConfirm}
+                show={true}
+                title='Title'
+            />
+        )
+        fireEvent.click(getByText('Confirm'))
+        expect(onConfirm).toHaveBeenCalled()
+    })
+
+    it('does not call onClose when loading', () => {
+        const onClose = jest.fn()
+        const { getByText } = render(
+            <ConfirmModal
+                body={<div>Body</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                loading={true}
+                onClose={onClose}
+                onConfirm={() => {}}
+                show={true}
+                title='Title'
+            />
+        )
+        fireEvent.click(getByText('Cancel'))
+        expect(onClose).not.toHaveBeenCalled()
+    })
+
+    it('does not call onConfirm when loading', () => {
+        const onConfirm = jest.fn()
+        const { getByText } = render(
+            <ConfirmModal
+                body={<div>Body</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                loading={true}
+                onClose={() => {}}
+                onConfirm={onConfirm}
+                show={true}
+                title='Title'
+            />
+        )
+        fireEvent.click(getByText('Confirm'))
+        expect(onConfirm).not.toHaveBeenCalled()
+    })
+
+    it('does not call onConfirm when confirmDisabled', () => {
+        const onConfirm = jest.fn()
+        const { getByText } = render(
+            <ConfirmModal
+                body={<div>Body</div>}
+                cancelButtonText='Cancel'
+                confirmButtonText='Confirm'
+                confirmDisabled={true}
+                onClose={() => {}}
+                onConfirm={onConfirm}
+                show={true}
+                title='Title'
+            />
+        )
+        fireEvent.click(getByText('Confirm'))
+        expect(onConfirm).not.toHaveBeenCalled()
+    })
+})