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>

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`] = `<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>
+`;

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`] = `
+<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>
+`;

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

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<PropsWithChildren<CommonModalProps>> = ({
         show={show}
         onHide={onHide}
         animation={true}
+        {...testId('commonModal')}
         dialogClassName={`text-dark ${additionalClasses ?? ''}`}
         size={modalSize}>
         <Modal.Header closeButton={!!showCloseButton}>

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(
+      <DeletionModal onConfirm={onConfirm} deletionButtonI18nKey={'testDeletionButton'} show={true}>
+        testText
+      </DeletionModal>
+    )
+    const modal = await screen.findByTestId('commonModal')
+    expect(modal).toMatchSnapshot()
+  })
+})