Fix tests to work when untranslated items are hidden

src/components/AgeGroupItem/index.js

@@ -8,7 +8,6 @@ import {
   ageGroupHasTranslatedTaskGroups,
 } from 'helpers'
 import { getAgeGroupIcon } from 'graphics/ageGroups'
-import { useSelector } from 'react-redux'
 
 const StyledAgeGroupItem = styled.div`
   width: 50vw;
@@ -54,12 +53,12 @@ const Status = styled.div`
 
 const AgeGroupItem = ({
   ageGroup,
+  itemsByGuid,
   language,
   translations,
   user,
   userTasks,
 }) => {
-  const itemsByGuid = useSelector(state => state.itemsByGuid)
   const hasTranslatedTaskGroups = ageGroupHasTranslatedTaskGroups(
     ageGroup.item,
     itemsByGuid,

src/components/AgeGroupItem/index.test.js

@@ -5,6 +5,29 @@ import { renderWithTheme } from 'test'
 
 import AgeGroupItem from './index'
 
+const testTask = {
+  guid: '4',
+  languages: [
+    {
+      lang: 'sv',
+      title: 'Test task',
+    },
+  ],
+}
+
+const testTaskGroup = {
+  item: {
+    guid: '1',
+    languages: [
+      {
+        lang: 'sv',
+        title: 'Test task group',
+      },
+    ],
+    tasks: [testTask],
+  },
+}
+
 const testAgeGroup = {
   ageGroupGuid: '053fa231362e95cb211c5eb85c3cbedb',
   guid: '053fa231362e95cb211c5eb85c3cbedb',
@@ -21,15 +44,27 @@ const testAgeGroup = {
     minAge: '7',
     order: 0,
     title: 'Sudenpennut (7-9 v.)',
+    taskgroups: [{ guid: '1' }, { guid: '2' }, { guid: '3' }],
   },
 }
 
+const itemsByGuid = {
+  '1': testTaskGroup,
+  '2': { guid: '2' },
+  '3': { guid: '3' },
+}
+
 describe('AgeGroupItem component', () => {
   it('displays the title of the given age group with the given language', () => {
     const language = 'sv'
     const { getByTestId } = renderWithTheme(
       <MemoryRouter>
-        <AgeGroupItem ageGroup={testAgeGroup} language={language} user={{}} />
+        <AgeGroupItem
+          ageGroup={testAgeGroup}
+          language={language}
+          user={{}}
+          itemsByGuid={itemsByGuid}
+        />
       </MemoryRouter>
     )
     const elem = getByTestId('title')

src/components/TaskGroupItem/index.test.js

@@ -1,25 +1,41 @@
 import { getSubTaskGroupsOrTasksText } from './index'
 
+const language = 'fi'
+
+const taskGroup = {
+  guid: '1234',
+  tasks: [{ guid: '1' }, { guid: '2' }, { guid: '3' }],
+  taskgroups: [{ guid: '4' }, { guid: '5' }, { guid: '6' }],
+  languages: [{ lang: language, title: 'Sudenpennut' }],
+}
+
+const translated = {
+  tasks: [{ guid: '1' }, { guid: '2' }],
+  subGroups: [{ guid: '4' }, { guid: '5' }],
+}
+
+const itemsByGuid = {
+  '1234': taskGroup,
+}
+
 const taskGroupItemProps = {
-  taskGroup: {
-    guid: '1234',
-    tasks: [{ guid: '1' }, { guid: '2' }, { guid: '3' }],
-    taskgroups: [{ guid: '4' }, { guid: '5' }, { guid: '6' }],
-    languages: [{ lang: 'fi', title: 'Sudenpennut' }],
-  },
+  taskGroup,
   ageGroupIndex: 2,
-  language: 'sv',
+  language,
   tasksTerm: 'askelta',
 }
 
 describe('TaskGroupItem component', () => {
   it('renders the amounts of given subTaskGroups and tasks', () => {
     const text = getSubTaskGroupsOrTasksText(
       taskGroupItemProps.tasksTerm,
-      taskGroupItemProps.taskGroup
+      taskGroupItemProps.taskGroup,
+      language,
+      itemsByGuid,
+      translated
     )
     expect(text).toBe(
-      `${taskGroupItemProps.taskGroup.tasks.length} + ${taskGroupItemProps.taskGroup.taskgroups.length} ${taskGroupItemProps.tasksTerm}`
+      `${translated.tasks.length} + ${translated.subGroups.length} ${taskGroupItemProps.tasksTerm}`
     )
   })
 })

src/helpers/index.js

@@ -137,7 +137,10 @@ export const getAgeGroupTasks = ageGroup => {
  */
 export const getTranslatedTaskGroups = (taskGroups, itemsByGuid, language) => {
   return taskGroups.reduce((acc, taskGroupGuid) => {
-    const taskGroup = itemsByGuid[taskGroupGuid.guid].item
+    const taskGroup =
+      itemsByGuid[taskGroupGuid.guid] && itemsByGuid[taskGroupGuid.guid].item
+    if (!taskGroup) return acc
+
     const taskGroupTranslations = taskGroup.languages.find(
       group => group.lang === language
     )

src/views/AgeGroups/index.js

@@ -146,6 +146,7 @@ const AgeGroups = ({ theme }) => {
               <AgeGroupItem
                 key={i}
                 ageGroup={itemsByGuid[ageGroup.guid]}
+                itemsByGuid={itemsByGuid}
                 language={language}
                 user={user}
                 userTasks={userTasks}