diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataSetFilePage.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataSetFilePage.tsx index 08915acd3da..5f440568a8b 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataSetFilePage.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/DataSetFilePage.tsx @@ -15,6 +15,8 @@ import DataSetFileDetails from '@frontend/modules/data-catalogue/components/Data import DataSetFilePageNav from '@frontend/modules/data-catalogue/components/DataSetFilePageNav'; import DataSetFilePreview from '@frontend/modules/data-catalogue/components/DataSetFilePreview'; import DataSetFileUsage from '@frontend/modules/data-catalogue/components/DataSetFileUsage'; +import DataSetFileVariables from '@frontend/modules/data-catalogue/components/DataSetFileVariables'; +import DataSetFileFootnotes from '@frontend/modules/data-catalogue/components/DataSetFileFootnotes'; import styles from '@frontend/modules/data-catalogue/DataSetPage.module.scss'; import NotFoundPage from '@frontend/modules/NotFoundPage'; import apiDataSetQueries from '@frontend/queries/apiDataSetQueries'; @@ -30,21 +32,14 @@ import classNames from 'classnames'; import { GetServerSideProps } from 'next'; import { useRouter } from 'next/router'; import React, { useEffect, useState } from 'react'; - -// TODO EES-4856 -export const pageHiddenSections = { - dataSetPreview: 'Data set preview', - dataSetVariables: 'Variables in this data set', - footnotes: 'Footnotes', -} as const; +import omit from 'lodash/omit'; export const pageBaseSections = { dataSetDetails: 'Data set details', + dataSetPreview: 'Data set preview', + dataSetVariables: 'Variables in this data set', + dataSetFootnotes: 'Footnotes', dataSetUsage: 'Using this data', - // TODO EES-4856 - // dataSetPreview: 'Data set preview', - // dataSetVariables: 'Variables in this data set', - // footnotes: 'Footnotes', } as const; export const pageApiSections = { @@ -57,10 +52,7 @@ export const pageSections = { ...pageApiSections, } as const; -export type PageHiddenSection = typeof pageHiddenSections; export type PageSection = typeof pageSections; - -export type PageHiddenSectionId = keyof PageHiddenSection; export type PageSectionId = keyof PageSection; interface Props { @@ -77,7 +69,6 @@ export default function DataSetFilePage({ const [activeSection, setActiveSection] = useState('dataSetDetails'); const [fullScreenPreview, toggleFullScreenPreview] = useToggle(false); - const [showAllPreview, toggleShowAllPreview] = useToggle(false); const router = useRouter(); const handleDownload = async () => { @@ -114,17 +105,18 @@ export default function DataSetFilePage({ pageSections[pageSectionId] ) { setActiveSection(pageSectionId); - - router.push( - { - pathname: `/data-catalogue/data-set/${dataSetFile.id}`, - hash: pageSectionId, - }, - undefined, - { - shallow: true, - }, - ); + if (router.isReady) { + router.push( + { + pathname: `/data-catalogue/data-set/${dataSetFile.id}`, + hash: pageSectionId, + }, + undefined, + { + shallow: true, + }, + ); + } } }); }, 10); @@ -143,6 +135,11 @@ export default function DataSetFilePage({ const { file, release, summary, title } = dataSetFile; + const allNavSections = apiDataSet ? pageSections : pageBaseSections; + const navSections = dataSetFile.footnotes.length + ? allNavSections + : omit(allNavSections, 'dataSetFootnotes'); + return ( {fullScreenPreview ? ( ) : ( <> @@ -204,29 +200,27 @@ export default function DataSetFilePage({
- {/* TODO EES-4856 */} - {/* { toggleFullScreenPreview(); window.scrollTo(0, 0); }} - onToggleShowAll={toggleShowAllPreview} - /> */} + /> - {/* TODO EES-4856 */} - {/* */} + - {/* TODO EES-4856 */} - {/* */} + {!!dataSetFile.footnotes.length && ( + + )} ; describe('DataSetFilePage', () => { + const testDataSetFileWithoutFootnotes = { ...testDataSetFile, footnotes: [] }; + test('renders the data set file heading, summary and info', async () => { render(); @@ -90,6 +92,63 @@ describe('DataSetFilePage', () => { ).toBeInTheDocument(); }); + test('renders the data set preview section', async () => { + render(); + + expect(await screen.findByText('On this page')).toBeInTheDocument(); + + expect( + screen.getByRole('heading', { name: 'Data set preview' }), + ).toBeInTheDocument(); + }); + + test('renders the data set variables section', async () => { + render(); + + expect(await screen.findByText('On this page')).toBeInTheDocument(); + + expect( + screen.getByRole('heading', { name: 'Variables in this data set' }), + ).toBeInTheDocument(); + }); + + test('renders the data set footnotes section', async () => { + render(); + + expect(await screen.findByText('On this page')).toBeInTheDocument(); + + expect( + screen.getByRole('heading', { name: 'Footnotes' }), + ).toBeInTheDocument(); + }); + + test('does not render the data set footnotes section when there are no footnotes', async () => { + render(); + + expect(await screen.findByText('On this page')).toBeInTheDocument(); + + expect( + screen.queryByRole('heading', { name: 'Footnotes' }), + ).not.toBeInTheDocument(); + }); + + test('renders the data set usage section', async () => { + render(); + + expect(await screen.findByText('On this page')).toBeInTheDocument(); + + expect( + screen.getByRole('heading', { name: 'Using this data' }), + ).toBeInTheDocument(); + + expect( + screen.getByRole('link', { name: 'View or create your own tables' }), + ).toHaveAttribute( + 'href', + '/data-tables/publication-slug/release-slug?subjectId=subject-id', + ); + }); + describe('non-API data set', () => { test('does not render API version info', async () => { render(); @@ -109,19 +168,28 @@ describe('DataSetFilePage', () => { screen.getByRole('navigation', { name: 'On this page' }), ); const navLinks = nav.getAllByRole('link'); - expect(navLinks).toHaveLength(2); + expect(navLinks).toHaveLength(5); expect(navLinks[0]).toHaveAttribute('href', '#dataSetDetails'); - expect(navLinks[1]).toHaveAttribute('href', '#dataSetUsage'); + expect(navLinks[1]).toHaveAttribute('href', '#dataSetPreview'); + expect(navLinks[2]).toHaveAttribute('href', '#dataSetVariables'); + expect(navLinks[3]).toHaveAttribute('href', '#dataSetFootnotes'); + expect(navLinks[4]).toHaveAttribute('href', '#dataSetUsage'); }); - test('renders the data set usage section', async () => { - render(); + test('renders the page navigation correctly when there are no footnotes', async () => { + render(); expect(await screen.findByText('On this page')).toBeInTheDocument(); - expect( - screen.getByRole('heading', { name: 'Using this data' }), - ).toBeInTheDocument(); + const nav = within( + screen.getByRole('navigation', { name: 'On this page' }), + ); + const navLinks = nav.getAllByRole('link'); + expect(navLinks).toHaveLength(4); + expect(navLinks[0]).toHaveAttribute('href', '#dataSetDetails'); + expect(navLinks[1]).toHaveAttribute('href', '#dataSetPreview'); + expect(navLinks[2]).toHaveAttribute('href', '#dataSetVariables'); + expect(navLinks[3]).toHaveAttribute('href', '#dataSetUsage'); }); test('does not render the API version history section', async () => { @@ -178,34 +246,39 @@ describe('DataSetFilePage', () => { ); const navLinks = nav.getAllByRole('link'); - expect(navLinks).toHaveLength(4); + expect(navLinks).toHaveLength(7); expect(navLinks[0]).toHaveAttribute('href', '#dataSetDetails'); - expect(navLinks[1]).toHaveAttribute('href', '#dataSetUsage'); - expect(navLinks[2]).toHaveAttribute('href', '#apiVersionHistory'); - expect(navLinks[3]).toHaveAttribute('href', '#apiQuickStart'); + expect(navLinks[1]).toHaveAttribute('href', '#dataSetPreview'); + expect(navLinks[2]).toHaveAttribute('href', '#dataSetVariables'); + expect(navLinks[3]).toHaveAttribute('href', '#dataSetFootnotes'); + expect(navLinks[4]).toHaveAttribute('href', '#dataSetUsage'); + expect(navLinks[5]).toHaveAttribute('href', '#apiVersionHistory'); + expect(navLinks[6]).toHaveAttribute('href', '#apiQuickStart'); }); - test('renders the data set usage section', async () => { + test('renders the page navigation correctly when there are no footnotes', async () => { render( , ); expect(await screen.findByText('On this page')).toBeInTheDocument(); - expect( - screen.getByRole('heading', { name: 'Using this data' }), - ).toBeInTheDocument(); - - expect( - screen.getByRole('link', { name: 'View or create your own tables' }), - ).toHaveAttribute( - 'href', - '/data-tables/publication-slug/release-slug?subjectId=subject-id', + const nav = within( + screen.getByRole('navigation', { name: 'On this page' }), ); + + const navLinks = nav.getAllByRole('link'); + expect(navLinks).toHaveLength(6); + expect(navLinks[0]).toHaveAttribute('href', '#dataSetDetails'); + expect(navLinks[1]).toHaveAttribute('href', '#dataSetPreview'); + expect(navLinks[2]).toHaveAttribute('href', '#dataSetVariables'); + expect(navLinks[3]).toHaveAttribute('href', '#dataSetUsage'); + expect(navLinks[4]).toHaveAttribute('href', '#apiVersionHistory'); + expect(navLinks[5]).toHaveAttribute('href', '#apiQuickStart'); }); test('renders the API version history section', async () => { diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileFootnotes.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileFootnotes.tsx index d82ec0e3a53..021e3895a86 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileFootnotes.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileFootnotes.tsx @@ -1,27 +1,17 @@ import DataSetFilePageSection from '@frontend/modules/data-catalogue/components/DataSetFilePageSection'; -import { pageHiddenSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { pageSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { DataSetFootnote } from '@frontend/services/dataSetFileService'; import React from 'react'; -// TODO EES-4856 replace with real data -const footnotes = [ - { - id: 'footnote-1', - label: - 'Local authority response rates to the data collection vary by census date. To account for non-response, national and regional figures have been uprated based on local authority pupil populations.', - }, - { - id: 'footnote-2', - label: - 'Local authority response rates to the data collection vary by census date. To account for non-response, national and regional figures have been uprated based on local authority pupil populations.', - }, -]; +const sectionId = 'dataSetFootnotes'; -export default function DataSetFileFootnotes() { +interface Props { + footnotes: DataSetFootnote[]; +} + +export default function DataSetFileFootnotes({ footnotes }: Props) { return ( - +
    {footnotes.map(footnote => (
  1. {footnote.label}
    2. diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePageSection.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePageSection.tsx index f2e27c5f840..bf3dcaf9ddd 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePageSection.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePageSection.tsx @@ -1,9 +1,6 @@ import SectionBreak from '@common/components/SectionBreak'; import { useMobileMedia } from '@common/hooks/useMedia'; -import { - PageHiddenSectionId, - PageSectionId, -} from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { PageSectionId } from '@frontend/modules/data-catalogue/DataSetFilePage'; import React, { ReactNode } from 'react'; import styles from './DataSetFilePageSection.module.scss'; @@ -11,7 +8,7 @@ interface Props { children: ReactNode; className?: string; heading: string; - id: PageSectionId | PageHiddenSectionId; + id: PageSectionId; testId?: string; } diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePreview.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePreview.tsx index aaf8c035eea..c4392a0ac15 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePreview.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFilePreview.tsx @@ -1,161 +1,43 @@ import ButtonText from '@common/components/ButtonText'; import DataSetFilePageSection from '@frontend/modules/data-catalogue/components/DataSetFilePageSection'; import styles from '@frontend/modules/data-catalogue/components/DataSetFilePreview.module.scss'; -import { pageHiddenSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { pageSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { DataSetCsvPreview } from '@frontend/services/dataSetFileService'; import React from 'react'; -// TODO EES-4856 replace with real data -const tableHeaders = [ - 'time_period', - 'time_identifier', - 'geographic_level', - 'country_code', - 'country_name', - 'group', - 'standard', - 'age', - 'apprenticeship_level', -]; - -const tableRows = [ - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], - [ - '201819', - 'Academic year', - 'National', - 'E9200001', - 'England', - 'Ethnicity group', - 'Framework', - '16-18', - 'advanced', - ], -]; - +const sectionId = 'dataSetPreview'; const tableId = 'preview-table'; interface Props { - fullScreen: boolean; - showAll: boolean; + dataCsvPreview: DataSetCsvPreview; + fullScreen?: boolean; onToggleFullScreen: () => void; - onToggleShowAll: () => void; } export default function DataSetFilePreview({ + dataCsvPreview, fullScreen, - showAll, onToggleFullScreen, - onToggleShowAll, }: Props) { - const displayRows = showAll ? tableRows : tableRows.slice(0, 4); + const { headers, rows } = dataCsvPreview; return ( - + {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
    - {tableHeaders.map(header => ( + {headers.map(header => ( ))} - {displayRows.map((row, rowIndex) => ( + {rows.map((row, rowIndex) => ( {row.map((cell, cellIndex) => ( @@ -166,14 +48,6 @@ export default function DataSetFilePreview({
    - Table showing first 5 rows from underlying data + Table showing first 5 rows, from underlying data
    {header}
    {cell}
    - - {showAll ? 'Show only 5 rows' : 'Show 5 more rows'} - {fullScreen ? 'Close full screen table' : 'Show full screen table'} diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileVariables.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileVariables.tsx index 86599baa43d..20fd9539d47 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileVariables.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/DataSetFileVariables.tsx @@ -1,58 +1,27 @@ import ButtonText from '@common/components/ButtonText'; import useToggle from '@common/hooks/useToggle'; import DataSetFilePageSection from '@frontend/modules/data-catalogue/components/DataSetFilePageSection'; -import { pageHiddenSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { pageSections } from '@frontend/modules/data-catalogue/DataSetFilePage'; +import { DataSetVariable } from '@frontend/services/dataSetFileService'; import React from 'react'; -// TODO EES-4856 replace with real data -const variables = [ - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, - { - value: 'enrolments_pa_10_exact_percent', - label: ' Percentage of persistent absentees', - }, - { value: 'num_schools', label: 'Number of schools' }, -]; - +const sectionId = 'dataSetVariables'; const tableId = 'variables-table'; const defaultVisible = 5; -export default function DataSetFileVariables() { +interface Props { + variables: DataSetVariable[]; +} + +export default function DataSetFileVariables({ variables }: Props) { const [showAll, toggleShowAll] = useToggle(false); const displayVariables = showAll ? variables - : variables.slice(0, defaultVisible - 1); + : variables.slice(0, defaultVisible); const totalVariables = variables.length; return ( - +
    {showAll diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileFootnotes.test.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileFootnotes.test.tsx new file mode 100644 index 00000000000..11c021b0955 --- /dev/null +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileFootnotes.test.tsx @@ -0,0 +1,20 @@ +import render from '@common-test/render'; +import DataSetFileFootnotes from '@frontend/modules/data-catalogue/components/DataSetFileFootnotes'; +import { testDataSetFootnotes } from '@frontend/modules/data-catalogue/__data__/testDataSets'; +import { screen } from '@testing-library/react'; +import React from 'react'; + +describe('DataSetFileFootnotes', () => { + test('renders correctly', () => { + render(); + + expect( + screen.getByRole('heading', { name: 'Footnotes' }), + ).toBeInTheDocument(); + + const footnotes = screen.getAllByRole('listitem'); + expect(footnotes).toHaveLength(2); + expect(footnotes[0]).toHaveTextContent('Footnote 1'); + expect(footnotes[1]).toHaveTextContent('Footnote 2'); + }); +}); diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFilePreview.test.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFilePreview.test.tsx new file mode 100644 index 00000000000..25d90a5c416 --- /dev/null +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFilePreview.test.tsx @@ -0,0 +1,86 @@ +import render from '@common-test/render'; +import DataSetFilePreview from '@frontend/modules/data-catalogue/components/DataSetFilePreview'; +import { testDataSetCsvPreview } from '@frontend/modules/data-catalogue/__data__/testDataSets'; +import { screen, within } from '@testing-library/react'; +import noop from 'lodash/noop'; +import React from 'react'; + +describe('DataSetFilePreview', () => { + test('renders correctly', () => { + render( + , + ); + + expect( + screen.getByRole('heading', { name: 'Data set preview' }), + ).toBeInTheDocument(); + + const rows = within( + screen.getByRole('table', { + name: 'Table showing first 5 rows, from underlying data', + }), + ).getAllByRole('row'); + expect(rows).toHaveLength(6); + + const headerCells = within(rows[0]).getAllByRole('columnheader'); + expect(headerCells[0]).toHaveTextContent('time_period'); + expect(headerCells[1]).toHaveTextContent('geographic_level'); + expect(headerCells[2]).toHaveTextContent('filter_1'); + expect(headerCells[3]).toHaveTextContent('indicator_1'); + + const row1Cells = within(rows[1]).getAllByRole('cell'); + expect(row1Cells[0]).toHaveTextContent('201819'); + expect(row1Cells[1]).toHaveTextContent('National'); + expect(row1Cells[2]).toHaveTextContent('filter_1_value'); + expect(row1Cells[3]).toHaveTextContent('100'); + + const row2Cells = within(rows[2]).getAllByRole('cell'); + expect(row2Cells[0]).toHaveTextContent('201920'); + expect(row2Cells[1]).toHaveTextContent('National'); + expect(row2Cells[2]).toHaveTextContent('filter_1_value'); + expect(row2Cells[3]).toHaveTextContent('101'); + + const row3Cells = within(rows[3]).getAllByRole('cell'); + expect(row3Cells[0]).toHaveTextContent('202021'); + expect(row3Cells[1]).toHaveTextContent('National'); + expect(row3Cells[2]).toHaveTextContent('filter_1_value'); + expect(row3Cells[3]).toHaveTextContent('102'); + + const row4Cells = within(rows[4]).getAllByRole('cell'); + expect(row4Cells[0]).toHaveTextContent('202122'); + expect(row4Cells[1]).toHaveTextContent('National'); + expect(row4Cells[2]).toHaveTextContent('filter_1_value'); + expect(row4Cells[3]).toHaveTextContent('103'); + + const row5Cells = within(rows[5]).getAllByRole('cell'); + expect(row5Cells[0]).toHaveTextContent('202223'); + expect(row5Cells[1]).toHaveTextContent('National'); + expect(row5Cells[2]).toHaveTextContent('filter_1_value'); + expect(row5Cells[3]).toHaveTextContent('104'); + + expect( + screen.getByRole('button', { name: 'Show full screen table' }), + ).toBeInTheDocument(); + }); + + test('renders the correct button when fullScreen is true', () => { + render( + , + ); + + expect( + screen.getByRole('button', { name: 'Close full screen table' }), + ).toBeInTheDocument(); + + expect( + screen.queryByRole('button', { name: 'Show full screen table' }), + ).not.toBeInTheDocument(); + }); +}); diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileVariables.test.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileVariables.test.tsx new file mode 100644 index 00000000000..04ac6dd65c4 --- /dev/null +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetFileVariables.test.tsx @@ -0,0 +1,86 @@ +import render from '@common-test/render'; +import DataSetFileVariables from '@frontend/modules/data-catalogue/components/DataSetFileVariables'; +import { testDataSetVariables } from '@frontend/modules/data-catalogue/__data__/testDataSets'; +import { screen, within } from '@testing-library/react'; +import React from 'react'; + +describe('DataSetFileVariables', () => { + test('renders the first five variables by default', () => { + render(); + + expect( + screen.getByRole('heading', { name: 'Variables in this data set' }), + ).toBeInTheDocument(); + + const rows = within( + screen.getByRole('table', { + name: 'Table showing first 5 of 6 variables', + }), + ).getAllByRole('row'); + expect(rows).toHaveLength(6); + + const headerCells = within(rows[0]).getAllByRole('columnheader'); + expect(headerCells[0]).toHaveTextContent('Variable name'); + expect(headerCells[1]).toHaveTextContent('Variable description'); + + const row1Cells = within(rows[1]).getAllByRole('cell'); + expect(row1Cells[0]).toHaveTextContent('filter_1'); + expect(row1Cells[1]).toHaveTextContent('Filter 1 label'); + + const row2Cells = within(rows[2]).getAllByRole('cell'); + expect(row2Cells[0]).toHaveTextContent('filter_2'); + expect(row2Cells[1]).toHaveTextContent('Filter 2 label'); + + const row3Cells = within(rows[3]).getAllByRole('cell'); + expect(row3Cells[0]).toHaveTextContent('indicator_1'); + expect(row3Cells[1]).toHaveTextContent('Indicator 1 label'); + + const row4Cells = within(rows[4]).getAllByRole('cell'); + expect(row4Cells[0]).toHaveTextContent('indicator_2'); + expect(row4Cells[1]).toHaveTextContent('Indicator 2 label'); + + const row5Cells = within(rows[5]).getAllByRole('cell'); + expect(row5Cells[0]).toHaveTextContent('indicator_3'); + expect(row5Cells[1]).toHaveTextContent('Indicator 3 label'); + + expect( + screen.getByRole('button', { name: 'Show all 6 variables' }), + ).toBeInTheDocument(); + }); + + test('renders all variables when show all is clicked', async () => { + const { user } = render( + , + ); + + expect( + screen.getByRole('heading', { name: 'Variables in this data set' }), + ).toBeInTheDocument(); + + const rows = within( + screen.getByRole('table', { + name: 'Table showing first 5 of 6 variables', + }), + ).getAllByRole('row'); + expect(rows).toHaveLength(6); + + await user.click( + screen.getByRole('button', { name: 'Show all 6 variables' }), + ); + + expect( + await screen.findByRole('button', { name: 'Show only 5 variables' }), + ).toBeInTheDocument(); + + const updatedRows = within( + screen.getByRole('table', { + name: 'Table showing all 6 variables', + }), + ).getAllByRole('row'); + expect(updatedRows).toHaveLength(7); + + const row6Cells = within(updatedRows[6]).getAllByRole('cell'); + expect(row6Cells[0]).toHaveTextContent('indicator_4'); + expect(row6Cells[1]).toHaveTextContent('Indicator 4 label'); + }); +}); diff --git a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetSummary.test.tsx b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetSummary.test.tsx index dbb5a4ccbbe..b0222f44f30 100644 --- a/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetSummary.test.tsx +++ b/src/explore-education-statistics-frontend/src/modules/data-catalogue/components/__tests__/DataSetSummary.test.tsx @@ -1,7 +1,7 @@ +import render from '@common-test/render'; import DataSetFileSummary from '@frontend/modules/data-catalogue/components/DataSetFileSummary'; import { testDataSetFileSummaries } from '@frontend/modules/data-catalogue/__data__/testDataSets'; -import { render, screen, within } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, within } from '@testing-library/react'; import React from 'react'; const longSummary = `Number of places approved and available for use, @@ -38,8 +38,9 @@ describe('DataSetFileSummary', () => { }); test('renders the expanded view when show more details is clicked', async () => { - const user = userEvent.setup(); - render(); + const { user } = render( + , + ); await user.click( screen.getByRole('button', { diff --git a/src/explore-education-statistics-frontend/src/services/dataSetFileService.ts b/src/explore-education-statistics-frontend/src/services/dataSetFileService.ts index 12a62fcef04..6548cf072ac 100644 --- a/src/explore-education-statistics-frontend/src/services/dataSetFileService.ts +++ b/src/explore-education-statistics-frontend/src/services/dataSetFileService.ts @@ -3,6 +3,21 @@ import { ReleaseType } from '@common/services/types/releaseType'; import { contentApi } from '@common/services/api'; import { SortDirection } from '@common/services/types/sort'; +export interface DataSetVariable { + label: string; + value: string; +} + +export interface DataSetCsvPreview { + headers: string[]; + rows: string[][]; +} + +export interface DataSetFootnote { + id: string; + label: string; +} + export interface DataSetFile { id: string; title: string; @@ -20,11 +35,8 @@ export interface DataSetFile { filters: string[]; indicators: string[]; }; - dataCsvPreview: { - headers: string[]; - rows: string[][]; - }; - variables: { label: string; value: string }[]; + dataCsvPreview: DataSetCsvPreview; + variables: DataSetVariable[]; subjectId: string; }; release: { @@ -42,7 +54,7 @@ export interface DataSetFile { title: string; type: ReleaseType; }; - footnotes: { id: string; label: string }[]; + footnotes: DataSetFootnote[]; api?: DataSetFileApi; }