diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx index eeb8948497f..b41146892ee 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx @@ -32,7 +32,6 @@ describe('ChartBuilder', () => { { { { { { test('calls `onTableQueryUpdate` when change boundary level', async () => { const testInitialChart: Chart = { - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, type: 'map', boundaryLevel: 2, map: { @@ -417,7 +411,6 @@ describe('ChartBuilder', () => { { describe('data groupings tab', () => { const testInitialChart: Chart = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, boundaryLevel: 2, map: { dataSetConfigs: [ @@ -578,7 +570,6 @@ describe('ChartBuilder', () => { { const testMapChartRenderer: ChartRendererProps = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, data: [], meta: testFullTableMeta.subjectMeta, alt: '', diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx index 96f5622b8e8..7112e71e920 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx @@ -41,8 +41,7 @@ describe('ChartBuilderTabSection', () => { const testChart: Chart = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, boundaryLevel: 2, map: { dataSetConfigs: [], diff --git a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/reducers/__tests__/chartBuilderReducer.test.ts b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/reducers/__tests__/chartBuilderReducer.test.ts index dd89627fc91..6f96abec599 100644 --- a/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/reducers/__tests__/chartBuilderReducer.test.ts +++ b/src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/reducers/__tests__/chartBuilderReducer.test.ts @@ -1141,8 +1141,7 @@ describe('chartBuilderReducer', () => { test('has correct state with initial configuration for a map', () => { const initialConfiguration: Chart = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, legend: { position: 'top', items: [], @@ -1252,8 +1251,7 @@ describe('chartBuilderReducer', () => { test('setting boundary levels does not change data groupings', () => { const initialConfiguration: Chart = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, legend: { position: 'top', items: [], @@ -1363,8 +1361,7 @@ describe('chartBuilderReducer', () => { test('setting data groupings does not change boundary levels', () => { const initialConfiguration: Chart = { type: 'map', - releaseId: 'releaseId', - dataBlockParentId: 'dataBlockParentId', + onBoundaryLevelChange: () => {}, legend: { position: 'top', items: [], diff --git a/src/explore-education-statistics-common/src/modules/charts/components/__tests__/MapBlock.test.tsx b/src/explore-education-statistics-common/src/modules/charts/components/__tests__/MapBlock.test.tsx index dd2425c2c5c..21cc0686125 100644 --- a/src/explore-education-statistics-common/src/modules/charts/components/__tests__/MapBlock.test.tsx +++ b/src/explore-education-statistics-common/src/modules/charts/components/__tests__/MapBlock.test.tsx @@ -31,27 +31,6 @@ describe('MapBlock', () => { data: testFullTable.results, height: 600, width: 900, - map: { - dataSetConfigs: [ - { - dataGrouping: { customGroups: [], type: 'EqualIntervals' }, - dataSet: { - filters: ['characteristic-total', 'school-type-total'], - indicator: 'authorised-absence-rate', - timePeriod: '2016_AY', - }, - }, - { - dataGrouping: { customGroups: [], type: 'EqualIntervals' }, - dataSet: { - filters: ['characteristic-total', 'school-type-total'], - indicator: 'overall-absence-rate', - timePeriod: '2016_AY', - }, - boundaryLevel: 2, - }, - ], - }, onBoundaryLevelChange, }; @@ -184,7 +163,6 @@ describe('MapBlock', () => { expect(legendColours[4].style.backgroundColor).toBe('rgb(245, 164, 80)'); }); - // EES-5718 name should be: 'selecting data set with different boundary level fetches and renders different boundary geo-JSON' test('selecting data set with different boundary level calls onBoundaryLevelChange', async () => { render(); @@ -197,14 +175,11 @@ describe('MapBlock', () => { // Selecting another data set with different boundary level await userEvent.selectOptions(dataSetSelectInput, dataSetOptions[1]); - waitFor(() => { - // Fetching new geoJson - expect(screen.getByTestId('loadingSpinner')).toBeInTheDocument(); - expect(onBoundaryLevelChange).toHaveBeenCalled(); + await waitFor(() => { + // EES-4902 map containing spinner isn't currently rendered in tests + // expect(screen.getByTestId('loadingSpinner')).toBeInTheDocument(); }); - - // TODO: EES-5718 - // test that returned location geo Json is actually renderred on the screen when 'selecting data set with different boundary level fetches different boundary geo-JSON' + expect(onBoundaryLevelChange).toHaveBeenCalledWith(2); }); test.skip('changing selected location focuses the correct polygon', async () => { diff --git a/src/explore-education-statistics-common/src/modules/charts/components/__tests__/__data__/testMapBlockData.ts b/src/explore-education-statistics-common/src/modules/charts/components/__tests__/__data__/testMapBlockData.ts index dedf185f23a..6f4207d1674 100644 --- a/src/explore-education-statistics-common/src/modules/charts/components/__tests__/__data__/testMapBlockData.ts +++ b/src/explore-education-statistics-common/src/modules/charts/components/__tests__/__data__/testMapBlockData.ts @@ -77,7 +77,27 @@ export const testMapConfiguration: Chart = { title: '', alt: '', height: 600, - map: { dataSetConfigs: [] }, + map: { + dataSetConfigs: [ + { + dataGrouping: { customGroups: [], type: 'EqualIntervals' }, + dataSet: { + filters: ['characteristic-total', 'school-type-total'], + indicator: 'authorised-absence-rate', + timePeriod: '2016_AY', + }, + }, + { + dataGrouping: { customGroups: [], type: 'EqualIntervals' }, + dataSet: { + filters: ['characteristic-total', 'school-type-total'], + indicator: 'overall-absence-rate', + timePeriod: '2016_AY', + }, + boundaryLevel: 2, + }, + ], + }, }; export const testMapTableData: TableDataResponse & { @@ -425,6 +445,232 @@ export const testMapTableData: TableDataResponse & { ], }; +export const testMapTableDataLocationsLowRes: Dictionary< + LocationGeoJsonOption[] +> = { + localAuthorityDistrict: [ + { + geoJson: { + type: 'Feature', + properties: { + Code: 'E08000035', + LAT: 53.8227005, + LONG: -1.50735998, + Name: 'Leeds', + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [-1.727212, 53.910182], + [-1.717954, 53.908527], + [-1.707078, 53.919116], + [-1.684622, 53.910573], + [-1.655078, 53.912469], + [-1.651668, 53.905648], + [-1.620532, 53.903379], + [-1.599988, 53.909761], + [-1.587481, 53.901232], + [-1.583619, 53.909278], + [-1.551838, 53.902924], + [-1.548787, 53.910898], + [-1.498774, 53.915291], + [-1.462708, 53.905999], + [-1.432991, 53.910788], + [-1.432595, 53.92722], + [-1.406703, 53.927833], + [-1.397176, 53.942518], + [-1.340399, 53.945871], + [-1.344706, 53.939484], + [-1.306956, 53.934406], + [-1.308986, 53.92408], + [-1.294174, 53.927046], + [-1.307304, 53.921477], + [-1.297198, 53.921664], + [-1.300582, 53.907468], + [-1.313717, 53.904684], + [-1.322265, 53.900439], + [-1.312598, 53.865299], + [-1.352965, 53.856733], + [-1.326552, 53.840405], + [-1.336092, 53.833572], + [-1.303619, 53.816518], + [-1.314868, 53.80954], + [-1.313806, 53.781538], + [-1.290382, 53.763177], + [-1.294938, 53.755445], + [-1.312235, 53.755871], + [-1.315353, 53.743663], + [-1.302039, 53.741707], + [-1.399718, 53.719291], + [-1.443146, 53.728209], + [-1.488295, 53.72774], + [-1.495724, 53.722291], + [-1.510392, 53.729673], + [-1.559319, 53.698967], + [-1.571118, 53.706388], + [-1.5922, 53.71852], + [-1.623368, 53.718531], + [-1.637878, 53.747713], + [-1.65844, 53.745442], + [-1.681617, 53.756453], + [-1.64956, 53.768182], + [-1.640401, 53.779668], + [-1.674229, 53.779989], + [-1.682266, 53.786399], + [-1.711992, 53.783054], + [-1.695087, 53.857523], + [-1.715282, 53.866229], + [-1.760508, 53.863594], + [-1.800421, 53.88595], + [-1.787461, 53.896885], + [-1.756351, 53.884691], + [-1.725427, 53.885674], + [-1.717053, 53.892246], + [-1.732045, 53.895928], + [-1.727212, 53.910182], + ], + ], + }, + }, + id: 'leeds-id', + label: 'Leeds', + value: 'leeds', + }, + { + geoJson: { + type: 'Feature', + properties: { + Code: 'E08000003', + LAT: 53.4701004, + LONG: -2.23358989, + Name: 'Manchester', + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [-2.25696, 53.51792], + [-2.24664, 53.52922], + [-2.26411, 53.52467], + [-2.26827, 53.5374], + [-2.25173, 53.54459], + [-2.23723, 53.53884], + [-2.21872, 53.54389], + [-2.18601, 53.52904], + [-2.15476, 53.51801], + [-2.17871, 53.50583], + [-2.16303, 53.49283], + [-2.16806, 53.48007], + [-2.14682, 53.46764], + [-2.15845, 53.45492], + [-2.17288, 53.44798], + [-2.17647, 53.43308], + [-2.18854, 53.43663], + [-2.21342, 53.41889], + [-2.21259, 53.40695], + [-2.24682, 53.39604], + [-2.24079, 53.35955], + [-2.25644, 53.36066], + [-2.30136, 53.3401], + [-2.29693, 53.34856], + [-2.31399, 53.3574], + [-2.29859, 53.3608], + [-2.28566, 53.37622], + [-2.31991, 53.4116], + [-2.29771, 53.40834], + [-2.27777, 53.41549], + [-2.27362, 53.42248], + [-2.30018, 53.43639], + [-2.25368, 53.45992], + [-2.26532, 53.47271], + [-2.24513, 53.48607], + [-2.25542, 53.4991], + [-2.24523, 53.51214], + [-2.25696, 53.51792], + ], + ], + }, + }, + id: 'manchester-id', + label: 'Manchester', + value: 'manchester', + }, + { + geoJson: { + type: 'Feature', + properties: { + Code: 'E08000019', + LAT: 53.40359879, + LONG: -1.54253995, + Name: 'Sheffield', + }, + geometry: { + type: 'Polygon', + coordinates: [ + [ + [-1.80147, 53.48097], + [-1.78364, 53.48478], + [-1.7387, 53.47713], + [-1.73198, 53.49088], + [-1.70108, 53.5031], + [-1.60658, 53.49289], + [-1.54965, 53.47847], + [-1.53904, 53.46169], + [-1.55126, 53.44618], + [-1.53292, 53.43829], + [-1.51317, 53.4514], + [-1.51481, 53.46364], + [-1.49474, 53.48625], + [-1.45521, 53.47173], + [-1.44153, 53.44541], + [-1.4085, 53.42033], + [-1.38043, 53.42415], + [-1.39352, 53.41998], + [-1.37579, 53.39365], + [-1.39139, 53.3833], + [-1.33197, 53.35233], + [-1.32466, 53.32879], + [-1.33775, 53.31582], + [-1.38673, 53.31761], + [-1.38657, 53.33488], + [-1.41103, 53.34197], + [-1.42086, 53.33454], + [-1.44197, 53.33747], + [-1.45988, 53.33067], + [-1.45522, 53.32185], + [-1.46791, 53.3171], + [-1.50213, 53.31756], + [-1.53676, 53.30473], + [-1.56173, 53.30639], + [-1.56173, 53.31595], + [-1.58053, 53.31172], + [-1.5849, 53.32157], + [-1.59909, 53.3113], + [-1.6092, 53.32264], + [-1.62549, 53.3164], + [-1.63272, 53.32082], + [-1.6123, 53.3432], + [-1.59054, 53.3459], + [-1.66354, 53.36657], + [-1.65381, 53.39189], + [-1.70496, 53.40503], + [-1.70853, 53.41732], + [-1.73976, 53.42097], + [-1.74532, 53.46215], + [-1.76843, 53.46475], + [-1.80147, 53.48097], + ], + ], + }, + }, + id: 'sheffield-id', + label: 'Sheffield', + value: 'sheffield', + }, + ], +}; + export const testGeoJsonFeature: GeoJsonFeature = { type: 'Feature', geometry: { type: 'Polygon', coordinates: [] }, diff --git a/src/explore-education-statistics-common/src/modules/find-statistics/components/__tests__/DataBlockTabs.test.tsx b/src/explore-education-statistics-common/src/modules/find-statistics/components/__tests__/DataBlockTabs.test.tsx index 0da1ed91560..cca05b42eef 100644 --- a/src/explore-education-statistics-common/src/modules/find-statistics/components/__tests__/DataBlockTabs.test.tsx +++ b/src/explore-education-statistics-common/src/modules/find-statistics/components/__tests__/DataBlockTabs.test.tsx @@ -6,6 +6,7 @@ import { import { testMapConfiguration, testMapTableData, + testMapTableDataLocationsLowRes, } from '@common/modules/charts/components/__tests__/__data__/testMapBlockData'; import DataBlockTabs from '@common/modules/find-statistics/components/DataBlockTabs'; import getDefaultTableHeaderConfig from '@common/modules/table-tool/utils/getDefaultTableHeadersConfig'; @@ -13,7 +14,8 @@ import mapFullTable from '@common/modules/table-tool/utils/mapFullTable'; import mapUnmappedTableHeaders from '@common/modules/table-tool/utils/mapUnmappedTableHeaders'; import _tableBuilderService from '@common/services/tableBuilderService'; import { Chart, DataBlock } from '@common/services/types/blocks'; -import { screen, waitFor } from '@testing-library/dom'; +import { screen, waitFor, within } from '@testing-library/dom'; +import userEvent from '@testing-library/user-event'; import { AxiosError } from 'axios'; import React from 'react'; import { forceVisible } from 'react-lazyload'; @@ -381,6 +383,78 @@ describe('DataBlockTabs', () => { }); }); + // EES-4902 react-leaflet now uses ESM so unable to test this currently + test('selecting data set with boundaryLevel retrieves and renders new map polygons', async () => { + tableBuilderService.getDataBlockTableData.mockResolvedValue( + testMapTableData, + ); + tableBuilderService.getLocationGeoJson + .mockResolvedValueOnce(testMapTableData.subjectMeta.locations) + .mockResolvedValue(testMapTableDataLocationsLowRes); + + const { container } = render( + , + ); + + forceVisible(); + + await waitFor(() => { + expect(tableBuilderService.getDataBlockTableData).toBeCalledWith( + 'release-1', + 'block-1-parent', + ); + + expect(tableBuilderService.getLocationGeoJson).toBeCalledWith( + 'release-1', + 'block-1-parent', + 1, + ); + + // expect(container.querySelector('.leaflet-container')).toBeInTheDocument(); + }); + expect(tableBuilderService.getDataBlockTableData).toHaveBeenCalledTimes(1); + + await waitFor(() => { + expect(tableBuilderService.getLocationGeoJson).toBeCalled(); + expect(tableBuilderService.getLocationGeoJson).toBeCalledTimes(1); + }); + + userEvent.click(screen.getByRole('link', { name: 'Chart for' })); + + await waitFor(() => { + expect( + screen.getByLabelText('1. Select data to view'), + ).toBeInTheDocument(); + }); + + // TODO: check for path/polygon node, save position(s) to compare later (EES-4902) + + const dataSetSelectInput = screen.getByLabelText('1. Select data to view'); + const dataSetOptions = within(dataSetSelectInput).getAllByRole('option'); + expect(dataSetOptions).toHaveLength(2); + await userEvent.selectOptions(dataSetSelectInput, dataSetOptions[1]); + + await waitFor(() => { + // EES-4902 map containing spinner isn't currently rendered in tests + // expect(screen.getByTestId('loadingSpinner')).toBeInTheDocument(); + + expect(tableBuilderService.getLocationGeoJson).toBeCalledWith( + 'release-1', + 'block-1-parent', + 2, + ); + }); + + expect(tableBuilderService.getLocationGeoJson).toHaveBeenCalledTimes(2); + + // TODO: check for path/polygon node position, compare with previous + // should be different after rendering different location data (EES-4902) + }); + test('re-rendering with new data block does not throw error', async () => { tableBuilderService.getDataBlockTableData.mockResolvedValue( testChartTableData,