@ministryofjustice/hmpps-digital-prison-reporting-frontend 5.2.3 → 5.3.0

package/README.md

@@ -21,12 +21,35 @@ Both tasks use the `package` directory.
 
 ## Test Application
 
-To start the Test Application, run: `npm run start-test-app`. This builds the NPM package and starts the server at http://localhost:3010.
+To start the Test Application, run: `npm run start:dev:noMockClients` as well as `npm run wiremock` in a separate tab. This builds the NPM package and starts the server at http://localhost:3010.
 
 The Test Application is used both for visually checking components, and also by the integration tests (run using Cypress).
 
-## Running and testing local builds
-To run the app in dev mode, use `start:dev` for the test app, and `docs:local` for the docs. To run the production build of docs, you should run `npm run docs`, then you'll need to configure a reverse proxy - nginx is the easiest. Install it through homebrew `brew install nginx`, then ensure it's running by running `brew services start nginx`. then run `sudo nginx -t` and you should see it's got a default config at `/opt/homebrew/etc/nginx/nginx.conf` - if it isn't there, just use whatever path it gives back, then add a new file into `/opt/homebrew/etc/nginx/servers/dev.conf` with this content:
+## Running and testing local builds
+To run the main suite of browser-based tests, start up the main app by running `npm run start:dev:noMockClients` then `npm run int-test` or `npm run int-test-ui` for getting the cypress UI up to choose individual tests to run.
+
+There are also a few jest tests - you can run these plus the small docs tests by running `npm run test`.
+
+We also have a small number of visual regression tests using Playwright that are **only** for our chart based pages - you can run these with `npm run int-test-visual` which will start up the server and mocks itself. Please ensure any other running server processes are stopped before running this!
+
+### How to update and create new visual regression tests
+There may ocassionally be the need to create new visual regression tests, again, only for our charting based pages. To do this, you should develop the test as normal, but use `npm run int-test-visual-ui` which will allow you to see what the test is doing in the UI. Once you have the test on the page you want to capture a screenshot of for comparison, use
+
+```typescript
+await expect(page).toHaveScreenshot({
+    fullPage: true,
+  })
+```
+
+and then run your test. It will fail locally on this last step, which is expected, as you are not creating screenshots. These will be created by CI as screenshots on different OSes can have slightly different pixel values. You should push this branch and make a PR, which will set off the CI run, and if all is well, create the screenshots as an artifact of the CI run in GitHub Actions (but fail the run). You should create a folder based on the name of the file running the test - if the file is called `some-chart-test.spec.ts`, create a folder called `some-chart-test.spec.ts-screenshots/` and download the screenshots artifact and put the new screenshots in there. You should then double check these to ensure no sensitive data is being captured, then commit and push them up. This time, the CI run should use these screenshots and pass. If they do not, some common pitfalls include:
+
+- Animations: Ideally set or disable animations so the snapshot isn't capturing charts, CSS animations etc half way through loading.
+- Noise: Things like "Last Updated" timestamps can be very annoying and will break the test every time the clock ticks. You should mask those bits out so Playwright ignores them.
+- As a last resort, look at having some **small** pixel tolerances - no more than 1 or 2% - on the `toHaveScreenshot` call - use `maxDiffPixelRatio` which has a range from 0-1, so no more than 0.01-0.02 here.
+
+### Running the app in dev mode
+
+To run the app in dev mode, use `start:dev:noMockClients` for the test app, and `docs:local` for the docs. To run the production build of docs, you should run `npm run docs`, then you'll need to configure a reverse proxy - nginx is the easiest. Install it through homebrew `brew install nginx`, then ensure it's running by running `brew services start nginx`. then run `sudo nginx -t` and you should see it's got a default config at `/opt/homebrew/etc/nginx/nginx.conf` - if it isn't there, just use whatever path it gives back, then add a new file into `/opt/homebrew/etc/nginx/servers/dev.conf` with this content:
 
 ```
 server {

package/_networkMocks/dashboard/data/empty-data/data.d.ts

@@ -0,0 +1,30 @@
+export declare const undefinedDashboardData: {
+    tables: undefined;
+};
+export declare const emptyDashboardData: never[];
+export declare const missingFirstRowDashboardData: ({
+    ts: {
+        raw: string;
+    };
+    establishment_id: {
+        raw: string;
+    };
+    has_metric_one: {
+        raw: number;
+    };
+    metric_one_is_missing: {
+        raw: number;
+    };
+    has_metric_two: {
+        raw: number;
+    };
+    metric_two_is_missing: {
+        raw: number;
+    };
+    has_metric_three: {
+        raw: number;
+    };
+    metric_three_is_missing: {
+        raw: number;
+    };
+}[] | undefined)[];

package/_networkMocks/dashboard/data/empty-data/mocks.d.ts

@@ -0,0 +1,68 @@
+export declare const dashboardResultUndefinedMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const dashboardResultEmptyDataSyncMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const dashboardResultMissingFirstRowDataSyncMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const mocks: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+}[];

package/_networkMocks/dashboard/data/partial-data/data-historic.d.ts

@@ -0,0 +1,39 @@
+export declare const historicPartialData: ({
+    ts: {
+        raw: string;
+    };
+    establishment_id: {
+        raw: string;
+    };
+    wing: {
+        raw: string;
+    };
+    cell: {
+        raw: string;
+    };
+    diet: {
+        raw: string;
+    };
+    count: {
+        raw: number;
+    };
+} | {
+    ts: {
+        raw: string;
+    };
+    establishment_id: {
+        raw: string;
+    };
+    wing: {
+        raw: string;
+    };
+    cell: {
+        raw: string;
+    };
+    diet: {
+        raw: string;
+    };
+    count: {
+        raw: string;
+    };
+})[];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/line/definition.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/line/vis-definitions/cols-as-labels.d.ts

@@ -0,0 +1,6 @@
+import { components } from '../../../../../../../src/dpr/types/api';
+export declare const dataQualityMetricOneLine: components['schemas']['DashboardVisualisationDefinition'];
+export declare const dataQualityMetricThreeLine: components['schemas']['DashboardVisualisationDefinition'];
+export declare const dataQualityMetricTwoLine: components['schemas']['DashboardVisualisationDefinition'];
+export declare const dataQualityMetricOneMetricTwoLine: components['schemas']['DashboardVisualisationDefinition'];
+export declare const dataQualityAllLine: components['schemas']['DashboardVisualisationDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/list/definition-invalid-vis-defs.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/list/definition-invalid.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/list/vis-definitions/invalid.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../../src/dpr/types/api';
+export declare const invalidDefinition: components['schemas']['DashboardVisualisationDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/complete-dataset/mixed/definition.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/mocks.d.ts

@@ -66,6 +66,40 @@ export declare const listPartialDatasetHistoricMock: {
         fixedDelayMilliseconds: number;
     };
 };
+export declare const listInvalidVisDefMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const listInvalidDefMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
 export declare const scorecardsCompleteDatasetMock: {
     priority: number;
     request: {
@@ -168,6 +202,23 @@ export declare const barPartialDatasetMock: {
         fixedDelayMilliseconds: number;
     };
 };
+export declare const barInvalidMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
 export declare const doughnutCompleteDatasetMock: {
     priority: number;
     request: {
@@ -219,6 +270,74 @@ export declare const lineTimeseriesPartialDatasetMock: {
         fixedDelayMilliseconds: number;
     };
 };
+export declare const lineCompleteDatasetMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const mixedCompleteDatasetMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const mixedPartialDatasetMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
+export declare const mixedPartialDatasetHistoricMock: {
+    priority: number;
+    request: {
+        method: "GET" | "POST" | "DELETE" | "PUT" | "OPTIONS";
+        queryParameters?: object | undefined;
+        bodyPatterns?: Array<object> | undefined;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8";
+        };
+        jsonBody: object;
+        fixedDelayMilliseconds: number;
+    };
+};
 export declare const mocks: {
     priority: number;
     request: {

package/_networkMocks/dashboard/definitions/visualisations/partial-dataset/bar/definition-invalid.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/partial-dataset/bar/vis-definitions/invalid.d.ts

@@ -0,0 +1,3 @@
+import { components } from '../../../../../../../src/dpr/types/api';
+export declare const invalidAxisXBar: components['schemas']['DashboardVisualisationDefinition'];
+export declare const invalidAxisYBar: components['schemas']['DashboardVisualisationDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/partial-dataset/mixed/definition.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/dashboard/definitions/visualisations/partial-dataset/mixed-historic/definition.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../../../../../../src/dpr/types/api';
+export declare const definition: components['schemas']['DashboardDefinition'];

package/_networkMocks/report/mocks.d.ts

@@ -99,6 +99,21 @@ export declare const getAsyncReportDownloadMock: {
         body: string;
     };
 };
+export declare const getSyncReportDownloadMock: {
+    priority: number;
+    request: {
+        method: string;
+        urlPathPattern: string;
+    };
+    response: {
+        status: number;
+        headers: {
+            'Content-Type': string;
+            'Content-Disposition': string;
+        };
+        body: string;
+    };
+};
 export declare const reportsFinishedStatusMock: {
     priority: number;
     request: {

package/all.js

@@ -834,11 +834,13 @@ class DataTable extends DprClientClass {
             // Headers
             const header = this.table.createTHead();
             const classificationHeaderRow = header.insertRow(0);
+            classificationHeaderRow.classList.add('print-header-footer');
             const classificationHeaderCell = classificationHeaderRow.insertCell(0);
             classificationHeaderCell.outerHTML = `<th class="govuk-table__header govuk-table__cell--content print-header-footer print-header-footer--header" colspan=${headLength}>${classificationContent}</th>`;
             // Footers
             const footer = this.table.createTFoot();
             const classificationFooterRow = footer.insertRow(0);
+            classificationFooterRow.classList.add('print-header-footer');
             const classificationFooterCell = classificationFooterRow.insertCell(0);
             classificationFooterCell.outerHTML = `<td class="govuk-table__cell govuk-table__cell--content print-header-footer table-row--no-border print-header-footer--footer" colspan=${headLength}>${classificationContent}</td>`;
         }