@databiosphere/findable-ui 50.5.0 → 50.6.1

package/tests/chart.test.tsx

@@ -1,274 +0,0 @@
-import { composeStories } from "@storybook/react";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import { SelectCategoryValueView } from "../src/common/entities";
-import {
-  getCategoryTotalCount,
-  getCountText,
-  parseTranslate,
-} from "../src/components/Index/components/EntityView/components/views/ChartView/components/Chart/barX/utils";
-import { CHART_TEST_ID } from "../src/components/Index/components/EntityView/components/views/ChartView/components/Chart/constants";
-import * as stories from "../src/components/Index/components/EntityView/components/views/ChartView/components/Chart/stories/chart.stories";
-import { PALETTE } from "../src/styles/common/constants/palette";
-
-const CLASSNAMES = {
-  TEXT_CATEGORY_LABEL: "text-category-label",
-  TEXT_COUNT: "text-count",
-};
-
-const { Default, Selected } = composeStories(stories);
-
-const DATA: SelectCategoryValueView[] =
-  Default.args.selectCategoryValueViews || [];
-const SELECTED_DATA: SelectCategoryValueView[] =
-  Selected.args.selectCategoryValueViews || [];
-const TOTAL_COUNT = getCategoryTotalCount(DATA);
-
-describe("Chart", () => {
-  describe("basic rendering", () => {
-    let chartEl: HTMLElement;
-    let svgEl: Element | null;
-
-    beforeEach(() => {
-      render(<Default testId={CHART_TEST_ID} />);
-      chartEl = screen.getByTestId(CHART_TEST_ID);
-      svgEl = chartEl.querySelector("svg");
-    });
-
-    it("renders correctly with default data", () => {
-      expect(chartEl).toBeDefined();
-      expect(svgEl).toBeDefined();
-    });
-  });
-
-  describe("category labels and counts", () => {
-    const counts = DATA.map((d) => mapCount(d, TOTAL_COUNT));
-    const labels = DATA.map(mapLabel);
-    let countTextEls: NodeListOf<SVGElement>;
-    let labelTextEls: NodeListOf<SVGElement>;
-    let titleTextEls: NodeListOf<SVGElement>;
-
-    beforeEach(() => {
-      render(<Default testId={CHART_TEST_ID} />);
-      countTextEls = getEls(CLASSNAMES.TEXT_COUNT, "text");
-      labelTextEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "text");
-      titleTextEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "title");
-    });
-
-    it("renders category labels and matching titles", () => {
-      expect(labelTextEls.length).toEqual(labels.length);
-      expect(titleTextEls.length).toEqual(labels.length);
-      labelTextEls.forEach((el, i) => {
-        const labelText = getLabelText(el);
-        const titleText = titleTextEls[i].textContent || "";
-        expect(labels.some((l) => l.includes(labelText))).toBeTruthy();
-        expect(labels.includes(titleText)).toBeTruthy();
-      });
-    });
-
-    it("renders category counts", () => {
-      expect(countTextEls.length).toEqual(counts.length);
-      countTextEls.forEach(({ textContent }) => {
-        expect(textContent).toBeDefined();
-        expect(counts.includes(textContent || "")).toBeTruthy();
-      });
-    });
-  });
-
-  describe("category labels with selected values", () => {
-    it("renders selected category labels with '(selected)'", () => {
-      render(<Selected testId={CHART_TEST_ID} />);
-      const textEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "text");
-      const titleEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "title");
-      SELECTED_DATA.forEach((selectedData, i) => {
-        const labelText = getLabelText(textEls[i]);
-        const titleText = titleEls[i].textContent || "";
-        if (selectedData.selected) {
-          const expected = `${selectedData.label} (selected)`;
-          expect(titleText).toEqual(expected);
-          expect(expected.includes(labelText)).toBeTruthy();
-          return;
-        }
-        const expected = selectedData.label;
-        expect(titleText).toEqual(expected);
-        expect(expected.includes(labelText)).toBeTruthy();
-      });
-    });
-  });
-
-  describe("bars with unselected values", () => {
-    let barEls: NodeListOf<SVGElement>;
-
-    beforeEach(() => {
-      render(<Default testId={CHART_TEST_ID} />);
-      barEls = getEls("x-bar", "path");
-    });
-
-    it("renders correct number of bars", () => {
-      expect(barEls.length).toEqual(DATA.length);
-    });
-
-    it("renders all bars in #C5E3FC", () => {
-      expect([...barEls].every(isFillDefault)).toBeTruthy();
-    });
-  });
-
-  describe("bars with selected values", () => {
-    let barEls: NodeListOf<SVGElement>;
-
-    beforeEach(() => {
-      render(<Selected testId={CHART_TEST_ID} />);
-      barEls = getEls("x-bar", "path");
-    });
-
-    it("renders no bars in #C5E3FC", () => {
-      expect([...barEls].some(isFillDefault)).toBeFalsy();
-    });
-
-    it("renders at least one bar in PRIMARY_MAIN", () => {
-      expect([...barEls].some(isFillPrimaryMain)).toBeTruthy();
-    });
-  });
-
-  describe("bars sorted by count", () => {
-    it("renders bars in descending order of count", () => {
-      render(<Default testId={CHART_TEST_ID} />);
-      // Order data by count in descending order.
-      const counts = [...DATA]
-        .sort(sortByCount)
-        .map((d) => mapCount(d, TOTAL_COUNT));
-      // Sort count <text> elements by their transform’s translate‑Y (vertical) value, since they’re rendered in data order.
-      const countTextEls = getEls(CLASSNAMES.TEXT_COUNT, "text");
-      const textContents = [...countTextEls]
-        .sort(sortByTransform)
-        .map(mapTextContent);
-      expect(textContents).toEqual(counts);
-    });
-  });
-});
-
-/**
- * Finds the first text node within the given SVGElement.
- * @param el - The SVG element to search for a text node.
- * @returns The first text node found within the element.
- */
-function findTextNode(el: SVGElement): Node | undefined {
-  return [...el.childNodes].find(({ nodeType }) => nodeType === Node.TEXT_NODE);
-}
-
-/**
- * Get the SVG group element for a given class name.
- * @param className - Class name.
- * @returns SVG group element.
- */
-function getGroupEls(className: string): HTMLCollectionOf<Element> {
-  const chartEl = screen.getByTestId(CHART_TEST_ID);
-  const gEls = chartEl.getElementsByClassName(className);
-  expect(gEls.length).toEqual(1);
-  return gEls;
-}
-
-/**
- * Get the SVG elements for a given class name and selectors.
- * @param className - Class name.
- * @param selectors - Selectors.
- * @returns SVG elements.
- */
-function getEls(className: string, selectors: string): NodeListOf<SVGElement> {
-  const gEls = getGroupEls(className);
-  return gEls[0].querySelectorAll(selectors);
-}
-
-/**
- * Retrieves the label text from a given SVGElement by extracting and processing its text content.
- * @param el - The SVGElement from which the label text is to be retrieved.
- * @returns The processed label text derived from the SVGElement.
- */
-function getLabelText(el: SVGElement): string {
-  const labelText = stripTrailingEllipsis(findTextNode(el)?.textContent);
-  expect(labelText).toBeDefined();
-  return labelText || "";
-}
-
-/**
- * Check if the fill attribute of the element is #C5E3FC.
- * @param element - Element to check.
- * @returns True if the fill attribute is #C5E3FC, false otherwise.
- */
-function isFillDefault(element: Element): boolean {
-  return element.getAttribute("fill") === "#C5E3FC";
-}
-
-/**
- * Check if the fill attribute of the element is PRIMARY_MAIN.
- * @param element - Element.
- * @returns True if the fill attribute is PRIMARY_MAIN, false otherwise.
- */
-function isFillPrimaryMain(element: Element): boolean {
-  return element.getAttribute("fill") === PALETTE.PRIMARY_MAIN;
-}
-
-/**
- * Maps the count of a category value to a string representation.
- * @param categoryValueView - The category value view to be processed.
- * @param total - The total count associated with the category value.
- * @returns The formatted count text for the category value.
- */
-function mapCount(
-  categoryValueView: SelectCategoryValueView,
-  total: number,
-): string {
-  return getCountText(categoryValueView, total);
-}
-
-/**
- * Maps the label of a category value view to a string.
- * @param categoryValueView - Category value view.
- * @returns Label as a string.
- */
-function mapLabel(categoryValueView: SelectCategoryValueView): string {
-  return categoryValueView.label;
-}
-
-/**
- * Maps the text content of an SVG element to a string.
- * @param el - SVG element.
- * @returns Text content as a string.
- */
-function mapTextContent(el: SVGElement): string | null {
-  return el.textContent;
-}
-
-/**
- * Sorts category value views by count in descending order.
- * @param a - First category value view.
- * @param b - Second category value view.
- * @returns Sorted category value views.
- */
-function sortByCount(
-  a: SelectCategoryValueView,
-  b: SelectCategoryValueView,
-): number {
-  return b.count - a.count;
-}
-
-/**
- * Sorts SVG elements by their "y" transform attribute.
- * @param a - First SVG element.
- * @param b - Second SVG element.
- * @returns Sorted SVG elements.
- */
-function sortByTransform(a: SVGElement, b: SVGElement): number {
-  const aTransform = parseTranslate(a.getAttribute("transform"));
-  const bTransform = parseTranslate(b.getAttribute("transform"));
-  return aTransform[1] - bTransform[1];
-}
-
-/**
- * Strips trailing ellipsis from a string.
- * @param text - The input string.
- * @returns The string without trailing ellipsis.
- */
-function stripTrailingEllipsis(text?: string | null): string {
-  return (text || "").replace(/…{1,3}$/, "");
-}

