@react-md/core 1.0.0-next.1 → 1.0.0-next.10

package/src/searching/__tests__/caseInsensitive.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it } from "@jest/globals";
+import { caseInsensitiveSearch } from "../caseInsensitive.js";
+
+const FRUITS = ["Apple", "Banana", "Mango", "Orange"];
+
+describe("caseInsensitiveSearch", () => {
+  it("should return the list if it is empty or there is no query string", () => {
+    const list1: string[] = [];
+    const list2 = ["item1", "item2"];
+
+    expect(caseInsensitiveSearch({ query: "", list: list1 })).toBe(list1);
+    expect(caseInsensitiveSearch({ query: "", list: list2 })).toBe(list2);
+
+    expect(caseInsensitiveSearch({ query: "string", list: list1 })).toBe(list1);
+  });
+
+  it("should filter out all items that do not contain the query string ignoring case", () => {
+    const expected1 = ["Apple"];
+    expect(caseInsensitiveSearch({ query: "ap", list: FRUITS })).toEqual(
+      expected1
+    );
+    expect(caseInsensitiveSearch({ query: "aP", list: FRUITS })).toEqual(
+      expected1
+    );
+    expect(caseInsensitiveSearch({ query: "AP", list: FRUITS })).toEqual(
+      expected1
+    );
+
+    const expected2 = ["Banana", "Mango", "Orange"];
+    expect(caseInsensitiveSearch({ query: "an", list: FRUITS })).toEqual(
+      expected2
+    );
+    expect(caseInsensitiveSearch({ query: "AN", list: FRUITS })).toEqual(
+      expected2
+    );
+    expect(caseInsensitiveSearch({ query: "aN", list: FRUITS })).toEqual(
+      expected2
+    );
+  });
+
+  it("should allow for filtering by matches that start with the query string instead of contain only", () => {
+    expect(
+      caseInsensitiveSearch({
+        query: "ap",
+        list: FRUITS,
+        startsWith: true,
+      })
+    ).toEqual(["Apple"]);
+    expect(
+      caseInsensitiveSearch({
+        query: "an",
+        list: FRUITS,
+        startsWith: true,
+      })
+    ).toEqual([]);
+
+    const list = ["Item 1", "This is Item 1"];
+    expect(
+      caseInsensitiveSearch({
+        query: "item",
+        list,
+        startsWith: true,
+      })
+    ).toEqual(["Item 1"]);
+  });
+
+  it("should work on objects", () => {
+    const apple = { name: "Apple", value: 0 };
+    const banana = { name: "Banana", value: 1 };
+    const mango = { name: "Mango", value: 2 };
+    const orange = { name: "Orange", value: 3 };
+    const list = [apple, banana, mango, orange];
+
+    expect(
+      caseInsensitiveSearch({
+        query: "ap",
+        list,
+        extractor: (item) => item.name,
+      })
+    ).toEqual([apple]);
+    expect(
+      caseInsensitiveSearch({
+        query: "2",
+        list,
+        extractor: (item) => `${item.value}`,
+      })
+    ).toEqual([mango]);
+
+    expect(
+      caseInsensitiveSearch({
+        query: "an",
+        list,
+        extractor: (item) => item.name,
+      })
+    ).toEqual([banana, mango, orange]);
+  });
+
+  it("should allow whitespace to be trimmed", () => {
+    expect(
+      caseInsensitiveSearch({
+        list: FRUITS,
+        query: "   app",
+        whitespace: "trim",
+      })
+    ).toEqual(["Apple"]);
+    expect(
+      caseInsensitiveSearch({
+        list: FRUITS,
+        query: "   app   ",
+        whitespace: "trim",
+      })
+    ).toEqual(["Apple"]);
+  });
+
+  it("should throw an error if an extractor is not provided for a non-string list", () => {
+    expect(() =>
+      // @ts-expect-error
+      caseInsensitiveSearch({ query: "q", list: [0, 1, 2] })
+    ).toThrow(
+      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
+    );
+
+    expect(() =>
+      // @ts-expect-error
+      caseInsensitiveSearch({ query: "q", list: [null, undefined] })
+    ).toThrow(
+      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
+    );
+
+    expect(() =>
+      // @ts-expect-error
+      caseInsensitiveSearch({ query: "q", list: [{ name: "Qwerty" }] })
+    ).toThrow(
+      "A `TextExtractor` must be provided to `caseInsensitiveSearch` for lists that do not contain strings"
+    );
+  });
+
+  it("should find the first match when the type is set to search", () => {
+    const fruits = ["Banana", "Grape", "Apple", "Orange"];
+    expect(
+      caseInsensitiveSearch({
+        list: fruits,
+        query: "ap",
+        type: "search",
+      })
+    ).toBe("Grape");
+
+    expect(
+      caseInsensitiveSearch({
+        list: fruits,
+        query: "ap",
+        type: "search",
+        startsWith: true,
+      })
+    ).toBe("Apple");
+
+    expect(
+      caseInsensitiveSearch({
+        list: [],
+        query: "",
+        type: "search",
+      })
+    ).toBe(undefined);
+  });
+});

