@databiosphere/findable-ui 25.0.0 → 26.0.0

package/src/theme/common/shadows.ts

@@ -1,34 +1,29 @@
-/*
- * Elevation
- */
-enum ELEVATION {
-  E00 = "none",
-  E01 = "0 1px 4px 0 #00000012",
-  E02 = "0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814",
-}
+import { Shadows } from "@mui/material";
 
-/**
- * Stroke
- */
-enum STROKE {
-  BOTTOM = "inset 0 -1px 0 0",
-  TOP = "inset 0 1px 0 0",
-}
-
-/**
- * Elevation constants
- */
-export const elevation00 = ELEVATION.E00;
-export const elevation01 = ELEVATION.E01;
-export const elevation02 = ELEVATION.E02;
-
-/**
- * Shadows constants
- */
-export const shadows = [elevation00, elevation01, elevation02];
-
-/**
- * Stroke constants
- */
-export const strokeBottom = STROKE.BOTTOM;
-export const strokeTop = STROKE.TOP;
+export const shadows: Shadows = [
+  "none",
+  "0 1px 4px 0 #00000012",
+  "0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+  "none",
+];

package/src/theme/components/muiAlert.ts

@@ -3,10 +3,10 @@ import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIc
 import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
 import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
 import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { SIZE } from "../../styles/common/constants/size";
 import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
 import { FONT_SIZE } from "../../styles/common/mui/icon";
-import { alpha32 } from "../common/palette";
 import { TEXT_BODY_500 } from "../common/typography";
 
 export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
