@databiosphere/findable-ui 25.0.0 → 25.1.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "25.0.0"
+  ".": "25.1.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [25.1.0](https://github.com/DataBiosphere/findable-ui/compare/v25.0.0...v25.1.0) (2025-04-14)
+
+
+### Features
+
+* add test ids to key testable components ([#401](https://github.com/DataBiosphere/findable-ui/issues/401)) ([#403](https://github.com/DataBiosphere/findable-ui/issues/403)) ([99a41f8](https://github.com/DataBiosphere/findable-ui/commit/99a41f8661d0794d20b4e610a24c9fe1b8fbc4f1))
+
+
+### Bug Fixes
+
+* fix theme with deepmerge ([#399](https://github.com/DataBiosphere/findable-ui/issues/399)) ([#400](https://github.com/DataBiosphere/findable-ui/issues/400)) ([981d8f9](https://github.com/DataBiosphere/findable-ui/commit/981d8f9fb2a1acce20707d558c9880dc63af7485))
+
 ## [25.0.0](https://github.com/DataBiosphere/findable-ui/compare/v24.0.0...v25.0.0) (2025-04-11)
 
 

package/lib/components/Filter/components/ClearAllFilters/clearAllFilters.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 export const ClearAllFilters = () => {
     const { exploreDispatch } = useExploreState();
@@ -10,5 +11,5 @@ export const ClearAllFilters = () => {
             type: ExploreActionKind.ClearFilters,
         });
     };
-    return (React.createElement(ButtonTextPrimary, { onClick: onClearFilters }, "Clear All"));
+    return (React.createElement(ButtonTextPrimary, { "data-testid": TEST_IDS.CLEAR_ALL_FILTERS, onClick: onClearFilters }, "Clear All"));
 };

package/lib/components/Filter/components/Filter/filter.js

@@ -1,6 +1,7 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
@@ -49,7 +50,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
-        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
+        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
         tags));

package/lib/components/Filter/components/Filters/filters.js

@@ -2,6 +2,7 @@ import { Divider } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -42,7 +43,7 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement(FilterList, { "data-testid": TEST_IDS.FILTERS, disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
         label && React.createElement(CategoryViewsLabel, null, label),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.d.ts

@@ -1,7 +1,8 @@
+import { TestIdProps } from "../../../types";
 import { FilterMenuSearchMatchRange } from "../../common/entities";
-interface HighlightedLabelProps {
+interface HighlightedLabelProps extends TestIdProps {
     label: string;
     ranges?: FilterMenuSearchMatchRange[];
 }
-export declare const HighlightedLabel: ({ label, ranges, }: HighlightedLabelProps) => JSX.Element;
+export declare const HighlightedLabel: ({ label, ranges, testId, }: HighlightedLabelProps) => JSX.Element;
 export {};

package/lib/components/Filter/components/HighlightedLabel/highlightedLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { MatchHighlight } from "./highlightedLabel.styles";
-export const HighlightedLabel = ({ label, ranges, }) => {
+export const HighlightedLabel = ({ label, ranges, testId, }) => {
     const items = [];
     if (ranges) {
         ranges = ranges.slice().sort(({ start: a }, { start: b }) => a - b);
@@ -29,5 +29,5 @@ export const HighlightedLabel = ({ label, ranges, }) => {
     else {
         items.push(label);
     }
-    return React.createElement("span", null, items);
+    return React.createElement("span", { "data-testid": testId }, items);
 };

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,5 +1,6 @@
 import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -18,9 +19,9 @@ export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeB
     }, [key, onUpdateItemSizeByItemKey]);
     if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (React.createElement(ListItemButton, { ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+        return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
             React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges }), secondary: React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count) })));