package/src/searching/__tests__/fuzzy.ts

@@ -0,0 +1,169 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { fuzzySearch } from "../fuzzy.js";
+
+const FRUITS = ["Apple", "Banana", "Mango", "Orange"];
+const NON_DEPRECATED_STRING_PROPERTY_NAMES = [
+  "at",
+  "charAt",
+  "charCodeAt",
+  "codePointAt",
+  "concat",
+  "constructor",
+  "endsWith",
+  "includes",
+  "indexOf",
+  "lastIndexOf",
+  "length",
+  "localeCompare",
+  "match",
+  "matchAll",
+  "normalize",
+  "padEnd",
+  "padStart",
+  "repeat",
+  "replace",
+  "replaceAll",
+  "search",
+  "slice",
+  "split",
+  "startsWith",
+  "substring",
+  "toLocaleLowerCase",
+  "toLocaleUpperCase",
+  "toLowerCase",
+  "toString",
+  "toUpperCase",
+  "trim",
+  "trimEnd",
+  "trimStart",
+  "valueOf",
+];
+
+describe("fuzzySearch", () => {
+  it("should return the list as-is if it is empty or there is no query string", () => {
+    const list1: string[] = [];
+    const list2 = ["item1", "item2"];
+
+    expect(
+      fuzzySearch({
+        list: list1,
+        query: "",
+      })
+    ).toBe(list1);
+    expect(
+      fuzzySearch({
+        list: list1,
+        query: "query",
+      })
+    ).toBe(list1);
+
+    expect(
+      fuzzySearch({
+        list: list2,
+        query: "",
+      })
+    ).toBe(list2);
+  });
+
+  it("should filter the list by ensuring that the letters just appear in order in the string", () => {
+    expect(
+      fuzzySearch({
+        list: FRUITS,
+        query: "ae",
+      })
+    ).toEqual(["Apple", "Orange"]);
+    expect(
+      fuzzySearch({
+        list: FRUITS,
+        query: "aE",
+      })
+    ).toEqual(["Apple", "Orange"]);
+
+    expect(
+      fuzzySearch({
+        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
+        query: "la",
+      })
+    ).toEqual([
+      "lastIndexOf",
+      "localeCompare",
+      "replace",
+      "replaceAll",
+      "toLocaleLowerCase",
+      "toLocaleUpperCase",
+      "toLowerCase",
+    ]);
+  });
+
+  it("should lazy-create the regexp", () => {
+    const reg = jest.spyOn(global, "RegExp");
+
+    const list = Array.from({ length: 100000 }, (_, i) => `${i} Item`);
+    fuzzySearch({ list, query: "1" });
+    expect(reg).toHaveBeenCalledTimes(1);
+  });
+
+  it("should support ignoring whitespace", () => {
+    const item1 = "Lorem ipsum";
+    const item2 = "another item";
+    const item3 = "in this string";
+    const item4 = "not interested, mate";
+    const item5 = "not in my house";
+    const list = [item1, item2, item3, item4, item5];
+
+    expect(
+      fuzzySearch({
+        list,
+        query: "ti",
+        whitespace: "ignore",
+      })
+    ).toEqual([item2, item3, item4, item5]);
+
+    expect(
+      fuzzySearch({
+        list,
+        query: "t i",
+        whitespace: "ignore",
+      })
+    ).toEqual([item2, item3, item4, item5]);
+
+    expect(
+      fuzzySearch({
+        list,
+        query: "rem",
+        whitespace: "ignore",
+      })
+    ).toEqual([item1, item2]);
+    expect(
+      fuzzySearch({
+        list,
+        query: "tem",
+        whitespace: "ignore",
+      })
+    ).toEqual([item2]);
+  });
+
+  it("should return the first match when the is set to search", () => {
+    expect(
+      fuzzySearch({
+        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
+        query: "ad",
+        type: "search",
+      })
+    ).toBe("charCodeAt");
+    expect(
+      fuzzySearch({
+        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
+        query: "add",
+        type: "search",
+      })
+    ).toBe("padEnd");
+    expect(
+      fuzzySearch({
+        list: NON_DEPRECATED_STRING_PROPERTY_NAMES,
+        query: "addition",
+        type: "search",
+      })
+    ).toBe(undefined);
+  });
+});

