refactor(web): improve WifiConnectionForm

dgdavid · dgdavid · commit 4b7187e120b9 · 2026-03-12T22:49:27.000Z
Also include missing files in previous commits
diff --git a/web/src/components/network/WifiConnectionForm.test.tsx b/web/src/components/network/WifiConnectionForm.test.tsx
@@ -27,13 +27,21 @@ import WifiConnectionForm from "./WifiConnectionForm";
 import { WifiNetworkStatus } from "~/types/network";
 
 const mockUpdateConnection = jest.fn();
+const mockUseWifiNetworks = jest.fn();
+
 jest.mock("~/hooks/model/config/network", () => ({
   ...jest.requireActual("~/hooks/model/config/network"),
   useConnectionMutation: () => ({
     mutateAsync: mockUpdateConnection,
   }),
 }));
 
+jest.mock("~/hooks/model/system/network", () => ({
+  ...jest.requireActual("~/hooks/model/system/network"),
+  useNetworkChanges: jest.fn(),
+  useWifiNetworks: () => mockUseWifiNetworks(),
+}));
+
 const visibleNetwork = {
   ssid: "Visible Network",
   hidden: false,
@@ -50,15 +58,17 @@ const publicNetwork = {
   security: [],
 };
 
-jest.mock("~/hooks/model/system/network", () => ({
-  ...jest.requireActual("~/hooks/model/system/network"),
-  useWifiNetworks: () => [visibleNetwork, publicNetwork],
-}));
-
 describe("WifiConnectionForm", () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockUpdateConnection.mockResolvedValue(undefined);
+    mockUseWifiNetworks.mockReturnValue([visibleNetwork, publicNetwork]);
+  });
+
+  it("renders an empty state when no networks are found", () => {
+    mockUseWifiNetworks.mockReturnValue([]);
+    installerRender(<WifiConnectionForm />, { withL10n: true });
+    screen.getByText("No Wi-Fi networks were found");
   });
 
   it("renders the network selector", () => {
@@ -69,16 +79,14 @@ describe("WifiConnectionForm", () => {
   describe("when a public network is selected", () => {
     it("warns the user about connecting to an unprotected network", async () => {
       const { user } = installerRender(<WifiConnectionForm />, { withL10n: true });
-      const selector = screen.getByRole("combobox", { name: "Network" });
-      await user.selectOptions(selector, "Public Network");
+      await user.selectOptions(screen.getByRole("combobox", { name: "Network" }), "Public Network");
       screen.getByText("Warning alert:");
       screen.getByText("Not protected network");
     });
 
     it("does not render the security selector", async () => {
       const { user } = installerRender(<WifiConnectionForm />, { withL10n: true });
-      const selector = screen.getByRole("combobox", { name: "Network" });
-      await user.selectOptions(selector, "Public Network");
+      await user.selectOptions(screen.getByRole("combobox", { name: "Network" }), "Public Network");
       expect(screen.queryByRole("combobox", { name: "Security" })).toBeNull();
     });
   });
@@ -118,7 +126,6 @@ describe("WifiConnectionForm", () => {
       const passwordInput = screen.getByLabelText("WPA Password");
       await user.type(passwordInput, "wifi-password");
       await user.click(screen.getByRole("button", { name: "Connect" }));
-
       await waitFor(() => {
         expect(mockUpdateConnection).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -130,7 +137,6 @@ describe("WifiConnectionForm", () => {
           }),
         );
       });
-
       expect(mockNavigateFn).toHaveBeenCalledWith("/network");
     });
   });
diff --git a/web/src/components/network/WifiConnectionForm.tsx b/web/src/components/network/WifiConnectionForm.tsx
@@ -26,11 +26,13 @@ import {
   ActionGroup,
   Alert,
   Content,
+  EmptyState,
   Form,
   FormGroup,
   FormSelect,
   FormSelectOption,
 } from "@patternfly/react-core";
+import Icon from "~/components/layout/Icon";
 import { Page, PasswordInput } from "~/components/core";
 import { Connection, WifiNetwork, Wireless } from "~/types/network";
 import { useWifiNetworks } from "~/hooks/model/system/network";
@@ -98,7 +100,7 @@ const formReducer = (state: FormState, action: FormAction): FormState => {
   }
 };
 