package/tests/chartSortUtils.test.ts

@@ -1,119 +0,0 @@
-import { CHART_SORT_FN } from "../src/common/chart/sort/constants";
-import { CHART_SORT, ChartSortFn } from "../src/common/chart/sort/types";
-import { getChartSortFn } from "../src/common/chart/sort/utils";
-import { SelectCategoryValueView } from "../src/common/entities";
-import {
-  sortCategoryValueViewsAlpha,
-  sortCategoryValueViewsCount,
-} from "../src/common/filters/sort/models/utils";
-
-/**
- * Creates a mock category value view for testing.
- * @param key - The key for the category value.
- * @param count - The count for the category value.
- * @returns A mock SelectCategoryValueView.
- */
-const createMockCategoryValueView = (
-  key: unknown,
-  count: number,
-): SelectCategoryValueView => ({
-  count,
-  key,
-  label: key ? String(key) : "",
-  selected: false,
-});
-
-describe("Chart Sort Utils", () => {
-  describe("CHART_SORT_FN", () => {
-    it("maps CHART_SORT.ALPHA to sortCategoryValueViewsAlpha", () => {
-      expect(CHART_SORT_FN[CHART_SORT.ALPHA]).toBe(sortCategoryValueViewsAlpha);
-    });
-
-    it("maps CHART_SORT.COUNT to sortCategoryValueViewsCount", () => {
-      expect(CHART_SORT_FN[CHART_SORT.COUNT]).toBe(sortCategoryValueViewsCount);
-    });
-  });
-
-  describe("getChartSortFn", () => {
-    it("returns COUNT sort function when undefined", () => {
-      const sortFn = getChartSortFn(undefined);
-      expect(sortFn).toBe(sortCategoryValueViewsCount);
-    });
-
-    it("returns ALPHA sort function for CHART_SORT.ALPHA", () => {
-      const sortFn = getChartSortFn(CHART_SORT.ALPHA);
-      expect(sortFn).toBe(sortCategoryValueViewsAlpha);
-    });
-
-    it("returns COUNT sort function for CHART_SORT.COUNT", () => {
-      const sortFn = getChartSortFn(CHART_SORT.COUNT);
-      expect(sortFn).toBe(sortCategoryValueViewsCount);
-    });
-
-    it("returns custom function when provided", () => {
-      const customSortFn: ChartSortFn = (a, b) =>
-        a.label.localeCompare(b.label);
-      const sortFn = getChartSortFn(customSortFn);
-      expect(sortFn).toBe(customSortFn);
-    });
-
-    it("custom sort function works correctly", () => {
-      // Custom sort: by label length descending
-      const customSortFn: ChartSortFn = (a, b) =>
-        b.label.length - a.label.length;
-      const sortFn = getChartSortFn(customSortFn);
-
-      const data = [
-        createMockCategoryValueView("a", 10),
-        createMockCategoryValueView("abc", 5),
-        createMockCategoryValueView("ab", 3),
-      ];
-
-      const sorted = [...data].sort(sortFn);
-
-      expect(sorted.map((cv) => cv.label)).toEqual(["abc", "ab", "a"]);
-    });
-  });
-
-  describe("sorting integration", () => {
-    const testData = [
-      createMockCategoryValueView("Zebra", 5),
-      createMockCategoryValueView("Apple", 10),
-      createMockCategoryValueView("Banana", 3),
-    ];
-
-    it("sorts alphabetically with CHART_SORT.ALPHA", () => {
-      const sortFn = getChartSortFn(CHART_SORT.ALPHA);
-      const sorted = [...testData].sort(sortFn);
-
-      expect(sorted.map((cv) => cv.label)).toEqual([
-        "Apple",
-        "Banana",
-        "Zebra",
-      ]);
-    });
-
-    it("sorts by count descending with CHART_SORT.COUNT", () => {
-      const sortFn = getChartSortFn(CHART_SORT.COUNT);
-      const sorted = [...testData].sort(sortFn);
-
-      expect(sorted.map((cv) => cv.label)).toEqual([
-        "Apple",
-        "Zebra",
-        "Banana",
-      ]);
-      expect(sorted.map((cv) => cv.count)).toEqual([10, 5, 3]);
-    });
-
-    it("defaults to count sort when no option provided", () => {
-      const sortFn = getChartSortFn();
-      const sorted = [...testData].sort(sortFn);
-
-      expect(sorted.map((cv) => cv.label)).toEqual([
-        "Apple",
-        "Zebra",
-        "Banana",
-      ]);
-    });
-  });
-});

