@scheels-softdev/kendoreact-generics 2.6.1 → 2.6.3

package/GenericDropdown.js

@@ -1,19 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComboBox } from "@progress/kendo-react-dropdowns";
-import { filterBy } from "@progress/kendo-data-query";
-import { useRef, useState } from "react";
+import { filterBy, process } from "@progress/kendo-data-query";
+import { useEffect, useRef, useState } from "react";
 import { Skeleton } from "@progress/kendo-react-indicators";
+import { Guard } from "@scheels-softdev/frontend-utility-functions";
 export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }) {
+    //local state
+    const pageSize = 8;
     if (selectedId !== undefined && selectedData !== undefined) {
         throw new Error("You cannot provide both selectedData and selectedId to GenericDropdown.");
     }
-    //local state
-    const pageSize = 8;
+    //useState
+    const [selectedObject, setSelectedObject] = useState(null);
     const [state, setState] = useState({
         skip: 0,
         total: data.length,
         subsetData: data.slice(0, pageSize),
     });
+    //trigger functions
+    useEffect(() => {
+        var _a, _b;
+        setSelectedObject(selectedId
+            ? (_a = data.find((item) => selectedId === item[idField || "id"])) !== null && _a !== void 0 ? _a : null
+            : (_b = data.find((x) => Guard.Ensure.EqualObjects(Object.assign(Object.assign({}, x), selectedData), Object.assign({}, x)))) !== null && _b !== void 0 ? _b : null);
+    }, [selectedId, selectedData, data]);
+    useEffect(() => {
+        setState((current) => (Object.assign(Object.assign({}, current), { subsetData: process(data, current).data })));
+    }, [data]);
     //external function variables
     let filteredData = useRef(data.slice());
     //function creation
@@ -39,14 +52,6 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
         const newSubsetData = filteredData.current.length ? filteredData.current.slice(skip, skip + take) : data.slice(skip, skip + take);
         setState(Object.assign(Object.assign({}, state), { subsetData: newSubsetData, skip: skip }));
     };
-    const findByIndex = (id, idKey) => {
-        const item = data.find((item) => id === item[idKey || "id"]);
-        return item;
-    };
-    const findByValue = (item) => {
-        const returnVal = data.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
-        return returnVal;
-    };
     return (_jsx("div", Object.assign({ "data-testid": "dropdown" }, { children: data.length && !isLoading ? (_jsx(ComboBox, { style: style, label: title, disabled: disabled, data: state.subsetData, textField: textField.toString(), virtual: {
                 // enable virtualization for large datasets
                 total: state.total,
@@ -54,5 +59,5 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
                 skip: state.skip,
             }, suggest: true, onPageChange: pageChange, filterable: true, onFilterChange: onFilterChange, popupSettings: {
                 height: "210px",
-            }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: !selectedId && !selectedData ? null : findByIndex(selectedId, idField) || findByValue(selectedData) || null })) : (_jsx(Skeleton, { shape: "rectangle", style: style ? style : { height: "40px", width: "100%" } })) })));
+            }, onChange: (e) => onChange(e), onBlur: (e) => e.nativeEvent.preventDefault(), clearButton: !hideClearButton, value: selectedObject })) : (_jsx(Skeleton, { shape: "rectangle", style: style ? style : { height: "40px", width: "100%" } })) })));
 }

