merge staging into prod

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 orbs:
   git-shallow-clone: guitarrapc/git-shallow-clone@2.8.0
 
-efcms-docker-image: &efcms-docker-image $AWS_ACCOUNT_ID.dkr.ecr.us-east-1.amazonaws.com/ef-cms-us-east-1:4.3.6
+efcms-docker-image: &efcms-docker-image $AWS_ACCOUNT_ID.dkr.ecr.us-east-1.amazonaws.com/ef-cms-us-east-1:4.3.7
 
 parameters:
   run_build_and_deploy:

Dockerfile

@@ -37,7 +37,7 @@ RUN apt-get install -y build-essential
 RUN apt-get install -y libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
 
 ENV JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64
-RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64-2.17.24.zip" -o "awscliv2.zip" && \
+RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64-2.17.30.zip" -o "awscliv2.zip" && \
   unzip awscliv2.zip && \
   ./aws/install && \
   rm -rf awscliv2.zip

cypress.config.ts

@@ -14,10 +14,15 @@ import {
   getNewAccountVerificationCode,
   toggleFeatureFlag,
 } from './cypress/helpers/cypressTasks/dynamo/dynamo-helpers';
+import { overrideIdleTimeouts } from './cypress/local-only/support/idleLogoutHelpers';
 import { unzipFile } from './cypress/helpers/file/unzip-file';
 import { waitForNoce } from './cypress/helpers/cypressTasks/wait-for-noce';
 import { waitForPractitionerEmailUpdate } from './cypress/helpers/cypressTasks/wait-for-practitioner-email-update';
 
+import type { Page } from 'puppeteer-core';
+
+import { retry, setup } from '@cypress/puppeteer';
+
 // eslint-disable-next-line import/no-default-export
 export default defineConfig({
   chromeWebSecurity: false,
@@ -77,6 +82,66 @@ export default defineConfig({
           });
         },
       });
+      // Setup for puppeteer, which supports multi-tab tests
+      // Define your function in onMessage, and call it like cy.puppeteer('yourFunctionName', arg1, arg2 ...)
+      setup({
+        on,
+        onMessage: {
+          async closeTab(browser: any, url: string) {
+            const desiredPage = await retry<Promise<Page>>(async () => {
+              const pages = await browser.pages();
+              const page = pages.find(p => p.url().includes(url));
+              if (!page) throw new Error('Could not find page');
+              return page;
+            });
+            await desiredPage.close();
+          },
+          async openExistingTabAndCheckSelectorExists(
+            browser: any,
+            url: string,
+            selector: string,
+            close: boolean = true,
+          ) {
+            // Note that browser.pages is *not* sorted in any particular order.
+            // Therefore we pass in the URL we want to find rather than an index.
+
+            // Wait until the new tab loads
+            const desiredPage = await retry<Promise<Page>>(async () => {
+              const pages = await browser.pages();
+              const page = pages.find(p => p.url().includes(url));
+              if (!page) throw new Error('Could not find page');
+              return page;
+            });
+
+            // Activate it
+            await desiredPage.bringToFront();
+
+            // Make sure selector exists
+            await desiredPage.waitForSelector(selector, { timeout: 30000 });
+
+            if (close) {
+              await desiredPage.close();
+            }
+            return true;
+          },
+          async openNewTab(
+            browser: any,
+            url: string,
+            sessionModalTimeout: number,
+            sessionTimeout: number,
+          ) {
+            const page = await browser.newPage();
+            await page.goto(url, { waitUntil: 'networkidle2' });
+
+            await page.evaluate(overrideIdleTimeouts, {
+              sessionModalTimeout,
+              sessionTimeout,
+            });
+
+            return page;
+          },
+        },
+      });
     },
     specPattern: 'cypress/local-only/tests/**/*.cy.ts',
     supportFile: 'cypress/local-only/support/index.ts',

cypress/CYPRESS-README.md

@@ -1,7 +1,7 @@
 
 # Best Practices
 
-In order to write a realiable cypress test suites, there are some best practices we should follow that our outlined in the cypress documentation and also some best practices we have learned from trying to write realiable tests.
+In order to write a reliable cypress test suites, there are some best practices we should follow that our outlined in the cypress documentation and also some best practices we have learned from trying to write reliable tests.
 
 ## DO'S
 - Access DOM elements using `data-testid selector`.
@@ -11,7 +11,7 @@ In order to write a realiable cypress test suites, there are some best practices
   - Avoid cy.get('#my-id').
 - Wait for actions to finish explicitly.
   - Always verify something on the page after running an action or loading a new page.  For example, if you click on a button which updates a practitioner name, be sure to wait for a success alert to appear before trying to move onto the next steps in your test.  Failing to do this will result in race conditions and flaky tests.  
