-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: cover time milestones with a few tests
- Loading branch information
Showing
5 changed files
with
237 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import type { Accessor } from 'solid-js' | ||
import { render, screen } from '@test/helpers/solid' | ||
import createCurrentDateTime from '@/hooks/createCurrentDateTime' | ||
import useCurrentLanguage from '@/hooks/useCurrentLanguage' | ||
import Milestone from './components/Milestone' | ||
import useBirthDate from './hooks/useBirthDate' | ||
import TimeMilestones from '.' | ||
|
||
vi.mock('@/hooks/useCurrentLanguage') | ||
vi.mock('@/hooks/createCurrentDateTime') | ||
vi.mock('./hooks/useBirthDate.ts') | ||
vi.mock('./components/Milestone') | ||
|
||
beforeEach(() => { | ||
vi.mocked(useCurrentLanguage).mockReturnValue(() => 'en-US') | ||
vi.mocked(createCurrentDateTime).mockReturnValue(() => new Date('2022-03-05T16:05:30')) | ||
vi.mocked(Milestone).mockImplementation((props) => ( | ||
<div aria-label={props.description}> | ||
{props.description} {props.value} | ||
</div> | ||
)) | ||
}) | ||
|
||
afterEach(() => { | ||
vi.resetAllMocks() | ||
}) | ||
|
||
describe('TimeMilestones', () => { | ||
it('renders correctly', () => { | ||
render(() => <TimeMilestones />) | ||
|
||
const r = screen.getByLabelText('Time milestones') | ||
|
||
expect(r).toBeInTheDocument() | ||
expect(r).toMatchSnapshot() | ||
}) | ||
|
||
it('has heading', () => { | ||
render(() => <TimeMilestones />) | ||
|
||
const heading = screen.getByText("We're now through...") | ||
expect(heading).toBeInTheDocument() | ||
}) | ||
|
||
it('has main milestones', () => { | ||
render(() => <TimeMilestones />) | ||
|
||
const ofDayMileStone = screen.getByText(/of day/) | ||
expect(ofDayMileStone).toBeInTheDocument() | ||
|
||
const ofWeekMileStone = screen.getByText(/of week/) | ||
expect(ofWeekMileStone).toBeInTheDocument() | ||
|
||
const ofMonthMileStone = screen.getByText(/of month/) | ||
expect(ofMonthMileStone).toBeInTheDocument() | ||
}) | ||
|
||
it('has optional birth date milestone if specified', () => { | ||
vi.mocked(useBirthDate).mockReturnValue(birthDateMockedValue(null)) | ||
|
||
render(() => <TimeMilestones />) | ||
const ofBirthdayMileStone = screen.queryByText(/of dob/) | ||
expect(ofBirthdayMileStone).not.toBeInTheDocument() | ||
}) | ||
|
||
it('has no birth date milestone if not specified', () => { | ||
vi.mocked(useBirthDate).mockReturnValue(birthDateMockedValue(new Date('1970-01-01'))) | ||
render(() => <TimeMilestones />) | ||
|
||
const ofBirthdayMileStone = screen.getByText(/of dob/) | ||
expect(ofBirthdayMileStone).toBeInTheDocument() | ||
}) | ||
}) | ||
|
||
function birthDateMockedValue(value: Date | null): Accessor<Date | null> & { loading: boolean } { | ||
const a: Accessor<Date | null> = () => value | ||
Object.defineProperty(a, 'loading', { value: false }) | ||
return a as Accessor<Date | null> & { loading: boolean } | ||
} |
50 changes: 50 additions & 0 deletions
50
src/components/TimeMilestones/__snapshots__/TimeMilestones.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
||
exports[`TimeMilestones > renders correctly 1`] = ` | ||
<div | ||
aria-describedby="cl-0" | ||
aria-label="Time milestones" | ||
class="d_flex ai_flex-end smDown:ai_center jc_center gap_0 flex-d_column as_flex-start" | ||
role="group" | ||
> | ||
<h1 | ||
class="fs_3.6rem smDown:fs_3.2rem fw_bold ta_center m_0_0_2.4rem smDown:m_0_0_1.6rem" | ||
id="cl-0" | ||
> | ||
We're now through... | ||
</h1> | ||
<div | ||
class="d_grid grid-tc_repeat(auto-fit,_minmax(12rem,_auto)) gap_3.5rem smDown:gap_1.6rem w_full jc_flex-end smDown:jc_center" | ||
> | ||
<div | ||
aria-label="of day" | ||
> | ||
of day | ||
0.67 | ||
</div> | ||
<div | ||
aria-label="of week" | ||
> | ||
of week | ||
0.81 | ||
</div> | ||
<div | ||
aria-label="of month" | ||
> | ||
of month | ||
0.15 | ||
</div> | ||
<div | ||
aria-label="of year" | ||
> | ||
of year | ||
0.17 | ||
</div> | ||
</div> | ||
</div> | ||
`; |
24 changes: 24 additions & 0 deletions
24
src/components/TimeMilestones/components/Milestone/Milestone.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { render, screen } from '@test/helpers/solid' | ||
import useCurrentLanguage from '@/hooks/useCurrentLanguage' | ||
import Milestone from '.' | ||
|
||
vi.mock('@/hooks/useCurrentLanguage') | ||
|
||
beforeEach(() => { | ||
vi.mocked(useCurrentLanguage).mockReturnValue(() => 'en-US') | ||
}) | ||
|
||
afterEach(() => { | ||
vi.resetAllMocks() | ||
}) | ||
|
||
describe('Milestone', () => { | ||
it('renders correctly', () => { | ||
render(() => <Milestone value={0.25} description="test milestone" />) | ||
|
||
const r = screen.getByLabelText('test milestone') | ||
|
||
expect(r).toBeInTheDocument() | ||
expect(r).toMatchSnapshot() | ||
}) | ||
}) |
83 changes: 83 additions & 0 deletions
83
src/components/TimeMilestones/components/Milestone/__snapshots__/Milestone.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
||
exports[`Milestone > renders correctly 1`] = ` | ||
<div | ||
aria-label="test milestone" | ||
class="d_flex ai_center gap_0 flex-d_column" | ||
role="group" | ||
> | ||
<span | ||
class="fs_6.4rem smDown:fs_5.4rem" | ||
> | ||
25% | ||
</span> | ||
<svg | ||
aria-hidden="true" | ||
height="1.6rem" | ||
preserveAspectRatio="xMinYMin" | ||
role="figure" | ||
viewBox="0 0 25 5" | ||
> | ||
<path | ||
d="M0.6 0 L0.6 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M3.2444444444 0 L3.2444444444 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M5.8888888889 2.375 L5.8888888889 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M8.5333333333 4.75 L8.5333333333 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M11.1777777778 4.75 L11.1777777778 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M13.8222222222 4.75 L13.8222222222 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M16.4666666667 4.75 L16.4666666667 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M19.1111111111 4.75 L19.1111111111 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M21.7555555556 4.75 L21.7555555556 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
<path | ||
d="M24.4 4.75 L24.4 5 Z" | ||
stroke="currentColor" | ||
stroke-width="1.2" | ||
/> | ||
</svg> | ||
<span | ||
class="m_1rem_0_0 fs_2.4rem smDown:fs_1.6rem tt_lowercase" | ||
> | ||
<span | ||
aria-hidden="true" | ||
> | ||
... | ||
</span> | ||
test milestone | ||
</span> | ||
</div> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters