diff --git a/frontend/src/components/archive-list/ArchiveLink.test.tsx b/frontend/src/components/archive-list/ArchiveLink.test.tsx deleted file mode 100644 index 1b452c5..0000000 --- a/frontend/src/components/archive-list/ArchiveLink.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Router } from 'wouter'; -import { memoryLocation } from 'wouter/memory-location'; -import { render, fireEvent, text } from 'flexible-testing-library-react'; -import { formatDateTime } from '../../time/formatters'; -import { css } from '../../test-helpers/queries'; - -import { ArchiveLink } from './ArchiveLink'; - -describe('ArchiveLink', () => { - it('links to the archive', () => { - const location = memoryLocation({ path: '/', record: true }); - const dom = render( - - - , - ); - - fireEvent.click(dom.getBy(css('.archive-link'))); - - expect(location.history).toEqual(['/', '/retros/bar/archives/a1']); - }); - - it('displays the time of the archive', () => { - const location = memoryLocation({ path: '/', record: true }); - const dom = render( - - - , - ); - - // the formatted time can include special unicode spaces, - // so we disable testing-library's default normaliser - expect(dom).toContainElementWith( - text(formatDateTime(0), { normalizer: (x) => x }), - ); - }); -}); diff --git a/frontend/src/components/archive-list/ArchiveLink.tsx b/frontend/src/components/archive-list/ArchiveLink.tsx deleted file mode 100644 index 65727a3..0000000 --- a/frontend/src/components/archive-list/ArchiveLink.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { memo } from 'react'; -import { Link } from 'wouter'; -import { formatDateTime } from '../../time/formatters'; - -interface PropsT { - retroSlug: string; - archiveId: string; - created: number; -} - -export const ArchiveLink = memo(({ retroSlug, archiveId, created }: PropsT) => ( - - {formatDateTime(created)} - -)); diff --git a/frontend/src/components/archive-list/ArchiveList.test.tsx b/frontend/src/components/archive-list/ArchiveList.test.tsx index c2b4224..f1e90c7 100644 --- a/frontend/src/components/archive-list/ArchiveList.test.tsx +++ b/frontend/src/components/archive-list/ArchiveList.test.tsx @@ -1,13 +1,15 @@ -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(); @@ -15,37 +17,39 @@ describe('ArchiveList', () => { 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(); + 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(); + 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( + + + , + ); - 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(); - 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'); }); }); diff --git a/frontend/src/components/archive-list/ArchiveList.tsx b/frontend/src/components/archive-list/ArchiveList.tsx index 5156b1e..5782391 100644 --- a/frontend/src/components/archive-list/ArchiveList.tsx +++ b/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) => {
    {sortArchives(archives).map(({ id, created }) => (
  • - + + {formatDateTime(created)} +
    • ))}
); }); + +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; +} diff --git a/frontend/src/components/archive-list/ArchiveListPage.test.tsx b/frontend/src/components/archive-list/ArchiveListPage.test.tsx index 7a37567..c885d86 100644 --- a/frontend/src/components/archive-list/ArchiveListPage.test.tsx +++ b/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'), })); diff --git a/frontend/src/components/archive/ArchivePage.test.tsx b/frontend/src/components/archive/ArchivePage.test.tsx index f267db4..5214b3d 100644 --- a/frontend/src/components/archive/ArchivePage.test.tsx +++ b/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 () => { diff --git a/frontend/src/components/not-found/NotFoundPage.test.tsx b/frontend/src/components/not-found/NotFoundPage.test.tsx index 28a54bb..225beb7 100644 --- a/frontend/src/components/not-found/NotFoundPage.test.tsx +++ b/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(); diff --git a/frontend/src/components/password/PasswordPage.test.tsx b/frontend/src/components/password/PasswordPage.test.tsx index d71229c..95e06f6 100644 --- a/frontend/src/components/password/PasswordPage.test.tsx +++ b/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 diff --git a/frontend/src/components/retro-create/RetroCreatePage.test.tsx b/frontend/src/components/retro-create/RetroCreatePage.test.tsx index 0a853c9..244de99 100644 --- a/frontend/src/components/retro-create/RetroCreatePage.test.tsx +++ b/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 }); diff --git a/frontend/src/components/retro-formats/mood/categories/MoodItemPlain.test.tsx b/frontend/src/components/retro-formats/mood/categories/MoodItemPlain.test.tsx index 05f36a1..0297d42 100644 --- a/frontend/src/components/retro-formats/mood/categories/MoodItemPlain.test.tsx +++ b/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(); - 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', () => { diff --git a/frontend/src/components/retro-settings/RetroSettingsPage.test.tsx b/frontend/src/components/retro-settings/RetroSettingsPage.test.tsx index 5c090da..44d8f8d 100644 --- a/frontend/src/components/retro-settings/RetroSettingsPage.test.tsx +++ b/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 }); diff --git a/frontend/src/components/retro/RetroPage.test.tsx b/frontend/src/components/retro/RetroPage.test.tsx index 8855073..0b98179 100644 --- a/frontend/src/components/retro/RetroPage.test.tsx +++ b/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', () => { diff --git a/frontend/src/components/security/SecurityPage.test.tsx b/frontend/src/components/security/SecurityPage.test.tsx index 3a52252..af2d50b 100644 --- a/frontend/src/components/security/SecurityPage.test.tsx +++ b/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 }); diff --git a/frontend/src/components/welcome/WelcomePage.test.tsx b/frontend/src/components/welcome/WelcomePage.test.tsx index ebfca8c..fa66f88 100644 --- a/frontend/src/components/welcome/WelcomePage.test.tsx +++ b/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', () => {