UIE-206 App Startup - unit tests pt1

src/analysis/modals/HailBatchModal.test.ts

@@ -29,7 +29,6 @@ const defaultAjaxImpl = {
   getAppV2: jest.fn(),
 };
 
-jest.mock('src/libs/ajax');
 jest.mock('src/libs/ajax/leonardo/Apps');
 
 describe('HailBatchModal', () => {

src/appLoader.js

@@ -1,48 +1,5 @@
-import 'src/libs/ajax/ajax-override-utils';
 import 'src/style.css';
 
-import _ from 'lodash/fp';
-import { createRoot } from 'react-dom/client';
-import { h } from 'react-hyperscript-helpers';
-import RModal from 'react-modal';
-import { startPollingServiceAlerts } from 'src/alerts/service-alerts-polling';
-import { startPollingVersion } from 'src/alerts/version-polling';
-import { initializeAuthListeners, initializeAuthUser } from 'src/auth/app-load/init-auth';
-import { initAuthTesting } from 'src/auth/app-load/init-auth-test';
-import { initializeAuthMetrics } from 'src/auth/app-load/init-metrics';
-import { initializeClientId } from 'src/auth/app-load/initializeClientId';
-import { initializeSystemProperties } from 'src/auth/system-loader';
-import { setupAjaxTestUtil } from 'src/libs/ajax';
-import { isAxeEnabled } from 'src/libs/config';
-import Main from 'src/pages/Main';
+import { doAppLoad } from 'src/libs/startup/app-loader';
 
-const rootElement = document.getElementById('root');
-
-RModal.defaultStyles = { overlay: {}, content: {} };
-
-window._ = _;
-
-setupAjaxTestUtil();
-
-initializeAuthListeners();
-initializeAuthMetrics();
-initAuthTesting();
-
-initializeClientId().then(() => {
-  const root = createRoot(rootElement);
-  root.render(h(Main));
-
-  // react-notifications-component sets up its Store in the componentDidMount method
-  // of the ReactNotifications component. Use setTimeout to allow that to happen before
-  // doing anything that may show a notification.
-  setTimeout(() => {
-    initializeSystemProperties();
-    initializeAuthUser();
-    startPollingServiceAlerts();
-    startPollingVersion();
-  }, 0);
-
-  if (isAxeEnabled()) {
-    import('src/libs/axe-core');
-  }
-});
+doAppLoad();

src/libs/ajax/ajax-override-utils.test.ts

@@ -1,4 +1,4 @@
-import { makeError, makeSuccess, mapJsonBody } from './ajax-override-utils';
+import { makeError, makeSuccess, mapJsonBody, mountAjaxOverrideUtils } from './ajax-override-utils';
 
 type FetchFn = typeof fetch;
 
@@ -100,3 +100,17 @@ describe('makeSuccess', () => {
     expect(responseBody).toEqual({ message: 'Success' });
   });
 });
+
+describe('mountAjaxOverrideUtils', () => {
+  it('mounts utils for use by end2end tests', () => {
+    //  Act
+    mountAjaxOverrideUtils();
+
+    // Assert
+    expect(window.ajaxOverrideUtils).toBeDefined();
+    expect(window.ajaxOverrideUtils.makeError).toBeDefined();
+    expect(window.ajaxOverrideUtils.makeSuccess).toBeDefined();
+    expect(window.ajaxOverrideUtils.mapJsonBody).toBeDefined();
+    expect(window.ajaxOverrideUtils.overrideAppsWithLocalWDS).toBeDefined();
+  });
+});

src/libs/ajax/ajax-override-utils.ts

@@ -133,4 +133,6 @@ declare global {
   }
 }
 
-window.ajaxOverrideUtils = ajaxOverrideUtils;
+export const mountAjaxOverrideUtils = () => {
+  window.ajaxOverrideUtils = ajaxOverrideUtils;
+};

src/libs/ajax.test.ts → src/libs/startup/ajax-test-root.test.ts