package/tests/chartView.test.tsx

@@ -1,48 +0,0 @@
-import { composeStories } from "@storybook/react";
-import { render, screen } from "@testing-library/react";
-import React from "react";
-import { CHART_VIEW_TEST_ID } from "../src/components/Index/components/EntityView/components/views/ChartView/constants";
-import * as stories from "../src/components/Index/components/EntityView/components/views/ChartView/stories/chartView.stories";
-
-const { Default } = composeStories(stories);
-
-describe("ChartView", () => {
-  it("renders correctly", () => {
-    render(<Default testId={CHART_VIEW_TEST_ID} />);
-    const chartEl = screen.getByTestId(CHART_VIEW_TEST_ID);
-    expect(chartEl).toBeDefined();
-  });
-
-  it("renders nothing when no categories are available", () => {
-    render(<Default categoryFilters={[]} testId={CHART_VIEW_TEST_ID} />);
-    expect(screen.queryByTestId(CHART_VIEW_TEST_ID)).toBeNull();
-  });
-
-  it("renders correct number of chart sections", () => {
-    render(<Default />);
-    // Mocks include the facets `Biological Sex`, `Genus Species` and `Paired End`.
-    const categoryLabels = screen.getAllByText(
-      /Biological Sex|Genus Species|Paired End}/,
-    );
-    // `Paired End` is not included in the chart view, `enableChartView` is false.
-    expect(categoryLabels.length).toBe(2);
-  });
-
-  it("renders chart titles correctly", () => {
-    render(<Default />);
-    const {
-      args: { entityName },
-    } = Default;
-    ["Biological Sex", "Genus Species"].forEach((category) => {
-      expect(
-        screen.getByText(new RegExp(`${entityName} by ${category}`)),
-      ).toBeDefined();
-    });
-  });
-
-  it("renders charts for each category", () => {
-    render(<Default />);
-    const svgEls = document.querySelectorAll("svg");
-    expect(svgEls.length).toBe(2);
-  });
-});