+            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges, testId: TEST_IDS.FILTER_TERM }), secondary: React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count) })));
     }
     else if (item.type === ITEM_TYPE.CATEGORY) {
         return (React.createElement(ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
 import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -85,7 +86,7 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
             open,
             searchTerm,
         } },
-        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
+        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, "data-testid": TEST_IDS.SEARCH_ALL_FILTERS, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
                 ...props,
                 InputProps: {
                     ...props.InputProps,

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,6 +1,7 @@
 import { Checkbox, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -16,7 +17,7 @@ export default function VariableSizeListItem({ categoryKey, categorySection, mat
     const handleItemClicked = () => {
         onFilter(categoryKey, key, !selected, categorySection);
     };
-    return (React.createElement(ListItemButton, { ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
+    return (React.createElement(ListItemButton, { "data-testid": TEST_IDS.FILTER_ITEM, ref: listItemRef, onClick: handleItemClicked, selected: selected, style: style },
         React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count)) })));
+        React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: labelRanges, testId: TEST_IDS.FILTER_TERM }), secondary: categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (React.createElement(Typography, { color: "ink.light", "data-testid": TEST_IDS.FILTER_COUNT, variant: TEXT_BODY_SMALL_400 }, count)) })));
 }

package/lib/components/Index/components/EntitiesView/entitiesView.d.ts

@@ -1,2 +1,2 @@
 import { EntitiesViewProps } from "./types";
-export declare const EntitiesView: ({ children, onChange, testId, viewMode, viewStatus, }: EntitiesViewProps) => JSX.Element;
+export declare const EntitiesView: ({ children, onChange, viewMode, viewStatus, }: EntitiesViewProps) => JSX.Element;

package/lib/components/Index/components/EntitiesView/entitiesView.js

@@ -1,10 +1,11 @@
 import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledFluidPaper } from "./entitiesView.styles";
 import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
