Merge commit '84d0cfbfa36f1aac928c703d57a8bcebfb2374f8' into ian/353-…

…flaky-tests

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

@@ -123,12 +123,10 @@ test("requires email verification", async () => {
   render(<App />);
   await waitFor(() => {
     // application contents should not have been rendered without verification
-    expect(
-      screen.queryByRole("heading", { name: authenticatedTextMatch })
-    ).not.toBeInTheDocument();
+    expect(screen.queryByTestId("PageTitle")).not.toBeInTheDocument();
     // there should be a message about the verification requirement
     expect(
-      screen.getByRole("heading", { name: /verification/i })
+      screen.getByRole("heading", { name: /verification/i, hidden: true })
     ).toBeInTheDocument();
   });
 });

spotlight-client/src/Loading/Loading.tsx

@@ -53,7 +53,7 @@ const LoadingSpinnerText = styled.div`
 
 export default function Loading(): JSX.Element {
   return (
-    <LoadingWrapper role="status">
+    <LoadingWrapper role="status" data-testid="LoadingIndicator">
       <LoadingSpinnerIcon />
       <LoadingSpinnerText>Data is loading</LoadingSpinnerText>
     </LoadingWrapper>

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

@@ -62,7 +62,7 @@ test("hydrated", async () => {
   });
 
   await waitFor(() => {
-    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("LoadingIndicator")).not.toBeInTheDocument();
     expect(screen.getByText("hydrated")).toBeInTheDocument();
   });
 });

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

@@ -58,13 +58,7 @@ test("total counts", async () => {
   renderWithStore(<VizPopulationBreakdownByLocation metric={metric} />);
 
   await waitFor(() => {
-    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,
-    });
-
+    const stat = screen.getByLabelText("Total people in prison");
     expect(stat).toBeVisible();
     expect(within(stat).getByText("2,041")).toBeVisible();
   });
@@ -162,12 +156,7 @@ test("counts filtered by locality", async () => {
   fireEvent.click(option);
 
   await waitFor(() => {
-    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,
-    });
+    const stat = screen.getByLabelText("Total people in prison");
     expect(within(stat).getByText("413")).toBeVisible();
   });