10349 Bug: Idle Logout Issues (with automated tests)

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/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"]',
+      ),
+    );
+  });
+});