Skip to content

Commit

Permalink
test: cover time milestones with a few tests
Browse files Browse the repository at this point in the history
  • Loading branch information
khmm12 committed Sep 23, 2024

Verified

This commit was signed with the committer’s verified signature.
1 parent 3147b50 commit 1c86557
Showing 5 changed files with 237 additions and 1 deletion.
79 changes: 79 additions & 0 deletions src/components/TimeMilestones/TimeMilestones.test.tsx
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 }
}
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>
`;
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()
})
})
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>
`;
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ export default function Milestone(props: MilestoneProps): JSX.Element {
const formatValue = (value: number): string => formatPercent(round(value, 2)).replaceAll(/\s/g, '')

return (
<div role="group" class={css(s.container)}>
<div role="group" aria-label={props.description} class={css(s.container)}>
<span class={css(s.value)}>{formatValue(props.value)}</span>
<Bar progress={props.value} />
<span class={css(s.description)}>

0 comments on commit 1c86557

Please sign in to comment.