Test fixes

Recidiviz · Apr 11, 2022 · eb294e8 · eb294e8
1 parent eeba611
commit eb294e8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 46 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: ${colors.dataViz[1]}`);
+  ).toHaveStyle(`fill: url(#Black)`);
   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: ${colors.dataViz[4]}`);
+  ).toHaveStyle(`fill: url(#Other)`);
 
   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: ${colors.dataViz[3]}`);
+  ).toHaveStyle(`fill: url(#4049)`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 66",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
+  ).toHaveStyle(`fill: url(#5059)`);
   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: ${colors.dataViz[6]}`);
+  ).toHaveStyle(`fill: url(#70)`);
 
   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: ${colors.dataViz[1]}`);
+  ).toHaveStyle(`fill: url(#Female)`);
 });
 
 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: ${colors.dataViz[0]}`);
+  ).toHaveStyle(`fill: url(#NativeAmerican)`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 124",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
+  ).toHaveStyle(`fill: rgb(217, 169, 95)`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 71",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[2]}`);
+  ).toHaveStyle(`fill: url(#Hispanic)`);
   expect(
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 299",
@@ -198,22 +198,12 @@ test("counts filtered by locality", async () => {
     within(raceChart).getByRole("img", {
       name: "Race or Ethnicity bar value 10",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
+  ).toHaveStyle(`fill: url(#Other)`);
 
   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",
@@ -223,22 +213,17 @@ test("counts filtered by locality", async () => {
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 172",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[3]}`);
+  ).toHaveStyle(`fill: rgb(76, 98, 144)`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 15",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[4]}`);
-  expect(
-    within(ageChart).getByRole("img", {
-      name: "Age Group bar value 26",
-    })
-  ).toHaveStyle(`fill: ${colors.dataViz[5]}`);
+  ).toHaveStyle(`fill: url(#5059)`);
   expect(
     within(ageChart).getByRole("img", {
       name: "Age Group bar value 23",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[6]}`);
+  ).toHaveStyle(`fill: url(#70)`);
 
   const genderChart = screen.getByRole("figure", { name: "Gender" });
   expect(
@@ -253,5 +238,5 @@ test("counts filtered by locality", async () => {
     within(genderChart).getByRole("img", {
       name: "Gender bar value 1",
     })
-  ).toHaveStyle(`fill: ${colors.dataViz[1]}`);
+  ).toHaveStyle(`fill: url(#Female)`);
 });
diff --git a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.test.tsx b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.test.tsx
@@ -136,18 +136,22 @@ test("demographic charts", async () => {
   ).toBe(7);
 });
 
-test("all bars are the same color", async () => {
+test("bars has its own styling", async () => {
   renderWithStore(<VizPrisonStayLengths metric={metric} />);
 
   await when(() => !metric.isLoading);
 
   const chart = screen.getByRole("group", { name: "7 bars in a bar chart" });
 
-  within(chart)
-    .getAllByRole("img")
-    .forEach((el) =>
-      expect(el).toHaveStyle(`fill: ${colors.dataVizNamed.teal}`)
-    );
+  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}`);
 
   expect.hasAssertions();
 });
diff --git a/spotlight-client/src/charts/BarChartTrellis.test.tsx b/spotlight-client/src/charts/BarChartTrellis.test.tsx
@@ -27,8 +27,8 @@ const testData = [
   {
     label: "Group 1",
     records: [
-      { label: "Category A", color: "red", value: 30, pct: 0.3 },
-      { label: "Category B", color: "blue", value: 70, pct: 0.7 },
+      { label: "Category A", color: "red", value: 300, pct: 0.3 },
+      { label: "Category B", color: "blue", value: 700, pct: 0.7 },
     ],
   },
   {
@@ -54,7 +54,8 @@ test("renders charts", () => {
   ).toHaveStyle("fill: red");
   expect(
     screen.getByRole("img", { name: "Category A bar value 40%" })
-  ).toHaveStyle("fill: red");
+    // if value is less than certain threshold (e.g. n=100), then the bar is rendered as a hatch
+  ).toHaveStyle("fill: url(#CategoryA)");
   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,15 +17,17 @@
 
 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");
 
 const testData = [
   { label: "thing 1", color: "red", value: 10, pct: 0.1086956522 },
   { label: "thing 2", color: "blue", value: 50, pct: 0.5434782609 },
-  { label: "thing 3", color: "green", value: 32, pct: 0.347826087 },
+  { label: "thing 3", color: "green", value: 320, pct: 0.347826087 },
 ];
 
 test("renders bubbles for data", () => {
@@ -35,11 +37,17 @@ test("renders bubbles for data", () => {
   const bubbles = within(chart).getByRole("group", { name: "nodes" });
   expect(bubbles).toBeVisible();
   testData.forEach((record) => {
-    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
+    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
+    }
   });
 
   // record values should be labeled as percentages

diff --git a/spotlight-client/src/charts/ProportionalBar.test.tsx b/spotlight-client/src/charts/ProportionalBar.test.tsx
@@ -23,8 +23,8 @@ import ProportionalBar from "./ProportionalBar";
 jest.mock("../MeasureWidth/MeasureWidth");
 
 const testData = [
-  { label: "thing 1", color: "red", value: 10, pct: 0.1639344262 },
-  { label: "thing 2", color: "blue", value: 51, pct: 0.8360655738 },
+  { label: "thing 1", color: "red", value: 1000, pct: 0.1639344262 },
+  { label: "thing 2", color: "blue", value: 510, pct: 0.8360655738 },
 ];
 
 test("renders data", () => {