Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(app-project): test the daily stats chart #6399

Merged
merged 3 commits into from
Oct 23, 2024
Merged

fix(app-project): test the daily stats chart #6399

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00b63d2
fix(app-project): test daily stats chart
eatyourgreens Oct 23, 2024
d670378
clean up .defaultProps and old mockStore in YourStatsContainer
goplayoutside3 Oct 23, 2024
81f046c
Merge branch 'master' into test-your-stats
goplayoutside3 Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,31 @@ const YourStatsStoreMock = {
user: {
personalization: {
counts: {
today: 10,
today: 97,
total: 100
},
stats: {
thisWeek: [
{
alt: 'Sunday: 0',
count: 0,
period: '2019-10-6',
label: 'S',
longLabel: 'Sunday'
alt: 'Monday: 85',
count: 85,
period: '2019-09-30',
label: 'M',
longLabel: 'Monday'
},
{
alt: 'Saturday: 0',
count: 0,
period: '2019-10-5',
label: 'S',
longLabel: 'Saturday'
alt: 'Tuesday: 97',
count: 97,
period: '2019-10-1',
label: 'T',
longLabel: 'Tuesday'
},
{
alt: 'Friday: 0',
alt: 'Wednesday: 0',
count: 0,
period: '2019-10-4',
label: 'F',
longLabel: 'Friday'
period: '2019-10-2',
label: 'W',
longLabel: 'Wednesday'
},
{
alt: 'Thursday: 0',
Expand All @@ -39,25 +39,25 @@ const YourStatsStoreMock = {
longLabel: 'Thursday'
},
{
alt: 'Wednesday: 0',
alt: 'Friday: 0',
count: 0,
period: '2019-10-2',
label: 'W',
longLabel: 'Wednesday'
period: '2019-10-4',
label: 'F',
longLabel: 'Friday'
},
{
alt: 'Tuesday: 97',
count: 97,
period: '2019-10-1',
label: 'T',
longLabel: 'Tuesday'
alt: 'Saturday: 0',
count: 0,
period: '2019-10-5',
label: 'S',
longLabel: 'Saturday'
},
{
alt: 'Monday: 85',
count: 85,
period: '2019-09-30',
label: 'M',
longLabel: 'Monday'
alt: 'Sunday: 0',
count: 0,
period: '2019-10-6',
label: 'S',
longLabel: 'Sunday'
}
]
}
Expand Down
21 changes: 13 additions & 8 deletions packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { render, screen } from '@testing-library/react'
import { composeStory } from '@storybook/react'
import sinon from 'sinon'

import Meta, { YourStats } from './YourStats.stories.js'
import { YourStatsStoreMock } from './YourStats.mock'

describe('Component > YourStats', function () {
let rendered;

beforeEach(function () {
const YourStatsStory = composeStory(YourStats, Meta)
rendered = render(<YourStatsStory />)
render(<YourStatsStory />)
})

it('should have a heading', function () {
Expand All @@ -30,12 +30,17 @@ describe('Component > YourStats', function () {
it('should have 7 bars and each bar should be an image', function () {
expect(screen.getAllByRole('img').length).to.equal(7)
})
})

describe('Daily bars', function () {
YourStatsStoreMock.user.personalization.stats.thisWeek.forEach(function (count, i) {
it(`should have an accessible description for ${count.longLabel}`, function () {
expect(screen.findByLabelText(count.alt)).to.be.ok()
})
describe('Component > YourStats > Daily bars', function () {
YourStatsStoreMock.user.personalization.stats.thisWeek.forEach(function (count, i) {
it(`should have an accessible description for ${count.longLabel}`, function () {
const clock = sinon.useFakeTimers(new Date('2019-10-01T19:00:00+06:00'))
const YourStatsStory = composeStory(YourStats, Meta)
render(<YourStatsStory />)
const bar = screen.getByRole('img', { name: count.alt })
expect(bar).to.exist()
clock.restore()
})
Comment on lines +35 to 44
Copy link
Contributor Author

@eatyourgreens eatyourgreens Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This goes into its own block so that the mocked clock doesn't interfere with other tests. For example, if you put the mocked clock into a before block, it stops the animation in the project stats container tests, causing them to hang.

There might be some GitHub actions running for ~6 hours as a result of that.

Copy link
Contributor Author

@eatyourgreens eatyourgreens Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've chosen a mocked time where the day name/number in the local clock is different from the day name/number in UTC, in order to try and trigger #2244. The local day is Tuesday 1 October but the UTC day is Wednesday 2 October. The rendered classification count should be shown for Tuesday.

})
})
4 changes: 3 additions & 1 deletion ...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ function DailyClassificationsChartContainer({
}) {
const TODAY = new Date()
const stats = thisWeek.map(({ count: statsCount, period }) => {
const day = new Date(period)
Copy link
Contributor Author

@eatyourgreens eatyourgreens Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gives the wrong day when the date is a single digit, I think because a date like 2019-10-2 isn't a valid ISO date (it should be 2019-10-02.) Breaking the date into parts, then constructing a UTC date from year, month index, and date, seems to work better.

const [year, monthIndex, date] = period.split('-')
const utcDay = Date.UTC(year, monthIndex - 1, date)
const day = new Date(utcDay)
const isToday = day.getUTCDay() === TODAY.getDay()
const count = isToday ? counts.today : statsCount
const longLabel = day.toLocaleDateString(locale, { timeZone: 'UTC', weekday: 'long' })
Expand Down