[ComponentTests] Add check that Progress tab is not lost

services/frontend/tests/components/PopulationComponents/Students/PopulationStudentsWrapper.tsx

@@ -0,0 +1,31 @@
+import { PopulationStudents } from '@/components/PopulationComponents/Students'
+import { ReduxWrapper } from '../../../ReduxWrapper'
+
+// Partial<FormattedStudent>[]
+const students = [{ studentNumber: '010000001' }] as any
+
+const columnFunction = (): [string[], string[]] => [['studentNumber'], []]
+
+const formattingFunction = () => [{ studentNumber: '010000001' }]
+
+/**
+ * Mounts `PopulationStudents` in the `population` variant.
+ *
+ * The selected years are read from the query params, so navigate the page to eg. `/?years=2020` before mounting.
+ */
+export const PopulationStudentsWrapper = ({ programme }: { programme: string }) => (
+  <ReduxWrapper
+    component={
+      <PopulationStudents
+        curriculum={null}
+        filteredCourses={[]}
+        filteredStudents={students}
+        generalTabColumnFunction={columnFunction}
+        generalTabFormattingFunction={formattingFunction}
+        idToGroupIdMap={{}}
+        programme={programme}
+        variant="population"
+      />
+    }
+  />
+)

services/frontend/tests/components/PopulationComponents/Students/index.spec.tsx

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/experimental-ct-react'
+
+import { PopulationStudentsWrapper } from './PopulationStudentsWrapper'
+
+test.describe('PopulationStudents', () => {
+  test.beforeEach(async ({ router }) => {
+    await router.route('**/api/populationstatistics/studyprogrammes', route =>
+      route.fulfill({ json: { filteredProgrammes: {}, allProgrammes: {} } })
+    )
+    await router.route('**/api/login', route => route.fulfill({ json: { user: { roles: [] } } }))
+    await router.route('**/api/banners', route => route.fulfill({ json: [] }))
+  })
+
+  test('shows the Progress tab for a single year of a bachelor programme', async ({ mount, page }) => {
+    await page.goto('/?years=2020')
+    const component = await mount(<PopulationStudentsWrapper programme="KH50_005" />)
+
+    await expect(component.getByRole('tab')).toHaveText(['General', 'Courses', 'Modules', 'Tags', 'Progress'])
+  })
+
+  test('hides the Progress tab when multiple years are selected', async ({ mount, page }) => {
+    await page.goto('/?years=2020&years=2021')
+    const component = await mount(<PopulationStudentsWrapper programme="KH50_005" />)
+
+    await expect(component.getByRole('tab')).toHaveText(['General', 'Courses', 'Modules', 'Tags'])
+  })
+
+  test('hides the Progress tab for a non-bachelor programme', async ({ mount, page }) => {
+    await page.goto('/?years=2020')
+    const component = await mount(<PopulationStudentsWrapper programme="MH50_001" />)
+
+    await expect(component.getByRole('tab')).toHaveText(['General', 'Courses', 'Modules', 'Tags'])
+  })
+})