@scheels-softdev/kendoreact-generics 2.6.1 → 2.6.2

package/GenericDropdown.js

@@ -1,7 +1,7 @@
 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";
 export function GenericDropdown({ data, selectedId, selectedData, onChange, textField, disabled, idField, title, hideClearButton, style, isLoading, }) {
     if (selectedId !== undefined && selectedData !== undefined) {
@@ -47,6 +47,9 @@ export function GenericDropdown({ data, selectedId, selectedData, onChange, text
         const returnVal = data.find((x) => JSON.stringify(Object.assign(Object.assign({}, x), selectedData)) === JSON.stringify(Object.assign({}, x)));
         return returnVal;
     };
+    useEffect(() => {
+        setState((current) => (Object.assign(Object.assign({}, current), { subsetData: process(data, current).data })));
+    }, [data]);
     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,

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.2",
     "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,12 @@
         "@progress/kendo-react-grid": "latest",
         "@progress/kendo-react-indicators": "^5.14.1",
         "@progress/kendo-react-inputs": "latest",
+        "@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 +41,7 @@
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "ts-jest": "^29.1.1",
         "typescript": "^4.9.5"
     },
     "description": ""