package/tests/dataDictionaryColumnFilters.test.tsx

@@ -1,101 +0,0 @@
-import { matchers } from "@emotion/jest";
-import { jest } from "@jest/globals";
-import { composeStories } from "@storybook/react";
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen, within } from "@testing-library/react";
-import React from "react";
-import { waitFor } from "storybook/test";
-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/tests/dataDictionary_utils.test.ts

@@ -1,153 +0,0 @@
-import {
-  annotateColumnConfig,
-  annotateDefaultCategoryConfig,
-  annotateEntityCategoryConfig,
-  annotateEntityConfig,
-} from "../src/components/DataDictionary/common/utils";
-import { SiteConfig } from "../src/config/entities";
-
-describe("Data Dictionary", () => {
-  it("annotates entity", () => {
-    const key = "entity";
-
-    // Create annotation for column and add to dummy annotation map.
-    const annotation = {
-      description: "description for entity",
-      label: "entity",
-    };
-    const annotationsByKey = {
-      [key]: annotation,
-    };
-
-    // Create dummy site config.
-    const siteConfig = {
-      entities: [
-        {
-          key,
-          list: {
-            columns: [{ id: "col150" }, { id: "col1" }],
-          },
-        },
-      ],
-    } as unknown as SiteConfig;
-
-    // Annotate
-    annotateEntityConfig(siteConfig, annotationsByKey);
-
-    // Confirm entity is annotated.
-    const entity = siteConfig.entities[0];
-    expect(entity.annotation).toEqual(annotation);
-  });
-
-  it("annotates entity category config", () => {
-    const key = "filter0";
-
-    // Create annotation for column and add to dummy annotation map.
-    const annotation = {
-      description: "description for filter 0",
-      label: "filter 0",
-    };
-    const annotationsByKey = {
-      [key]: annotation,
-    };
-
-    // Create dummy site config.
-    const siteConfig = {
-      entities: [
-        {
-          categoryGroupConfig: {
-            categoryGroups: [
-              {
-                categoryConfigs: [
-                  {
-                    key,
-                    label: "filter 0",
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    } as unknown as SiteConfig;
-
-    // Annotate
-    annotateEntityCategoryConfig(siteConfig, annotationsByKey);
-
-    // Confirm filter is annotated.
-    const categoryConfig =
-      siteConfig.entities[0].categoryGroupConfig?.categoryGroups[0]
-        .categoryConfigs[0];
-    expect(categoryConfig?.annotation).toEqual(annotation);
-  });
-
-  it("annotates default category config", () => {
-    const key = "filter0";
-
-    // Create annotation for column and add to dummy annotation map.
-    const annotation = {
-      description: "description for filter 0",
-      label: "filter 0",
-    };
-    const annotationsByKey = {
-      [key]: annotation,
-    };
-
-    // Create dummy site config.
-    const siteConfig = {
-      categoryGroupConfig: {
-        categoryGroups: [
-          {
-            categoryConfigs: [
-              {
-                key,
-                label: "filter 0",
-              },
-            ],
-          },
-        ],
-      },
-    } as unknown as SiteConfig;
-
-    // Annotate
-    annotateDefaultCategoryConfig(siteConfig, annotationsByKey);
-
-    // Confirm filter is annotated.
-    const categoryConfig =
-      siteConfig.categoryGroupConfig?.categoryGroups[0].categoryConfigs[0];
-    expect(categoryConfig?.annotation).toEqual(annotation);
-  });
-
-  it("annotates column", () => {
-    const key = "col0";
-
-    // Create annotation for column and add to dummy annotation map.
-    const annotation = {
-      description: "description for column 0",
-      label: "column 0",
-    };
-    const annotationsByKey = {
-      [key]: annotation,
-    };
-
-    // Create dummy site config.
-    const siteConfig = {
-      entities: [
-        {
-          list: {
-            columns: [{ id: key }, { id: "col1" }],
-          },
-          name: "entity",
-        },
-      ],
-    } as unknown as SiteConfig;
-
-    // Annotate
-    annotateColumnConfig(siteConfig, annotationsByKey);
-
-    // Confirm column 0 is annotated and column 1 is not.
-    const columns = siteConfig.entities[0].list.columns ?? [];
-    expect((columns[0]?.meta as any)?.annotation).toEqual(annotation);
-    expect((columns[1]?.meta as any)?.annotation).toBeUndefined();
-  });
-});