pr fixes

.github/workflows/run-tests.yml

@@ -9,8 +9,6 @@ jobs:
   call_run_tests-react-18:
     uses: yext/slapshot-reusable-workflows/.github/workflows/run_tests.yml@v1
     with:
-      build_script: |
-        npm run build
       node_matrix: '["16.x", "18.x"]'
     secrets:
       MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
@@ -21,10 +19,6 @@ jobs:
         npm i \
           react@^17.0.2 \
           react-dom@^17.0.2 \
-          [email protected] \
-          @types/[email protected] \
-          @storybook/test-runner@^0.15.2 \
-          @testing-library/jest-dom@^5.16.1 \
           @testing-library/react@^12.1.3 \
           @testing-library/react-hooks@^8.0.0
         npm run build
@@ -38,10 +32,6 @@ jobs:
         npm i \
           react@^16.14 \
           react-dom@^16.14 \
-          [email protected] \
-          @types/[email protected] \
-          @storybook/test-runner@^0.15.2 \
-          @testing-library/jest-dom@^5.16.1 \
           @testing-library/react@^12.1.3 \
           @testing-library/react-hooks@^8.0.0
         npm run build

src/components/Dropdown/Dropdown.tsx

@@ -67,8 +67,17 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
     alwaysSelectOption = false
   } = props;
 
+  //reset the id when the component is re-rendered
+  const [idFromHook] = useId();
+  const [screenReaderUUID, setScreenReaderUUID] = useState<string>('');
+
+  useLayoutEffect(() => {
+    if (!screenReaderUUID) {
+      setScreenReaderUUID(idFromHook);
+    }
+  }, [screenReaderUUID, idFromHook]);
+
   const containerRef = useRef<HTMLDivElement>(null);
