fix: promises & add tests for FeatureSubFeatures

Author: Nerivec

biome.json

@@ -97,6 +97,11 @@
             "a11y": {
                 "useKeyWithClickEvents": "off",
                 "noLabelWithoutControl": "off"
+            },
+            "nursery": {
+                "useExhaustiveSwitchCases": "error",
+                "noFloatingPromises": "error",
+                "noMisusedPromises": "error"
             }
         }
     },

package-lock.json

@@ -48,6 +48,9 @@
         "@storybook/react-vite": "^10.1.11",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-table": "^8.21.3",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/file-saver": "^2.0.7",
         "@types/json-schema": "^7.0.15",
         "@types/lodash": "^4.17.23",

package.json

@@ -27,7 +27,7 @@ const HeaderDeviceSelector = memo(({ currentSourceIdx, currentDevice, tab = "inf
     const onSelectHandler = useCallback(
         (option: SingleValue<SelectOption>) => {
             if (option) {
-                navigate(option.link);
+                void navigate(option.link);
             }
         },
         [navigate],

src/components/device-page/HeaderDeviceSelector.tsx

@@ -27,7 +27,7 @@ type ColorEditorProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" |
     value: AnyColor;
     format: ColorFormat;
     gamut: keyof typeof SUPPORTED_GAMUTS;
-    onChange(color: AnyColor): void;
+    onChange(color: AnyColor): Promise<void>;
     minimal?: boolean;
 };
 

src/components/editors/ColorEditor.tsx

@@ -13,7 +13,7 @@ export type ValueWithLabelOrPrimitive = ValueWithLabel | number | string;
 
 type EnumProps = {
     value?: ValueWithLabelOrPrimitive;
-    onChange(value: unknown): void;
+    onChange(value: unknown): Promise<void>;
     values: ValueWithLabelOrPrimitive[];
     minimal?: boolean;
 };
@@ -28,10 +28,10 @@ const EnumEditor = memo((props: EnumProps) => {
     const primitiveValue = isPrimitive(value);
 
     const onSelectChange = useCallback(
-        (e: ChangeEvent<HTMLSelectElement>) => {
+        async (e: ChangeEvent<HTMLSelectElement>) => {
             const selectedValue = values.find((v) => (isPrimitive(v) ? v === e.target.value : v.value === Number.parseInt(e.target.value, 10)));
 
-            onChange(selectedValue);
+            await onChange(selectedValue);
         },
         [values, onChange],
     );

src/components/editors/EnumEditor.tsx

@@ -4,7 +4,7 @@ import EnumEditor, { type ValueWithLabelOrPrimitive } from "./EnumEditor.js";
 type RangeProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> & {
     value: number | "";
     unit?: string;
-    onChange(value: number | null): void;
+    onChange(value: number | null): Promise<void>;
     steps?: ValueWithLabelOrPrimitive[];
     minimal?: boolean;
 };
@@ -22,7 +22,14 @@ const RangeEditor = memo((props: RangeProps) => {
         setCurrentValue(e.target.value ? e.target.valueAsNumber : "");
     }, []);
 
-    const onSubmit = useCallback((e) => !e.target.validationMessage && onChange(currentValue === "" ? null : currentValue), [currentValue, onChange]);
+    const onSubmit = useCallback(
+        async (e) => {
+            if (!e.target.validationMessage) {
+                await onChange(currentValue === "" ? null : currentValue);
+            }
+        },
+        [currentValue, onChange],
+    );
 
     return (
         <div className="flex flex-row flex-wrap gap-3 items-center">

src/components/editors/RangeEditor.tsx

@@ -2,7 +2,7 @@ import { type InputHTMLAttributes, memo, useEffect, useState } from "react";
 
 type TextProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & {
     value: string;
-    onChange(value: string): void;
+    onChange(value: string): Promise<void>;
 };
 
 const TextEditor = memo((props: TextProps) => {

src/components/editors/TextEditor.tsx

@@ -21,10 +21,10 @@ const Binary = memo((props: BinaryProps) => {
     const { t } = useTranslation("zigbee");
     const onButtonClick = useCallback((value: string | boolean) => onChange(property ? { [property]: value } : value), [property, onChange]);
     const onCheckboxChange = useCallback(
-        (e: ChangeEvent<HTMLInputElement>) => {
+        async (e: ChangeEvent<HTMLInputElement>) => {
             const checkedValue = e.target.checked ? valueOn : valueOff;
 
-            onChange(property ? { [property]: checkedValue } : checkedValue);
+            await onChange(property ? { [property]: checkedValue } : checkedValue);
         },
         [valueOn, valueOff, property, onChange],
     );

src/components/features/Binary.tsx

@@ -37,7 +37,12 @@ const Color = memo((props: ColorProps) => {
         return "cie1931";
     }, [device.definition]);
 
-    const onEditorChange = useCallback((color: AnyColor) => onChange({ [property ?? "color"]: color }), [property, onChange]);
+    const onEditorChange = useCallback(
+        async (color: AnyColor) => {
+            await onChange({ [property ?? "color"]: color });
+        },
+        [property, onChange],
+    );
 
     return <ColorEditor onChange={onEditorChange} value={value} format={name} minimal={minimal} gamut={gamut} />;
 });