performance tune some of the problem tests

spotlight-client/src/App-auth.test.tsx

@@ -78,13 +78,12 @@ afterEach(() => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("no auth required", async () => {
+test("no auth required", async () => {
   const App = await getApp();
   render(<App />);
   // site home redirects to the ND home
-  const websiteName = await screen.findByRole("heading", {
-    name: authenticatedTextMatch,
-  });
+  const websiteName = await screen.findByTestId("PageTitle");
+  expect(websiteName).toHaveTextContent(authenticatedTextMatch);
   expect(websiteName).toBeInTheDocument();
 });
 
@@ -113,7 +112,7 @@ test("requires authentication", async () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("requires email verification", async () => {
+test("requires email verification", async () => {
   // configure environment for valid authentication
   process.env.REACT_APP_AUTH_ENABLED = "true";
   process.env.REACT_APP_AUTH_ENV = "development";

spotlight-client/src/App.test.tsx

@@ -108,7 +108,7 @@ describe("navigation", () => {
   });
 
   // TODO (#353) async specs fail intermittently
-  test.skip("links", async () => {
+  test("links", async () => {
     renderNavigableApp();
 
     const inNav = within(screen.getByRole("navigation"));
@@ -120,34 +120,38 @@ describe("navigation", () => {
     });
 
     fireEvent.click(sentencingLink);
-    expect(
-      await screen.findByRole("heading", { name: "Sentencing", level: 1 })
-    ).toBeInTheDocument();
+    // NOTE: *ByRole queries can be too expensive to run async with this much DOM,
+    // so we are using *ByTestId queries here instead
+    await waitFor(async () =>
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+        "Sentencing"
+      )
+    );
 
     fireEvent.click(tenantLink);
-    expect(
-      await screen.findByRole("heading", {
-        name: "Explore correctional data from North Dakota.",
-        level: 1,
-      })
-    ).toBeInTheDocument();
+    await waitFor(async () =>
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+        "Explore correctional data from North Dakota."
+      )
+    );
 
     const disparitiesLink = screen.getByRole("link", {
       name: "Racial Disparities",
     });
     fireEvent.click(disparitiesLink);
-    expect(
-      await screen.findByRole("heading", {
-        name: "Racial Disparities",
-        level: 1,
-      })
-    ).toBeInTheDocument();
+    await waitFor(async () =>
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+        "Racial Disparities"
+      )
+    );
 
     fireEvent.click(homeLink);
     // home redirect to ND
-    expect(
-      await screen.findByRole("heading", { name: /North Dakota/, level: 1 })
-    ).toBeInTheDocument();
+    await waitFor(async () =>
+      expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+        "North Dakota"
+      )
+    );
   });
 
   // TODO (#353) async specs fail intermittently

spotlight-client/src/ModelHydrator/ModelHydrator.test.tsx

@@ -57,7 +57,7 @@ test("hydration in progress", () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("hydrated", async () => {
+test("hydrated", async () => {
   runInAction(() => {
     mockModel.isLoading = false;
   });

spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.test.tsx

@@ -31,10 +31,11 @@ beforeEach(() => {
   });
 });
 
+// TODO (#353) same thing as the others
 test("renders all the sections", async () => {
-  expect(
-    await screen.findByRole("heading", { name: "Racial Disparities", level: 1 })
-  ).toBeInTheDocument();
+  expect(await screen.findByTestId("PageTitle")).toHaveTextContent(
+    "Racial Disparities"
+  );
 
   return Promise.all(
     Object.values(narrativeContent.sections).map(async (section) => {

spotlight-client/src/UiLibrary/PageTitle.ts

@@ -20,7 +20,7 @@ import styled from "styled-components/macro";
 import breakpoints from "./breakpoints";
 import { typefaces } from "./typography";
 
-export default styled.h1`
+export default styled.h1.attrs({ "data-testid": "PageTitle" })`
   font-family: ${typefaces.display};
   font-size: ${rem(32)};
   letter-spacing: -0.04em;

spotlight-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.test.tsx

@@ -55,11 +55,17 @@ test("loading", () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("total counts", async () => {
+test("total counts", async () => {
   renderWithStore(<VizPopulationBreakdownByLocation metric={metric} />);
 
   await waitFor(() => {
-    const stat = screen.getByRole("figure", { name: "Total people in prison" });
+    const stat = screen.getByRole("figure", {
+      name: "Total people in prison",
+      // performance is better if we don't check for visibility within the *ByRole query;
+      // it's also redundant since we do it immediately after this
+      hidden: true,
+    });
+
     expect(stat).toBeVisible();
     expect(within(stat).getByText("2,041")).toBeVisible();
   });
@@ -141,7 +147,7 @@ test.skip("total counts", async () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("counts filtered by locality", async () => {
+test("counts filtered by locality", async () => {
   renderWithStore(<VizPopulationBreakdownByLocation metric={metric} />);
 
   await when(() => !metric.isLoading);
@@ -158,7 +164,12 @@ test.skip("counts filtered by locality", async () => {
   fireEvent.click(option);
 
   await waitFor(() => {
-    const stat = screen.getByRole("figure", { name: "Total people in prison" });
+    const stat = screen.getByRole("figure", {
+      name: "Total people in prison",
+      // performance is better if we don't check for visibility within the *ByRole query;
+      // it's also redundant since we do it immediately after this
+      hidden: true,
+    });
     expect(within(stat).getByText("413")).toBeVisible();
   });
 

spotlight-client/src/VizRecidivismRateCumulative/VizRecidivismRateCumulative.test.tsx

@@ -89,7 +89,7 @@ test("total chart", async () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("demographic charts", async () => {
+test("demographic charts", async () => {
   renderWithStore(<VizRecidivismRateCumulative metric={metric} />);
 
   await when(() => !metric.isLoading);
@@ -110,10 +110,6 @@ test.skip("demographic charts", async () => {
     name: "5 lines in a line chart",
   });
 
-  await waitFor(() => {
-    expect(lineChart).toBeVisible();
-  });
-
   expect(
     within(lineChart).getAllByRole("img", {
       name: /^3 point line starting value 0% at 0 ending value \d+% at 2/,
@@ -127,10 +123,6 @@ test.skip("demographic charts", async () => {
     name: "2 lines in a line chart",
   });
 
-  await waitFor(() => {
-    expect(lineChart).toBeVisible();
-  });
-
   expect(
     within(lineChart).getAllByRole("img", {
       name: /^3 point line starting value 0% at 0 ending value \d+% at 2/,
@@ -146,8 +138,6 @@ test.skip("demographic charts", async () => {
     });
   });
 
-  expect(lineChart).toBeVisible();
-
   expect(
     within(lineChart).getAllByRole("img", {
       name: /^3 point line starting value 0% at 0 ending value \d+% at 2/,

spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.test.tsx

@@ -103,7 +103,7 @@ test("total chart", async () => {
 });
 
 // TODO (#353) async specs fail intermittently
-test.skip("demographic charts", async () => {
+test("demographic charts", async () => {
   renderWithStore(<VizRecidivismRateSingleFollowup metric={metric} />);
 
   await when(() => !metric.isLoading);
@@ -148,6 +148,7 @@ test.skip("demographic charts", async () => {
   ).toBe(5);
 });
 
+// TODO: (#353): oneYearChart query finds nothing????
 test("followup period filter", async () => {
   renderWithStore(<VizRecidivismRateSingleFollowup metric={metric} />);
 
@@ -159,8 +160,9 @@ test("followup period filter", async () => {
   fireEvent.click(menuButton);
   fireEvent.click(screen.getByRole("option", { name: "1 Year" }));
 
-  const oneYearChart = screen.getByRole("group", {
+  const oneYearChart = await screen.findByRole("group", {
     name: "10 bars in a bar chart",
+    hidden: true,
   });
   expect(oneYearChart).toBeVisible();