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

* 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. * clean up .defaultProps and old mockStore in YourStatsContainer --------- Co-authored-by: Delilah <[email protected]>
zooniverse · Oct 23, 2024 · f58b7ba · f58b7ba
1 parent 6a82afb
commit f58b7ba
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 52 deletions.
diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStats.js
@@ -6,8 +6,15 @@ import DailyClassificationsChart from './components/DailyClassificationsChart'
 import ContentBox from '@shared/components/ContentBox'
 import Stat from '@shared/components/Stat'
 
-function YourStats(props) {
-  const { counts, projectName } = props
+const defaultCounts = {
+  today: 0,
+  total: 0
+}
+
+function YourStats({
+  counts = defaultCounts,
+  projectName = ''
+}) {
   const { t } = useTranslation('screens')
 
   return (
@@ -38,7 +45,7 @@ function YourStats(props) {
         <DailyClassificationsChart />
       </Box>
     </ContentBox>
-  );
+  )
 }
 
 YourStats.propTypes = {
@@ -49,11 +56,4 @@ YourStats.propTypes = {
   projectName: string
 }
 
-YourStats.defaultProps = {
-  counts: {
-    today: 0,
-    total: 0
-  }
-}
-
 export default YourStats
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
@@ -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
@@ -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()
     })
   })
 })
diff --git a/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStatsContainer.js b/packages/app-project/src/screens/ClassifyPage/components/YourStats/YourStatsContainer.js
@@ -4,9 +4,9 @@ import { useContext } from 'react'
 import YourStats from './YourStats'
 import withRequireUser from '@shared/components/withRequireUser'
 
-function useStores(mockStore) {
+function useStores() {
   const stores = useContext(MobXProviderContext)
-  const store = mockStore || stores.store
+  const store = stores.store
   const {
     project,
     user: {
@@ -19,8 +19,8 @@ function useStores(mockStore) {
   }
 }
 
-function YourStatsContainer({ mockStore }) {
-  const { counts, projectName } = useStores(mockStore)
+function YourStatsContainer() {
+  const { counts, projectName } = useStores()
   return <YourStats counts={counts} projectName={projectName} />
 }
 

diff --git a/...ents/YourStats/components/DailyClassificationsChart/DailyClassificationsChartContainer.js b/...ents/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' })