diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.mock.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.mock.js index a6d5428119..f5a3aeef10 100644 --- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.mock.js +++ b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.mock.js @@ -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', @@ -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' } ] } diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.spec.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.spec.js index 4e0ef2af99..110f71646a 100644 --- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.spec.js +++ b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.spec.js @@ -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() + render() }) it('should have a heading', function () { @@ -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() + const bar = screen.getByRole('img', { name: count.alt }) + expect(bar).to.exist() + clock.restore() }) }) }) diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js index 335d79876c..c950b9e979 100644 --- a/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js +++ b/packages/app-project/src/screens/ClassifyPage/components/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js @@ -14,7 +14,9 @@ function DailyClassificationsChartContainer({ }) { const TODAY = new Date() const stats = thisWeek.map(({ count: statsCount, period }) => { - const day = new Date(period) + 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' })