[DT-947]Fix flaky CohortEditor unit tests (#5153)

Co-authored-by: rjohanek <[email protected]>

Author: rjohanek

.pnp.cjs

@@ -53,6 +53,7 @@
     "react-dropzone": "^11.4.0",
     "react-favicon": "^2.0.3",
     "react-hyperscript-helpers": "^2.0.0",
+    "react-lazy-named": "^1.2.2",
     "react-modal": "^3.16.1",
     "react-notifications-component": "^4.0.1",
     "react-oidc-context": "^2.1.0",

.yarn/cache/react-lazy-named-npm-1.2.2-0bdbb21359-0ba297c460.zip

@@ -1,8 +1,9 @@
 import { SpinnerOverlay, useUniqueId } from '@terra-ui-packages/components';
 import { subDays } from 'date-fns/fp';
 import _ from 'lodash/fp';
-import { lazy, Suspense, useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
 import React from 'react';
+import lazy from 'react-lazy-named';
 import { ErrorAlert } from 'src/alerts/ErrorAlert';
 import { ExternalLink } from 'src/billing/NewBillingProjectWizard/StepWizard/ExternalLink';
 import { CostCard } from 'src/billing/SpendReport/CostCard';
@@ -21,7 +22,7 @@ import { FormLabel } from 'src/libs/forms';
 import * as Nav from 'src/libs/nav';
 import { useCancellation } from 'src/libs/react-utils';
 
-const LazyChart = lazy(() => import('src/components/Chart'));
+const LazyChart = lazy(() => import('src/components/Chart'), 'Chart');
 const maxWorkspacesInChart = 10;
 
 const OtherMessaging = ({ cost, cloudPlatform }) => {

package.json

@@ -10,6 +10,4 @@ highchartsExporting(Highcharts);
 // this is needed to permit use of internally constructed links in a Highcharts formatter
 Highcharts.AST.bypassHTMLFiltering = true;
 
-const Chart = ({ options }) => h(HighchartsReact, { highcharts: Highcharts, options });
-
-export default Chart;
+export const Chart = ({ options }) => h(HighchartsReact, { highcharts: Highcharts, options });

src/billing/SpendReport/SpendReport.tsx

@@ -42,6 +42,14 @@ jest.mock('lodash/fp', (): LodashFpExports => {
   };
 });
 
+type ChartExports = typeof import('src/components/Chart');
+jest.mock('src/components/Chart', (): ChartExports => {
+  return {
+    ...jest.requireActual('src/components/Chart'),
+    Chart: jest.fn().mockReturnValue('Chart'),
+  };
+});
+
 describe('CohortEditor', () => {
   type CriteriaViewPropsOverrides = {
     criteria: AnyCriteria;
@@ -436,7 +444,7 @@ describe('CohortEditor', () => {
     expect(screen.getByText('Group 1')).toBeTruthy();
   });
 
-  it.skip('can add/delete criteria groups and maintain user understandable names', async () => {
+  it('can add/delete criteria groups and maintain user understandable names', async () => {
     // Arrange
     showCohortEditor();
     const user = userEvent.setup();

src/components/Chart.js

@@ -2,7 +2,7 @@ import { Spinner, useLoadedData } from '@terra-ui-packages/components';
 import _ from 'lodash/fp';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { div, h, h2, h3, strong } from 'react-hyperscript-helpers';
-import Chart from 'src/components/Chart';
+import { Chart } from 'src/components/Chart';
 import { ButtonOutline, ButtonPrimary, GroupedSelect, Link, Select } from 'src/components/common';
 import Slider from 'src/components/common/Slider';
 import { icon } from 'src/components/icons';

src/dataset-builder/CohortEditor.test.ts

@@ -1,7 +1,7 @@
 import { useLoadedData } from '@terra-ui-packages/components';
 import _ from 'lodash/fp';
 import { div, h, h1, h3 } from 'react-hyperscript-helpers';
-import Chart from 'src/components/Chart';
+import { Chart } from 'src/components/Chart';
 import { ButtonOutline, spinnerOverlay } from 'src/components/common';
 import FooterWrapper from 'src/components/FooterWrapper';
 import { MarkdownViewer } from 'src/components/markdown';

src/dataset-builder/CohortEditor.ts

@@ -14500,6 +14500,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-lazy-named@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "react-lazy-named@npm:1.2.2"
+  dependencies:
+    lodash.get: ^4.4.2
+  peerDependencies:
+    react: ^16.6.0 || ^17.0.0-alpha
+    react-dom: ^16.6.0 || ^17.0.0-alpha
+  checksum: 0ba297c460c7174791a626d9d68873ba1670071b288faae423a1da5417897c01db983dfaa30906b9a2fd3a571fa3b5fc11b738f12096c8b10292ac8a179a9e8d
+  languageName: node
+  linkType: hard
+
 "react-lifecycles-compat@npm:^3.0.0, react-lifecycles-compat@npm:^3.0.4, react-lifecycles-compat@npm:~3.0.4":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"
@@ -16240,6 +16252,7 @@ __metadata:
     react-dropzone: ^11.4.0
     react-favicon: ^2.0.3
     react-hyperscript-helpers: ^2.0.0
+    react-lazy-named: ^1.2.2
     react-modal: ^3.16.1
     react-notifications-component: ^4.0.1
     react-oidc-context: ^2.1.0