Add interface for managing aliases (#1347)

* Add alias management

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Use React components instead of css classes

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Add tests

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Use notifications hook instead of redux methods

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Use test ids

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Use test ids in other place as well

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

src/components/editor-page/document-bar/aliases/aliases-modal.test.tsx

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { render } from '@testing-library/react'
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import type { CommonModalProps } from '../../../common/modals/common-modal'
+import * as CommonModalModule from '../../../common/modals/common-modal'
+import * as AliasesListModule from './aliases-list'
+import * as AliasesAddFormModule from './aliases-add-form'
+import * as useUiNotificationsModule from '../../../notifications/ui-notification-boundary'
+import { AliasesModal } from './aliases-modal'
+import { mockI18n } from '../../../markdown-renderer/test-utils/mock-i18n'
+
+jest.mock('./aliases-list')
+jest.mock('./aliases-add-form')
+jest.mock('../../../common/modals/common-modal')
+jest.mock('../../../notifications/ui-notification-boundary')
+
+describe('AliasesModal', () => {
+  beforeEach(async () => {
+    await mockI18n()
+    jest.spyOn(CommonModalModule, 'CommonModal').mockImplementation((({ children }) => {
+      return (
+        <span>
+          This is a mock implementation of a Modal: <dialog>{children}</dialog>
+        </span>
+      )
+    }) as React.FC<PropsWithChildren<CommonModalProps>>)
+    jest.spyOn(AliasesListModule, 'AliasesList').mockImplementation((() => {
+      return <span>This is a mock for the AliasesList that is tested separately.</span>
+    }) as React.FC)
+    jest.spyOn(AliasesAddFormModule, 'AliasesAddForm').mockImplementation((() => {
+      return <span>This is a mock for the AliasesAddForm that is tested separately.</span>
+    }) as React.FC)
+    jest.spyOn(useUiNotificationsModule, 'useUiNotifications').mockReturnValue({
+      showErrorNotification: jest.fn(),
+      dismissNotification: jest.fn(),
+      dispatchUiNotification: jest.fn()
+    })
+  })
+
+  afterAll(() => {
+    jest.resetAllMocks()
+    jest.resetModules()
+  })
+
+  it('renders the modal', () => {
+    const view = render(<AliasesModal show={true} />)
+    expect(view.container).toMatchSnapshot()
+  })
+})