Merge pull request meshtastic#480 from danditomaso/issue-479-node-connecting-on-https

fix: restored https toggle functionality. added tests

Author: danditomaso

bun.lock

@@ -80,6 +80,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.9",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/chrome": "^0.0.307",
     "@types/js-cookie": "^3.0.6",
@@ -92,8 +93,8 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "gzipper": "^8.2.0",
-    "happy-dom": "^17.1.8",
     "postcss": "^8.5.3",
+    "jsdom": "^26.0.0",
     "simple-git-hooks": "^2.11.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.9",

deno.lock

@@ -0,0 +1,91 @@
+import { describe, it, vi, expect } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
+import { TransportHTTP } from "@meshtastic/transport-http";
+import { MeshDevice } from "@meshtastic/core";
+
+vi.mock("@core/stores/appStore.ts", () => ({
+  useAppStore: vi.fn(() => ({ setSelectedDevice: vi.fn() })),
+}));
+
+vi.mock("@core/stores/deviceStore.ts", () => ({
+  useDeviceStore: vi.fn(() => ({ addDevice: vi.fn(() => ({ addConnection: vi.fn() })) })),
+}));
+
+vi.mock("@core/utils/randId.ts", () => ({
+  randId: vi.fn(() => "mock-id"),
+}));
+
+vi.mock("@meshtastic/transport-http", () => ({
+  TransportHTTP: {
+    create: vi.fn(() => Promise.resolve({})),
+  },
+}));
+
+vi.mock("@meshtastic/core", () => ({
+  MeshDevice: vi.fn(() => ({
+    configure: vi.fn(),
+  })),
+}));
+
+
+describe("HTTP Component", () => {
+  it("renders correctly", () => {
+    render(<HTTP closeDialog={vi.fn()} />);
+    expect(screen.getByText("IP Address/Hostname")).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("000.000.000.000 / meshtastic.local")).toBeInTheDocument();
+    expect(screen.getByText("Use HTTPS")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
+  });
+
+  it("allows input field to be updated", () => {
+    render(<HTTP closeDialog={vi.fn()} />);
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "meshtastic.local" } });
+    expect(input).toHaveValue("meshtastic.local");
+  });
+
+  it("toggles HTTPS switch and updates prefix", () => {
+    render(<HTTP closeDialog={vi.fn()} />);
+    const switchInput = screen.getByRole("switch");
+    expect(screen.getByText("http://")).toBeInTheDocument();
+    fireEvent.click(switchInput);
+    expect(screen.getByText("https://")).toBeInTheDocument();
+
+    fireEvent.click(switchInput);
+    expect(switchInput).not.toBeChecked();
+    expect(screen.getByText("http://")).toBeInTheDocument();
+  });
+
+  it("enables HTTPS toggle when location protocol is https", () => {
+    Object.defineProperty(globalThis, "location", {
+      value: { protocol: "https:" },
+      writable: true,
+    });
+
+    render(<HTTP closeDialog={vi.fn()} />);
+
+    const switchInput = screen.getByRole("switch");
+    expect(switchInput).toBeChecked();
+  });
+
+  it.skip("submits form and triggers connection process", () => {
+    // This will need further work to test, as it involves a lot of other plumbing mocking
+    const closeDialog = vi.fn();
+    render(<HTTP closeDialog={closeDialog} />);
+
+    const button = screen.getByRole("button", { name: "Connect" });
+    expect(button).not.toBeDisabled();
+
+    fireEvent.click(button);
+
+    waitFor(() => {
+      expect(button).toBeDisabled();
+      expect(closeDialog).toHaveBeenCalled();
+      expect(TransportHTTP.create).toHaveBeenCalled();
+      expect(MeshDevice).toHaveBeenCalled();
+    });
+  });
+});
+

package.json

@@ -10,37 +10,43 @@ import { randId } from "@core/utils/randId.ts";
 import { MeshDevice } from "@meshtastic/core";
 import { TransportHTTP } from "@meshtastic/transport-http";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm, useController } from "react-hook-form";
