[PRMP-1450] Implement new PDF viewer fullscreen (#581)

* [PRMP-1450] Implement new PDF viewer fullscreen

Author: adamwhitingnhs

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/view_lloyd_george_is_bsol_workflow.cy.js

@@ -104,21 +104,25 @@ describe('GP Workflow: View Lloyd George record', () => {
                     cy.getByTestId('pdf-viewer').should('be.visible');
 
                     // Act - open full screen view
-                    if (role !== Roles.GP_CLINICAL) {
-                        cy.getByTestId('full-screen-btn').click();
+                    if (Cypress.isBrowser('firefox')) {
+                        cy.getByTestId('full-screen-btn').then((el) => {
+                            el.trigger('click');
+                        });
+                    } else {
+                        cy.getByTestId('full-screen-btn').realClick();
+                    }
 
-                        // Assert
-                        assertPatientInfo();
-                        cy.getByTestId('pdf-card').should('not.exist');
-                        cy.getByTestId('pdf-viewer').should('be.visible');
+                    // Assert
+                    assertPatientInfo();
+                    cy.getByTestId('pdf-card').should('not.exist');
+                    cy.getByTestId('pdf-viewer').should('be.visible');
 
-                        //  Act - close full screen view
-                        cy.getByTestId('back-link').click();
+                    //  Act - close full screen view
+                    cy.getByTestId('back-link').click();
 
-                        // Assert
-                        cy.getByTestId('pdf-card').should('be.visible');
-                        cy.getByTestId('pdf-viewer').should('be.visible');
-                    }
+                    // Assert
+                    cy.getByTestId('pdf-card').should('be.visible');
+                    cy.getByTestId('pdf-viewer').should('be.visible');
                 },
             );
 

app/cypress/support/e2e.ts

@@ -4,6 +4,7 @@ import { routes } from './routes';
 import { defaultFeatureFlags, FeatureFlags } from './feature_flags';
 import Bluebird from 'cypress/types/bluebird';
 import './aws.commands';
+import 'cypress-real-events';
 
 /// <reference types="cypress" />
 const registerCypressGrep = require('@cypress/grep');

app/package-lock.json

@@ -23,6 +23,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "aws-rum-web": "^1.19.0",
         "aws-sdk": "^2.1510.0",
         "axios": "^1.7.4",
         "dotenv": "^16.3.1",
@@ -44,7 +45,6 @@
         "sass": "^1.66.1",
         "serve": "^14.2.1",
         "typescript": "^4.9.5",
-        "aws-rum-web": "^1.19.0",
         "usehooks-ts": "^2.9.1",
         "util": "^0.12.5",
         "uuid": "^9.0.1",
@@ -63,6 +63,7 @@
         "@types/validator": "^13.11.8",
         "babel-plugin-named-exports-order": "^0.0.2",
         "cypress": "^13.13.2",
+        "cypress-real-events": "^1.14.0",
         "eslint": "^8.48.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-cypress": "^2.14.0",

app/package.json

@@ -19,6 +19,7 @@ import LloydGeorgeViewRecordStage, { Props } from './LloydGeorgeViewRecordStage'
 import { createMemoryHistory } from 'history';
 import { LG_RECORD_STAGE } from '../../../../types/blocks/lloydGeorgeStages';
 import * as ReactRouter from 'react-router-dom';
+import SessionProvider from '../../../../providers/sessionProvider/SessionProvider';
 const mockPdf = buildLgSearchResult();
 const mockPatientDetails = buildPatientDetails();
 jest.mock('../../../../helpers/hooks/useRole');
@@ -114,7 +115,7 @@ describe('LloydGeorgeViewRecordStage', () => {
             userEvent.click(screen.getByText('View in full screen'));
         });
         await waitFor(() => {
-            expect(screen.queryByText('Lloyd George record')).not.toBeInTheDocument();
+            expect(screen.queryByText('View in full screen')).not.toBeInTheDocument();
         });
         expect(screen.getByText('Exit full screen')).toBeInTheDocument();
         expect(screen.getByText(patientName)).toBeInTheDocument();
@@ -132,222 +133,15 @@ describe('LloydGeorgeViewRecordStage', () => {
             userEvent.click(screen.getByText('View in full screen'));
         });
         await waitFor(() => {
-            expect(screen.queryByText('Lloyd George record')).not.toBeInTheDocument();
+            expect(screen.queryByText('View in full screen')).not.toBeInTheDocument();
         });
 
         act(() => {
             userEvent.click(screen.getByText('Exit full screen'));
         });
 
         await waitFor(() => {
-            expect(screen.getByText('Lloyd George record')).toBeInTheDocument();
-        });
-    });
-
-    describe('User is GP admin and non BSOL', () => {
-        const renderComponentForNonBSOLGPAdmin = () => {
-            mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
-            mockedIsBSOL.mockReturnValue(false);
-            renderComponent();
-        };
-
-        const showConfirmationMessage = async () => {
-            const sideMenuDownloadButton = screen.getByRole('button', {
-                name: 'Download and remove files',
-            });
-
-            act(() => {
-                userEvent.click(sideMenuDownloadButton);
-            });
-            await waitFor(() => {
-                expect(
-                    screen.getByText('Are you sure you want to download and remove this record?'),
-                ).toBeInTheDocument();
-            });
-        };
-
-        const clickRedDownloadButton = () => {
-            const redDownloadButton = screen.getByRole('button', {
-                name: 'Yes, download and remove',
-            });
-
-            act(() => {
-                userEvent.click(redDownloadButton);
-            });
-        };
-
-        it('renders warning callout, header and button', async () => {
-            renderComponentForNonBSOLGPAdmin();
-
-            expect(screen.getByText('Before downloading')).toBeInTheDocument();
-            expect(screen.getByText('Available records')).toBeInTheDocument();
-            expect(screen.getByTestId('download-and-remove-record-btn')).toBeInTheDocument();
-        });
-
-        it('clicking the side menu download button should show confirmation message, checkbox, red download button and cancel button', async () => {
-            renderComponentForNonBSOLGPAdmin();
-
-            const downloadButton = screen.getByTestId('download-and-remove-record-btn');
-
-            act(() => {
-                userEvent.click(downloadButton);
-            });
-
-            await waitFor(() => {
-                expect(
-                    screen.getByText('Are you sure you want to download and remove this record?'),
-                ).toBeInTheDocument();
-            });
-            expect(
-                screen.getByText(
-                    "If you download this record, it removes from our storage. You must keep the patient's record safe.",
-                ),
-            ).toBeInTheDocument();
-            expect(
-                screen.getByRole('checkbox', {
-                    name: 'I understand that downloading this record removes it from storage.',
-                }),
-            ).toBeInTheDocument();
-            expect(
-                screen.getByRole('button', { name: 'Yes, download and remove' }),
-            ).toBeInTheDocument();
-            expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-        });
-
-        it('when checkbox is unchecked, clicking red download button should show an alert and not allowing download', async () => {
-            renderComponentForNonBSOLGPAdmin();
-            await showConfirmationMessage();
-
-            clickRedDownloadButton();
-
-            await waitFor(() => {
-                expect(
-                    screen.getByRole('alert', { name: 'There is a problem' }),
-                ).toBeInTheDocument();
-            });
-            expect(
-                screen.getByText('You must confirm if you want to download and remove this record'),
-            ).toBeInTheDocument();
-            expect(
-                screen.getByText('Confirm if you want to download and remove this record'),
-            ).toBeInTheDocument();
-            expect(mockSetStage).not.toBeCalled();
-        });
-
-        it('when checkbox is unchecked, clicking "Download and remove" button twice will bring up a warning callout message', async () => {
-            renderComponentForNonBSOLGPAdmin();
-            await showConfirmationMessage();
-
-            act(() => {
-                userEvent.click(
-                    screen.getByRole('button', {
-                        name: 'Download and remove files',
-                    }),
-                );
-            });
-
-            expect(
-                screen.getByText('You must confirm if you want to download and remove this record'),
-            ).toBeInTheDocument();
-            expect(
-                screen.getByText('Confirm if you want to download and remove this record'),
-            ).toBeInTheDocument();
-            expect(mockSetStage).not.toBeCalled();
-        });
-
-        it('when checkbox is checked, clicking red download button should proceed to download and delete process', async () => {
-            renderComponentForNonBSOLGPAdmin();
-            await showConfirmationMessage();
-
-            act(() => {
-                userEvent.click(screen.getByRole('checkbox'));
-            });
-
-            clickRedDownloadButton();
-
-            await waitFor(() => {
-                expect(mockNavigate).toBeCalledWith(
-                    routeChildren.LLOYD_GEORGE_DOWNLOAD_IN_PROGRESS,
-                );
-            });
-        });
-
-        it('when checkbox is toggled 2 times ( = unchecked), red download button should not proceed to download', async () => {
-            renderComponentForNonBSOLGPAdmin();
-            await showConfirmationMessage();
-
-            const checkBox = screen.getByRole('checkbox');
-            act(() => {
-                userEvent.click(checkBox);
-                userEvent.click(checkBox);
-            });
-
-            clickRedDownloadButton();
-
-            await waitFor(() => {
-                expect(
-                    screen.getByRole('alert', { name: 'There is a problem' }),
-                ).toBeInTheDocument();
-            });
-            expect(mockSetStage).not.toBeCalled();
-        });
-
-        it('clicking cancel button will hide the confirmation message', async () => {
-            renderComponentForNonBSOLGPAdmin();
-            await showConfirmationMessage();
-
-            act(() => {
-                userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-            });
-
-            await waitFor(() => {
-                expect(
-                    screen.queryByText('Are you sure you want to download and remove this record?'),
-                ).not.toBeInTheDocument();
-            });
-        });
-
-        describe('Accessibility (non BSOL)', () => {
-            it('pass accessibility checks at page entry point', async () => {
-                renderComponentForNonBSOLGPAdmin();
-
-                const results = await runAxeTest(document.body);
-                expect(results).toHaveNoViolations();
-            });
-
-            it('pass accessibility checks when Download & Remove confirmation message is showing up', async () => {
-                renderComponentForNonBSOLGPAdmin();
-                await showConfirmationMessage();
-
-                const results = await runAxeTest(document.body);
-                expect(results).toHaveNoViolations();
-            });
-
-            it('pass accessibility checks when error box is showing up', async () => {
-                renderComponentForNonBSOLGPAdmin();
-                await showConfirmationMessage();
-                const confirmButton = await screen.findByRole('button', {
-                    name: 'Yes, download and remove',
-                });
-                act(() => {
-                    userEvent.click(confirmButton);
-                });
-                expect(
-                    await screen.findByText(
-                        'Confirm if you want to download and remove this record',
-                    ),
-                ).toBeInTheDocument();
-
-                // to supress act() warning from non-captured classname change
-                // eslint-disable-next-line testing-library/no-node-access
-                const fieldsetParentDiv = screen.getByTestId('fieldset').closest('div');
-                await waitFor(() => {
-                    expect(fieldsetParentDiv).toHaveClass('nhsuk-form-group--error');
-                });
-
-                const results = await runAxeTest(document.body);
-                expect(results).toHaveNoViolations();
-            });
+            expect(screen.getByText('View in full screen')).toBeInTheDocument();
         });
     });
 
