fix(app-project): test daily stats chart

- test the daily stats chart, on the Classify page. Check that each bar has the expected day and classification count.
- fix a bug thrown up by those tests, where the bar date wasn't correctly calculated as UTC.
- fix a bug in the mocks, so that the current daily count matches the count for the current day.

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'
 					}
 				]
 			}

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(<YourStatsStory />)
+    render(<YourStatsStory />)
   })
 
   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(<YourStatsStory />)
+      const bar = screen.getByRole('img', { name: count.alt })
+      expect(bar).to.exist()
+      clock.restore()
     })
   })
 })

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' })