CRDCDH-1003 Support Data File visualization

src/components/DataSubmissions/SubmittedDataFilters.test.tsx

@@ -3,6 +3,7 @@ import { render, waitFor, within } from "@testing-library/react";
 import UserEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { MockedProvider, MockedResponse } from "@apollo/client/testing";
+import { act } from "react-dom/test-utils";
 import { SubmittedDataFilters } from "./SubmittedDataFilters";
 import { SUBMISSION_STATS, SubmissionStatsResp } from "../../graphql";
 
@@ -150,6 +151,46 @@ describe("SubmittedDataFilters cases", () => {
     await waitFor(() => expect(muiSelectBox).toHaveTextContent("FIRST"));
   });
 
+  it("should NOT show the nodeType 'Data File'", async () => {
+    const mocks: MockedResponse<SubmissionStatsResp>[] = [
+      {
+        request: {
+          query: SUBMISSION_STATS,
+        },
+        variableMatcher: () => true,
+        result: {
+          data: {
+            submissionStats: {
+              stats: [
+                { ...baseStatistic, nodeName: "Participant", total: 3 },
+                { ...baseStatistic, nodeName: "Data File", total: 2 },
+                { ...baseStatistic, nodeName: "File", total: 1 },
+              ],
+            },
+          },
+        },
+      },
+    ];
+
+    const { getByTestId, getByText, getAllByText } = render(
+      <TestParent mocks={mocks}>
+        <SubmittedDataFilters submissionId="id-test-filtering-data-file" />
+      </TestParent>
+    );
+
+    const muiSelectBox = within(getByTestId("data-content-node-filter")).getByRole("button");
+
+    await act(async () => UserEvent.click(muiSelectBox));
+
+    await waitFor(() => {
+      // Sanity check that the box is open
+      expect(() => getAllByText(/participant/i)).not.toThrow();
+      expect(() => getByText(/file/i)).not.toThrow();
+      // This should throw an error
+      expect(() => getByText(/data file/i)).toThrow();
+    });
+  });
+
   // NOTE: This test no longer applies since the component fetches it's own data.
   // it("should update the empty selection when the node types are populated", async () => {
   //   const stats: SubmissionStatistic[] = [

src/components/DataSubmissions/SubmittedDataFilters.tsx

@@ -91,7 +91,8 @@ export const SubmittedDataFilters: FC<SubmittedDataFiltersProps> = ({
       cloneDeep(data?.submissionStats?.stats)
         ?.sort(compareNodeStats)
         ?.reverse()
-        ?.map((stat) => stat.nodeName),
+        ?.map((stat) => stat.nodeName)
+        ?.filter((nodeType) => nodeType?.toLowerCase() !== "data file"),
     [data?.submissionStats?.stats]
   );
 

src/components/DataSubmissions/ValidationStatistics.test.tsx

@@ -0,0 +1,73 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import ValidationStatistics from "./ValidationStatistics";
+
+const baseSubmission: Omit<Submission, "_id"> = {
+  status: "New",
+  name: "",
+  submitterID: "",
+  submitterName: "",
+  organization: undefined,
+  dataCommons: "",
+  modelVersion: "",
+  studyAbbreviation: "",
+  dbGaPID: "",
+  bucketName: "",
+  rootPath: "",
+  metadataValidationStatus: "New",
+  fileValidationStatus: "New",
+  fileErrors: [],
+  history: [],
+  conciergeName: "",
+  conciergeEmail: "",
+  intention: "New",
+  createdAt: "",
+  updatedAt: "",
+  crossSubmissionStatus: "New",
+  otherSubmissions: null,
+};
+
+describe("Accessibility", () => {
+  it("should not have accessibility violations", async () => {
+    const { container, getByTestId } = render(
+      <ValidationStatistics
+        dataSubmission={{
+          ...baseSubmission,
+          _id: "id-accessibility-base-case",
+        }}
+        statistics={[
+          { nodeName: "node1", total: 5, new: 1, passed: 2, error: 3, warning: 4 },
+          { nodeName: "node2", total: 10, new: 3, passed: 3, warning: 3, error: 1 },
+          { nodeName: "node3", total: 33, new: 0, passed: 11, warning: 11, error: 11 },
+        ]}
+      />
+    );
+
+    expect(await axe(container)).toHaveNoViolations();
+    expect(getByTestId("statistics-charts-container")).toBeVisible();
+  });
+
+  it("should not have accessibility violations (loading)", async () => {
+    const { container, getByTestId } = render(
+      <ValidationStatistics dataSubmission={undefined} statistics={undefined} />
+    );
+
+    expect(await axe(container)).toHaveNoViolations();
+    expect(getByTestId("statistics-loader-container")).toBeVisible();
+  });
+
+  it("should not have accessibility violations (no data)", async () => {
+    const { container, getByTestId } = render(
+      <ValidationStatistics
+        dataSubmission={{
+          ...baseSubmission,
+          _id: "id-accessibility-no-data",
+        }}
+        statistics={[]}
+      />
+    );
+
+    expect(await axe(container)).toHaveNoViolations();
+    expect(getByTestId("statistics-empty-container")).toBeVisible();
+  });
+});

src/components/DataSubmissions/ValidationStatistics.tsx

@@ -145,15 +145,15 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
 
   if (!dataSubmission || !dataset) {
     return (
-      <StyledChartArea direction="row">
+      <StyledChartArea direction="row" data-testid="statistics-loader-container">
         <SuspenseLoader fullscreen={false} />
       </StyledChartArea>
     );
   }
 
   if (!dataset?.some((s) => s.total > 0)) {
     return (
-      <StyledChartArea direction="row" hasNoData>
+      <StyledChartArea direction="row" data-testid="statistics-empty-container" hasNoData>
         <StyledNoData variant="h6">
           This is the data submission visualization section which displays validation results for
           uploaded data. After uploading and validating the data (see below), the visualization
@@ -164,7 +164,7 @@ const DataSubmissionStatistics: FC<Props> = ({ dataSubmission, statistics }: Pro
   }
 
   return (
-    <StyledChartArea direction="row">
+    <StyledChartArea direction="row" data-testid="statistics-charts-container">
       <Stack direction="column" alignItems="center" flex={1}>
         <StyledSectionTitle variant="h6">Summary Total</StyledSectionTitle>
         <NodeTotalChart data={primaryChartSeries} normalize={tabValue === "percentage"} />

src/setupTests.ts → src/setupTests.tsx

@@ -46,3 +46,15 @@ global.DataTransfer = class DataTransfer {
     return this.items.array;
   }
 } as typeof DataTransfer;
+
+/**
+ * Mocks the Recharts ResponsiveContainer component for testing
+ *
+ * @note This solves the missing ResizeObserver error in Jest
+ * @see Recharts documentation: https://recharts.org/en-US/guide
+ */
+const MockResponsiveContainer = (props) => <div {...props} />;
+jest.mock("recharts", () => ({
+  ...jest.requireActual("recharts"),
+  ResponsiveContainer: MockResponsiveContainer,
+}));