-export default function WifiConnectionForm() {
+function WifiConnectionFormContent() {
   const navigate = useNavigate();
   const networks = useWifiNetworks();
   const [form, dispatch] = useReducer(formReducer, { ssid: "", security: "", password: "" });
@@ -127,6 +129,69 @@ export default function WifiConnectionForm() {
     navigate(PATHS.root);
   };
 
+  if (networks.length === 0)
+    return (
+      <EmptyState
+        titleText={_("No Wi-Fi networks were found")}
+        icon={() => <Icon name="error" />}
+      />
+    );
+
+  return (
+    <Form id="wifiConnectionForm" onSubmit={accept} aria-label={_("Wi-Fi connection form")}>
+      <FormGroup fieldId="ssid" label={_("Network")}>
+        <WifiNetworksSelector
+          id="ssid"
+          value={form.ssid}
+          onChange={(_, v) => dispatch({ type: "SET_SSID", ssid: v, networks })}
+        />
+      </FormGroup>
+
+      {isPublicNetwork && <PublicNetworkAlert />}
+      {/* TRANSLATORS: Wifi security configuration (password protected or not) */}
+      {!isEmpty(network?.security) && (
+        <FormGroup fieldId="security" label={_("Security")}>
+          <FormSelect
+            id="security"
+            aria-label={_("Security")}
+            value={form.security}
+            onChange={(_, v) => dispatch({ type: "SET_SECURITY", security: v })}
+          >
+            {securityOptions.map((security) => (
+              <FormSelectOption
+                key={security.value}
+                value={security.value}
+                /* eslint-disable agama-i18n/string-literals */
+                label={_(security.label)}
+              />
+            ))}
+          </FormSelect>
+        </FormGroup>
+      )}
+      {form.security === "wpa-psk" && (
+        // TRANSLATORS: WiFi password
+        <FormGroup fieldId="password" label={_("WPA Password")}>
+          <PasswordInput
+            id="password"
+            name="password"
+            aria-label={_("Password")}
+            value={form.password}
+            onChange={(_, v) => dispatch({ type: "SET_PASSWORD", password: v })}
+          />
+        </FormGroup>
+      )}
+      <ActionGroup>
+        <Page.Submit form="wifiConnectionForm">
+          {/* TRANSLATORS: button label, connect to a Wi-Fi network */}
+          {_("Connect")}
+        </Page.Submit>
+        <Page.Back>{_("Cancel")}</Page.Back>
+      </ActionGroup>
+    </Form>
+  );
+}
+
+export default function wifiConnectionForm() {
   return (
     <Page
       breadcrumbs={[
@@ -136,57 +201,7 @@ export default function WifiConnectionForm() {
       progress={{ scope: "network", ensureRefetched: "system" }}
     >
       <Page.Content>
-        {/** TRANSLATORS: accessible name for the WiFi connection form */}
-        <Form id="wifiConnectionForm" onSubmit={accept} aria-label={_("Wi-Fi connection form")}>
-          <FormGroup fieldId="ssid" label={_("Network")}>
-            <WifiNetworksSelector
-              id="ssid"
-              value={form.ssid}
-              onChange={(_, v) => dispatch({ type: "SET_SSID", ssid: v, networks })}
-            />
-          </FormGroup>
-
-          {isPublicNetwork && <PublicNetworkAlert />}
-          {/* TRANSLATORS: Wifi security configuration (password protected or not) */}
-          {!isEmpty(network?.security) && (
-            <FormGroup fieldId="security" label={_("Security")}>
-              <FormSelect
-                id="security"
-                aria-label={_("Security")}
-                value={form.security}
-                onChange={(_, v) => dispatch({ type: "SET_SECURITY", security: v })}
-              >
-                {securityOptions.map((security) => (
-                  <FormSelectOption
-                    key={security.value}
-                    value={security.value}
-                    /* eslint-disable agama-i18n/string-literals */
-                    label={_(security.label)}
-                  />
-                ))}
-              </FormSelect>
-            </FormGroup>
-          )}
-          {form.security === "wpa-psk" && (
-            // TRANSLATORS: WiFi password
-            <FormGroup fieldId="password" label={_("WPA Password")}>
-              <PasswordInput
-                id="password"
-                name="password"
-                aria-label={_("Password")}
-                value={form.password}
-                onChange={(_, v) => dispatch({ type: "SET_PASSWORD", password: v })}
-              />
-            </FormGroup>
-          )}
-          <ActionGroup>
-            <Page.Submit form="wifiConnectionForm">
-              {/* TRANSLATORS: button label, connect to a Wi-Fi network */}
-              {_("Connect")}
-            </Page.Submit>
-            <Page.Back>{_("Cancel")}</Page.Back>
-          </ActionGroup>
-        </Form>
+        <WifiConnectionFormContent />
       </Page.Content>
     </Page>
   );
diff --git a/web/src/components/network/WifiNetworksSelector.test.tsx b/web/src/components/network/WifiNetworksSelector.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) [2026] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+import WifiNetworksSelector from "./WifiNetworksSelector";
+import { WifiNetworkStatus } from "~/types/network";
+
+const connectedNetwork = {
+  ssid: "Connected Network",
+  hidden: false,
+  deviceName: "wlan0",
+  status: WifiNetworkStatus.CONNECTED,
+  hwAddress: "00:EB:D8:17:6B:56",
+  security: ["WPA2"],
+  strength: 75,
+};
+
+const configuredNetwork = {
+  ssid: "Configured Network",
+  hidden: false,
+  deviceName: "wlan0",
+  status: WifiNetworkStatus.CONFIGURED,
+  hwAddress: "00:EB:D8:17:6B:57",
+  security: ["WPA2"],
+  strength: 50,
+};
+
+const notConfiguredNetwork = {
+  ssid: "Not Configured Network",
+  hidden: false,
+  deviceName: "wlan0",
+  status: WifiNetworkStatus.NOT_CONFIGURED,
+  hwAddress: "00:EB:D8:17:6B:58",
+  security: [],
+  strength: 25,
+};
+
+const weakNetwork = {
+  ssid: "Weak Network",
+  hidden: false,
+  deviceName: "wlan0",
+  status: WifiNetworkStatus.NOT_CONFIGURED,
+  hwAddress: "00:EB:D8:17:6B:59",
+  security: [],
+  strength: 10,
+};
+
+const mockUseWifiNetworks = jest.fn();
+
+jest.mock("~/hooks/model/system/network", () => ({
+  ...jest.requireActual("~/hooks/model/system/network"),
+  useNetworkChanges: jest.fn(),
+  useWifiNetworks: () => mockUseWifiNetworks(),
+}));
+
+describe("WifiNetworksSelector", () => {
+  beforeEach(() => {
+    mockUseWifiNetworks.mockReturnValue([
+      notConfiguredNetwork,
+      weakNetwork,
+      configuredNetwork,
+      connectedNetwork,
+    ]);
+  });
+
+  it("renders all available networks as options", () => {
+    installerRender(<WifiNetworksSelector onChange={jest.fn()} />);
+    const selector = screen.getByRole("combobox");
+    expect(selector).toBeInTheDocument();
+    screen.getByRole("option", { name: "Connected Network" });
+    screen.getByRole("option", { name: "Configured Network" });
+    screen.getByRole("option", { name: "Not Configured Network" });
+    screen.getByRole("option", { name: "Weak Network" });
+  });
+
+  it("sorts networks by status first, then by signal strength", () => {
+    installerRender(<WifiNetworksSelector onChange={jest.fn()} />);
+    const options = screen.getAllByRole("option").map((o) => o.textContent);
+    expect(options).toEqual([
+      "Connected Network",
+      "Configured Network",
+      "Not Configured Network",
+      "Weak Network",
+    ]);
+  });
+
+  it("renders with the given value selected", () => {
+    installerRender(<WifiNetworksSelector value="Configured Network" onChange={jest.fn()} />);
+    expect(screen.getByRole("combobox")).toHaveValue("Configured Network");
+  });
+});
diff --git a/web/src/components/network/WifiNetworksSelector.tsx b/web/src/components/network/WifiNetworksSelector.tsx