@@ -1,9 +1,9 @@
 import { asMockedFn, partial } from '@terra-ui-packages/test-utils';
+import { Apps, AppsAjaxContract } from 'src/libs/ajax/leonardo/Apps';
+import { Runtimes, RuntimesAjaxContract } from 'src/libs/ajax/leonardo/Runtimes';
+import { Workspaces, WorkspacesAjaxContract } from 'src/libs/ajax/workspaces/Workspaces';
 
-import { AjaxTestingContract, setupAjaxTestUtil } from './ajax';
-import { Apps, AppsAjaxContract } from './ajax/leonardo/Apps';
-import { Runtimes, RuntimesAjaxContract } from './ajax/leonardo/Runtimes';
-import { Workspaces, WorkspacesAjaxContract } from './ajax/workspaces/Workspaces';
+import { AjaxTestingContract, setupAjaxTestUtil } from './ajax-test-root';
 
 jest.mock('src/libs/ajax/leonardo/Apps');
 jest.mock('src/libs/ajax/leonardo/Runtimes');

src/libs/startup/app-loader.test.ts

@@ -0,0 +1,117 @@
+import { delay } from '@terra-ui-packages/core-utils';
+import { act } from 'react-dom/test-utils';
+import { startPollingServiceAlerts } from 'src/alerts/service-alerts-polling';
+import { startPollingVersion } from 'src/alerts/version-polling';
+import { initializeAuthListeners, initializeAuthUser } from 'src/auth/app-load/init-auth';
+import { initAuthTesting } from 'src/auth/app-load/init-auth-test';
+import { initializeAuthMetrics } from 'src/auth/app-load/init-metrics';
+import { initializeClientId } from 'src/auth/app-load/initializeClientId';
+import { initializeSystemProperties } from 'src/auth/system-loader';
+import { mountAjaxOverrideUtils } from 'src/libs/ajax/ajax-override-utils';
+import { isAxeEnabled } from 'src/libs/config';
+import { setupAjaxTestUtil } from 'src/libs/startup/ajax-test-root';
+import { initAxeTools } from 'src/libs/startup/axe-core';
+import Main from 'src/pages/Main';
+import { asMockedFn } from 'src/testing/test-utils';
+
+import { doAppLoad } from './app-loader';
+
+jest.mock('src/alerts/service-alerts-polling');
+jest.mock('src/alerts/version-polling');
+jest.mock('src/auth/app-load/init-auth');
+jest.mock('src/auth/app-load/init-auth-test');
+jest.mock('src/auth/app-load/init-metrics');
+jest.mock('src/auth/app-load/initializeClientId');
+jest.mock('src/auth/system-loader');
+jest.mock('src/libs/ajax/ajax-override-utils');
+jest.mock('src/libs/startup/ajax-test-root');
+jest.mock('src/libs/startup/axe-core');
+
+// avoid brand colors bootstrapping
+jest.mock('src/libs/style');
+
+type ConfigExports = typeof import('src/libs/config');
+jest.mock(
+  'src/libs/config',
+  (): ConfigExports => ({
+    ...jest.requireActual<ConfigExports>('src/libs/config'),
+    getConfig: jest.fn(() => ({ brand: 'terra' })),
+    isAxeEnabled: jest.fn(() => false),
+  })
+);
+
+type MainPageExports = typeof import('src/pages/Main') & {
+  __esModule: true;
+};
+jest.mock(
+  'src/pages/Main',
+  (): MainPageExports => ({
+    __esModule: true,
+    default: jest.fn(),
+  })
+);
+
+describe('doAppLoad', () => {
+  beforeAll(() => {
+    asMockedFn(Main).mockReturnValue('Mock Main Page');
+    asMockedFn(initializeClientId).mockResolvedValue(undefined);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>';
+  });
+
+  it('mounts main component and calls expected load helpers', async () => {
+    // Act
+    await act(async () => {
+      await doAppLoad();
+    });
+    await delay(100);
+
+    // Assert
+
+    expect(startPollingServiceAlerts).toBeCalledTimes(1);
+    expect(startPollingVersion).toBeCalledTimes(1);
+    expect(initializeAuthListeners).toBeCalledTimes(1);
+    expect(initializeAuthUser).toBeCalledTimes(1);
+    expect(initAuthTesting).toBeCalledTimes(1);
+    expect(initializeAuthMetrics).toBeCalledTimes(1);
+    expect(initializeSystemProperties).toBeCalledTimes(1);
+    expect(mountAjaxOverrideUtils).toBeCalledTimes(1);
+    expect(setupAjaxTestUtil).toBeCalledTimes(1);
+
+    expect(initAxeTools).toBeCalledTimes(0);
+
+    // main page component called for rendering
+    expect(Main).toBeCalledTimes(1);
+  });
+
+  it('initialized axe-tools when configured to do so', async () => {
+    // Arrange
+    asMockedFn(isAxeEnabled).mockReturnValue(true);
+
+    // Act
+    await act(async () => {
+      await doAppLoad();
+    });
+    await delay(100);
+
+    // Assert
+
+    expect(startPollingServiceAlerts).toBeCalledTimes(1);
+    expect(startPollingVersion).toBeCalledTimes(1);
+    expect(initializeAuthListeners).toBeCalledTimes(1);
+    expect(initializeAuthUser).toBeCalledTimes(1);
+    expect(initAuthTesting).toBeCalledTimes(1);
+    expect(initializeAuthMetrics).toBeCalledTimes(1);
+    expect(initializeSystemProperties).toBeCalledTimes(1);
+    expect(mountAjaxOverrideUtils).toBeCalledTimes(1);
+    expect(setupAjaxTestUtil).toBeCalledTimes(1);
+
+    // should now be called
+    expect(initAxeTools).toBeCalledTimes(1);
+
+    // main page component called for rendering
+    expect(Main).toBeCalledTimes(1);
+  });
+});

