Remove some module mocking in frontend tests

frontend/src/components/archive-list/ArchiveList.test.tsx

@@ -1,51 +1,55 @@
-import { render, textFragment } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
+import { Router } from 'wouter';
+import { memoryLocation } from 'wouter/memory-location';
+import {
+  fireEvent,
+  render,
+  textFragment,
+} from 'flexible-testing-library-react';
+import { formatDateTime } from '../../time/formatters';
 import { css } from '../../test-helpers/queries';
 
 import { ArchiveList } from './ArchiveList';
 
-jest.mock('./ArchiveLink', () => ({
-  ArchiveLink: mockElement('mock-archive-link'),
-}));
-
 describe('ArchiveList', () => {
   it('displays a message if there are no archives', () => {
     const dom = render(<ArchiveList slug="foo" archives={[]} />);
 
     expect(dom).toContainElementWith(textFragment('has no archives'));
   });
 
-  it('displays no message if there are archives', () => {
+  it('displays a list of archives', () => {
+    const time1 = Date.parse('2021-02-03T04:05:06Z');
+    const time2 = Date.parse('2000-01-01T00:00:00Z');
     const archives = [
-      { id: 'a1', created: 10 },
-      { id: 'a2', created: 0 },
+      { id: 'a1', created: time1 },
+      { id: 'a2', created: time2 },
     ];
+
     const dom = render(<ArchiveList slug="foo" archives={archives} />);
 
+    const links = dom.getAllBy(css('.archive-link'));
+
+    expect(links[0]).toHaveAttribute('href', '/retros/foo/archives/a1');
+    expect(links[0]).toHaveTextContent(formatDateTime(time1));
+    expect(links[1]).toHaveAttribute('href', '/retros/foo/archives/a2');
+    expect(links[1]).toHaveTextContent(formatDateTime(time2));
+
     expect(dom).not.toContainElementWith(textFragment('has no archives'));
   });
 
-  it('displays a list of archives', () => {
-    const archives = [
-      { id: 'a1', created: 10 },
-      { id: 'a2', created: 0 },
-    ];
-
-    const dom = render(<ArchiveList slug="foo" archives={archives} />);
+  it('links to each archive', () => {
+    const archives = [{ id: 'a1', created: 10 }];
+    const location = memoryLocation({ path: '/', record: true });
 
-    const links = dom.getAllBy(css('mock-archive-link'));
+    const dom = render(
+      <Router hook={location.hook}>
+        <ArchiveList slug="foo" archives={archives} />
+      </Router>,
+    );
 
-    expect(links[0]?.mockProps).toEqual({
-      retroSlug: 'foo',
-      archiveId: 'a1',
-      created: 10,
-    });
+    fireEvent.click(dom.getBy(css('.archive-link')));
 
-    expect(links[1]?.mockProps).toEqual({
-      retroSlug: 'foo',
-      archiveId: 'a2',
-      created: 0,
-    });
+    expect(location.history).toEqual(['/', '/retros/foo/archives/a1']);
   });
 
   it('orders archives newest-to-oldest', () => {
@@ -57,10 +61,10 @@ describe('ArchiveList', () => {
 
     const dom = render(<ArchiveList slug="foo" archives={archives} />);
 
-    const links = dom.getAllBy(css('mock-archive-link'));
+    const links = dom.getAllBy(css('.archive-link'));
 
-    expect(links[0]?.mockProps['archiveId']).toEqual('a1');
-    expect(links[1]?.mockProps['archiveId']).toEqual('a3');
-    expect(links[2]?.mockProps['archiveId']).toEqual('a2');
+    expect(links[0]).toHaveAttribute('href', '/retros/foo/archives/a1');
+    expect(links[1]).toHaveAttribute('href', '/retros/foo/archives/a3');
+    expect(links[2]).toHaveAttribute('href', '/retros/foo/archives/a2');
   });
 });

frontend/src/components/archive-list/ArchiveList.tsx

@@ -1,20 +1,7 @@
 import { memo } from 'react';
+import { Link } from 'wouter';
 import { type RetroArchiveSummary } from '../../shared/api-entities';
-import { ArchiveLink } from './ArchiveLink';
-
-function archiveCreatedComparator(
-  a: RetroArchiveSummary,
-  b: RetroArchiveSummary,
-): number {
-  // sort newer-to-older
-  return b.created - a.created;
-}
-
-function sortArchives(archives: RetroArchiveSummary[]): RetroArchiveSummary[] {
-  const sorted = archives.slice();
-  sorted.sort(archiveCreatedComparator);
-  return sorted;
-}
+import { formatDateTime } from '../../time/formatters';
 
 interface PropsT {
   slug: string;
@@ -30,9 +17,28 @@ export const ArchiveList = memo(({ slug, archives }: PropsT) => {
     <ul className="archives">
       {sortArchives(archives).map(({ id, created }) => (
         <li key={id}>
-          <ArchiveLink retroSlug={slug} archiveId={id} created={created} />
+          <Link
+            className="archive-link"
+            to={`/retros/${encodeURIComponent(slug)}/archives/${encodeURIComponent(id)}`}
+          >
+            {formatDateTime(created)}
+          </Link>
         </li>
       ))}
     </ul>
   );
 });
+
+function sortArchives(archives: RetroArchiveSummary[]): RetroArchiveSummary[] {
+  const sorted = archives.slice();
+  sorted.sort(archiveCreatedComparator);
+  return sorted;
+}
+
+function archiveCreatedComparator(
+  a: RetroArchiveSummary,
+  b: RetroArchiveSummary,
+): number {
+  // sort newer-to-older
+  return b.created - a.created;
+}

frontend/src/components/archive-list/ArchiveListPage.test.tsx

@@ -6,7 +6,6 @@ import { css } from '../../test-helpers/queries';
 
 import { ArchiveListPage } from './ArchiveListPage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
 jest.mock('./ArchiveList', () => ({
   ArchiveList: mockElement('mock-archive-list'),
 }));

frontend/src/components/archive/ArchivePage.test.tsx

@@ -9,7 +9,6 @@ import { ArchivePage } from './ArchivePage';
 jest.mock('../retro-formats/RetroFormatPicker', () => ({
   RetroFormatPicker: mockElement('mock-retro-format-picker'),
 }));
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
 
 describe('ArchivePage', () => {
   it('renders a retro page', async () => {

frontend/src/components/not-found/NotFoundPage.test.tsx

@@ -1,10 +1,7 @@
 import { render, textFragment } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 
 import { NotFoundPage } from './NotFoundPage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
-
 describe('NotFoundPage', () => {
   it('displays a message', () => {
     const dom = render(<NotFoundPage />);

frontend/src/components/password/PasswordPage.test.tsx

@@ -1,12 +1,9 @@
 import { render, fireEvent, act, getBy } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 import { retroTokenService, retroTokenTracker } from '../../api/api';
 import { css } from '../../test-helpers/queries';
 
 import { PasswordPage } from './PasswordPage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
-
 describe('PasswordPage', () => {
   it('exchanges passwords for tokens', async () => {
     jest

frontend/src/components/retro-create/RetroCreatePage.test.tsx

@@ -1,12 +1,9 @@
 import { Router } from 'wouter';
 import { memoryLocation } from 'wouter/memory-location';
 import { render } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 
 import { RetroCreatePage } from './RetroCreatePage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
-
 describe('RetroCreatePage', () => {
   it('renders without error', () => {
     const location = memoryLocation({ path: '/', record: true });

frontend/src/components/retro-formats/mood/categories/MoodItemPlain.test.tsx

@@ -1,12 +1,9 @@
 import { render, text } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 import { makeRetroItem } from '../../../../shared/api-entities';
 import { css } from '../../../../test-helpers/queries';
 
 import { MoodItemPlain } from './MoodItemPlain';
 
-jest.mock('./VoteCount', () => ({ VoteCount: mockElement('mock-vote-count') }));
-
 describe('MoodItemPlain', () => {
   it('displays the item message', () => {
     const item = makeRetroItem({ message: 'a message here' });
@@ -19,8 +16,8 @@ describe('MoodItemPlain', () => {
     const item = makeRetroItem({ votes: 3 });
     const dom = render(<MoodItemPlain item={item} />);
 
-    const voteCount = dom.getBy(css('mock-vote-count'));
-    expect(voteCount.mockProps['votes']).toEqual(3);
+    const voteCount = dom.getBy(css('.vote'));
+    expect(voteCount).toHaveTextContent('3');
   });
 
   it('does not mark items as done by default', () => {

frontend/src/components/retro-settings/RetroSettingsPage.test.tsx

@@ -1,14 +1,11 @@
 import { Router } from 'wouter';
 import { memoryLocation } from 'wouter/memory-location';
 import { act, render, placeholderText } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 import { makeRetro } from '../../shared/api-entities';
 import { nullDispatch } from '../../test-helpers/nullDispatch';
 
 import { RetroSettingsPage } from './RetroSettingsPage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
-
 describe('RetroSettingsPage', () => {
   it('renders basic settings', async () => {
     const location = memoryLocation({ path: '/', record: true });

frontend/src/components/retro/RetroPage.test.tsx

@@ -9,7 +9,6 @@ import { RetroPage } from './RetroPage';
 jest.mock('../retro-formats/RetroFormatPicker', () => ({
   RetroFormatPicker: mockElement('mock-retro-format-picker'),
 }));
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
 
 describe('RetroPage', () => {
   it('renders a retro page', () => {

frontend/src/components/security/SecurityPage.test.tsx

@@ -1,13 +1,10 @@
 import { Router } from 'wouter';
 import { memoryLocation } from 'wouter/memory-location';
 import { render } from 'flexible-testing-library-react';
-import mockElement from 'react-mock-element';
 import { css } from '../../test-helpers/queries';
 
 import { SecurityPage } from './SecurityPage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
-
 describe('SecurityPage', () => {
   it('displays static content with anchors', () => {
     const location = memoryLocation({ path: '/', record: true });

frontend/src/components/welcome/WelcomePage.test.tsx

@@ -9,7 +9,6 @@ import { css } from '../../test-helpers/queries';
 
 import { WelcomePage } from './WelcomePage';
 
-jest.mock('../common/Header', () => ({ Header: mockElement('mock-header') }));
 jest.mock('./RetroList', () => ({ RetroList: mockElement('mock-retro-list') }));
 
 describe('WelcomePage', () => {