mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-21 17:26:29 -05:00
test: common modals (#2069)
* test: add tests for common-modal Signed-off-by: Philip Molares <philip.molares@udo.edu> Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Philip Molares
GitHub
parent
5a904e6ce4
commit
7b40227115
5 changed files with 351 additions and 0 deletions
|
|
@ -0,0 +1,173 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CommonModal does not render if show is false 1`] = `<div />`;
|
||||
|
||||
exports[`CommonModal render correctly in size lg 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark modal-lg"
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly in size sm 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark modal-sm"
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly in size xl 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark modal-xl"
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly with additionalClasses 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark testClass"
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly with i18nTitle 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark "
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly with title 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark "
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal render correctly with title icon 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark "
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
>
|
||||
<i
|
||||
class="fa fa-heart "
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CommonModal renders correctly and calls onHide, when close button is clicked 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark "
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-close"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
testText
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
|
||||
<div
|
||||
class="modal-dialog text-dark "
|
||||
data-testid="commonModal"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-header"
|
||||
>
|
||||
<div
|
||||
class="modal-title h4"
|
||||
/>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-close"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="text-dark modal-body"
|
||||
>
|
||||
testText
|
||||
</div>
|
||||
<div
|
||||
class="modal-footer"
|
||||
>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
type="button"
|
||||
>
|
||||
testDeletionButton
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
113
src/components/common/modals/common-modal.test.tsx
Normal file
113
src/components/common/modals/common-modal.test.tsx
Normal file
|
|
@ -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(<CommonModal show={false}>testText</CommonModal>)
|
||||
expect(view.container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('renders correctly and calls onHide, when close button is clicked', async () => {
|
||||
const onHide = jest.fn()
|
||||
render(
|
||||
<CommonModal show={true} onHide={onHide} showCloseButton={true}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
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(
|
||||
<CommonModal show={true} title={'testTitle'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('render correctly with i18nTitle', async () => {
|
||||
render(
|
||||
<CommonModal show={true} title={'testTitle'} titleIsI18nKey={true}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('render correctly with title icon', async () => {
|
||||
render(
|
||||
<CommonModal show={true} titleIcon={'heart'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('render correctly with additionalClasses', async () => {
|
||||
render(
|
||||
<CommonModal show={true} additionalClasses={'testClass'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
describe('render correctly in size', () => {
|
||||
it('lg', async () => {
|
||||
render(
|
||||
<CommonModal show={true} modalSize={'lg'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('sm', async () => {
|
||||
render(
|
||||
<CommonModal show={true} modalSize={'sm'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('xl', async () => {
|
||||
render(
|
||||
<CommonModal show={true} modalSize={'xl'}>
|
||||
testText
|
||||
</CommonModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -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<PropsWithChildren<CommonModalProps>> = ({
|
|||
show={show}
|
||||
onHide={onHide}
|
||||
animation={true}
|
||||
{...testId('commonModal')}
|
||||
dialogClassName={`text-dark ${additionalClasses ?? ''}`}
|
||||
size={modalSize}>
|
||||
<Modal.Header closeButton={!!showCloseButton}>
|
||||
|
|
|
|||
23
src/components/common/modals/deletion-moadal.test.tsx
Normal file
23
src/components/common/modals/deletion-moadal.test.tsx
Normal file
|
|
@ -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(
|
||||
<DeletionModal onConfirm={onConfirm} deletionButtonI18nKey={'testDeletionButton'} show={true}>
|
||||
testText
|
||||
</DeletionModal>
|
||||
)
|
||||
const modal = await screen.findByTestId('commonModal')
|
||||
expect(modal).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue