From 7b40227115e8d1f4d8bd17e9912b8ebb3b373709 Mon Sep 17 00:00:00 2001 From: Philip Molares Date: Sun, 6 Nov 2022 23:04:51 +0100 Subject: [PATCH] test: common modals (#2069) * test: add tests for common-modal Signed-off-by: Philip Molares Signed-off-by: Tilman Vatteroth --- .../__snapshots__/common-modal.test.tsx.snap | 173 ++++++++++++++++++ .../deletion-moadal.test.tsx.snap | 40 ++++ .../common/modals/common-modal.test.tsx | 113 ++++++++++++ src/components/common/modals/common-modal.tsx | 2 + .../common/modals/deletion-moadal.test.tsx | 23 +++ 5 files changed, 351 insertions(+) create mode 100644 src/components/common/modals/__snapshots__/common-modal.test.tsx.snap create mode 100644 src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap create mode 100644 src/components/common/modals/common-modal.test.tsx create mode 100644 src/components/common/modals/deletion-moadal.test.tsx diff --git a/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap b/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap new file mode 100644 index 000000000..bf2744106 --- /dev/null +++ b/src/components/common/modals/__snapshots__/common-modal.test.tsx.snap @@ -0,0 +1,173 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CommonModal does not render if show is false 1`] = `
`; + +exports[`CommonModal render correctly in size lg 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly in size sm 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly in size xl 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly with additionalClasses 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly with i18nTitle 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly with title 1`] = ` +
+
+
+
+
+ testText +
+
+`; + +exports[`CommonModal render correctly with title icon 1`] = ` +
+
+
+
+ +   +
+
+ testText +
+
+`; + +exports[`CommonModal renders correctly and calls onHide, when close button is clicked 1`] = ` +
+
+
+
+
+ testText +
+
+`; diff --git a/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap b/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap new file mode 100644 index 000000000..e1f40183e --- /dev/null +++ b/src/components/common/modals/__snapshots__/deletion-moadal.test.tsx.snap @@ -0,0 +1,40 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = ` +
+
+
+
+
+
+ testText +
+
+ +
+
+
+`; diff --git a/src/components/common/modals/common-modal.test.tsx b/src/components/common/modals/common-modal.test.tsx new file mode 100644 index 000000000..b241b7bf6 --- /dev/null +++ b/src/components/common/modals/common-modal.test.tsx @@ -0,0 +1,113 @@ +/* + * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { fireEvent, render, screen } from '@testing-library/react' +import { CommonModal } from './common-modal' +import React from 'react' + +describe('CommonModal', () => { + afterAll(() => { + jest.resetAllMocks() + jest.resetModules() + }) + + it('does not render if show is false', () => { + const view = render(testText) + expect(view.container).toMatchSnapshot() + }) + + it('renders correctly and calls onHide, when close button is clicked', async () => { + const onHide = jest.fn() + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + const closeButton = await screen.findByRole('button') + fireEvent( + closeButton, + new MouseEvent('click', { + bubbles: true, + cancelable: true + }) + ) + expect(onHide).toHaveBeenCalled() + }) + + it('render correctly with title', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + it('render correctly with i18nTitle', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + it('render correctly with title icon', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + it('render correctly with additionalClasses', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + describe('render correctly in size', () => { + it('lg', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + it('sm', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + + it('xl', async () => { + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) + }) +}) diff --git a/src/components/common/modals/common-modal.tsx b/src/components/common/modals/common-modal.tsx index 91b51ef4c..9524fb8b1 100644 --- a/src/components/common/modals/common-modal.tsx +++ b/src/components/common/modals/common-modal.tsx @@ -13,6 +13,7 @@ import type { IconName } from '../fork-awesome/types' import { ShowIf } from '../show-if/show-if' import type { PropsWithDataCypressId } from '../../../utils/cypress-attribute' import { cypressId } from '../../../utils/cypress-attribute' +import { testId } from '../../../utils/test-id' export interface ModalVisibilityProps { show: boolean @@ -69,6 +70,7 @@ export const CommonModal: React.FC> = ({ show={show} onHide={onHide} animation={true} + {...testId('commonModal')} dialogClassName={`text-dark ${additionalClasses ?? ''}`} size={modalSize}> diff --git a/src/components/common/modals/deletion-moadal.test.tsx b/src/components/common/modals/deletion-moadal.test.tsx new file mode 100644 index 000000000..a4026fc92 --- /dev/null +++ b/src/components/common/modals/deletion-moadal.test.tsx @@ -0,0 +1,23 @@ +/* + * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { mockI18n } from '../../markdown-renderer/test-utils/mock-i18n' +import { render, screen } from '@testing-library/react' +import { DeletionModal } from './deletion-modal' + +describe('DeletionModal', () => { + it('renders correctly with deletionButtonI18nKey', async () => { + await mockI18n() + const onConfirm = jest.fn() + render( + + testText + + ) + const modal = await screen.findByTestId('commonModal') + expect(modal).toMatchSnapshot() + }) +})