Test fixes

Recidiviz · Apr 15, 2022 · 54d9525 · 54d9525
1 parent 8e1c2c3
commit 54d9525
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 38 deletions.
diff --git a/...ght-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.test.tsx b/...ght-client/src/VizPopulationBreakdownByLocation/VizPopulationBreakdownByLocation.test.tsx
@@ -76,7 +76,7 @@ test("total counts", async () => {
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 96",
     })
-  ).toHaveStyle(`fill: url(#Black)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 123",
@@ -91,7 +91,7 @@ test("total counts", async () => {
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 12",
     })
-  ).toHaveStyle(`fill: url(#Other)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
 
   const ageChart = screen.getByRole("figure", { name: "Age Group" });
   expect(
@@ -116,12 +116,12 @@ test("total counts", async () => {
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 45",
     })
-  ).toHaveStyle(`fill: url(#4049)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[3]}`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 66",
     })
-  ).toHaveStyle(`fill: url(#5059)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 104",
@@ -131,7 +131,7 @@ test("total counts", async () => {
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 51",
     })
-  ).toHaveStyle(`fill: url(#70)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[6]}`);
 
   const genderChart = screen.getByRole("figure", { name: "Gender" });
   expect(
@@ -146,7 +146,7 @@ test("total counts", async () => {
     within(genderChart).getByRole("img", {
       name: "Gender bar value 67",
     })
-  ).toHaveStyle(`fill: url(#Female)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
 });
 
 test("counts filtered by locality", async () => {
@@ -178,17 +178,17 @@ test("counts filtered by locality", async () => {
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 99",
     })
-  ).toHaveStyle(`fill: url(#NativeAmerican)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[0]}`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 124",
     })
-  ).toHaveStyle(`fill: rgb(217, 169, 95)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 71",
     })
-  ).toHaveStyle(`fill: url(#Hispanic)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[2]}`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 299",
@@ -198,12 +198,22 @@ test("counts filtered by locality", async () => {
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 10",
     })
-  ).toHaveStyle(`fill: url(#Other)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
 
   const ageChart = screen.getByRole("figure", { name: "Age Group" });
   expect(
     within(ageChart).getByRole("group", { name: "7 bars in a bar chart" })
   ).toBeVisible();
+  expect(
+    within(ageChart).getByRole("img", {
+      name: "Age Group bar value 58",
+    })
+  ).toHaveStyle(`fill: ${colors.dataViz[0]}`);
+  expect(
+    within(ageChart).getByRole("img", {
+      name: "Age Group bar value 82",
+    })
+  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 249",
@@ -213,17 +223,22 @@ test("counts filtered by locality", async () => {
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 172",
     })
-  ).toHaveStyle(`fill: rgb(76, 98, 144)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[3]}`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 15",
     })
-  ).toHaveStyle(`fill: url(#5059)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
+  expect(
+    within(ageChart).getByRole("img", {
+      name: "Age Group bar value 26",
+    })
+  ).toHaveStyle(`fill: ${colors.dataViz[5]}`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 23",
     })
-  ).toHaveStyle(`fill: url(#70)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[6]}`);
 
   const genderChart = screen.getByRole("figure", { name: "Gender" });
   expect(
@@ -238,5 +253,5 @@ test("counts filtered by locality", async () => {
     within(genderChart).getByRole("img", {
       name: "Gender bar value 1",
     })
-  ).toHaveStyle(`fill: url(#Female)`);
+  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
 });
diff --git a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.test.tsx b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.test.tsx
@@ -136,22 +136,18 @@ test("demographic charts", async () => {
   ).toBe(7);
 });
 
-test("bars has its own styling", async () => {
+test("all bars are the same color", async () => {
   renderWithStore(<VizPrisonStayLengths metric={metric} />);
 
   await when(() => !metric.isLoading);
 
   const chart = screen.getByRole("group", { name: "7 bars in a bar chart" });
 
-  const hatchedBar = within(chart).getByRole("img", {
-    name: "1–2 bar value 1%",
-  });
-  expect(hatchedBar).toHaveStyle(`fill: url(#12)`);
-
-  const solidBar = within(chart).getByRole("img", {
-    name: "2–3 bar value 17%",
-  });
-  expect(solidBar).toHaveStyle(`fill: ${colors.dataVizNamed.teal}`);
+  within(chart)
+    .getAllByRole("img")
+    .forEach((el) =>
+      expect(el).toHaveStyle(`fill: ${colors.dataVizNamed.teal}`)
+    );
 
   expect.hasAssertions();
 });
diff --git a/spotlight-client/src/charts/BarChartTrellis.test.tsx b/spotlight-client/src/charts/BarChartTrellis.test.tsx
@@ -55,7 +55,7 @@ test("renders charts", () => {
   expect(
     screen.getByRole("img", { name: "Category A bar value 40%" })
     // if value is less than certain threshold (e.g. n=100), then the bar is rendered as a hatch
-  ).toHaveStyle("fill: url(#CategoryA)");
+  ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category B bar value 70%" })
   ).toHaveStyle("fill: blue");

diff --git a/spotlight-client/src/charts/BubbleChart.test.tsx b/spotlight-client/src/charts/BubbleChart.test.tsx
@@ -17,10 +17,8 @@
 
 import { screen, within } from "@testing-library/react";
 import React from "react";
-import { STATISTIC_THRESHOLD } from "../constants";
 import { renderWithStore } from "../testUtils";
 import BubbleChart from "./BubbleChart";
-import { generateHatchFill } from "./utils";
 
 jest.mock("../MeasureWidth/MeasureWidth");
 
@@ -37,17 +35,11 @@ test("renders bubbles for data", () => {
   const bubbles = within(chart).getByRole("group", { name: "nodes" });
   expect(bubbles).toBeVisible();
   testData.forEach((record) => {
-    if (record.value < STATISTIC_THRESHOLD) {
-      expect(
-        // these are the only Semiotic labels we have to work with here
-        within(bubbles).getByRole("img", { name: `Node ${record.label}` })
-      ).toHaveStyle(`fill: ${generateHatchFill(record.label)}`);
-    } else {
-      expect(
-        within(bubbles).getByRole("img", { name: `Node ${record.label}` })
-      ).toHaveStyle(`fill: ${record.color}`);
-      // unfortunately there isn't really any sensible way to inspect the bubble size within JSDOM
-    }
+    expect(
+      // these are the only Semiotic labels we have to work with here
+      within(bubbles).getByRole("img", { name: `Node ${record.label}` })
+    ).toHaveStyle(`fill: ${record.color}`);
+    // unfortunately there isn't really any sensible way to inspect the bubble size within JSDOM
   });
 
   // record values should be labeled as percentages