From 35f563658a4cac062b805eee22214a0f3e7e3815 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= Date: Mon, 15 Apr 2024 19:17:23 +0200 Subject: [PATCH] Added tests --- .github/workflows/storybook-deploy.yml | 6 +- src/components/Atomic/Button/Button.types.ts | 2 +- .../Atomic/ColorPicker/ColorPicker.test.tsx | 11 + .../Atomic/ColorPicker/ColorPicker.tsx | 5 +- .../Atomic/ColorPicker/ColorPicker.types.ts | 1 + .../__snapshots__/ColorPicker.test.tsx.snap | 49 +++ .../ConditionalWrapper.test.tsx | 18 ++ .../ConfirmButton/ConfirmButton.test.tsx | 79 +++++ .../Atomic/ConfirmButton/ConfirmButton.tsx | 2 +- .../__snapshots__/ConfirmButton.test.tsx.snap | 43 +++ .../Atomic/ConfirmModal/ConfirmModal.test.tsx | 110 +++++++ .../Atomic/ConfirmModal/ConfirmModal.tsx | 7 +- .../__snapshots__/ConfirmModal.test.tsx.snap | 291 ++++++++++++++++++ src/components/Atomic/Modal/Modal.tsx | 1 + .../Modal/__snapshots__/Modal.test.tsx.snap | 1 + src/stories/Form/ConfirmButton.snip.tsx | 8 + src/stories/Form/ConfirmButton.stories.jsx | 24 ++ src/stories/Tag.stories.tsx | 2 +- 18 files changed, 647 insertions(+), 13 deletions(-) create mode 100644 src/components/Atomic/ColorPicker/ColorPicker.test.tsx create mode 100644 src/components/Atomic/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap create mode 100644 src/components/Atomic/ConfirmButton/ConfirmButton.test.tsx create mode 100644 src/components/Atomic/ConfirmButton/__snapshots__/ConfirmButton.test.tsx.snap create mode 100644 src/components/Atomic/ConfirmModal/ConfirmModal.test.tsx create mode 100644 src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap create mode 100644 src/stories/Form/ConfirmButton.snip.tsx create mode 100644 src/stories/Form/ConfirmButton.stories.jsx diff --git a/.github/workflows/storybook-deploy.yml b/.github/workflows/storybook-deploy.yml index 81ebc893..3e800e57 100644 --- a/.github/workflows/storybook-deploy.yml +++ b/.github/workflows/storybook-deploy.yml @@ -23,9 +23,9 @@ jobs: node-version: '20.x' - name: Install dependencies run: npm install - - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1 + - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 with: path: storybook-static checkout: false - env: - GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }} \ No newline at end of file + env: + GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/src/components/Atomic/Button/Button.types.ts b/src/components/Atomic/Button/Button.types.ts index ae615e06..4ba4223f 100644 --- a/src/components/Atomic/Button/Button.types.ts +++ b/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 = { diff --git a/src/components/Atomic/ColorPicker/ColorPicker.test.tsx b/src/components/Atomic/ColorPicker/ColorPicker.test.tsx new file mode 100644 index 00000000..bdad9dbf --- /dev/null +++ b/src/components/Atomic/ColorPicker/ColorPicker.test.tsx @@ -0,0 +1,11 @@ +import { render } from '@testing-library/react' +import ColorPicker from './ColorPicker' + +describe('', () => { + it('renders without crashing', () => { + const { container, asFragment } = render() + expect(container).toBeInTheDocument() + + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/src/components/Atomic/ColorPicker/ColorPicker.tsx b/src/components/Atomic/ColorPicker/ColorPicker.tsx index ca2346e0..b8c54f4b 100644 --- a/src/components/Atomic/ColorPicker/ColorPicker.tsx +++ b/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) => { - 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) => {
setOpen((prev) => !prev)} - ref={refs.setReference} >
renders without crashing 1`] = ` + + .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; +} + +
+
+
+ + #2261ae + +
+
+ +`; diff --git a/src/components/Atomic/ConditionalWrapper/ConditionalWrapper.test.tsx b/src/components/Atomic/ConditionalWrapper/ConditionalWrapper.test.tsx index 8f81ce32..425cbb95 100644 --- a/src/components/Atomic/ConditionalWrapper/ConditionalWrapper.test.tsx +++ b/src/components/Atomic/ConditionalWrapper/ConditionalWrapper.test.tsx @@ -12,4 +12,22 @@ describe('', () => { expect(asFragment()).toMatchSnapshot() }) + + it('renders children directly when condition is false', () => { + const { getByText } = render( +
{e}
}> +
inner content
+ + ) + expect(getByText('inner content')).toBeInTheDocument() + }) + + it('renders children within wrapper when condition is true', () => { + const { container } = render( +
{e}
}> +
inner content
+ + ) + expect(container.querySelector('.wrapper')).toBeInTheDocument() + }) }) diff --git a/src/components/Atomic/ConfirmButton/ConfirmButton.test.tsx b/src/components/Atomic/ConfirmButton/ConfirmButton.test.tsx new file mode 100644 index 00000000..e8e50347 --- /dev/null +++ b/src/components/Atomic/ConfirmButton/ConfirmButton.test.tsx @@ -0,0 +1,79 @@ +import { render, fireEvent, waitFor } from '@testing-library/react' +import ConfirmButton from './ConfirmButton' + +describe('', () => { + it('renders without crashing', () => { + const { container, asFragment } = render( + body
} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'> + Action + + ) + expect(container).toBeInTheDocument() + + expect(asFragment()).toMatchSnapshot() + }) + + it('opens ConfirmModal when clicked', () => { + const { getByRole, queryByRole } = render( + body
} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'> + Action + + ) + 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( + body
} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={mockOnConfirm} title='Title'> + Action + + ) + 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( + body
} cancelButtonText='Cancel' confirmButtonText='Confirm' onConfirm={() => {}} title='Title'> + Action + + ) + 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( + body} + cancelButtonText='Cancel' + closeOnConfirm={false} + confirmButtonText='Confirm' + onConfirm={() => {}} + title='Title' + > + Action + + ) + const button = getByRole('button') + fireEvent.click(button) + const confirmButton = getByRole('button', { name: /Confirm/i }) + fireEvent.click(confirmButton) + const modal = queryByRole('dialog') + expect(modal).toBeInTheDocument() + }) +}) diff --git a/src/components/Atomic/ConfirmButton/ConfirmButton.tsx b/src/components/Atomic/ConfirmButton/ConfirmButton.tsx index 9ff5feb1..870c2d26 100644 --- a/src/components/Atomic/ConfirmButton/ConfirmButton.tsx +++ b/src/components/Atomic/ConfirmButton/ConfirmButton.tsx @@ -17,7 +17,7 @@ const ConfirmButton: FC = (props) => { return ( <> - renders without crashing 1`] = ` + + .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; +} + + + +`; diff --git a/src/components/Atomic/ConfirmModal/ConfirmModal.test.tsx b/src/components/Atomic/ConfirmModal/ConfirmModal.test.tsx new file mode 100644 index 00000000..5ceb33e2 --- /dev/null +++ b/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('', () => { + it('renders without crashing', () => { + const { getByText, asFragment } = render( + ConfirmModal} + 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( + Body} + 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( + Body} + 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( + Body} + 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( + Body} + 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( + Body} + cancelButtonText='Cancel' + confirmButtonText='Confirm' + confirmDisabled={true} + onClose={() => {}} + onConfirm={onConfirm} + show={true} + title='Title' + /> + ) + fireEvent.click(getByText('Confirm')) + expect(onConfirm).not.toHaveBeenCalled() + }) +}) diff --git a/src/components/Atomic/ConfirmModal/ConfirmModal.tsx b/src/components/Atomic/ConfirmModal/ConfirmModal.tsx index bb86265e..fa67224f 100644 --- a/src/components/Atomic/ConfirmModal/ConfirmModal.tsx +++ b/src/components/Atomic/ConfirmModal/ConfirmModal.tsx @@ -1,22 +1,19 @@ import React, { FC } from 'react' -import { useIntl } from 'react-intl' import Button from '../Button' import Modal from '../Modal' -import { messages as t } from './ConfirmModal.i18n' import { defaultProps, Props } from './ConfirmModal.types' import ModalFooter from '../Modal/components/ModalFooter' const ConfirmModal: FC = (props) => { const { onConfirm, confirmButtonText, cancelButtonText, title, body, loading, show, onClose, data, confirmDisabled, ...rest } = props - const { formatMessage: _ } = useIntl() const renderFooter = ( } diff --git a/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap new file mode 100644 index 00000000..ede96d7d --- /dev/null +++ b/src/components/Atomic/ConfirmModal/__snapshots__/ConfirmModal.test.tsx.snap @@ -0,0 +1,291 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders without crashing 1`] = ` + + .emotion-0 { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(25, 26, 26, 0.9); + z-index: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: 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; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} + +.emotion-2 { + padding: 24px; + min-width: 600px; + max-width: 90%; + max-height: 90%; + border-radius: 8px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-transition: all 0.3s; + transition: all 0.3s; +} + +.emotion-3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + border-bottom: 2px solid; + padding: 12px 0 32px 0; +} + +.emotion-4 { + font-family: 'Circular Pro',sans-serif; + font-weight: 700; + font-style: normal; + font-size: 24px; + line-height: 30px; + letter-spacing: -0.5px; + margin: 0; + font-family: 'Circular Pro',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 30px; + letter-spacing: -0.5px; + max-width: 100%; +} + +@media (max-width: 767px) { + .emotion-4 { + font-size: 20px; + line-height: 24px; + } +} + +.emotion-5 { + font-family: 'Poppins',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 160%; + color: #81868C; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-text-decoration: none; + text-decoration: none; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} + +.emotion-5 span { + margin-right: 10px; +} + +.emotion-6 { + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 24px 0 0 0; +} + +.emotion-7 { + padding: 24px 0 0 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} + +.emotion-7 .modal-buttons { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 -8px; +} + +.emotion-7 .modal-buttons .modal-button { + margin: 0 4px; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; +} + +.emotion-9 { + 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; +} + +
+ + +`; diff --git a/src/components/Atomic/Modal/Modal.tsx b/src/components/Atomic/Modal/Modal.tsx index e5cb6cdb..a7921be8 100644 --- a/src/components/Atomic/Modal/Modal.tsx +++ b/src/components/Atomic/Modal/Modal.tsx @@ -157,6 +157,7 @@ export const Modal: FC = memo((props) => { id={id} initial='hidden' onClick={(e) => e.stopPropagation()} + role='dialog' style={{ width }} variants={dropIn} > diff --git a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap index 98717bf9..6e6acf7c 100644 --- a/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/components/Atomic/Modal/__snapshots__/Modal.test.tsx.snap @@ -165,6 +165,7 @@ exports[` render correctly - snapshot 1`] = ` >