-export const EntitiesView = ({ children, onChange, testId, viewMode, viewStatus, }) => {
-    return (React.createElement(StyledFluidPaper, { testId: testId },
+export const EntitiesView = ({ children, onChange, viewMode, viewStatus, }) => {
+    return (React.createElement(StyledFluidPaper, { testId: TEST_IDS.ENTITIES_VIEW },
         React.createElement(GridPaper, null,
             viewStatus.disabled ? null : (React.createElement(Toolbar, null,
                 React.createElement(ToggleButtonGroup, { exclusive: true, value: viewMode, onChange: onChange },

package/lib/components/Index/components/EntitiesView/types.d.ts

@@ -1,7 +1,7 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { ChildrenProps, TestIdProps } from "../../../types";
+import { ChildrenProps } from "../../../types";
 import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
-export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+export interface EntitiesViewProps extends ChildrenProps {
     onChange: ToggleButtonGroupProps["onChange"];
     viewMode: VIEW_MODE;
     viewStatus: ViewStatus;

package/lib/components/Index/components/Hero/components/ExportButton/exportButton.js

@@ -2,11 +2,12 @@ import { Tooltip } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { Button } from "./exportButton.styles";
 export const ExportButton = () => {
     const { disabled, isLoading, message } = useDownloadStatus();
     return (React.createElement(Tooltip, { arrow: true, title: message },
         React.createElement("span", null,
             React.createElement(Link, { href: "/export", legacyBehavior: true, passHref: true },
-                React.createElement(Button, { disabled: disabled || isLoading, href: "passHref", id: "button-cohort-export" }, "Export")))));
+                React.createElement(Button, { "data-testid": TEST_IDS.EXPORT_BUTTON, disabled: disabled || isLoading, href: "passHref", id: "button-cohort-export" }, "Export")))));
 };

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.js

@@ -1,5 +1,6 @@
 import { CloseRounded } from "@mui/icons-material";
 import React from "react";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
 import { IconButton, TemporarySidebar } from "./sidebarDrawer.styles";
 const DEFAULT_POSITION = { left: 0, top: 0 };
@@ -8,7 +9,7 @@ const DRAWER_SLOT_PROPS = {
     root: { slotProps: { backdrop: { invisible: false } } },
 };
 export const SidebarDrawer = ({ children, drawerOpen = false, onDrawerClose, }) => {
-    return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
+    return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", "data-testid": TEST_IDS.SIDEBAR_DRAWER, hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
         React.createElement(IconButton, { Icon: CloseRounded, onClick: onDrawerClose, size: "medium" }),
         children));
 };

package/lib/components/Layout/components/Sidebar/sidebar.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
@@ -9,7 +10,9 @@ export const Sidebar = ({ children, drawerOpen, onDrawerClose, }) => {
     const controlledSidebar = typeof drawerOpen === "boolean";
     const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
     const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
-    const barProps = drawerSidebar ? { drawerOpen, onDrawerClose } : {};
+    const barProps = drawerSidebar
+        ? { drawerOpen, onDrawerClose }
+        : { "data-testid": TEST_IDS.SIDEBAR };
     // Closes an open, controlled drawer sidebar with a change of breakpoint.
     useEffect(() => {
         if (drawerOpen && !desktopSmDown) {

package/lib/components/Table/components/Pagination/pagination.js

@@ -1,12 +1,13 @@
 import { EastRounded, WestRounded } from "@mui/icons-material";
 import { Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { Stack } from "../../../common/Stack/stack";
 import { Pagination as TablePagination } from "./pagination.styles";
 export const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
-    return (React.createElement(TablePagination, null,
-        React.createElement("div", null,
+    return (React.createElement(TablePagination, { "data-testid": TEST_IDS.TABLE_PAGINATION },
+        React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_PAGE },
             React.createElement(Typography, { variant: "text-body-400" }, "Page "),
             React.createElement(Typography, { variant: "text-body-500" },
                 currentPage,

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -1,8 +1,9 @@
 import { Fade, Typography } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 export const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
     return (React.createElement(Fade, { in: totalResult > 0 },
-        React.createElement("div", null,
+        React.createElement("div", { "data-testid": TEST_IDS.TABLE_PAGINATION_RESULTS },
             React.createElement(Typography, { variant: "text-body-400" }, "Results "),
             React.createElement(Typography, { variant: "text-body-small-500" },
                 firstResult,

package/lib/components/Table/components/TableRows/tableRows.js

@@ -1,19 +1,23 @@
 import { TableCell } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { TableRow } from "../TableRow/tableRow.styles";
 export const TableRows = ({ rows, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
-        const row = rows[virtualRow.index];
+        const rowIndex = virtualRow.index;
+        const row = rows[rowIndex];
         const { getIsGrouped, getIsPreview } = row;
-        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(TableRow, { key: row.id, "data-index": rowIndex, isGrouped: getIsGrouped(), isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell, i) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())
                 return null; // Display of placeholder cells is currently not supported.
-            return (React.createElement(TableCell, { key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+            return (React.createElement(TableCell, { "data-testid": rowIndex === 0 && i === 0
+                    ? TEST_IDS.TABLE_FIRST_CELL
+                    : undefined, key: cell.id, align: getTableCellAlign(cell.column), padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };

package/lib/tests/testIds.d.ts

@@ -0,0 +1,18 @@
+export declare const TEST_IDS: {
+    CLEAR_ALL_FILTERS: string;
+    ENTITIES_VIEW: string;
+    EXPORT_BUTTON: string;
+    FILTERS: string;
+    FILTER_CONTROLS: string;
+    FILTER_COUNT: string;
+    FILTER_ITEM: string;
+    FILTER_POPOVER: string;
+    FILTER_TERM: string;
+    SEARCH_ALL_FILTERS: string;
+    SIDEBAR: string;
+    SIDEBAR_DRAWER: string;
+    TABLE_FIRST_CELL: string;
+    TABLE_PAGINATION: string;
+    TABLE_PAGINATION_PAGE: string;
+    TABLE_PAGINATION_RESULTS: string;
+};

package/lib/tests/testIds.js

@@ -0,0 +1,18 @@
+export const TEST_IDS = {
+    CLEAR_ALL_FILTERS: "clear-all-filters",
+    ENTITIES_VIEW: "entities-view",
+    EXPORT_BUTTON: "export-button",
+    FILTERS: "filters",
+    FILTER_CONTROLS: "filter-controls",
+    FILTER_COUNT: "filter-count",
+    FILTER_ITEM: "filter-item",
+    FILTER_POPOVER: "filter-popover",
+    FILTER_TERM: "filter-term",
+    SEARCH_ALL_FILTERS: "search-all-filters",
+    SIDEBAR: "sidebar",
+    SIDEBAR_DRAWER: "sidebar-drawer",
+    TABLE_FIRST_CELL: "table-first-cell",
+    TABLE_PAGINATION: "table-pagination",
+    TABLE_PAGINATION_PAGE: "table-pagination-page",
+    TABLE_PAGINATION_RESULTS: "table-pagination-results",
+};

package/lib/theme/theme.js

@@ -1,4 +1,5 @@
 import { createTheme } from "@mui/material";
+import { deepmerge } from "@mui/utils";
 import * as B from "./common/breakpoints";
 import * as C from "./common/components";
 import * as P from "./common/palette";
@@ -10,9 +11,9 @@ import * as M from "./components";
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
-export function createAppTheme(customOptions) {
+export function createAppTheme(customOptions = {}) {
     // Generate default theme with custom overrides.
-    const theme = createTheme({
+    const theme = createTheme(deepmerge({
         breakpoints: {
             values: {
                 lg: B.desktop,
@@ -54,7 +55,7 @@ export function createAppTheme(customOptions) {
             [T.TEXT_UPPERCASE_500]: T.textUppercase500,
             fontFamily: T.fontFamily,
         },
-    }, { ...customOptions });
+    }, customOptions));
     // Default shadow overrides.
     theme.shadows = [...theme.shadows].map((shadow, s) => shadows[s] || shadow);
     // Theme components.

package/lib/views/ExploreView/exploreView.js

@@ -20,6 +20,7 @@ import { useExploreState } from "../../hooks/useExploreState";
 import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
+import { TEST_IDS } from "../../tests/testIds";
 import { DESKTOP_SM } from "../../theme/common/breakpoints";
 export const ExploreView = (props) => {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -99,7 +100,7 @@ export const ExploreView = (props) => {
     }, [entityListType, exploreDispatch]);
     return (React.createElement(React.Fragment, null,
         categoryViews && !!categoryViews.length && (React.createElement(Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
-            React.createElement(SidebarTools, null,
+            React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "25.0.0",
+  "version": "25.1.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Filter/components/ClearAllFilters/clearAllFilters.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useExploreState } from "../../../../hooks/useExploreState";
 import { ExploreActionKind } from "../../../../providers/exploreState";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
 
 export const ClearAllFilters = (): JSX.Element => {
@@ -14,6 +15,11 @@ export const ClearAllFilters = (): JSX.Element => {
   };
 
   return (
-    <ButtonTextPrimary onClick={onClearFilters}>Clear All</ButtonTextPrimary>
+    <ButtonTextPrimary
+      data-testid={TEST_IDS.CLEAR_ALL_FILTERS}
+      onClick={onClearFilters}
+    >
+      Clear All
+    </ButtonTextPrimary>
   );
 };

package/src/components/Filter/components/Filter/filter.tsx

@@ -4,6 +4,7 @@ import React, { MouseEvent, ReactNode, useState } from "react";
 import { SelectCategoryView } from "../../../../common/entities";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
@@ -87,6 +88,7 @@ export const Filter = ({
       <FilterPopover
         anchorPosition={anchorPosition}
         anchorReference="anchorPosition"
+        data-testid={TEST_IDS.FILTER_POPOVER}
         marginThreshold={0}
         onClose={onCloseFilters}
         open={isOpen}

package/src/components/Filter/components/Filters/filters.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { Filter } from "../Filter/filter";
 import { FilterTags } from "../FilterTags/filterTags";
@@ -82,7 +83,12 @@ export const Filters = ({
   }, [windowHeight]);
 
   return (
-    <FilterList disabled={disabled} height={height} ref={filterListRef}>
+    <FilterList
+      data-testid={TEST_IDS.FILTERS}
+      disabled={disabled}
+      height={height}
+      ref={filterListRef}
+    >
       {categoryFilters.map(({ categoryViews, label }, i) => (
         <Fragment key={i}>
           {i !== 0 && <Divider />}

package/src/components/Filter/components/HighlightedLabel/highlightedLabel.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { TestIdProps } from "../../../types";
 import { FilterMenuSearchMatchRange } from "../../common/entities";
 import { MatchHighlight } from "./highlightedLabel.styles";
 
-interface HighlightedLabelProps {
+interface HighlightedLabelProps extends TestIdProps {
   label: string;
   ranges?: FilterMenuSearchMatchRange[];
 }
@@ -10,6 +11,7 @@ interface HighlightedLabelProps {
 export const HighlightedLabel = ({
   label,
   ranges,
+  testId,
 }: HighlightedLabelProps): JSX.Element => {
   const items = [];
   if (ranges) {
@@ -40,5 +42,5 @@ export const HighlightedLabel = ({
   } else {
     items.push(label);
   }
-  return <span>{items}</span>;
+  return <span data-testid={testId}>{items}</span>;
 };

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -7,6 +7,7 @@ import {
 } from "@mui/material";
 import React, { useEffect, useRef } from "react";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
+import { TEST_IDS } from "../../../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -49,6 +50,7 @@ export default function VariableSizeListItem({
     } = item;
     return (
       <ListItemButton
+        data-testid={TEST_IDS.FILTER_ITEM}
         ref={setRef}
         key={key}
         onClick={(): void =>
@@ -64,9 +66,19 @@ export default function VariableSizeListItem({
         />
         <ListItemText
           disableTypography
-          primary={<HighlightedLabel label={label} ranges={matchRanges} />}
+          primary={
+            <HighlightedLabel
+              label={label}
+              ranges={matchRanges}
+              testId={TEST_IDS.FILTER_TERM}
+            />
+          }
           secondary={
-            <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
+            <Typography
+              color="ink.light"
+              data-testid={TEST_IDS.FILTER_COUNT}
+              variant={TEXT_BODY_SMALL_400}
+            >
               {count}
             </Typography>
           }

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.tsx

@@ -17,6 +17,7 @@ import {
   useBreakpointHelper,
 } from "../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
 import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
@@ -154,6 +155,7 @@ export const SearchAllFilters = ({
     >
       <Autocomplete
         clearOnBlur={desktopSmUp}
+        data-testid={TEST_IDS.SEARCH_ALL_FILTERS}
         filterOptions={(options): string[] => options}
         freeSolo
         ListboxComponent={Listbox}

package/src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -8,6 +8,7 @@ import React, { CSSProperties, useEffect, useRef } from "react";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { SELECT_CATEGORY_KEY } from "../../../../providers/exploreState/constants";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
 import { CheckedIcon } from "../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
@@ -49,6 +50,7 @@ export default function VariableSizeListItem({
 
   return (
     <ListItemButton
+      data-testid={TEST_IDS.FILTER_ITEM}
       ref={listItemRef}
       onClick={handleItemClicked}
       selected={selected}
@@ -61,10 +63,20 @@ export default function VariableSizeListItem({
       />
       <ListItemText
         disableTypography
-        primary={<HighlightedLabel label={label} ranges={labelRanges} />}
+        primary={
+          <HighlightedLabel
+            label={label}
+            ranges={labelRanges}
+            testId={TEST_IDS.FILTER_TERM}
+          />
+        }
         secondary={
           categoryKey !== SELECT_CATEGORY_KEY.SAVED_FILTERS && (
-            <Typography color="ink.light" variant={TEXT_BODY_SMALL_400}>
+            <Typography
+              color="ink.light"
+              data-testid={TEST_IDS.FILTER_COUNT}
+              variant={TEXT_BODY_SMALL_400}
+            >
               {count}
             </Typography>
           )

package/src/components/Index/components/EntitiesView/entitiesView.tsx

@@ -1,5 +1,6 @@
 import { ToggleButton, ToggleButtonGroup, Toolbar } from "@mui/material";
 import React from "react";
+import { TEST_IDS } from "../../../../tests/testIds";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledFluidPaper } from "./entitiesView.styles";
 import { VIEW_MODE } from "./hooks/UseEntitiesView/types";
@@ -8,12 +9,11 @@ import { EntitiesViewProps } from "./types";
 export const EntitiesView = ({
   children,
   onChange,
-  testId,
   viewMode,
   viewStatus,
 }: EntitiesViewProps): JSX.Element => {
   return (
-    <StyledFluidPaper testId={testId}>
+    <StyledFluidPaper testId={TEST_IDS.ENTITIES_VIEW}>
       <GridPaper>
         {viewStatus.disabled ? null : (
           <Toolbar>

package/src/components/Index/components/EntitiesView/types.ts

@@ -1,8 +1,8 @@
 import { ToggleButtonGroupProps } from "@mui/material";
-import { ChildrenProps, TestIdProps } from "../../../types";
+import { ChildrenProps } from "../../../types";
 import { VIEW_MODE, ViewStatus } from "./hooks/UseEntitiesView/types";
 
-export interface EntitiesViewProps extends ChildrenProps, TestIdProps {
+export interface EntitiesViewProps extends ChildrenProps {
   onChange: ToggleButtonGroupProps["onChange"];
   viewMode: VIEW_MODE;
   viewStatus: ViewStatus;