feat(tests): add

src/api/assessments.js

@@ -22,7 +22,7 @@ export const fetchAssetTypes = async (assessment) => {
 
   if (!response.ok) {
     throw new Error(
-      `An error occured while retrieving data types for ${assessment}`
+      `An error occurred while retrieving data types for ${assessment}`
     );
   }
 
@@ -43,7 +43,7 @@ export const fetchAssessmentAssets = async (assessment, types) => {
 
   if (!response.ok) {
     throw new Error(
-      `An error occured while retrieving assets for assessment ${assessment} and types ${types.toString()}`
+      `An error occurred while retrieving assets for assessment ${assessment} and types ${types.toString()}`
     );
   }
 
@@ -64,7 +64,7 @@ export const fetchAssessmentDependencies = async (assessment, types) => {
 
   if (!response.ok) {
     throw new Error(
-      `An error occured while retrieving dependencies for assessment ${assessment} and types ${typeParams.toString()}`
+      `An error occurred while retrieving dependencies for assessment ${assessment} and types ${typeParams.toString()}`
     );
   }
 

src/api/common.js

@@ -19,7 +19,7 @@ export const fetchResidentialInformation = async (personUri) => {
     fetchOptions
   );
   if (!response.ok) {
-    throw new Error("An error occured while retrieving residential information");
+    throw new Error("An error occurred while retrieving residential information");
   }
   return response.json();
 };
@@ -31,20 +31,20 @@ export const fetchFloodTimeline = async (floodArea) => {
   const response = await fetch(createParalogEndpoint(`states?${queryParam}`), fetchOptions);
 
   if (!response.ok) {
-    throw new Error(`An error occured while retrieving flood timeline for Flood Area ${floodArea}`);
+    throw new Error(`An error occurred while retrieving flood timeline for Flood Area ${floodArea}`);
   }
 
   return response.json();
 };
 
 export const fetchFloodMonitoringStations = async () => {
   const response = await fetch(
-    "https://environment.data.gov.uk/flood-monitoring/id/stations?catchmentName=Isle%20of%20Wight"
+    "https://environment.data.gov.uk/flood-monitoring/id/stations?catchmentName=Kangaroo%20Island"
   );
 
   if (!response.ok) {
     throw new Error(
-      "An error occured while retrieving flood monitoring stations for the Island of Ice"
+      "An error occurred while retrieving flood monitoring stations for the Kangaroo Island"
     );
   }
   return response.json();
@@ -54,7 +54,7 @@ export const fetchBuildingsEpcRating = async () => {
   const response = await fetch(createParalogEndpoint("buildings"));
 
   if (!response.ok) {
-    throw new Error("An error occured while retrieving building epc ratings for the Island of Ice");
+    throw new Error("An error occurred while retrieving building epc ratings for the Kangaroo Island");
   }
   return response.json();
 };

src/api/flood-watch-areas.js

@@ -23,7 +23,7 @@ export const fetchFloodAreaPolygon = async (polygonUri) => {
 
   if (!response.ok) {
     throw new Error(
-      data?.detail || `An error occured while retrieving polygon ${polygonUri}`
+      data?.detail || `An error occurred while retrieving polygon ${polygonUri}`
     );
   }
   return data;

src/components/Dataset/Assessments.jsx

@@ -16,7 +16,7 @@ const Assessments = () => {
   if (isError)
     return (
       <p>
-        An error occured while retrieving assessments. Please try again. If problem persists contact
+        An error occurred while retrieving assessments. Please try again. If problem persists contact
         admin
       </p>
     );

src/components/Dataset/__tests__/AssessmentTypes.test.jsx

@@ -0,0 +1,126 @@
+import { rest } from "msw";
+import { screen, waitForElementToBeRemoved, within } from "@testing-library/react";
+
+import { DatasetProvider, ElementsProvider } from "context";
+import { createParalogEndpoint } from "api/combined";
+import server, { ASSESSMENTS } from "mocks";
+import { mockEmptyResponse, mock400Error } from "mocks/resolvers";
+import { DSProvidersWrapper, renderWithQueryClient } from "test-utils";
+
+import AssessmentTypes from "../AssessmentTypes";
+
+const renderAssessmentTypes = () =>
+  renderWithQueryClient(
+    <DSProvidersWrapper>
+      <DatasetProvider>
+        <AssessmentTypes assessment={ASSESSMENTS[0].uri} />
+      </DatasetProvider>
+    </DSProvidersWrapper>,
+    { wrapper: ElementsProvider }
+  );
+
+const waitForDataToLoad = async () => {
+  await waitForElementToBeRemoved(() => screen.queryByText(/fetching data types/i));
+};
+
+describe("AssessmentTypes component", () => {
+  test("renders grouped types", async () => {
+    renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    expect(
+      screen.getByRole("button", { name: /Green grid/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Facility/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Wastewater complex/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Other/i })).toBeInTheDocument();
+  });
+
+  test("renders green grid types with total count", async () => {
+    const { user } = renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    await user.click(screen.getByRole("button", { name: "Green grid" }));
+    const greenGridListItems = within(
+      screen.getByRole("treeitem", {
+        name: /Green Grid/i,
+        expanded: true,
+      })
+    ).getAllByRole("listitem");
+
+    expect(
+      within(greenGridListItems[0]).getByLabelText(
+        /large wind farm \[8\]/i
+      )
+    ).toBeInTheDocument();
+    expect(
+      within(greenGridListItems[1]).getByLabelText(
+        /small wind farm \[9\]/i
+      )
+    ).toBeInTheDocument();
+  });
+
+  test("renders other types with total count", async () => {
+    const { user } = renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    await user.click(screen.getByRole("button", { name: "Other" }));
+    const otherListItems = within(
+      screen.getByRole("treeitem", {
+        name: /other/i,
+        expanded: true,
+      })
+    ).getAllByRole("listitem");
+
+    expect(within(otherListItems[0]).getByLabelText(/tunnel \[2\]/i)).toBeInTheDocument();
+    expect(within(otherListItems[1]).getByLabelText(/underpass \[2\]/i)).toBeInTheDocument();
+  });
+
+  test("adds type to other when super class endpoint errors", async () => {
+    server.use(
+      rest.get(createParalogEndpoint("ontology/class"), (req, res, ctx) => {
+        const classUri = req.url.searchParams.get("classUri");
+        if (
+          classUri === "http://ies.example.com/ontology/ies#SmallWindFarm"
+        ) {
+          return res.once(ctx.status(404), ctx.json("Not found"));
+        }
+      })
+    );
+    const { user } = renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    await user.click(screen.getByRole("button", { name: "Other" }));
+    const otherListItems = within(
+      screen.getByRole("treeitem", {
+        name: /other/i,
+        expanded: true,
+      })
+    ).getAllByRole("listitem");
+
+    expect(otherListItems).toHaveLength(3);
+    expect(
+      within(otherListItems[0]).getByLabelText(/small wind farm \[9\]/i)
+    ).toBeInTheDocument();
+  });
+
+  test("renders message when asset types are not found", async () => {
+    server.use(rest.get(createParalogEndpoint("assessments/asset-types"), mockEmptyResponse));
+    renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    expect(await screen.findByText("Dataset types not found")).toBeInTheDocument();
+  });
+
+  test("renders error message when /assessments/asset-types api call fails", async () => {
+    server.use(rest.get(createParalogEndpoint("assessments/asset-types"), mock400Error));
+    renderAssessmentTypes();
+    await waitForDataToLoad();
+
+    expect(
+      screen.getByText(
+        "An error occurred while retrieving data types for https://www.example.com/Instruments#wowAssessment"
+      )
+    ).toBeInTheDocument();
+  });
+});

src/components/Dataset/__tests__/Assessments.test.jsx

@@ -0,0 +1,33 @@
+import { rest } from "msw";
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+
+import server from "mocks";
+import { mockEmptyResponse, mockError } from "mocks/resolvers";
+import { renderWithQueryClient } from "test-utils";
+
+import Assessments from "../Assessments";
+import { createParalogEndpoint } from "api/combined";
+
+const assessmentsURL = createParalogEndpoint("assessments");
+
+describe("Assessments component", () => {
+  test("renders message when /assessments are not found", async () => {
+    server.use(rest.get(assessmentsURL, mockEmptyResponse));
+    renderWithQueryClient(<Assessments />);
+
+    await waitForElementToBeRemoved(() => screen.queryByText(/fetching assessments/i));
+    expect(await screen.findByText(/assessments not found/i)).toBeInTheDocument();
+  });
+
+  test("renders error message when /assessments api call fails", async () => {
+    server.use(rest.get(assessmentsURL, mockError));
+    renderWithQueryClient(<Assessments />);
+
+    await waitForElementToBeRemoved(() => screen.queryByText(/fetching assessments/i));
+    expect(
+      screen.getByText(
+        "An error occurred while retrieving assessments. Please try again. If problem persists contact admin"
+      )
+    ).toBeInTheDocument();
+  });
+});

src/components/Dataset/__tests__/Dataset.test.jsx

@@ -0,0 +1,26 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Provider as UseHttpProvider } from "use-http";
+
+import { ElementsProvider } from "context";
+import { DSProvidersWrapper, renderWithQueryClient } from "test-utils";
+import Dataset from "../Dataset";
+
+const user = userEvent.setup();
+
+const AllProviders = ({ children }) => (
+  <UseHttpProvider options={{ cacheLife: 0, cachePolicy: "no-cache" }}>
+    <ElementsProvider>
+      <DSProvidersWrapper>{children}</DSProvidersWrapper>
+    </ElementsProvider>
+  </UseHttpProvider>
+);
+
+describe("Dataset panel", () => {
+  test("collapses", async () => {
+    renderWithQueryClient(<Dataset />, { wrapper: AllProviders });
+
+    await user.click(screen.getByRole("button", { name: "Close dataset panel" }));
+    expect(screen.queryByRole("checkbox", { name: "Energy [25]" })).not.toBeInTheDocument();
+  });
+});

src/components/Dataset/__tests__/FloodAreas.test.jsx

@@ -0,0 +1,72 @@
+import { screen, waitForElementToBeRemoved, within } from "@testing-library/react";
+import { rest } from "msw";
+
+import { DatasetContext, DatasetProvider } from "context";
+import { createParalogEndpoint } from "api/combined";
+import { server } from "mocks";
+import { renderWithQueryClient } from "test-utils";
+
+import FloodAreas from "../FloodAreas";
+
+const waitForFloodAreasToLoad = async () => {
+  await waitForElementToBeRemoved(() => screen.queryByText("Fetching flood areas"));
+};
+
+describe("Flood areas component", () => {
+  test("renders flood watch and flood areas", async () => {
+    const { user } = renderWithQueryClient(
+      <DatasetProvider>
+        <FloodAreas />
+      </DatasetProvider>
+    );
+    await waitForFloodAreasToLoad();
+
+    const floodWatchAreaListItems = screen.getAllByRole("listitem");
+    const toggleBtns = screen.getAllByRole("button", { name: "Toggle" });
+
+    expect(floodWatchAreaListItems).toHaveLength(1);
+    expect(
+      within(floodWatchAreaListItems[0]).getByRole("checkbox", { name: "American" })
+    ).toBeInTheDocument();
+
+    await user.click(toggleBtns[0]);
+    expect(
+      within(floodWatchAreaListItems[0]).getByRole("checkbox", {
+        name: "Seal bay, Newland, and Seddon on the American",
+      })
+    ).toBeInTheDocument();
+    expect(
+      within(floodWatchAreaListItems[0]).getByRole("checkbox", {
+        name: "Blackwell, Bordertown, Minipa, Bridgehaven on the American",
+      })
+    ).toBeInTheDocument();
+  });
+
+  test("renders error when flood watch and flood areas are not found", async () => {
+    server.use(
+      rest.get(createParalogEndpoint("flood-watch-areas"), (req, res, ctx) => {
+        return res.once(ctx.status(404), ctx.json({ detail: "Flood areas not found" }));
+      })
+    );
+    renderWithQueryClient(
+      <DatasetProvider>
+        <FloodAreas />
+      </DatasetProvider>
+    );
+    await waitForFloodAreasToLoad();
+    expect(screen.getByText("Flood areas not found")).toBeInTheDocument();
+  });
+
+  test("renders calls addSelectedFloodAreas when checkbox is clicked", async () => {
+    const mockOnFloodAreaSelect = jest.fn();
+    const { user } = renderWithQueryClient(
+      <DatasetContext.Provider value={{ addSelectedFloodAreas: mockOnFloodAreaSelect }}>
+        <FloodAreas />
+      </DatasetContext.Provider>
+    );
+    await waitForFloodAreasToLoad();
+
+    await user.click(screen.getByRole("checkbox", { name: "American" }));
+    expect(mockOnFloodAreaSelect).toHaveBeenCalled();
+  });
+});