-  const [screenReaderUUID] = useId();
   const [screenReaderKey, setScreenReaderKey] = useState<number>(0);
   const [hasTyped, setHasTyped] = useState<boolean>(false);
   const [childrenWithDropdownItemsTransformed, items] = useMemo(() => {

src/components/Filters/CheckboxOption.tsx

@@ -1,10 +1,11 @@
 import { FieldValueFilter, Matcher, NumberRangeValue } from '@yext/search-headless-react';
-import React, { useCallback, useEffect, useMemo, ReactNode } from 'react';
+import React, { useCallback, useEffect, useMemo, ReactNode, useState } from 'react';
 import { useFiltersContext } from './FiltersContext';
 import { useFilterGroupContext } from './FilterGroupContext';
 import { useComposedCssClasses } from '../../hooks';
-import { findSelectableFieldValueFilter } from '../../utils/filterutils';
+import { findSelectableFieldValueFilter, isNumberRangeValue, getDefaultFilterDisplayName } from '../../utils/filterutils';
 import classNames from 'classnames';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 import { useId } from "react-id-generator";
 
 /**
@@ -62,6 +63,11 @@ const builtInCssClasses: Readonly<CheckboxCssClasses> = {
   tooltip: 'absolute z-10 left-0 -top-0.5 whitespace-nowrap rounded shadow-lg p-3 text-sm bg-neutral-dark text-white'
 };
 
+const useLayoutEffect = typeof useIsomorphicLayoutEffect === 'function'
+  ? useIsomorphicLayoutEffect
+  : useIsomorphicLayoutEffect['default'];
+
+
 /**
  * A checkbox component that represents a single FieldValueFilter.
  *
@@ -78,8 +84,18 @@ export function CheckboxOption(props: CheckboxOptionProps): JSX.Element | null {
     displayName = props.value,
     resultsCount
   } = props;
+
+  //reset the id when the component is re-rendered
+  const [idFromHook] = useId();
+  const [optionId, setOptionId] = useState<string>('');
+
+  useLayoutEffect(() => {
+    if (!optionId) {
+      setOptionId(idFromHook);
+    }
+  }, [optionId, idFromHook]);
+
   const cssClasses = useComposedCssClasses(builtInCssClasses, props.customCssClasses);
-  const [optionId] = useId();
   const { selectFilter, filters, applyFilters } = useFiltersContext();
 
   const handleClick = useCallback((checked: boolean) => {
@@ -118,7 +134,16 @@ export function CheckboxOption(props: CheckboxOptionProps): JSX.Element | null {
 
   const isSelected = existingStoredFilter ? existingStoredFilter.selected : false;
 
-  const labelText = resultsCount ? `${displayName} (${resultsCount})` : displayName
+  //handle the case where the displayName is a number range value
+  let displayNameFromFilterDisplay = '';
+  if (isNumberRangeValue(displayName)) {
+    displayNameFromFilterDisplay = getDefaultFilterDisplayName(displayName)
+  }
+
+  let labelText = resultsCount ? `${displayName} (${resultsCount})` : displayName;
+  if (displayNameFromFilterDisplay) {
+    labelText = resultsCount ? `${displayNameFromFilterDisplay} (${resultsCount})` : displayNameFromFilterDisplay;
+  }
 
   const inputClasses = classNames(cssClasses.input, {
     [cssClasses.input___disabled ?? '']: isOptionsDisabled

src/components/Filters/FilterGroupContext.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext, CSSProperties, ReactNode, TransitionEvent, MouseEvent } from 'react';
+import { createContext, useContext } from 'react';
 import { useCollapse } from 'react-collapsed';
 
 type UseCollapseOutput = ReturnType<typeof useCollapse>;

src/components/Filters/RangeInput.tsx

@@ -2,7 +2,7 @@ import { Matcher, NumberRangeValue, useSearchActions, useSearchState } from '@ye
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFilterGroupContext } from './FilterGroupContext';
 import { useComposedCssClasses } from '../../hooks';
-import { clearStaticRangeFilters, findSelectableFieldValueFilter, getSelectableFieldValueFilters, parseNumberRangeInput } from '../../utils/filterutils';
+import { getDefaultFilterDisplayName, clearStaticRangeFilters, findSelectableFieldValueFilter, getSelectableFieldValueFilters, parseNumberRangeInput } from '../../utils/filterutils';
 import { executeSearch } from '../../utils';
 import classNames from 'classnames';
 import { useFiltersContext } from './FiltersContext';
@@ -242,22 +242,6 @@ export function RangeInput(props: RangeInputProps): JSX.Element | null {
   );
 }
 
-/**
- * Creates the filter's display name based on the number range.
- */
-function getDefaultFilterDisplayName(numberRange: NumberRangeValue) {
-  const start = numberRange.start;
-  const end = numberRange.end;
-
-  if (start && end) {
-    return `${start.value} - ${end.value}`;
-  } else if (start && !end) {
-    return `Over ${start.value}`;
-  } else if (end && !start) {
-    return `Up to ${end.value}`;
-  }
-  return '';
-}
 
 /**
  * Returns true only if the provided string passes the numeric validation.

src/utils/filterutils.tsx

@@ -171,3 +171,20 @@ export function getSelectableFieldValueFilters(
     return undefined;
   }).filter((s): s is SelectableFieldValueFilter => !!s);
 }
+
+/**
+ * Creates the filter's display name based on the number range.
+ */
+export function getDefaultFilterDisplayName(numberRange: NumberRangeValue) {
+  const start = numberRange.start;
+  const end = numberRange.end;
+
+  if (start && end) {
+    return `${start.value} - ${end.value}`;
+  } else if (start && !end) {
+    return `Over ${start.value}`;
+  } else if (end && !start) {
+    return `Up to ${end.value}`;
+  }
+  return '';
+}

test-site/package.json

@@ -8,6 +8,7 @@
     "@yext/search-ui-react": "file:..",
     "mapbox-gl": "^2.10.0",
     "react": "file:../node_modules/react",
+    "react-dom": "file:../node_modules/react-dom",
     "react-router-dom": "^6.2.2",
     "uuid": "^9.0.0"
   },

tests/components/DirectAnswer.test.tsx

@@ -40,8 +40,8 @@ async function runAnalyticsTestSuite() {
     const link = screen.getByRole('link');
     await userEvent.click(link);
 
-    await expect(useAnalytics()?.report).toHaveBeenCalledTimes(1);
-    await expect(useAnalytics()?.report).toHaveBeenCalledWith(expect.objectContaining({
+    expect(useAnalytics()?.report).toHaveBeenCalledTimes(1);
+    expect(useAnalytics()?.report).toHaveBeenCalledWith(expect.objectContaining({
       type: 'CTA_CLICK',
       queryId: '[queryId]',
       searcher: 'UNIVERSAL',

tests/components/Dropdown.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import  {userEvent} from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import { Dropdown, DropdownProps } from '../../src/components/Dropdown/Dropdown';
 import { DropdownInput } from '../../src/components/Dropdown/DropdownInput';
 import { DropdownMenu } from '../../src/components/Dropdown/DropdownMenu';

tests/components/NumericalFacetContent.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { SearchActions, FacetOption, Matcher, NumberRangeValue, SelectableStaticFilter, Source, State } from '@yext/search-headless-react';
 import { mockAnswersHooks, mockAnswersState, spyOnActions } from '../__utils__/mocks';
-import {userEvent} from '@testing-library/user-event';
+import userEvent from '@testing-library/user-event';
 import { DisplayableFacets } from '../__fixtures__/data/filters';
 import { NumericalFacetProps } from '../../src';
 import { NumericalFacetContent } from '../../src/components/NumericalFacetContent';

tests/components/RangeInput.stories.tsx

@@ -20,7 +20,6 @@ const meta: Meta<typeof RangeInput> = {
     <SearchHeadlessContext.Provider value={generateMockedHeadless()}>
       <FilterGroupProvider
           fieldId={'123'}
-          defaultExpanded={true}
       >
         <Story />
       </FilterGroupProvider>

tests/components/SearchBar.test.tsx

@@ -1,5 +1,5 @@
 import { SearchIntent, QuerySource, SearchCore, SearchHeadlessContext, State } from '@yext/search-headless-react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { SearchBar } from '../../src/components/SearchBar';
 import userEvent from '@testing-library/user-event';
 import { generateMockedHeadless } from '../__fixtures__/search-headless';

tests/ssr/utils.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { renderToString } from 'react-dom/server';
 import { ReactElement } from 'react';
 
@@ -29,8 +29,6 @@ export async function testSSR(App: ReactElement) {
 
   // hydrate a container whose HTML contents were rendered by ReactDOMServer
   render(App, { container, hydrate: true });
-
-  await waitFor(() => {
-    expect(unexpectedErrorCount).toEqual(0);
-  });
+
+  expect(unexpectedErrorCount).toEqual(0);
 }