refactor(filterable-select): convert unit tests to RTL

Sage · Oct 28, 2024 · 372a844 · 372a844
1 parent 0c36b89
commit 372a844
Show file tree

Hide file tree

Showing 4 changed files with 1,755 additions and 1,672 deletions.
diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -203,6 +203,7 @@ export const FilterableSelect = React.forwardRef<
         newValue: string | Record<string, unknown>,
         selectionConfirmed: boolean
       ) => {
+        /* istanbul ignore else */
         if (onChange) {
           onChange(createCustomEvent(newValue, selectionConfirmed));
         }
@@ -280,7 +281,12 @@ export const FilterableSelect = React.forwardRef<
 
         if (!matchingOption || matchingOption.props.text === undefined) {
           setTextValue(filterText || "");
-        } else if (
+
+          return;
+        }
+
+        /* istanbul ignore else */
+        if (
           isClosing ||
           matchingOption.props.text
             ?.toLowerCase()
@@ -432,7 +438,9 @@ export const FilterableSelect = React.forwardRef<
     const onFilterChange = useStableCallback(
       onFilterChangeProp as (filterTextArg: unknown) => void
     );
+
     const isFirstRender = useRef(true);
+
     useEffect(() => {
       if (onFilterChange && !isFirstRender.current) {
         onFilterChange(filterText);
@@ -537,6 +545,14 @@ export const FilterableSelect = React.forwardRef<
       });
     }
 
+    useEffect(() => {
+      return () => {
+        if (focusTimer.current) {
+          clearTimeout(focusTimer.current);
+        }
+      };
+    }, []);
+
     function handleTextboxFocus(event: React.FocusEvent<HTMLInputElement>) {
       const triggerFocus = () => onFocus?.(event);
 

diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx
@@ -102,6 +102,39 @@ test.describe("When focused", () => {
 });
 
 test.describe("FilterableSelect component", () => {
+  test("should not select an option when the user types non-matching filter text in the input and then presses the Enter key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("Enter");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("");
+  });
+
+  test("should not select an option when the user types non-matching filter text and then presses ArrowDown key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("ArrowDown");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("f");
+  });
+
+  test("should not select an option when the user types non-matching filter text and then presses ArrowUp key", async ({
+    page,
+    mount,
+  }) => {
+    await mount(<FilterableSelectComponent />);
+
+    await selectInput(page).fill("f");
+    await selectInput(page).press("ArrowUp");
+    await expect(getDataElementByValue(page, "input")).toHaveValue("f");
+  });
+
   testData.forEach((labelValue) => {
     test(`should render label using ${labelValue} special characters`, async ({
       mount,