@databiosphere/findable-ui 33.0.0 → 34.1.0

package/tests/dataDictionaryColumnFilters.test.tsx

@@ -0,0 +1,101 @@
+import { matchers } from "@emotion/jest";
+import { jest } from "@jest/globals";
+import { composeStories } from "@storybook/react";
+import { waitFor } from "@storybook/test";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import React from "react";
+import * as stories from "../src/components/DataDictionary/components/Filters/stories/filters.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import {
+  getButton,
+  getRole,
+  getStartsWithRegex,
+  getText,
+} from "../src/tests/utils";
+
+expect.extend(matchers);
+
+const { Default } = composeStories(stories);
+
+describe("DataDictionaryColumnFilters", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    render(<Default />);
+  });
+
+  it("renders correctly", async () => {
+    expect(await screen.findByText("Required")).toBeInTheDocument();
+  });
+
+  it("renders all filterable column headers", async () => {
+    expect(await screen.findByText("Required")).toBeInTheDocument();
+    expect(await screen.findByText("BioNetwork")).toBeInTheDocument();
+    expect(screen.queryByText("Example")).not.toBeInTheDocument();
+  });
+
+  it("renders BioNetwork filter options", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    expect(getText("Brain")).toBeInTheDocument();
+    expect(getText("Lung")).toBeInTheDocument();
+    expect(getText("Nervous System")).toBeInTheDocument();
+  });
+
+  it("renders BioNetwork filter options in alphabetical order", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    ["Brain", "Lung", "Nervous System", "Clear All"].forEach((expected, i) => {
+      expect(optionEls[i].textContent).toMatch(getStartsWithRegex(expected));
+    });
+  });
+
+  it("can select and deselect a filter option", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    // Select first option.
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    const optionEl = optionEls[0];
+    fireEvent.click(optionEl);
+    await waitFor(() => expect(optionEl).toHaveClass(MUI_CLASSES.SELECTED));
+    // Deselect first option.
+    fireEvent.click(optionEl);
+    await waitFor(() => expect(optionEl).not.toHaveClass(MUI_CLASSES.SELECTED));
+  });
+
+  it("clears all filters", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    // Select all options.
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    optionEls.forEach(async (el) => {
+      fireEvent.click(el);
+      await waitFor(() => expect(el).toHaveClass(MUI_CLASSES.SELECTED));
+    });
+    // Select "Clear All" button.
+    const clearEl = getButton("Clear All");
+    fireEvent.click(clearEl);
+    // Wait for options to be deselected.
+    await waitFor(() =>
+      optionEls.forEach((el) =>
+        expect(el).not.toHaveClass(MUI_CLASSES.SELECTED)
+      )
+    );
+  });
+
+  it("disables Clear All when nothing selected", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    expect(getButton("Clear All")).toHaveClass(MUI_CLASSES.DISABLED);
+  });
+});

package/lib/providers/exploreState/hooks/UseMetaCommands/actions.d.ts

@@ -1,13 +0,0 @@
-import { ExploreState } from "../../../exploreState";
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Pushes the query to the router.
- * @param exploreState - The current explore state.
- */
-export declare function navigateToFilters(exploreState: ExploreState): void;
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Replaces the query to the router.
- * @param exploreState - The current explore state.
- */
-export declare function replaceToFilters(exploreState: ExploreState): void;

package/lib/providers/exploreState/hooks/UseMetaCommands/actions.js

@@ -1,24 +0,0 @@
-import Router from "next/router";
-import { buildQuery } from "./utils";
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Pushes the query to the router.
- * @param exploreState - The current explore state.
- */
-export function navigateToFilters(exploreState) {
-    // Build the query object.
-    const query = buildQuery(exploreState);
-    // Push the query to the router.
-    Router.push({ query }, undefined, { shallow: true });
-}
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Replaces the query to the router.
- * @param exploreState - The current explore state.
- */
-export function replaceToFilters(exploreState) {
-    // Build the query object.
-    const query = buildQuery(exploreState);
-    // Replace the query to the router.
-    Router.replace({ query }, undefined, { shallow: true });
-}

package/lib/providers/exploreState/hooks/UseMetaCommands/types.d.ts

@@ -1,4 +0,0 @@
-export declare enum META_COMMAND {
-    NAVIGATE_TO_FILTERS = "NAVIGATE_TO_FILTERS",
-    REPLACE_TO_FILTERS = "REPLACE_TO_FILTERS"
-}

package/lib/providers/exploreState/hooks/UseMetaCommands/types.js

@@ -1,5 +0,0 @@
-export var META_COMMAND;
-(function (META_COMMAND) {
-    META_COMMAND["NAVIGATE_TO_FILTERS"] = "NAVIGATE_TO_FILTERS";
-    META_COMMAND["REPLACE_TO_FILTERS"] = "REPLACE_TO_FILTERS";
-})(META_COMMAND || (META_COMMAND = {}));

package/lib/providers/exploreState/hooks/UseMetaCommands/useMetaCommands.d.ts

@@ -1,2 +0,0 @@
-import { ExploreStateContextProps } from "../../../exploreState";
-export declare const useMetaCommands: ({ exploreDispatch, exploreState, }: ExploreStateContextProps) => void;