package/src/searching/__tests__/toSearchQuery.ts

@@ -0,0 +1,21 @@
+import { expect, describe, it } from "@jest/globals";
+import { toSearchQuery } from "../toSearchQuery.js";
+
+describe("toSearchQuery", () => {
+  it("should lowercase the string and keep whitespace by default", () => {
+    expect(toSearchQuery("")).toBe("");
+    expect(toSearchQuery("Hello, World!")).toBe("hello, world!");
+  });
+
+  it("should support ignoring whitespace by removing it all", () => {
+    expect(toSearchQuery("   Hell  o, Wor ld!    ", "ignore")).toBe(
+      "hello,world!"
+    );
+  });
+
+  it("should support removing leading and trailing whitespace by setting the whitespace to trim", () => {
+    expect(toSearchQuery("   Hell  o, Wor ld!    ", "trim")).toBe(
+      "hell  o, wor ld!"
+    );
+  });
+});

package/src/searching/__tests__/useFuzzyMatch.tsx

@@ -0,0 +1,200 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { nanoid } from "nanoid";
+import { useState } from "react";
+import { fireEvent, render, screen } from "../../test-utils/index.js";
+import { type NonNullMutableRef } from "../../types.js";
+import { createFuzzyRegExp } from "../fuzzy.js";
+import { toSearchQuery } from "../toSearchQuery.js";
+import { useFuzzyMatch } from "../useFuzzyMatch.js";
+
+const NON_DEPRECATED_STRING_PROPERTY_NAMES = [
+  "at",
+  "charAt",
+  "charCodeAt",
+  "codePointAt",
+  "concat",
+  "constructor",
+  "endsWith",
+  "includes",
+  "indexOf",
+  "lastIndexOf",
+  "length",
+  "localeCompare",
+  "match",
+  "matchAll",
+  "normalize",
+  "padEnd",
+  "padStart",
+  "repeat",
+  "replace",
+  "replaceAll",
+  "search",
+  "slice",
+  "split",
+  "startsWith",
+  "substring",
+  "toLocaleLowerCase",
+  "toLocaleUpperCase",
+  "toLowerCase",
+  "toString",
+  "toUpperCase",
+  "trim",
+  "trimEnd",
+  "trimStart",
+  "valueOf",
+];
+
+describe("useFuzzyMatch", () => {
+  it("should only re-create the fuzzy regexp when the query changes", () => {
+    const regexp = jest.spyOn(window, "RegExp");
+
+    function Test() {
+      const [value, setValue] = useState("");
+      const fuzzyMatch = useFuzzyMatch();
+      let match = "";
+      const filtered: string[] = [];
+      const query = toSearchQuery(value);
+      for (const name of NON_DEPRECATED_STRING_PROPERTY_NAMES) {
+        if (fuzzyMatch({ query, value: toSearchQuery(name) })) {
+          if (query) {
+            match ||= name;
+          }
+          filtered.push(name);
+        }
+      }
+
+      return (
+        <>
+          <output data-testid="match">{match}</output>
+          <output data-testid="filtered">{filtered.join(",")}</output>
+          <label>
+            Search
+            <input
+              type="text"
+              onChange={(event) => setValue(event.currentTarget.value)}
+            />
+          </label>
+        </>
+      );
+    }
+
+    render(<Test />);
+
+    const match = screen.getByTestId("match");
+    const filtered = screen.getByTestId("filtered");
+    const search = screen.getByRole("textbox", { name: "Search" });
+
+    expect(regexp).not.toHaveBeenCalled();
+    expect(match).toHaveTextContent("");
+    expect(filtered).toHaveTextContent(
+      NON_DEPRECATED_STRING_PROPERTY_NAMES.join(",")
+    );
+
+    fireEvent.change(search, { target: { value: "la" } });
+    expect(regexp).toHaveBeenCalledTimes(1);
+    expect(match).toHaveTextContent("lastIndexOf");
+    expect(filtered).toHaveTextContent(
+      [
+        "lastIndexOf",
+        "localeCompare",
+        "replace",
+        "replaceAll",
+        "toLocaleLowerCase",
+        "toLocaleUpperCase",
+        "toLowerCase",
+      ].join(",")
+    );
+
+    fireEvent.change(search, { target: { value: "la" } });
+    expect(regexp).toHaveBeenCalledTimes(1);
+    expect(match).toHaveTextContent("lastIndexOf");
+    expect(filtered).toHaveTextContent(
+      [
+        "lastIndexOf",
+        "localeCompare",
+        "replace",
+        "replaceAll",
+        "toLocaleLowerCase",
+        "toLocaleUpperCase",
+        "toLowerCase",
+      ].join(",")
+    );
+
+    fireEvent.change(search, { target: { value: "lar" } });
+    expect(regexp).toHaveBeenCalledTimes(2);
+    expect(match).toHaveTextContent("localeCompare");
+    expect(filtered).toHaveTextContent(
+      ["localeCompare", "toLocaleLowerCase", "toLocaleUpperCase"].join(",")
+    );
+  });
+
+  it("should ideally be more performant that re-creating the regexp for each item", () => {
+    // I should really do benchmarks instead of tests for this, but whatever.
+    // The average duration for 10,000 items:
+    // - Test1 -> 27
+    // - Test2 -> 6
+    //
+    // For 1,000,000
+    // - Test1 -> 1680
+    // - Test2 -> 92
+    //
+    // Since this was really added for the useAutocomplete usage.... the
+    // difference doesn't really matter since you won't be combining searching
+    // and filtering 1,000,000 on the front end. Well.. you _shouldn't_.
+    //
+    // If you are only filtering or searching (not both), you should use the
+    // `fuzzySearch` since it does this already behind the scenes.
+    //
+    // `for (let i = 0, l = items.length; i < l; i++)` and `.filter` are
+    // _technically_ quicker than `for const .. of`, but it's the same results
+    // so who cares? I wasted too much time for this hook that probably won't
+    // even be used anyways
+    const items = Array.from({ length: 1e4 }, () => nanoid());
+    interface TestProps {
+      query: string;
+      filtered: NonNullMutableRef<string[]>;
+    }
+
+    function Test1({ query, filtered }: TestProps) {
+      filtered.current = [];
+      for (const item of items) {
+        if (
+          item.length > 0 &&
+          createFuzzyRegExp(query).test(toSearchQuery(item))
+        ) {
+          filtered.current.push(item);
+        }
+      }
+
+      return null;
+    }
+
+    function Test2({ query, filtered }: TestProps) {
+      filtered.current = [];
+      const fuzzyMatch = useFuzzyMatch();
+      for (const item of items) {
+        if (fuzzyMatch({ query, value: toSearchQuery(item) })) {
+          filtered.current.push(item);
+        }
+      }
+
+      return null;
+    }
+
+    const query = "aed";
+    const filtered1: NonNullMutableRef<string[]> = { current: [] };
+    const filtered2: NonNullMutableRef<string[]> = { current: [] };
+    const start1 = performance.now();
+    render(<Test1 query={query} filtered={filtered1} />);
+    const end1 = performance.now();
+    const duration1 = end1 - start1;
+
+    const start2 = performance.now();
+    render(<Test2 query={query} filtered={filtered2} />);
+    const end2 = performance.now();
+    const duration2 = end2 - start2;
+
+    expect(filtered1.current.length).toBe(filtered2.current.length);
+    expect(duration1).toBeGreaterThan(duration2);
+  });
+});