+import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
+
+interface FormData {
+  ip: string;
+  tls: boolean;
+}
 
 export const HTTP = ({ closeDialog }: TabElementProps) => {
-  const [https, setHTTPS] = useState(false);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
-  const { register, handleSubmit, control } = useForm<{
-    ip: string;
-    tls: boolean;
-  }>({
+  const { control, handleSubmit, register } = useForm<FormData>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
         globalThis.location.hostname,
       )
         ? "meshtastic.local"
         : globalThis.location.host,
-      tls: location.protocol === "https:",
+      tls: false,
     },
   });
 
+  const {
+    field: { value: tlsValue, onChange: setTLS },
+  } = useController({ name: "tls", control });
+
   const [connectionInProgress, setConnectionInProgress] = useState(false);
 
   const onSubmit = handleSubmit(async (data) => {
-    setConnectionInProgress(true);
+    console.log(data);
 
+    setConnectionInProgress(true);
     const id = randId();
     const device = addDevice(id);
     const transport = await TransportHTTP.create(data.ip, data.tls);
     const connection = new MeshDevice(transport, id);
     connection.configure();
-
     setSelectedDevice(id);
     device.addConnection(connection);
     subscribeAll(device, connection);
@@ -50,32 +56,26 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
   return (
     <form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
       <div className="flex h-48 flex-col gap-2">
-        <Label>IP Address/Hostname</Label>
-        <Input
-          prefix={https ? "https://" : "http://"}
-          placeholder="000.000.000.000 / meshtastic.local"
-          className="text-slate-900 dark:text-slate-900"
-          disabled={connectionInProgress}
-          {...register("ip")}
-        />
-        <Controller
-          name="tls"
-          control={control}
-          render={({ field: { ...rest } }) => (
-            <>
-              <Label>Use HTTPS</Label>
-              <Switch
-                onCheckedChange={(checked: boolean) => {
-                  checked ? setHTTPS(true) : setHTTPS(false);
-                }}
-                disabled={location.protocol === "https:" ||
-                  connectionInProgress}
-                checked={https}
-                {...rest}
-              />
-            </>
-          )}
-        />
+        <div>
+          <Label>IP Address/Hostname</Label>
+          <Input
+            prefix={tlsValue ? "https://" : "http://"}
+            placeholder="000.000.000.000 / meshtastic.local"
+            className="text-slate-900 dark:text-slate-900"
+            disabled={connectionInProgress}
+            {...register("ip")}
+          />
+        </div>
+        <div className="flex items-center gap-2 mt-2">
+          <Switch
+            onCheckedChange={setTLS}
+            disabled={location.protocol === "https:" || connectionInProgress}
+            checked={location.protocol === 'https:' || tlsValue}
+            {...register("tls")}
+          />
+          <Label>Use HTTPS</Label>
+
+        </div>
       </div>
       <Button
         type="submit"
@@ -86,4 +86,4 @@ export const HTTP = ({ closeDialog }: TabElementProps) => {
       </Button>
     </form>
   );
-};
+};

src/components/PageComponents/Connect/HTTP.test.tsx

@@ -21,8 +21,8 @@ const inputVariants = cva(
 
 export interface InputProps
   extends
-    React.InputHTMLAttributes<HTMLInputElement>,
-    VariantProps<typeof inputVariants> {
+  React.InputHTMLAttributes<HTMLInputElement>,
+  VariantProps<typeof inputVariants> {
   prefix?: string;
   suffix?: string;
   action?: {
@@ -36,9 +36,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="relative w-full">
         {prefix && (
-          <span className="inline-flex items-center rounded-l-md bg-slate-100/80 px-3 font-mono text-sm text-slate-600">
+          <label className="inline-flex items-center rounded-l-md bg-slate-100/80 px-3 font-mono text-sm text-slate-600">
             {prefix}
-          </span>
+          </label>
         )}
         <input
           className={cn(

src/components/PageComponents/Connect/HTTP.tsx

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom";
+
+globalThis.ResizeObserver = class {
+  observe() { }
+  unobserve() { }
+  disconnect() { }
+};

src/components/UI/Input.tsx

@@ -47,8 +47,10 @@ export default defineConfig({
     exclude: ['react-scan']
   },
   test: {
-    environment: 'happy-dom',
+    environment: 'jsdom',
     globals: true,
     include: ['**/*.{test,spec}.{ts,tsx}'],
+    setupFiles: ["./src/tests/setupTests.ts"],
+
   }
 });