src/libs/startup/app-loader.ts

@@ -0,0 +1,58 @@
+import { LoDashStatic } from 'lodash';
+import _ from 'lodash/fp';
+import { createRoot } from 'react-dom/client';
+import { h } from 'react-hyperscript-helpers';
+import RModal from 'react-modal';
+import { startPollingServiceAlerts } from 'src/alerts/service-alerts-polling';
+import { startPollingVersion } from 'src/alerts/version-polling';
+import { initializeAuthListeners, initializeAuthUser } from 'src/auth/app-load/init-auth';
+import { initAuthTesting } from 'src/auth/app-load/init-auth-test';
+import { initializeAuthMetrics } from 'src/auth/app-load/init-metrics';
+import { initializeClientId } from 'src/auth/app-load/initializeClientId';
+import { initializeSystemProperties } from 'src/auth/system-loader';
+import { mountAjaxOverrideUtils } from 'src/libs/ajax/ajax-override-utils';
+import { isAxeEnabled } from 'src/libs/config';
+import { setupAjaxTestUtil } from 'src/libs/startup/ajax-test-root';
+import Main from 'src/pages/Main';
+
+declare global {
+  interface Window {
+    _: _.LoDashFp & LoDashStatic;
+  }
+}
+
+export const doAppLoad = async () => {
+  const rootElement = document.getElementById('root');
+
+  RModal.defaultStyles = { overlay: {}, content: {} };
+
+  // a shim for package build compatibility
+  window._ = _ as _.LoDashFp & LoDashStatic;
+
+  setupAjaxTestUtil();
+  mountAjaxOverrideUtils();
+
+  initializeAuthListeners();
+  initializeAuthMetrics();
+  initAuthTesting();
+
+  await initializeClientId();
+
+  const root = createRoot(rootElement!);
+  root.render(h(Main));
+
+  // react-notifications-component sets up its Store in the componentDidMount method
+  // of the ReactNotifications component. Use setTimeout to allow that to happen before
+  // doing anything that may show a notification.
+  setTimeout(() => {
+    void initializeSystemProperties();
+    void initializeAuthUser();
+    startPollingServiceAlerts();
+    startPollingVersion();
+  }, 0);
+
+  if (isAxeEnabled()) {
+    const { initAxeTools } = await import('src/libs/startup/axe-core');
+    void initAxeTools();
+  }
+};