-  - This is especially important for accessibilty tests, wait explicitly for the page to full load before running an accessibility scan. If you are seeing 'color-contrast' violations that are intermittent you are most likely not waiting for the right element to be loaded before running a scan.
+  - This is especially important for accessibility tests, wait explicitly for the page to full load before running an accessibility scan. If you are seeing 'color-contrast' violations that are intermittent you are most likely not waiting for the right element to be loaded before running a scan.
 - Extract reusable steps.
   - Try to find ways to create helper functions which we can re-use in other tests.  For example, creating a case as a petitioner is a good re-usable flow.  When writing these helpers, be sure they do not contain asserts related to the high level test you are writing.  They should just login as a user, create or modify the data, then return any new created values we may need.
 - Test should be re-runnable.

cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts

@@ -87,11 +87,37 @@ describe('Petitioner Account Creation', () => {
   });
 
   describe('Create Petitioner Account and login', () => {
-    const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
     const TEST_NAME = 'Cypress Test';
     const TEST_PASSWORD = generatePassword(VALID_PASSWORD_CONFIG);
 
-    it('should create an account and verify it using the verification link, then login and create an eletronic case', () => {
+    it('should prevent multiple submissions', () => {
+      const TEST_EMAIL = `cypress_test_account+no_multiple_submissions_${GUID}@example.com`;
+      cy.visit('/create-account/petitioner');
+      cy.get('[data-testid="petitioner-account-creation-email"]').type(
+        TEST_EMAIL,
+      );
+      cy.get('[data-testid="petitioner-account-creation-name"]').type(
+        TEST_NAME,
+      );
+      cy.get('[data-testid="petitioner-account-creation-password"]').type(
+        TEST_PASSWORD,
+      );
+      cy.get(
+        '[data-testid="petitioner-account-creation-confirm-password"]',
+      ).type(TEST_PASSWORD);
+      cy.intercept('POST', '/auth/account/create').as('accountCreationRequest');
+
+      // eslint-disable-next-line cypress/unsafe-to-chain-command
+      cy.get('[data-testid="petitioner-account-creation-submit-button"]')
+        .click({ force: true })
+        .click({ force: true });
+
+      cy.wait('@accountCreationRequest');
+      cy.get('@accountCreationRequest.all').should('have.length', 1);
+    });
+
+    it('should create an account and verify it using the verification link, then login and create an electronic case', () => {
+      const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
       createAPetitioner({
         email: TEST_EMAIL,
         name: TEST_NAME,

cypress/helpers/ITestableWindow.ts

@@ -0,0 +1,8 @@
+// An interface for exposing the cerebral controller on the window object, which
+// can be useful for temporarily overwriting constants in cypress.
+export interface ITestableWindow {
+  cerebral: {
+    getState: () => any;
+    getModel: () => any;
+  };
+}

cypress/local-only/support/idleLogoutHelpers.ts

@@ -0,0 +1,19 @@
+import { ITestableWindow } from '../../helpers/ITestableWindow';
+
+// This is a hack, but I do not know a better way.
+export const overrideIdleTimeouts = ({
+  modalTimeout,
+  sessionTimeout,
+  windowObj, // For native cypress, this needs to be defined. For the puppeteer plugin, it should be left blank.
+}: {
+  modalTimeout: number;
+  sessionTimeout: number;
+  windowObj?: ITestableWindow;
+}) => {
+  const currentWindow = windowObj || (window as unknown as ITestableWindow);
+  currentWindow.cerebral.getModel().set(['constants'], {
+    ...currentWindow.cerebral.getState().constants,
+    SESSION_MODAL_TIMEOUT: modalTimeout,
+    SESSION_TIMEOUT: sessionTimeout,
+  });
+};

cypress/local-only/support/index.ts

@@ -1,4 +1,5 @@
 import './commands';
+import '@cypress/puppeteer/support';
 import 'cypress-axe';
 
 before(() => {

cypress/local-only/tests/integration/logoutBehavior/idle-logout.cy.ts

@@ -0,0 +1,91 @@
+import { ITestableWindow } from '../../../../helpers/ITestableWindow';
+import { loginAsColvin } from '../../../../helpers/authentication/login-as-helpers';
+import { overrideIdleTimeouts } from '../../../support/idleLogoutHelpers';
+import { retry } from '../../../../helpers/retry';
+
+describe('Idle Logout Behavior', () => {
+  const DEFAULT_IDLE_TIMEOUT = 500;
+  it('should automatically log user out after refresh with option to log back in', () => {
+    loginAsColvin();
+    cy.reload(); // Refresh ensures we track idle time even without interaction on the page
+    cy.get('[data-testid="header-text"]');
+    cy.window().then((window: Window) => {
+      overrideIdleTimeouts({
+        modalTimeout: DEFAULT_IDLE_TIMEOUT,
+        sessionTimeout: DEFAULT_IDLE_TIMEOUT,
+        windowObj: window as unknown as ITestableWindow,
+      });
+    });
+
+    retry(() => {
+      return cy.get('body').then(body => {
+        return body.find('[data-testid="idle-logout-login-button"]').length > 0;
+      });
+    });
+
+    cy.get('[data-testid="idle-logout-login-button"]').click();
+    cy.get('[data-testid="login-button"]').should('exist');
+  });
+
+  it('should close modal in other tab when loading new tab', () => {
+    loginAsColvin();
+    cy.get('[data-testid="header-text"]');
+    cy.window().then((window: Window) => {
+      overrideIdleTimeouts({
+        modalTimeout: 30000, // We want the modal to appear relatively quickly, but we do not want to sign out
+        sessionTimeout: 1000,
+        windowObj: window as unknown as ITestableWindow,
+      });
+    });
+
+    // Wait until modal is there
+    cy.get('[data-testid="are-you-still-there-modal"]').should('exist');
+
+    const newTabUrl = Cypress.config('baseUrl') + '/messages/my/inbox';
+    cy.puppeteer('openNewTab', newTabUrl);
+
+    // Then confirm opening a new tab closed the modal
+    cy.get('[data-testid="are-you-still-there-modal"]').should('not.exist');
+    cy.puppeteer('closeTab', newTabUrl);
+  });
+
+  it('should sign out of all tabs after idle', () => {
+    // Note that throughout this test, we interact with the first tab via cypress
+    // and all other tabs through the puppeteer plugin. Mixing this up will cause errors.
+
+    loginAsColvin();
+    const urls = [
+      '/messages/my/inbox',
+      '/document-qc/section/inbox',
+      '/trial-sessions',
+    ];
+    urls.forEach(url => {
+      cy.puppeteer(
+        'openNewTab',
+        Cypress.config('baseUrl') + url,
+        DEFAULT_IDLE_TIMEOUT,
+        DEFAULT_IDLE_TIMEOUT,
+      );
+    });
+    cy.window().then((window: Window) => {
+      overrideIdleTimeouts({
+        modalTimeout: DEFAULT_IDLE_TIMEOUT,
+        sessionTimeout: DEFAULT_IDLE_TIMEOUT,
+        windowObj: window as unknown as ITestableWindow,
+      });
+    });
+
+    // We sync all the tabs to timeout at the same time by clicking, which broadcasts a "last active" time across tabs.
+    // They should all sign out at the same time.
+    cy.get('body').click();
+
+    cy.get('[data-testid="idle-logout-login-button"]').should('exist');
+    urls.forEach(url =>
+      cy.puppeteer(
+        'openExistingTabAndCheckSelectorExists',
+        url,
+        '[data-testid="idle-logout-login-button"]',
+      ),
+    );
+  });
+});

docs/dependency-updates.md

@@ -77,7 +77,7 @@ Below is a list of dependencies that are locked down due to known issues with se
 
 - When updating puppeteer or puppeteer core in the project, make sure to also match versions in `web-api/runtimes/puppeteer/package.json` as this is our lambda layer which we use to generate pdfs. Puppeteer and chromium versions should always match between package.json and web-api/runtimes/puppeteer/package.json.  Remember to run `npm install --prefix web-api/runtimes/puppeteer` to install and update the package-lock file.
 - Puppeteer also has recommended versions of Chromium, so we should make sure to use the recommended version of chromium for the version of puppeteer that we are on.
-- As of 8/7/2024, we cannot update puppeteer or puppeteer-core beyond 22.13.1 because the latest release of @sparticuz/chromium only supports version 126 of chromium.
+- As of 8/15/2024, we cannot update puppeteer or puppeteer-core beyond 22.13.1 because the latest release of @sparticuz/chromium only supports version 126 of chromium.
 - There is a high-severity security issue with ws (ws affected by a DoS when handling a request with many HTTP headers - https://github.com/advisories/GHSA-3h5v-q93c-6h6q); however, we only use ws on the client side, so this should not be an issue. (We tried to upgrade puppeteer anyway, but unsurprisingly the PDF tests failed because there is no newer version of Chromium that supports puppeteer.)
 
 ### pdfjs-dist
@@ -91,7 +91,6 @@ Below is a list of dependencies that are locked down due to known issues with se
 ### eslint
 - Keep pinned to 8.57.0 as most plugins are not yet compatible with v9.0.0: https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/
 See: https://github.com/jsx-eslint/eslint-plugin-react/issues/3699
-- Keep eslint-plugin-security at 2.1.1 since upgrading makes it only compatible with v9.0.0
 
 ### ws, 3rd party dependency of Cerebral
 - When running npm audit, you'll see a high severity issue with ws, 'affected by a DoS when handling a request with many HTTP headers - https://github.com/advisories/GHSA-3h5v-q93c-6h6q'. This doesn't affect us as the vulnerability is on the server side and we're not using this package on the server. We tried to override this to 5.2.4 and 8.18.0 and weren't able to make this work as import paths have changed. In the mean time, we recommend skipping this issue. We could always fork the cerebral repo in the future if needed.