[web] Update dependencies

web/.eslintrc.json

@@ -55,7 +55,7 @@
         "react/jsx-indent-props": "off",
         "react/prop-types": "off",
         "space-before-function-paren": "off",
-        "standard/no-callback-literal": "off"
+        "n/no-callback-literal": "off"
     },
     "globals": {
         "require": false,

web/package.json

@@ -24,37 +24,38 @@
     "@types/jest": "^29.2.3",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
+    "ajv": "^8.11.2",
     "babel-jest": "^29.3.1",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^9.1.0",
     "chrome-remote-interface": "^0.31.0",
-    "compression-webpack-plugin": "^9.0.0",
-    "copy-webpack-plugin": "^9.0.0",
+    "compression-webpack-plugin": "^10.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.5.0",
-    "css-minimizer-webpack-plugin": "^3.0.1",
-    "eslint": "^7.10.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-jsx": "^10.0.0",
-    "eslint-config-standard-react": "^11.0.1",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.28.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint-config-standard-react": "^12.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-webpack-plugin": "^2.5.3",
+    "eslint-webpack-plugin": "^3.2.0",
     "htmlparser": "^1.7.7",
     "identity-obj-proxy": "^3.0.0",
     "jed": "^1.1.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jest-transform-stub": "^2.0.0",
-    "jsdoc": "^3.6.10",
+    "jsdoc": "^4.0.0",
     "mini-css-extract-plugin": "^2.5.3",
     "po2json": "^1.0.0-alpha",
     "qunit": "^2.9.3",
     "sass": "^1.35.2",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^13.2.0",
     "sizzle": "^2.3.3",
     "stdio": "^2.1.0",
     "string-replace-loader": "^3.0.0",
@@ -66,7 +67,7 @@
     "typedoc-plugin-missing-exports": "^1.0.0",
     "typescript": "^4.8.4",
     "webpack": "^5.54.0",
-    "webpack-cli": "^4.9.1"
+    "webpack-cli": "^5.0.0"
   },
   "dependencies": {
     "@patternfly/patternfly": "^4.219.2",

web/src/components/core/ProgressReport.test.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import { act, screen } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { createClient } from "@client";
 
 import { ProgressReport } from "@components/core";
@@ -60,15 +60,18 @@ describe("ProgressReport", () => {
 
   describe("when there is progress information available", () => {
     beforeEach(() => {
-      callbacks = { manager: [], software: [] };
-      onManagerProgressChange = cb => callbacks.manager.push(cb);
-      onSoftwareProgressChange = cb => callbacks.software.push(cb);
+      const [onManagerProgress, managerCallbacks] = createCallbackMock();
+      const [onSoftwareProgress, softwareCallbacks] = createCallbackMock();
+      onManagerProgressChange = onManagerProgress;
+      onSoftwareProgressChange = onSoftwareProgress;
+      callbacks = { manager: managerCallbacks, software: softwareCallbacks };
     });
 
     it("shows the main progress bar", async () => {
       installerRender(<ProgressReport />);
 
       await screen.findByText(/Waiting/i);
+      await screen.findByText(/Reading/i);
 
       // NOTE: there can be more than one susbcriptions to the
       // manager#onProgressChange. We're interested in the latest one here.

web/src/components/language/LanguageSelector.test.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { act, screen } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { LanguageSelector } from "@components/language";
 import { createClient } from "@client";
 
@@ -111,14 +111,10 @@ describe("when the user changes the language AND THEN cancels", () => {
 });
 
 describe("when the Language Selection changes", () => {
-  let callbacks;
-
-  beforeEach(() => {
-    callbacks = [];
-    onLanguageChangeFn = cb => callbacks.push(cb);
-  });
-
   it("updates the proposal", async () => {
+    const [mockFunction, callbacks] = createCallbackMock();
+    onLanguageChangeFn = mockFunction;
+
     installerRender(<LanguageSelector />);
     await screen.findByRole("button", { name: "English" });
 

web/src/components/network/WifiHiddenNetworkForm.test.jsx

@@ -52,19 +52,5 @@ describe("WifiHiddenNetworkForm", () => {
       plainRender(<WifiHiddenNetworkForm visible={false} />);
       screen.findByText(/Connect to hidden network/i);
     });
-
-    describe("and the user clicks on the opening link", () => {
-      it("triggers the beforeDisplaying callback", async () => {
-        const beforeDisplayingFn = jest.fn();
-        const { user } = plainRender(
-          <WifiHiddenNetworkForm visible={false} beforeDisplaying={beforeDisplayingFn} />
-        );
-
-        const link = screen.getByRole("button", { name: "Connect to hidden network" });
-        await user.click(link);
-
-        expect(beforeDisplayingFn).toHaveBeenCalled();
-      });
-    });
   });
 });

web/src/components/software/ProductSelectionPage.test.jsx

@@ -50,7 +50,7 @@ jest.mock("@context/software", () => ({
   ...jest.requireActual("@context/software"),
   useSoftware: () => {
     return {
-      products: products,
+      products,
       selectedProduct: products[0]
     };
   }

web/src/components/storage/Storage.test.jsx

@@ -21,7 +21,7 @@
 
 import React from "react";
 import { act, screen, waitFor } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { createClient } from "@client";
 import { IDLE } from "@client/status";
 import { Storage } from "@components/storage";
@@ -97,8 +97,9 @@ describe("when the storage proposal changes", () => {
   let callbacks;
 
   beforeEach(() => {
-    callbacks = [];
-    onStorageProposalChangeFn = cb => callbacks.push(cb);
+    const [mockedFn, callbacksList] = createCallbackMock();
+    callbacks = callbacksList;
+    onStorageProposalChangeFn = mockedFn;
   });
 
   it("updates the proposal", async () => {
@@ -117,8 +118,9 @@ describe("when the storage actions change", () => {
   let callbacks;
 
   beforeEach(() => {
-    callbacks = [];
-    onActionsChangeFn = cb => callbacks.push(cb);
+    const [mockedFn, callbacksList] = createCallbackMock();
+    callbacks = callbacksList;
+    onActionsChangeFn = mockedFn;
   });
 
   it("updates the proposal", async () => {

web/src/components/users/FirstUser.test.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import { act, screen, waitFor, within } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { createClient } from "@client";
 import { FirstUser } from "@components/users";
 
@@ -130,15 +130,11 @@ describe("when the first user is already defined", () => {
 });
 
 describe("when the Users change", () => {
-  let callbacks;
-
-  beforeEach(() => {
-    callbacks = [];
-    onUsersChangeFn = cb => callbacks.push(cb);
-  });
-
   describe("and the FirstUser has been modified", () => {
     it("updates the proposal first User description", async () => {
+      const [mockFunction, callbacks] = createCallbackMock();
+      onUsersChangeFn = mockFunction;
+
       installerRender(<FirstUser />);
 
       let firstUser = await screen.findByText(/A user/i);

web/src/components/users/RootPassword.test.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import { act, screen, waitFor, within } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { createClient } from "@client";
 
 import { RootPassword } from "@components/users";
@@ -151,15 +151,11 @@ describe("when an error happens while changing the password", () => {
 });
 
 describe("when the Users change", () => {
-  let callbacks;
-
-  beforeEach(() => {
-    callbacks = [];
-    onUsersChangeFn = cb => callbacks.push(cb);
-  });
-
   describe("and the RootPassword has been modified", () => {
     it("updates the proposal root password description", async () => {
+      const [mockFunction, callbacks] = createCallbackMock();
+      onUsersChangeFn = mockFunction;
+
       installerRender(<RootPassword />);
       let rootPassword = await screen.findByText(/Root password/i);
       within(rootPassword).getByRole("button", { name: "is not set" });

web/src/components/users/RootSSHKey.test.jsx

@@ -22,7 +22,7 @@
 import React from "react";
 
 import { act, screen, waitFor, within } from "@testing-library/react";
-import { installerRender } from "@/test-utils";
+import { installerRender, createCallbackMock } from "@/test-utils";
 import { createClient } from "@client";
 import { RootSSHKey } from "@components/users";
 
@@ -121,15 +121,11 @@ describe("when the SSH public key is set", () => {
 });
 
 describe("when the Users change", () => {
-  let callbacks;
-
-  beforeEach(() => {
-    callbacks = [];
-    onUsersChangeFn = cb => callbacks.push(cb);
-  });
-
   describe("and the RootSSHKey has been modified", () => {
     it("updates the proposal root SSH Key description", async () => {
+      const [mockFunction, callbacks] = createCallbackMock();
+      onUsersChangeFn = mockFunction;
+
       installerRender(<RootSSHKey />);
       let rootSSHKey = await screen.findByText(/Root SSH public key/i);
       within(rootSSHKey).getByRole("button", { name: "is not set" });

web/src/test-utils.js

@@ -64,4 +64,24 @@ const plainRender = (ui, options = { usingLayout: true }) => {
   );
 };
 
-export { installerRender, plainRender };
+/**
+ * Creates a function to register callbacks
+ *
+ * It can be useful to mock functions that might receive a callback that you can
+ * execute on-demand during the test.
+ *
+ * @return a tuple with the mocked function and the list of callbacks.
+ */
+const createCallbackMock = () => {
+  const callbacks = [];
+  const on = (callback) => {
+    callbacks.push(callback);
+    return () => {
+      const position = callbacks.indexOf(callback);
+      if (position > -1) callbacks.splice(position, 1);
+    };
+  };
+  return [on, callbacks];
+};
+
+export { installerRender, plainRender, createCallbackMock };