EES-5412 fix map display in chart builder

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/ChartBuilderTabSection.tsx

@@ -101,6 +101,7 @@ const ChartBuilderTabSection = ({
       const tableData = await tableBuilderService.getTableData(
         nextQuery,
         releaseId,
+        nextQuery.boundaryLevel,
       );
 
       onTableUpdate({

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilder.test.tsx

@@ -5,6 +5,7 @@ import {
   ChartBuilderFormsContextProvider,
 } from '@admin/pages/release/datablocks/components/chart/contexts/ChartBuilderFormsContext';
 import render from '@common-test/render';
+import { Chart } from '@common/services/types/blocks';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import noop from 'lodash/noop';
@@ -357,4 +358,93 @@ describe('ChartBuilder', () => {
       expect(screen.getAllByRole('row')).toHaveLength(1);
     });
   });
+
+  test('calls `onTableQueryUpdate` when change boundary level', async () => {
+    const testInitialChart: Chart = {
+      type: 'map',
+      boundaryLevel: 2,
+      map: {
+        dataSetConfigs: [],
+      },
+      title: 'Data block title',
+      subtitle: '',
+      alt: 'd',
+      height: 600,
+      includeNonNumericData: false,
+      axes: {
+        major: {
+          type: 'major',
+          groupBy: 'locations',
+          groupByFilter: '',
+          groupByFilterGroups: false,
+          sortBy: 'name',
+          sortAsc: false,
+          dataSets: [
+            {
+              order: 0,
+              indicator: 'overall-absence-sessions',
+              filters: ['state-funded-primary'],
+              timePeriod: '2014_AY',
+            },
+          ],
+          referenceLines: [],
+          visible: true,
+          unit: '',
+          showGrid: false,
+          label: {
+            text: '',
+            rotated: false,
+          },
+          min: 0,
+          size: 50,
+          tickConfig: 'default',
+          tickSpacing: 1,
+        },
+      },
+      legend: { items: [] },
+    };
+
+    const handleUpdate = jest.fn();
+
+    const { user } = render(
+      <ChartBuilderFormsContextProvider initialForms={testFormState}>
+        <ChartBuilder
+          releaseId="release-1"
+          data={testFullTable.results}
+          initialChart={testInitialChart}
+          meta={{
+            ...testFullTable.subjectMeta,
+            boundaryLevels: [
+              {
+                id: 1,
+                label: 'Boundary level 1',
+              },
+              {
+                id: 2,
+                label: 'Boundary level 2',
+              },
+            ],
+          }}
+          tableTitle="Table title"
+          onChartSave={jest.fn()}
+          onChartDelete={noop}
+          onTableQueryUpdate={handleUpdate}
+        />
+      </ChartBuilderFormsContextProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Chart preview' }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('tab', { name: 'Boundary levels' }),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole('tab', { name: 'Boundary levels' }));
+
+    await user.selectOptions(screen.getByLabelText('Boundary level'), ['1']);
+
+    expect(handleUpdate).toHaveBeenCalledWith({ boundaryLevel: 1 });
+  });
 });

src/explore-education-statistics-admin/src/pages/release/datablocks/components/chart/__tests__/ChartBuilderTabSection.test.tsx

@@ -0,0 +1,202 @@
+import {
+  testFullTable,
+  testTableData,
+} from '@admin/pages/release/datablocks/components/chart/__tests__/__data__/testTableData';
+import ChartBuilderTabSection from '@admin/pages/release/datablocks/components/chart/ChartBuilderTabSection';
+import {
+  ChartBuilderForms,
+  ChartBuilderFormsContextProvider,
+} from '@admin/pages/release/datablocks/components/chart/contexts/ChartBuilderFormsContext';
+import { ReleaseDataBlock } from '@admin/services/dataBlockService';
+import render from '@common-test/render';
+import { FullTable } from '@common/modules/table-tool/types/fullTable';
+import _tableBuilderService, {
+  TableDataQuery,
+} from '@common/services/tableBuilderService';
+import { Chart } from '@common/services/types/blocks';
+import { screen } from '@testing-library/react';
+import noop from 'lodash/noop';
+import React from 'react';
+
+jest.mock('@common/services/tableBuilderService');
+const tableBuilderService = _tableBuilderService as jest.Mocked<
+  typeof _tableBuilderService
+>;
+
+describe('ChartBuilderTabSection', () => {
+  const testFormState: ChartBuilderForms = {
+    options: {
+      isValid: true,
+      submitCount: 0,
+      id: 'options',
+      title: 'Options',
+    },
+    dataSets: {
+      isValid: true,
+      submitCount: 0,
+      id: 'dataSets',
+      title: 'Data sets',
+    },
+  };
+
+  const testChart: Chart = {
+    type: 'map',
+    boundaryLevel: 2,
+    map: {
+      dataSetConfigs: [],
+    },
+    title: 'Data block title',
+    subtitle: '',
+    alt: 'd',
+    height: 600,
+    includeNonNumericData: false,
+    axes: {
+      major: {
+        type: 'major',
+        groupBy: 'locations',
+        groupByFilter: '',
+        groupByFilterGroups: false,
+        sortBy: 'name',
+        sortAsc: false,
+        dataSets: [
+          {
+            order: 0,
+            indicator: 'overall-absence-sessions',
+            filters: ['state-funded-primary'],
+            timePeriod: '2014_AY',
+          },
+        ],
+        referenceLines: [],
+        visible: true,
+        unit: '',
+        showGrid: false,
+        label: {
+          text: '',
+          rotated: false,
+        },
+        min: 0,
+        size: 50,
+        tickConfig: 'default',
+        tickSpacing: 1,
+      },
+    },
+    legend: { items: [] },
+  };
+
+  const testDataBlock: ReleaseDataBlock = {
+    id: 'data-block-1',
+    dataBlockParentId: 'data-block-parent-1',
+    dataSetId: 'data-set-1',
+    dataSetName: 'Test data set',
+    name: 'Test block',
+    highlightName: 'Test highlight name',
+    source: '',
+    heading: '',
+    table: {
+      tableHeaders: {
+        columnGroups: [],
+        rowGroups: [],
+        columns: [],
+        rows: [],
+      },
+      indicators: [],
+    },
+    charts: [testChart],
+    query: {
+      subjectId: 'subject-1',
+      indicators: ['authorised-absence-sessions'],
+      filters: ['state-funded-primary', 'state-funded-secondary'],
+      timePeriod: {
+        startYear: 2014,
+        startCode: 'AY',
+        endYear: 2014,
+        endCode: 'AY',
+      },
+      locationIds: ['barnet', 'barnsley'],
+    },
+  };
+  const testQuery: TableDataQuery = {
+    subjectId: 'subject-id',
+    filters: ['filter-id'],
+    indicators: ['indicator-id'],
+    locationIds: ['location-id'],
+  };
+
+  const testFullTableWithBoundaryLevels: FullTable = {
+    ...testFullTable,
+    subjectMeta: {
+      ...testFullTable.subjectMeta,
+      boundaryLevels: [
+        {
+          id: 1,
+          label: 'Boundary level 1',
+        },
+        {
+          id: 2,
+          label: 'Boundary level 2',
+        },
+      ],
+    },
+  };
+
+  test('renders the ChartBuilder', () => {
+    render(
+      <ChartBuilderFormsContextProvider initialForms={testFormState}>
+        <ChartBuilderTabSection
+          dataBlock={testDataBlock}
+          releaseId="release-1"
+          query={testQuery}
+          table={testFullTableWithBoundaryLevels}
+          onDataBlockSave={noop}
+          onTableUpdate={noop}
+        />
+      </ChartBuilderFormsContextProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Chart preview' }),
+    ).toBeInTheDocument();
+
+    const tabs = screen.getAllByRole('tab');
+
+    expect(tabs).toHaveLength(5);
+  });
+
+  test('calls  `getTableData` and `onTableUpdate` when change boundary level', async () => {
+    tableBuilderService.getTableData.mockResolvedValue(testTableData);
+
+    const handleUpdate = jest.fn();
+
+    const { user } = render(
+      <ChartBuilderFormsContextProvider initialForms={testFormState}>
+        <ChartBuilderTabSection
+          dataBlock={testDataBlock}
+          releaseId="release-1"
+          query={testQuery}
+          table={testFullTableWithBoundaryLevels}
+          onDataBlockSave={noop}
+          onTableUpdate={handleUpdate}
+        />
+      </ChartBuilderFormsContextProvider>,
+    );
+
+    expect(
+      screen.getByRole('tab', { name: 'Boundary levels' }),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole('tab', { name: 'Boundary levels' }));
+
+    await user.selectOptions(screen.getByLabelText('Boundary level'), ['1']);
+
+    expect(tableBuilderService.getTableData).toHaveBeenCalledWith(
+      { ...testQuery, boundaryLevel: 1 },
+      'release-1',
+      1,
+    );
+
+    expect(handleUpdate).toHaveBeenCalledWith({
+      table: testFullTable,
+      query: { ...testQuery, boundaryLevel: 1 },
+    });
+  });
+});