feat(search): add input search (#277)

Co-authored-by: Carlos Feria <[email protected]>

client/config/jest.config.ts

@@ -13,27 +13,38 @@ const config: JestConfigWithTsJest = {
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+
   // Stub out resources and provide handling for tsconfig.json paths
   moduleNameMapper: {
     // stub out files that don't matter for tests
-    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
-    "\\.(xsd)$": "<rootDir>/__mocks__/styleMock.js",
+    "\\.(css|less)$": "<rootDir>/src/mocks/styleMock.ts",
+    "\\.(xsd)$": "<rootDir>/mocks/styleMock.ts",
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
-      "<rootDir>/__mocks__/fileMock.js",
+      "<rootDir>/src/mocks/fileMock.ts",
     "@patternfly/react-icons/dist/esm/icons/":
-      "<rootDir>/__mocks__/fileMock.js",
+      "<rootDir>/src/mocks/fileMock.ts",
 
     // match the paths in tsconfig.json
     "@app/(.*)": "<rootDir>/src/app/$1",
     "@assets/(.*)":
       "<rootDir>../node_modules/@patternfly/react-core/dist/styles/assets/$1",
   },
 
+  // moduleNameMapper: {
+  //   "^@app/(.*)$": "<rootDir>/client/src/app/$1",
+  //   "^@mocks/(.*)$": "<rootDir>/client/src/mocks/$1",
+  // },
+
   // A list of paths to directories that Jest should use to search for files
   roots: ["<rootDir>/src"],
 
+  // Code to set up the testing framework before each test file in the suite is executed
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+
   // The test environment that will be used for testing
-  testEnvironment: "jest-environment-jsdom",
+  // testEnvironment: "jest-environment-jsdom",
+  testEnvironment: "jsdom", // or "node" for non-DOM tests
 
   // The pattern or patterns Jest uses to find test files
   testMatch: ["<rootDir>/src/**/*.{test,spec}.{js,jsx,ts,tsx}"],
@@ -42,9 +53,6 @@ const config: JestConfigWithTsJest = {
   transform: {
     "^.+\\.(js|mjs|ts|mts)x?$": "ts-jest",
   },
-
-  // Code to set up the testing framework before each test file in the suite is executed
-  setupFilesAfterEnv: ["<rootDir>/src/app/test-config/setupTests.ts"],
 };
 
 export default config;

client/src/app/pages/search/components/SearchMenu.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IEntity, SearchMenu } from "./SearchMenu";
+import { Label, MenuItem } from "@patternfly/react-core";
+import React from "react";
+
+const meta = {
+  title: "Components/Search/SearchMenu",
+  component: SearchMenu,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function customFilterIncludes(list: IEntity[], searchString: string) {
+  let options: React.JSX.Element[] = list
+    .filter(
+      (option) =>
+        option.id.toLowerCase().includes(searchString.toLowerCase()) ||
+        option.title?.toLowerCase().includes(searchString.toLowerCase()) ||
+        option.description?.toLowerCase().includes(searchString.toLowerCase())
+    )
+    .map((option) => (
+      <MenuItem
+        itemId={option.id}
+        key={option.id}
+        description={option.description}
+        to={option.navLink}
+      >
+        {option.title} <Label color={option.typeColor}>{option.type}</Label>
+      </MenuItem>
+    ));
+
+  if (options.length > 10) {
+    options = options.slice(0, 10);
+  } else {
+    options = [
+      ...options,
+      ...list
+        .filter(
+          (option: IEntity) =>
+            !option.id.startsWith(searchString.toLowerCase()) &&
+            option.id.includes(searchString.toLowerCase())
+        )
+        .map((option: IEntity) => (
+          <MenuItem
+            itemId={option.id}
+            key={option.id}
+            description={option.description}
+            to={option.navLink}
+          >
+            {option.title} <Label color={option.typeColor}>{option.type}</Label>
+          </MenuItem>
+        )),
+    ].slice(0, 10);
+  }
+
+  return options;
+}
+
+export const DefaultState: Story = {
+  args: {
+    onChangeSearch: jest.fn(),
+  },
+};
+
+export const WithCustomFilter: Story = {
+  args: {
+    filterFunction: customFilterIncludes,
+    onChangeSearch: jest.fn(),
+  },
+};