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`] = `
+
+`;
+
+exports[`CommonModal render correctly in size sm 1`] = `
+
+`;
+
+exports[`CommonModal render correctly in size xl 1`] = `
+
+`;
+
+exports[`CommonModal render correctly with additionalClasses 1`] = `
+
+`;
+
+exports[`CommonModal render correctly with i18nTitle 1`] = `
+
+`;
+
+exports[`CommonModal render correctly with title 1`] = `
+
+`;
+
+exports[`CommonModal render correctly with title icon 1`] = `
+
+`;
+
+exports[`CommonModal renders correctly and calls onHide, when close button is clicked 1`] = `
+
+`;
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`] = `
+
+`;
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()
+ })
+})