Skip to content

Commit 2702618

Browse files
adamwhitingnhsadamwhitingnhs
authored
[PRME-189] Add handling for backwards navigation on upload pages (#767)
1 parent 4097546 commit 2702618

File tree

13 files changed

+205
-91
lines changed

13 files changed

+205
-91
lines changed

‎app/src/components/blocks/_documentUpload/documentSelectOrderStage/DocumentSelectOrderStage.test.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,32 @@ import {
66
DOCUMENT_UPLOAD_STATE,
77
UploadDocument,
88
} from '../../../../types/pages/UploadDocumentsPage/types';
9-
import { MemoryRouter } from 'react-router';
9+
import { MemoryRouter } from 'react-router-dom';
1010
import { fileUploadErrorMessages } from '../../../../helpers/utils/fileUploadErrorMessages';
11+
import { buildLgFile } from '../../../../helpers/test/testBuilders';
12+
import { Mock } from 'vitest';
1113

1214
const mockNavigate = vi.fn();
1315
const mockSetDocuments = vi.fn();
1416
const mockSetMergedPdfBlob = vi.fn();
1517

1618
vi.mock('../../../../helpers/hooks/usePatient');
1719
vi.mock('../../../../helpers/hooks/useTitle');
18-
vi.mock('react-router-dom', () => ({
19-
useNavigate: () => mockNavigate,
20-
}));
20+
vi.mock('react-router-dom', async () => {
21+
const actual = await vi.importActual('react-router-dom');
22+
return {
23+
...actual,
24+
useNavigate: (): Mock => mockNavigate,
25+
};
26+
});
2127

2228
URL.createObjectURL = vi.fn(() => 'mocked-url');
2329

2430
// Mock scrollIntoView which is not available in JSDOM
2531
Element.prototype.scrollIntoView = vi.fn();
2632

2733
vi.mock('../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview', () => ({
28-
default: ({ documents }: { documents: UploadDocument[] }) => (
34+
default: ({ documents }: { documents: UploadDocument[] }): React.JSX.Element => (
2935
<div data-testid="lloyd-george-preview">
3036
Lloyd George Preview for {documents.length} documents
3137
</div>
@@ -35,19 +41,13 @@ vi.mock('../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview',
3541
describe('DocumentSelectOrderStage', () => {
3642
let documents: UploadDocument[] = [];
3743

38-
const createMockFile = (name: string, id: string): File => {
39-
const file = new File(['content'], name, { type: 'application/pdf' });
40-
Object.defineProperty(file, 'name', { value: name, writable: false });
41-
return file;
42-
};
43-
4444
beforeEach(() => {
4545
import.meta.env.VITE_ENVIRONMENT = 'vitest';
4646
documents = [
4747
{
4848
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
4949
id: '1',
50-
file: createMockFile('test-document-1.pdf', '1'),
50+
file: buildLgFile(1),
5151
attempts: 0,
5252
state: DOCUMENT_UPLOAD_STATE.SELECTED,
5353
numPages: 5,
@@ -94,7 +94,7 @@ describe('DocumentSelectOrderStage', () => {
9494
it('displays document information in the table', () => {
9595
renderSut(documents);
9696

97-
expect(screen.getByText('test-document-1.pdf')).toBeInTheDocument();
97+
expect(screen.getByText('testFile1.pdf')).toBeInTheDocument();
9898
expect(screen.getByText('5')).toBeInTheDocument();
9999
expect(screen.getByText('View')).toBeInTheDocument();
100100
expect(screen.getByText('Remove')).toBeInTheDocument();
@@ -136,7 +136,7 @@ describe('DocumentSelectOrderStage', () => {
136136
{
137137
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
138138
id: '2',
139-
file: createMockFile('test-document-2.pdf', '2'),
139+
file: buildLgFile(2),
140140
attempts: 0,
141141
state: DOCUMENT_UPLOAD_STATE.SELECTED,
142142
numPages: 3,
@@ -156,7 +156,7 @@ describe('DocumentSelectOrderStage', () => {
156156
{
157157
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
158158
id: '1',
159-
file: createMockFile('test-document-1.pdf', '1'),
159+
file: buildLgFile(1),
160160
attempts: 0,
161161
state: DOCUMENT_UPLOAD_STATE.SELECTED,
162162
numPages: 5,
@@ -165,7 +165,7 @@ describe('DocumentSelectOrderStage', () => {
165165
{
166166
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
167167
id: '2',
168-
file: createMockFile('test-document-2.pdf', '2'),
168+
file: buildLgFile(2),
169169
attempts: 0,
170170
state: DOCUMENT_UPLOAD_STATE.SELECTED,
171171
numPages: 3,
@@ -189,7 +189,7 @@ describe('DocumentSelectOrderStage', () => {
189189
renderSut(documents);
190190

191191
const removeButton = screen.getByRole('button', {
192-
name: /Remove test-document-1.pdf from selection/,
192+
name: /Remove testFile1.pdf from selection/,
193193
});
194194
await user.click(removeButton);
195195

@@ -202,7 +202,7 @@ describe('DocumentSelectOrderStage', () => {
202202
{
203203
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
204204
id: '1',
205-
file: createMockFile('test-document-1.pdf', '1'),
205+
file: buildLgFile(1),
206206
attempts: 0,
207207
state: DOCUMENT_UPLOAD_STATE.SELECTED,
208208
numPages: 5,
@@ -211,7 +211,7 @@ describe('DocumentSelectOrderStage', () => {
211211
{
212212
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
213213
id: '2',
214-
file: createMockFile('test-document-2.pdf', '2'),
214+
file: buildLgFile(2),
215215
attempts: 0,
216216
state: DOCUMENT_UPLOAD_STATE.SELECTED,
217217
numPages: 3,
@@ -220,7 +220,7 @@ describe('DocumentSelectOrderStage', () => {
220220
{
221221
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
222222
id: '3',
223-
file: createMockFile('test-document-3.pdf', '3'),
223+
file: buildLgFile(3),
224224
attempts: 0,
225225
state: DOCUMENT_UPLOAD_STATE.SELECTED,
226226
numPages: 2,
@@ -232,7 +232,7 @@ describe('DocumentSelectOrderStage', () => {
232232

233233
// Remove the middle document (position 2)
234234
const removeButton = screen.getByRole('button', {
235-
name: /Remove test-document-2.pdf from selection/,
235+
name: /Remove testFile2.pdf from selection/,
236236
});
237237
await user.click(removeButton);
238238

@@ -255,7 +255,7 @@ describe('DocumentSelectOrderStage', () => {
255255
{
256256
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
257257
id: '1',
258-
file: createMockFile('test-document-1.pdf', '1'),
258+
file: buildLgFile(1),
259259
attempts: 0,
260260
state: DOCUMENT_UPLOAD_STATE.SELECTED,
261261
numPages: 5,
@@ -264,7 +264,7 @@ describe('DocumentSelectOrderStage', () => {
264264
{
265265
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
266266
id: '2',
267-
file: createMockFile('test-document-2.pdf', '2'),
267+
file: buildLgFile(2),
268268
attempts: 0,
269269
state: DOCUMENT_UPLOAD_STATE.SELECTED,
270270
numPages: 3,
@@ -273,7 +273,7 @@ describe('DocumentSelectOrderStage', () => {
273273
{
274274
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
275275
id: '3',
276-
file: createMockFile('test-document-3.pdf', '3'),
276+
file: buildLgFile(3),
277277
attempts: 0,
278278
state: DOCUMENT_UPLOAD_STATE.SELECTED,
279279
numPages: 2,
@@ -285,7 +285,7 @@ describe('DocumentSelectOrderStage', () => {
285285

286286
// Remove the last document (position 3)
287287
const removeButton = screen.getByRole('button', {
288-
name: /Remove test-document-3.pdf from selection/,
288+
name: /Remove testFile3.pdf from selection/,
289289
});
290290
await user.click(removeButton);
291291

@@ -308,7 +308,7 @@ describe('DocumentSelectOrderStage', () => {
308308
{
309309
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
310310
id: '1',
311-
file: createMockFile('test-document-1.pdf', '1'),
311+
file: buildLgFile(1),
312312
attempts: 0,
313313
state: DOCUMENT_UPLOAD_STATE.SELECTED,
314314
numPages: 5,
@@ -317,7 +317,7 @@ describe('DocumentSelectOrderStage', () => {
317317
{
318318
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
319319
id: '2',
320-
file: createMockFile('test-document-2.pdf', '2'),
320+
file: buildLgFile(2),
321321
attempts: 0,
322322
state: DOCUMENT_UPLOAD_STATE.SELECTED,
323323
numPages: 3,
@@ -328,7 +328,7 @@ describe('DocumentSelectOrderStage', () => {
328328
renderSut(documentsWithoutPosition);
329329

330330
const removeButton = screen.getByRole('button', {
331-
name: /Remove test-document-1.pdf from selection/,
331+
name: /Remove testFile1.pdf from selection/,
332332
});
333333
await user.click(removeButton);
334334

@@ -346,7 +346,7 @@ describe('DocumentSelectOrderStage', () => {
346346
{
347347
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
348348
id: '1',
349-
file: createMockFile('document-one.pdf', '1'),
349+
file: buildLgFile(1),
350350
attempts: 0,
351351
state: DOCUMENT_UPLOAD_STATE.SELECTED,
352352
numPages: 5,
@@ -355,7 +355,7 @@ describe('DocumentSelectOrderStage', () => {
355355
{
356356
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
357357
id: '2',
358-
file: createMockFile('document-two.pdf', '2'),
358+
file: buildLgFile(2),
359359
attempts: 0,
360360
state: DOCUMENT_UPLOAD_STATE.SELECTED,
361361
numPages: 3,
@@ -367,12 +367,12 @@ describe('DocumentSelectOrderStage', () => {
367367

368368
expect(
369369
screen.getByRole('button', {
370-
name: 'Remove document-one.pdf from selection',
370+
name: 'Remove testFile1.pdf from selection',
371371
}),
372372
).toBeInTheDocument();
373373
expect(
374374
screen.getByRole('button', {
375-
name: 'Remove document-two.pdf from selection',
375+
name: 'Remove testFile2.pdf from selection',
376376
}),
377377
).toBeInTheDocument();
378378
});
@@ -392,7 +392,7 @@ describe('DocumentSelectOrderStage', () => {
392392
{
393393
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
394394
id: '1',
395-
file: createMockFile('test-document-1.pdf', '1'),
395+
file: buildLgFile(1),
396396
attempts: 0,
397397
state: DOCUMENT_UPLOAD_STATE.SELECTED,
398398
numPages: 5,
@@ -401,7 +401,7 @@ describe('DocumentSelectOrderStage', () => {
401401
{
402402
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
403403
id: '2',
404-
file: createMockFile('test-document-2.pdf', '2'),
404+
file: buildLgFile(2),
405405
attempts: 0,
406406
state: DOCUMENT_UPLOAD_STATE.SELECTED,
407407
numPages: 3,
@@ -438,7 +438,7 @@ describe('DocumentSelectOrderStage', () => {
438438
{
439439
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
440440
id: '1',
441-
file: createMockFile('test-document-1.pdf', '1'),
441+
file: buildLgFile(1),
442442
attempts: 0,
443443
state: DOCUMENT_UPLOAD_STATE.SELECTED,
444444
numPages: 5,
@@ -447,7 +447,7 @@ describe('DocumentSelectOrderStage', () => {
447447
{
448448
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
449449
id: '2',
450-
file: createMockFile('test-document-2.pdf', '2'),
450+
file: buildLgFile(2),
451451
attempts: 0,
452452
state: DOCUMENT_UPLOAD_STATE.SELECTED,
453453
numPages: 3,

‎app/src/components/blocks/_documentUpload/documentSelectOrderStage/DocumentSelectOrderStage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button, Select, Table } from 'nhsuk-react-components';
22
import { Dispatch, JSX, SetStateAction, useEffect, useRef } from 'react';
33
import { FieldErrors, FieldValues, useForm } from 'react-hook-form';
4-
import { Link, useNavigate } from 'react-router';
4+
import { Link, useNavigate } from 'react-router-dom';
55
import useTitle from '../../../../helpers/hooks/useTitle';
66
import {
77
fileUploadErrorMessages,

‎app/src/components/blocks/_documentUpload/documentUploadCompleteStage/DocumentUploadCompleteStage.test.tsx‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,57 @@ import { render, waitFor, screen } from '@testing-library/react';
22
import DocumentUploadCompleteStage from './DocumentUploadCompleteStage';
33
import userEvent from '@testing-library/user-event';
44
import { routes } from '../../../../types/generic/routes';
5-
import { LinkProps } from 'react-router-dom';
6-
import { buildPatientDetails } from '../../../../helpers/test/testBuilders';
5+
import { LinkProps, MemoryRouter } from 'react-router-dom';
6+
import { buildLgFile, buildPatientDetails } from '../../../../helpers/test/testBuilders';
77
import { getFormattedDate } from '../../../../helpers/utils/formatDate';
88
import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
99
import usePatient from '../../../../helpers/hooks/usePatient';
1010
import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
11+
import {
12+
DOCUMENT_TYPE,
13+
DOCUMENT_UPLOAD_STATE,
14+
UploadDocument,
15+
} from '../../../../types/pages/UploadDocumentsPage/types';
1116

1217
const mockNavigate = vi.fn();
1318
vi.mock('../../../../helpers/hooks/usePatient');
14-
vi.mock('react-router-dom', () => ({
15-
useNavigate: () => mockNavigate,
16-
Link: (props: LinkProps) => <a {...props} role="link" />,
17-
}));
19+
vi.mock('react-router-dom', async () => {
20+
const actual = await vi.importActual('react-router-dom');
21+
return {
22+
...actual,
23+
useNavigate: () => mockNavigate,
24+
Link: (props: LinkProps) => <a {...props} role="link" />,
25+
};
26+
});
1827

1928
URL.createObjectURL = vi.fn();
2029

2130
const patientDetails = buildPatientDetails();
2231

2332
describe('DocumentUploadCompleteStage', () => {
33+
let documents: UploadDocument[] = [];
2434
beforeEach(() => {
2535
vi.mocked(usePatient).mockReturnValue(patientDetails);
2636
import.meta.env.VITE_ENVIRONMENT = 'vitest';
37+
38+
documents = [
39+
{
40+
docType: DOCUMENT_TYPE.LLOYD_GEORGE,
41+
id: '1',
42+
file: buildLgFile(1),
43+
attempts: 0,
44+
state: DOCUMENT_UPLOAD_STATE.SUCCEEDED,
45+
numPages: 5,
46+
position: 1,
47+
},
48+
];
2749
});
2850
afterEach(() => {
2951
vi.clearAllMocks();
3052
});
3153

3254
it('renders', async () => {
33-
render(<DocumentUploadCompleteStage />);
55+
renderApp(documents);
3456

3557
expect(
3658
screen.getByText('You have successfully uploaded a digital Lloyd George record for:'),
@@ -51,22 +73,30 @@ describe('DocumentUploadCompleteStage', () => {
5173
});
5274

5375
it('should navigate to search when clicking the search link', async () => {
54-
render(<DocumentUploadCompleteStage />);
76+
renderApp(documents);
5577

5678
await userEvent.click(screen.getByTestId('search-patient-link'));
5779

5880
await waitFor(async () => {
59-
expect(mockNavigate).toHaveBeenCalledWith(routes.SEARCH_PATIENT);
81+
expect(mockNavigate).toHaveBeenCalledWith(routes.SEARCH_PATIENT, { replace: true });
6082
});
6183
});
6284

63-
it('should navigate to home when clicking the got to home button', async () => {
64-
render(<DocumentUploadCompleteStage />);
85+
it('should navigate to home when clicking the go to home button', async () => {
86+
renderApp(documents);
6587

6688
await userEvent.click(screen.getByTestId('home-btn'));
6789

6890
await waitFor(async () => {
69-
expect(mockNavigate).toHaveBeenCalledWith(routes.HOME);
91+
expect(mockNavigate).toHaveBeenCalledWith(routes.HOME, { replace: true });
7092
});
7193
});
94+
95+
const renderApp = (documents: UploadDocument[]) => {
96+
render(
97+
<MemoryRouter>
98+
<DocumentUploadCompleteStage documents={documents} />,
99+
</MemoryRouter>,
100+
);
101+
};
72102
});

0 commit comments

Comments
 (0)