src/libs/startup/axe-core.test.ts

@@ -0,0 +1,35 @@
+import axe from '@axe-core/react';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { initAxeTools } from './axe-core';
+
+type AxeCoreExports = {
+  __esModule: true;
+  default: typeof import('@axe-core/react');
+};
+jest.mock(
+  '@axe-core/react',
+  (): AxeCoreExports => ({
+    __esModule: true,
+    default: jest.fn(),
+  })
+);
+describe('initAxeTools', () => {
+  it('initializes Axe Tools with desired settings', async () => {
+    // Act
+    await initAxeTools();
+
+    // Assert
+    expect(axe).toBeCalledTimes(1);
+    expect(axe).toBeCalledWith(React, ReactDOM, 1000, {
+      tags: ['wcag2a', 'wcag2aa'],
+      rules: [
+        {
+          id: 'color-contrast',
+          excludeHidden: true,
+        },
+      ],
+    });
+  });
+});

src/libs/startup/axe-core.ts

@@ -0,0 +1,17 @@
+import axe from '@axe-core/react';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export const initAxeTools = async () => {
+  const config = {
+    tags: ['wcag2a', 'wcag2aa'],
+    rules: [
+      {
+        id: 'color-contrast',
+        excludeHidden: true,
+      },
+    ],
+  };
+
+  await axe(React, ReactDOM, 1000, config);
+};

src/pages/ImportWorkflow/ImportWorkflow.test.ts

@@ -22,7 +22,6 @@ import { importDockstoreWorkflow } from './importDockstoreWorkflow';
 import { ImportWorkflow } from './ImportWorkflow';
 import { useDockstoreWdl } from './useDockstoreWdl';
 
-jest.mock('src/libs/ajax');
 jest.mock('src/libs/ajax/leonardo/Apps');
 jest.mock('src/libs/ajax/billing/Billing');
 jest.mock('src/libs/ajax/workflows-app/Cbas');

src/pages/workflows/workflow-details/WorkflowWdl.test.ts

@@ -4,8 +4,6 @@ import { snapshotStore } from 'src/libs/state';
 import { BaseWorkflowWdl } from 'src/pages/workflows/workflow-details/WorkflowWdl';
 import { renderWithAppContexts } from 'src/testing/test-utils';
 
-jest.mock('src/libs/ajax');
-
 jest.mock('src/libs/notifications');
 
 type NavExports = typeof import('src/libs/nav');

src/pages/workspaces/workspace/modals/FindWorkflowModal.test.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { FindWorkflowModal } from 'src/pages/workspaces/workspace/modals/FindWorkflowModal';
 import { renderWithAppContexts as render } from 'src/testing/test-utils';
 
-jest.mock('src/libs/ajax');
 jest.mock('src/libs/nav', () => ({
   ...jest.requireActual('src/libs/nav'),
   getLink: jest.fn(() => '#workflows'),

src/profile/Profile.test.ts

@@ -9,7 +9,6 @@ import { useUserProfile } from './useUserProfile';
 
 // Workaround for import cycle.
 jest.mock('src/auth/auth');
-jest.mock('src/libs/ajax');
 
 type SignOutExports = typeof import('src/auth/signout/sign-out');
 

src/registration/terms-of-service/terms-of-service-alerts.test.ts

@@ -7,7 +7,6 @@ import { authStore, TermsOfServiceStatus } from 'src/libs/state';
 import * as TosAlerts from 'src/registration/terms-of-service/terms-of-service-alerts';
 import { renderWithAppContexts as render } from 'src/testing/test-utils';
 
-jest.mock('src/libs/ajax');
 jest.mock('src/libs/ajax/Metrics');
 
 jest.mock('src/libs/nav', () => ({