@@ -363,18 +157,6 @@ describe('LloydGeorgeViewRecordStage', () => {
         ).not.toBeInTheDocument();
     });
 
-    it('does not render warning callout or button when user is GP clinical and non BSOL', async () => {
-        mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_CLINICAL);
-        mockedIsBSOL.mockReturnValue(false);
-
-        renderComponent();
-
-        expect(screen.queryByText('Before downloading')).not.toBeInTheDocument();
-        expect(
-            screen.queryByRole('button', { name: 'Download and remove files' }),
-        ).not.toBeInTheDocument();
-    });
-
     it('does not render warning callout or button when user is GP clinical and BSOL', async () => {
         mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_CLINICAL);
         mockedIsBSOL.mockReturnValue(true);
@@ -482,13 +264,15 @@ const renderComponent = (propsOverride?: Partial<Props>) => {
     const props: Omit<Props, 'setStage' | 'stage'> = {
         downloadStage: DOWNLOAD_STAGE.SUCCEEDED,
         lastUpdated: mockPdf.lastUpdated,
-        numberOfFiles: mockPdf.numberOfFiles,
-        totalFileSizeInBytes: mockPdf.totalFileSizeInBytes,
         refreshRecord: jest.fn(),
         cloudFrontUrl: 'http://test.com',
         showMenu: true,
         resetDocState: jest.fn(),
         ...propsOverride,
     };
-    render(<TestApp {...props} />);
+    render(
+        <SessionProvider sessionOverride={{ isLoggedIn: true }}>
+            <TestApp {...props} />
+        </SessionProvider>,
+    );
 };