package/_index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/_index.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericDropdown } from "./GenericDropdown";
+import { fireEvent, render } from "@testing-library/react";
+describe("GenericDropdown", () => {
+    const data = [];
+    for (let i = 1; i < 20; i++) {
+        data.push({ id: i, name: `Option ${i}` });
+    }
+    test("renders virtualized ordering by index when passed selectedData", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedData: selectedData }));
+        // Get the input element by its role of "combobox"
+        const input = result.getByRole("combobox");
+        expect(input.getAttribute("value")).toBe("Option 2");
+        // Simulate a change event on the input element by setting its target value to "O"
+        fireEvent.change(input, { target: { value: "O" } });
+        // Simulate a key down event on the input element with the key value of "ArrowDown"
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+        // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
+        let item1 = result.queryByText("Option 1");
+        let item2 = result.queryByText("Option 2");
+        let item3 = result.queryByText("Option 3");
+        // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
+        expect(item1).not.toBeUndefined();
+        expect(item2).not.toBeUndefined();
+        expect(item3).not.toBeUndefined();
+        // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
+        expect(result.queryAllByText("Option 9")).toHaveLength(0);
+    });
+    test("renders virtualized ordering by index when passed selectedId", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedId = 2;
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: () => { }, textField: "name", selectedId: selectedId }));
+        // Get the input element by its role of "combobox"
+        const input = result.getByRole("combobox");
+        expect(input.getAttribute("value")).toBe("Option 2");
+        // Simulate a change event on the input element by setting its target value to "O"
+        fireEvent.change(input, { target: { value: "O" } });
+        // Simulate a key down event on the input element with the key value of "ArrowDown"
+        fireEvent.keyDown(input, { key: "ArrowDown" });
+        // Query the rendered result for elements with the text "Option 1", "Option 2", and "Option 3"
+        let item1 = result.queryByText("Option 1");
+        let item2 = result.queryByText("Option 2");
+        let item3 = result.queryByText("Option 3");
+        // Ensure that item1, item2, and item3 are not undefined (i.e., they are rendered)
+        expect(item1).not.toBeUndefined();
+        expect(item2).not.toBeUndefined();
+        expect(item3).not.toBeUndefined();
+        // Ensure that there are no elements with the text "Option 9" (i.e., it is not rendered)
+        expect(result.queryAllByText("Option 9")).toHaveLength(0);
+    });
+    test("handles change event when selecting by object", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        // Get the input element by its role of "combobox"
+        // Simulate a change event on the input element by setting its target value to "O"
+        let input = result.getByRole("combobox");
+        fireEvent.change(input, { target: { value: "O" } });
+        // Get the item element with the text "Option 2"
+        let item2 = result.getByText("Option 2");
+        // Simulate a click event on the item element
+        fireEvent.click(item2);
+        // Ensure that the input element's value attribute is set to "Option 2"
+        expect(selectedData.id).toBe(2);
+    });
+    test("handles change event when selecting by id", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedId = 1;
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedId = e.value.id), textField: "name", selectedId: selectedId, idField: "id" }));
+        // Get the input element by its role of "combobox"
+        // Simulate a change event on the input element by setting its target value to "O"
+        let input = result.getByRole("combobox");
+        fireEvent.change(input, { target: { value: "O" } });
+        // Get the item element with the text "Option 2"
+        let item2 = result.getByText("Option 2");
+        // Simulate a click event on the item element
+        fireEvent.click(item2);
+        // Ensure that the input element's value attribute is set to "Option 2"
+        expect(selectedId).toBe(2);
+    });
+    test("only displays items that match the search", () => {
+        // Set initial selectedData to the second item in the data array
+        let selectedData = data[1];
+        // Render the GenericDropdown component with the data, onChange function, textField prop, and selectedData prop
+        let result = render(_jsx(GenericDropdown, { data: data, onChange: (e) => (selectedData = data[e.value]), textField: "name", selectedData: selectedData }));
+        let input = result.getByRole("combobox"); // Get the input element by its role of "combobox"
+        fireEvent.change(input, { target: { value: "9" } }); //simulate a change event on the input element
+        // Query the rendered result for elements with the text "Option 1" and "Option 9", and store the results in variables
+        let item1 = result.queryAllByText("Option 1");
+        let item9 = result.queryAllByText("Option 9");
+        // Ensure that there are no elements with the text "Option 1" and at least one element with the text "Option 9"
+        expect(item1).toHaveLength(0);
+        expect(item9.length).toBeGreaterThan(0);
+    });
+});

package/package.json

@@ -1,9 +1,9 @@
 {
     "name": "@scheels-softdev/kendoreact-generics",
-    "version": "2.6.1",
+    "version": "2.6.3",
     "main": "index.js",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "jest",
         "clean": "rmdir /S /Q dist && mkdir dist",
         "build": "npm run clean && tsc && copy package.json .\\dist && copy README.md .\\dist "
     },
@@ -19,8 +19,13 @@
         "@progress/kendo-react-grid": "latest",
         "@progress/kendo-react-indicators": "^5.14.1",
         "@progress/kendo-react-inputs": "latest",
+        "@scheels-softdev/frontend-utility-functions": "^1.3.7",
+        "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.3",
         "@types/moment": "latest",
         "@types/react": "latest",
+        "jest": "^29.6.2",
+        "jest-environment-jsdom": "^29.6.2",
         "moment": "latest",
         "npmrc": "latest",
         "react": "latest",
@@ -37,6 +42,7 @@
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "ts-jest": "^29.1.1",
         "typescript": "^4.9.5"
     },
     "description": ""