@databiosphere/findable-ui 25.1.0 → 26.0.0

package/src/theme/common/palette.ts

@@ -94,148 +94,89 @@ const WHITE = {
   DEFAULT: "#ffffff",
 };
 
-/**
- * Color alpha
- */
-const ALPHA = {
-  A04: "0a",
-  A08: "14",
-  A32: "52",
-  A60: "99",
-  A64: "a3",
-  A80: "cc",
-};
-
-/**
- * Color constants
- */
-export const alertLight = ALERT.LIGHT;
-export const alertLightest = ALERT.LIGHTEST;
-export const alertMain = ALERT.MAIN;
-export const backgroundDefault = BACKGROUND.DEFAULT;
-export const infoContrastText = INFO.CONTRAST_TEXT;
-export const infoLight = INFO.LIGHT;
-export const infoLightest = INFO.LIGHTEST;
-export const infoMain = INFO.MAIN;
-export const inkLight = INK.LIGHT;
-export const inkMain = INK.MAIN;
-export const primaryDark = PRIMARY.DARK;
-export const primaryLightest = PRIMARY.LIGHTEST;
-export const primaryMain = PRIMARY.MAIN;
-export const smokeDark = SMOKE.DARK;
-export const smokeLight = SMOKE.LIGHT;
-export const smokeLightest = SMOKE.LIGHTEST;
-export const smokeMain = SMOKE.MAIN;
-export const successLight = SUCCESS.LIGHT;
-export const successLightest = SUCCESS.LIGHTEST;
-export const successMain = SUCCESS.MAIN;
-export const textPrimary = TEXT.PRIMARY;
-export const warningContrastText = WARNING.CONTRAST_TEXT;
-export const warningLight = WARNING.LIGHT;
-export const warningLightest = WARNING.LIGHTEST;
-export const warningMain = WARNING.MAIN;
-export const black = BLACK.DEFAULT;
-export const white = WHITE.DEFAULT;
-
-/**
- * Color alpha constants
- */
-export const alpha04 = ALPHA.A04;
-export const alpha08 = ALPHA.A08;
-export const alpha32 = ALPHA.A32;
-export const alpha60 = ALPHA.A60;
-export const alpha64 = ALPHA.A64;
-export const alpha80 = ALPHA.A80;
-
-/**
- * Shades
- */
-export const black04 = `${black}${alpha04}`;
-export const black08 = `${black}${alpha08}`;
-
 /**
  * Palette Option "Alert"
  */
 export const alert: PaletteColorOptions = {
-  light: alertLight,
-  lightest: alertLightest,
-  main: alertMain,
+  light: ALERT.LIGHT,
+  lightest: ALERT.LIGHTEST,
+  main: ALERT.MAIN,
 };
 
 /**
  * Palette Option "Background"
  */
 export const background: Pick<TypeBackground, "default"> = {
-  default: backgroundDefault,
+  default: BACKGROUND.DEFAULT,
 };
 
 /**
  * Palette Option "Common"
  */
 export const common: CommonColors = {
-  black: black,
-  white: white,
+  black: BLACK.DEFAULT,
+  white: WHITE.DEFAULT,
 };
 
 /**
  * Palette Option "Info"
  */
 export const info: PaletteColorOptions = {
-  contrastText: infoContrastText,
-  light: infoLight,
-  lightest: infoLightest,
-  main: infoMain,
+  contrastText: INFO.CONTRAST_TEXT,
+  light: INFO.LIGHT,
+  lightest: INFO.LIGHTEST,
+  main: INFO.MAIN,
 };
 
 /**
  * Palette Option "Ink"
  */
 export const ink: PaletteColorOptions = {
-  light: inkLight,
-  main: inkMain,
+  light: INK.LIGHT,
+  main: INK.MAIN,
 };
 
 /**
  * Palette Option "Primary"
  */
 export const primary: PaletteColorOptions = {
-  dark: primaryDark,
-  lightest: primaryLightest,
-  main: primaryMain,
+  dark: PRIMARY.DARK,
+  lightest: PRIMARY.LIGHTEST,
+  main: PRIMARY.MAIN,
 };
 
 /**
  * Palette Option "Smoke"
  */
 export const smoke: PaletteColorOptions = {
-  dark: smokeDark,
-  light: smokeLight,
-  lightest: smokeLightest,
-  main: smokeMain,
+  dark: SMOKE.DARK,
+  light: SMOKE.LIGHT,
+  lightest: SMOKE.LIGHTEST,
+  main: SMOKE.MAIN,
 };
 
 /**
  * Palette Option "Success"
  */
 export const success: PaletteColorOptions = {
-  light: successLight,
-  lightest: successLightest,
-  main: successMain,
+  light: SUCCESS.LIGHT,
+  lightest: SUCCESS.LIGHTEST,
+  main: SUCCESS.MAIN,
 };
 
 /**
  * Palette Option "Text"
  */
 export const text: Pick<TypeText, "primary"> = {
-  primary: textPrimary,
+  primary: TEXT.PRIMARY,
 };
 
 /**
  * Palette Option "Warning"
  */
 export const warning: PaletteColorOptions = {
-  contrastText: warningContrastText,
-  light: warningLight,
-  lightest: warningLightest,
-  main: warningMain,
+  contrastText: WARNING.CONTRAST_TEXT,
+  light: WARNING.LIGHT,
+  lightest: WARNING.LIGHTEST,
+  main: WARNING.MAIN,
 };

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,4 @@
-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";
@@ -42,6 +42,7 @@ export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
           text: P.text,
           warning: P.warning,
         },
+        shadows,
         spacing: 4,
         typography: {
           [T.TEXT_BODY_400]: T.textBody400,
@@ -67,11 +68,6 @@ export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
     )
   );
 
-  // Default shadow overrides.
-  theme.shadows = [...theme.shadows].map(
-    (shadow, s) => shadows[s] || shadow
-  ) as Shadows;
-
   // Theme components.
   theme.components = {
     MuiAccordion: C.MuiAccordion(theme),
@@ -80,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),
@@ -90,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

@@ -53,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.
@@ -166,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/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();
+    });
+  });
+});