package/lib/providers/exploreState/hooks/UseMetaCommands/useMetaCommands.js

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import { clearMeta } from "../../actions/clearMeta/dispatch";
-import { navigateToFilters, replaceToFilters } from "./actions";
-import { META_COMMAND } from "./types";
-export const useMetaCommands = ({ exploreDispatch, exploreState, }) => {
-    useEffect(() => {
-        const command = exploreState.meta?.command;
-        switch (command) {
-            case META_COMMAND.NAVIGATE_TO_FILTERS:
-                navigateToFilters(exploreState);
-                exploreDispatch(clearMeta());
-                break;
-            case META_COMMAND.REPLACE_TO_FILTERS:
-                replaceToFilters(exploreState);
-                exploreDispatch(clearMeta());
-                break;
-            default:
-                break;
-        }
-    }, [exploreDispatch, exploreState]);
-};

package/lib/providers/exploreState/hooks/UseMetaCommands/utils.d.ts

@@ -1,9 +0,0 @@
-import { UrlObject } from "url";
-import { ExploreState } from "../../../exploreState";
-/**
- * Builds a query object from the current explore state.
- * Contains catalog, feature flag, filter, and entity list type.
- * @param exploreState - The current explore state.
- * @returns A query object.
- */
-export declare function buildQuery(exploreState: ExploreState): UrlObject["query"];

package/lib/providers/exploreState/hooks/UseMetaCommands/utils.js

@@ -1,25 +0,0 @@
-import { EXPLORE_URL_PARAMS } from "../../../exploreState/constants";
-/**
- * Builds a query object from the current explore state.
- * Contains catalog, feature flag, filter, and entity list type.
- * @param exploreState - The current explore state.
- * @returns A query object.
- */
-export function buildQuery(exploreState) {
-    const query = {};
-    // Entity list type.
-    query["entityListType"] = exploreState.tabValue;
-    // Filter state.
-    if (exploreState.filterState.length > 0) {
-        query[EXPLORE_URL_PARAMS.FILTER] = JSON.stringify(exploreState.filterState);
-    }
-    // Catalog state.
-    if (exploreState.catalogState) {
-        query[EXPLORE_URL_PARAMS.CATALOG] = exploreState.catalogState;
-    }
-    // Feature flag state.
-    if (exploreState.featureFlagState) {
-        query[EXPLORE_URL_PARAMS.FEATURE_FLAG] = exploreState.featureFlagState;
-    }
-    return query;
-}

package/src/providers/exploreState/hooks/UseMetaCommands/actions.ts

@@ -1,29 +0,0 @@
-import Router from "next/router";
-import { ExploreState } from "../../../exploreState";
-import { buildQuery } from "./utils";
-
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Pushes the query to the router.
- * @param exploreState - The current explore state.
- */
-export function navigateToFilters(exploreState: ExploreState): void {
-  // Build the query object.
-  const query = buildQuery(exploreState);
-
-  // Push the query to the router.
-  Router.push({ query }, undefined, { shallow: true });
-}
-
-/**
- * Updates the URL query parameters for the entity list page based on the current explore state.
- * Replaces the query to the router.
- * @param exploreState - The current explore state.
- */
-export function replaceToFilters(exploreState: ExploreState): void {
-  // Build the query object.
-  const query = buildQuery(exploreState);
-
-  // Replace the query to the router.
-  Router.replace({ query }, undefined, { shallow: true });
-}

package/src/providers/exploreState/hooks/UseMetaCommands/types.ts

@@ -1,4 +0,0 @@
-export enum META_COMMAND {
-  NAVIGATE_TO_FILTERS = "NAVIGATE_TO_FILTERS",
-  REPLACE_TO_FILTERS = "REPLACE_TO_FILTERS",
-}

package/src/providers/exploreState/hooks/UseMetaCommands/useMetaCommands.ts

@@ -1,27 +0,0 @@
-import { useEffect } from "react";
-import { ExploreStateContextProps } from "../../../exploreState";
-import { clearMeta } from "../../actions/clearMeta/dispatch";
-import { navigateToFilters, replaceToFilters } from "./actions";
-import { META_COMMAND } from "./types";
-
-export const useMetaCommands = ({
-  exploreDispatch,
-  exploreState,
-}: ExploreStateContextProps): void => {
-  useEffect(() => {
-    const command = exploreState.meta?.command;
-
-    switch (command) {
-      case META_COMMAND.NAVIGATE_TO_FILTERS:
-        navigateToFilters(exploreState);
-        exploreDispatch(clearMeta());
-        break;
-      case META_COMMAND.REPLACE_TO_FILTERS:
-        replaceToFilters(exploreState);
-        exploreDispatch(clearMeta());
-        break;
-      default:
-        break;
-    }
-  }, [exploreDispatch, exploreState]);
-};

package/src/providers/exploreState/hooks/UseMetaCommands/utils.ts

@@ -1,33 +0,0 @@
-import { UrlObject } from "url";
-import { ExploreState } from "../../../exploreState";
-import { EXPLORE_URL_PARAMS } from "../../../exploreState/constants";
-
-/**
- * Builds a query object from the current explore state.
- * Contains catalog, feature flag, filter, and entity list type.
- * @param exploreState - The current explore state.
- * @returns A query object.
- */
-export function buildQuery(exploreState: ExploreState): UrlObject["query"] {
-  const query: UrlObject["query"] = {};
-
-  // Entity list type.
-  query["entityListType"] = exploreState.tabValue;
-
-  // Filter state.
-  if (exploreState.filterState.length > 0) {
-    query[EXPLORE_URL_PARAMS.FILTER] = JSON.stringify(exploreState.filterState);
-  }
-
-  // Catalog state.
-  if (exploreState.catalogState) {
-    query[EXPLORE_URL_PARAMS.CATALOG] = exploreState.catalogState;
-  }
-
-  // Feature flag state.
-  if (exploreState.featureFlagState) {
-    query[EXPLORE_URL_PARAMS.FEATURE_FLAG] = exploreState.featureFlagState;
-  }
-
-  return query;
-}