@@ -42,7 +42,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
             props: { severity: SEVERITY.ERROR },
             style: {
               backgroundColor: theme.palette.alert.lightest,
-              border: `1px solid ${theme.palette.alert.main}${alpha32}`,
+              border: `1px solid ${COLOR_MIXES.ALERT_MAIN_32}`,
               // eslint-disable-next-line sort-keys -- disabling key order for readability
               "& .MuiAlert-icon": {
                 color: theme.palette.alert.main,
@@ -53,7 +53,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
             props: { severity: SEVERITY.INFO },
             style: {
               backgroundColor: theme.palette.info.lightest,
-              border: `1px solid ${theme.palette.info.main}${alpha32}`,
+              border: `1px solid ${COLOR_MIXES.INFO_MAIN_32}`,
               // eslint-disable-next-line sort-keys -- disabling key order for readability
               "& .MuiAlert-icon": {
                 color: theme.palette.info.main,
@@ -64,7 +64,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
             props: { severity: SEVERITY.SUCCESS },
             style: {
               backgroundColor: theme.palette.success.lightest,
-              border: `1px solid ${theme.palette.success.main}${alpha32}`,
+              border: `1px solid ${COLOR_MIXES.SUCCESS_MAIN_32}`,
               // eslint-disable-next-line sort-keys -- disabling key order for readability
               "& .MuiAlert-icon": {
                 color: theme.palette.success.main,
@@ -75,7 +75,7 @@ export const MuiAlert = (theme: Theme): Components["MuiAlert"] => {
             props: { severity: SEVERITY.WARNING },
             style: {
               backgroundColor: theme.palette.warning.lightest,
-              border: `1px solid ${theme.palette.warning.main}${alpha32}`,
+              border: `1px solid ${COLOR_MIXES.WARNING_MAIN_32}`,
               // eslint-disable-next-line sort-keys -- disabling key order for readability
               "& .MuiAlert-icon": {
                 color: theme.palette.warning.main,

package/src/theme/theme.ts

@@ -1,4 +1,5 @@
-import { createTheme, Shadows, Theme, ThemeOptions } from "@mui/material";
+import { createTheme, Theme, ThemeOptions } 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";
@@ -15,60 +16,58 @@ export interface ThemeProps {
  * @param customOptions - Custom theme option overrides.
  * @returns theme with custom theme overrides.
  */
-export function createAppTheme(customOptions?: ThemeOptions): Theme {
+export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
   // Generate default theme with custom overrides.
   const theme = createTheme(
-    {
-      breakpoints: {
-        values: {
-          lg: B.desktop,
-          md: B.desktopSm,
-          sm: B.tablet,
-          xs: B.mobile,
+    deepmerge(
+      {
+        breakpoints: {
+          values: {
+            lg: B.desktop,
+            md: B.desktopSm,
+            sm: B.tablet,
+            xs: B.mobile,
+          },
+        },
+        cssVariables: true,
+        palette: {
+          alert: P.alert,
+          background: P.background,
+          common: P.common,
+          info: P.info,
+          ink: P.ink,
+          primary: P.primary,
+          smoke: P.smoke,
+          success: P.success,
+          text: P.text,
+          warning: P.warning,
+        },
+        shadows,
+        spacing: 4,
+        typography: {
+          [T.TEXT_BODY_400]: T.textBody400,
+          [T.TEXT_BODY_400_2_LINES]: T.textBody4002Lines,
+          [T.TEXT_BODY_500]: T.textBody500,
+          [T.TEXT_BODY_500_2_LINES]: T.textBody5002Lines,
+          [T.TEXT_BODY_LARGE_400]: T.textBodyLarge400,
+          [T.TEXT_BODY_LARGE_400_2_LINES]: T.textBodyLarge4002Lines,
+          [T.TEXT_BODY_LARGE_500]: T.textBodyLarge500,
+          [T.TEXT_BODY_SMALL_400]: T.textBodySmall400,
+          [T.TEXT_BODY_SMALL_400_2_LINES]: T.textBodySmall4002Lines,
+          [T.TEXT_BODY_SMALL_500]: T.textBodySmall500,
+          [T.TEXT_HEADING]: T.textHeading,
+          [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
+          [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
+          [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+          [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
+          [T.TEXT_UPPERCASE_500]: T.textUppercase500,
+          fontFamily: T.fontFamily,
         },
       },
-      cssVariables: true,
-      palette: {
-        alert: P.alert,
-        background: P.background,
-        common: P.common,
-        info: P.info,
-        ink: P.ink,
-        primary: P.primary,
-        smoke: P.smoke,
-        success: P.success,
-        text: P.text,
-        warning: P.warning,
-      },
-      spacing: 4,
-      typography: {
-        [T.TEXT_BODY_400]: T.textBody400,
-        [T.TEXT_BODY_400_2_LINES]: T.textBody4002Lines,
-        [T.TEXT_BODY_500]: T.textBody500,
-        [T.TEXT_BODY_500_2_LINES]: T.textBody5002Lines,
-        [T.TEXT_BODY_LARGE_400]: T.textBodyLarge400,
-        [T.TEXT_BODY_LARGE_400_2_LINES]: T.textBodyLarge4002Lines,
-        [T.TEXT_BODY_LARGE_500]: T.textBodyLarge500,
-        [T.TEXT_BODY_SMALL_400]: T.textBodySmall400,
-        [T.TEXT_BODY_SMALL_400_2_LINES]: T.textBodySmall4002Lines,
-        [T.TEXT_BODY_SMALL_500]: T.textBodySmall500,
-        [T.TEXT_HEADING]: T.textHeading,
-        [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
-        [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
-        [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
-        [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
-        [T.TEXT_UPPERCASE_500]: T.textUppercase500,
-        fontFamily: T.fontFamily,
-      },
-    },
-    { ...customOptions }
+      customOptions
+    )
   );
 
-  // Default shadow overrides.
-  theme.shadows = [...theme.shadows].map(
-    (shadow, s) => shadows[s] || shadow
-  ) as Shadows;
-
   // Theme components.
   theme.components = {
     MuiAccordion: C.MuiAccordion(theme),
@@ -77,7 +76,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiAlert: M.MuiAlert(theme),
     MuiAlertTitle: M.MuiAlertTitle,
     MuiAppBar: C.MuiAppBar,
-    MuiBackdrop: C.MuiBackdrop(theme),
+    MuiBackdrop: C.MuiBackdrop,
     MuiBreadcrumbs: C.MuiBreadcrumbs(theme),
     MuiButton: C.MuiButton(theme),
     MuiButtonBase: C.MuiButtonBase(theme),
@@ -87,7 +86,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiChip: C.MuiChip(theme),
     MuiCircularProgress: C.MuiCircularProgress(theme),
     MuiCssBaseline: C.MuiCssBaseline(theme),
-    MuiDialog: C.MuiDialog(theme),
+    MuiDialog: C.MuiDialog,
     MuiDialogActions: C.MuiDialogActions,
     MuiDialogContent: C.MuiDialogContent(theme),
     MuiDialogTitle: C.MuiDialogTitle(theme),

package/src/views/ExploreView/exploreView.tsx

@@ -40,6 +40,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 interface ExploreViewProps extends AzulEntitiesStaticResponse {
@@ -52,7 +53,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
   const { explorerTitle, summaryConfig, trackingConfig } = config;
-  const { listView } = entityConfig;
+  const { label, listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
   const { categoryGroups, categoryViews, filterCount, loading } = exploreState;
   const { response: summaryResponse } = useSummary(); // Fetch summary.
@@ -145,7 +146,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     <>
       {categoryViews && !!categoryViews.length && (
         <Sidebar drawerOpen={isDrawerOpen} onDrawerClose={onCloseDrawer}>
-          <SidebarTools>
+          <SidebarTools data-testid={TEST_IDS.FILTER_CONTROLS}>
             <SidebarLabel label={"Filters"} />
             <ClearAllFilters />
             <SearchAllFilters
@@ -165,7 +166,11 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
       <IndexView
         className={props.className}
         chart={
-          <ChartView categoryFilters={categoryFilters} loading={loading} />
+          <ChartView
+            categoryFilters={categoryFilters}
+            entityName={label}
+            loading={loading}
+          />
         }
         list={<EntityList entityListType={entityListType} />}
         ListHero={renderComponent(listHero)}

package/tests/chart.test.tsx

@@ -2,9 +2,15 @@ import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { SelectCategoryValueView } from "../src/common/entities";
+import { parseTranslate } from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils";
 import { CHART_TEST_ID } from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/constants";
 import * as stories from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories";
-import { PALETTE } from "../src/styles/common/mui/palette";
+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);
 
@@ -29,30 +35,35 @@ describe("Chart", () => {
   });
 
   describe("category labels and counts", () => {
-    const countSet = new Set(DATA.map(mapCount));
-    const labelSet = new Set(DATA.map(mapLabel));
+    const counts = DATA.map(mapCount);
+    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("text-count", "text");
-      labelTextEls = getEls("text-category-label", "text");
+      countTextEls = getEls(CLASSNAMES.TEXT_COUNT, "text");
+      labelTextEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "text");
+      titleTextEls = getEls(CLASSNAMES.TEXT_CATEGORY_LABEL, "title");
     });
 
-    it("renders category labels", () => {
-      expect(labelTextEls.length).toEqual(labelSet.size);
-      labelTextEls.forEach(({ textContent }) => {
-        expect(textContent).toBeDefined();
-        expect(labelSet.has(textContent || "")).toBeTruthy();
+    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(countSet.size);
+      expect(countTextEls.length).toEqual(counts.length);
       countTextEls.forEach(({ textContent }) => {
         expect(textContent).toBeDefined();
-        expect(countSet.has(textContent || "")).toBeTruthy();
+        expect(counts.includes(textContent || "")).toBeTruthy();
       });
     });
   });
@@ -60,18 +71,21 @@ describe("Chart", () => {
   describe("category labels with selected values", () => {
     it("renders selected category labels with '(selected)'", () => {
       render(<Selected testId={CHART_TEST_ID} />);
-      const textEls = getEls("text-category-label", "text");
-      for (let i = 0; i < SELECTED_DATA.length; i++) {
-        const selectedData = SELECTED_DATA[i];
-        const textEl = textEls[i];
+      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) {
-          expect(textEl.textContent).toEqual(
-            `${selectedData.label} (selected)`
-          );
-          continue;
+          const expected = `${selectedData.label} (selected)`;
+          expect(titleText).toEqual(expected);
+          expect(expected.includes(labelText)).toBeTruthy();
+          return;
         }
-        expect(textEl.textContent).toEqual(selectedData.label);
-      }
+        const expected = selectedData.label;
+        expect(titleText).toEqual(expected);
+        expect(expected.includes(labelText)).toBeTruthy();
+      });
     });
   });
 
@@ -108,8 +122,31 @@ describe("Chart", () => {
       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(mapCount);
+      // 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.
@@ -133,6 +170,17 @@ function getEls(className: string, selectors: string): NodeListOf<SVGElement> {
   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.
@@ -168,3 +216,46 @@ function mapCount(categoryValueView: SelectCategoryValueView): 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/chartView.test.tsx

@@ -28,6 +28,18 @@ describe("ChartView", () => {
     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} per ${category}`))
+      ).toBeDefined();
+    });
+  });
+
   it("renders charts for each category", () => {
     render(<Default />);
     const svgEls = document.querySelectorAll("svg");

package/tests/entitiesView.test.tsx

@@ -1,35 +1,31 @@
 import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { ENTITIES_VIEW_TEST_ID } from "../src/components/Index/components/EntitiesView/constants";
 import { VIEW_MODE } from "../src/components/Index/components/EntitiesView/hooks/UseEntitiesView/types";
 import * as stories from "../src/components/Index/components/EntitiesView/stories/entitiesView.stories";
+import { TEST_IDS } from "../src/tests/testIds";
 
 const { Default } = composeStories(stories);
 
 describe("EntitiesView", () => {
   it("renders correctly", () => {
-    render(<Default testId={ENTITIES_VIEW_TEST_ID} />);
-    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    render(<Default />);
+    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
     expect(viewEl).not.toBeNull();
   });
 
   it("does not render toggle buttons when disabled", () => {
-    render(<Default testId={ENTITIES_VIEW_TEST_ID} />);
-    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    render(<Default />);
+    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
     const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
     expect(buttonsEl.length).toEqual(0);
   });
 
   it("renders toggle buttons when enabled", () => {
     render(
-      <Default
-        testId={ENTITIES_VIEW_TEST_ID}
-        viewMode={VIEW_MODE.TABLE}
-        viewStatus={{ disabled: false }}
-      />
+      <Default viewMode={VIEW_MODE.TABLE} viewStatus={{ disabled: false }} />
     );
-    const viewEl = screen.getByTestId(ENTITIES_VIEW_TEST_ID);
+    const viewEl = screen.getByTestId(TEST_IDS.ENTITIES_VIEW);
     const buttonsEl = viewEl.getElementsByClassName("MuiToggleButton-root");
     expect(buttonsEl.length).toEqual(2);
   });

package/tests/filterRange.test.tsx

@@ -0,0 +1,87 @@
+import { composeStories } from "@storybook/react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import * as stories from "../src/components/Filter/components/FilterRange/stories/filterRange.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import { TEST_IDS } from "../src/tests/testIds";
+import { getClassNames } from "../src/utils/tests";
+
+const BETWEEN = "Between";
+const GREATER_THAN = "Greater Than";
+const LESS_THAN = "Less Than";
+
+const { Default } = composeStories(stories);
+
+describe("FilterRange", () => {
+  let filterEl: HTMLFormElement;
+
+  beforeEach(() => {
+    render(<Default />);
+    filterEl = screen.getByTestId(TEST_IDS.FILTER_RANGE);
+  });
+
+  describe("Operator BETWEEN", () => {
+    it("renders the toggle buttons with correct text", () => {
+      expect(screen.getByRole("button", { name: BETWEEN })).toBeDefined();
+      expect(screen.getByRole("button", { name: LESS_THAN })).toBeDefined();
+      expect(screen.getByRole("button", { name: GREATER_THAN })).toBeDefined();
+    });
+
+    it("renders BETWEEN toggle button as selected", () => {
+      expect(
+        getClassNames(screen.getByRole("button", { name: BETWEEN }))
+      ).toContain(MUI_CLASSES.SELECTED);
+    });
+
+    it("renders BETWEEN input fields with correct labels", () => {
+      expect(filterEl.querySelectorAll("label")).toHaveLength(2);
+      expect(filterEl.querySelectorAll("input")).toHaveLength(2);
+      expect(filterEl.querySelector('label[for="between"]')).toBeDefined();
+      expect(filterEl.querySelector('label[for="between-to"]')).toBeDefined();
+      expect(filterEl.querySelector('input[name="between"]')).toBeDefined();
+      expect(filterEl.querySelector('input[name="between-to"]')).toBeDefined();
+    });
+
+    it("renders filter button", () => {
+      expect(screen.getByText("Filter")).toBeDefined();
+    });
+  });
+
+  describe("Operator LESS THAN", () => {
+    beforeEach(() => {
+      fireEvent.click(screen.getByRole("button", { name: LESS_THAN }));
+    });
+
+    it("renders LESS THAN toggle button as selected", () => {
+      expect(
+        getClassNames(screen.getByRole("button", { name: LESS_THAN }))
+      ).toContain(MUI_CLASSES.SELECTED);
+    });
+
+    it("renders LESS THAN input field with correct label", () => {
+      expect(filterEl.querySelectorAll("label")).toHaveLength(1);
+      expect(filterEl.querySelectorAll("input")).toHaveLength(1);
+      expect(filterEl.querySelector('label[for="lessThan"]')).toBeDefined();
+      expect(filterEl.querySelector('input[name="lessThan"]')).toBeDefined();
+    });
+  });
+
+  describe("Operator GREATER THAN", () => {
+    beforeEach(() => {
+      fireEvent.click(screen.getByRole("button", { name: GREATER_THAN }));
+    });
+
+    it("renders GREATER THAN toggle button as selected", () => {
+      expect(
+        getClassNames(screen.getByRole("button", { name: GREATER_THAN }))
+      ).toContain(MUI_CLASSES.SELECTED);
+    });
+
+    it("renders GREATER THAN input field with correct label", () => {
+      expect(filterEl.querySelectorAll("label")).toHaveLength(1);
+      expect(filterEl.querySelectorAll("input")).toHaveLength(1);
+      expect(filterEl.querySelector('label[for="greaterThan"]')).toBeDefined();
+      expect(filterEl.querySelector('input[name="greaterThan"]')).toBeDefined();
+    });
+  });
+});

package/tests/filterRangeMock.test.tsx

@@ -0,0 +1,38 @@
+import { jest } from "@jest/globals";
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React, { FormEvent } from "react";
+import { RANGE_OPERATOR } from "../src/components/Filter/components/FilterRange/types";
+
+const ON_SUBMIT = jest.fn();
+
+jest.unstable_mockModule(
+  "../src/components/Filter/components/FilterRange/hooks/UseFilterRange/hook",
+  () => ({
+    useFilterRange: jest.fn(() => ({
+      onChange: jest.fn(),
+      onSubmit: (e: FormEvent): void => {
+        e.preventDefault();
+        ON_SUBMIT(e);
+      },
+      value: RANGE_OPERATOR.BETWEEN,
+    })),
+  })
+);
+
+const stories = await import(
+  "../src/components/Filter/components/FilterRange/stories/filterRange.stories"
+);
+const { Default } = composeStories(stories);
+
+describe("FilterRangeWithMockedHook", () => {
+  describe("submit button", () => {
+    beforeEach(() => {
+      render(<Default />);
+    });
+    it("has a submit button that can be clicked", () => {
+      screen.getByText("Filter").click();
+      expect(ON_SUBMIT).toHaveBeenCalledTimes(1);
+    });
+  });
+});