[web] Several improvements from review

web/src/client/index.js

@@ -37,15 +37,15 @@ const MANAGER_SERVICE = "org.opensuse.Agama.Manager1";
 
 /**
  * @typedef {object} InstallerClient
- * @property {LanguageClient} language - language client
- * @property {ManagerClient} manager - manager client
- * @property {Monitor} monitor - service monitor
- * @property {NetworkClient} network - network client
- * @property {SoftwareClient} software - software client
- * @property {StorageClient} storage - storage client
- * @property {UsersClient} users - users client
- * @property {QuestionsClient} questions - questions client
- * @property {() => Promise<Issues>} issues - issues from all contexts
+ * @property {LanguageClient} language - language client.
+ * @property {ManagerClient} manager - manager client.
+ * @property {Monitor} monitor - service monitor.
+ * @property {NetworkClient} network - network client.
+ * @property {SoftwareClient} software - software client.
+ * @property {StorageClient} storage - storage client.
+ * @property {UsersClient} users - users client.
+ * @property {QuestionsClient} questions - questions client.
+ * @property {() => Promise<Issues>} issues - issues from all contexts.
  * @property {(handler: IssuesHandler) => (() => void)} onIssuesChange - registers a handler to run
  * when issues from any context change. It returns a function to deregister the handler.
  * @property {() => Promise<boolean>} isConnected - determines whether the client is connected

web/src/client/software.js

@@ -40,7 +40,7 @@ const REGISTRATION_IFACE = "org.opensuse.Agama1.Registration";
 
 /**
  * @typedef {object} Registration
- * @property {string} requirement - Registration requirement (i.e., "not-required, "optional",
+ * @property {string} requirement - Registration requirement (i.e., "not-required", "optional",
  * "mandatory").
  * @property {string|null} code - Registration code, if any.
  * @property {string|null} email - Registration email, if any.

web/src/client/software.test.js

@@ -75,14 +75,14 @@ describe("#product", () => {
  });
 
  describe("#getRegistration", () => {
- describe("if there the product is not registered yet", () => {
+ describe("if the product is not registered yet", () => {
  beforeEach(() => {
  registrationProxy.RegCode = "";
  registrationProxy.Email = "";
  registrationProxy.Requirement = 1;
  });
 
- it("returns the expected registration", async () => {
+ it("returns the expected registration result", async () => {
  const client = new SoftwareClient();
  const registration = await client.product.getRegistration();
  expect(registration).toStrictEqual({

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

@@ -36,7 +36,7 @@ describe("EmailInput component", () => {
  />
  );
 
- const inputField = screen.getByLabelText("User email");
+ const inputField = screen.getByRole('textbox', { name: "User email" });
  expect(inputField).toHaveAttribute("type", "email");
  });
 
@@ -63,7 +63,7 @@ describe("EmailInput component", () => {
 
  it("triggers onChange callback", async () => {
  const { user } = plainRender(<EmailInputTest id="test-email" aria-label="Test email" />);
- const emailInput = screen.getByLabelText("Test email");
+ const emailInput = screen.getByRole('textbox', { name: "Test email" });
 
  expect(screen.queryByText("Email value updated!")).toBeNull();
 
@@ -73,7 +73,7 @@ describe("EmailInput component", () => {
 
  it("triggers onValidate callback", async () => {
  const { user } = plainRender(<EmailInputTest id="test-email" aria-label="Test email" />);
- const emailInput = screen.getByLabelText("Test email");
+ const emailInput = screen.getByRole('textbox', { name: "Test email" });
 
  expect(screen.queryByText("Email is not valid!")).toBeNull();
 
@@ -83,7 +83,7 @@ describe("EmailInput component", () => {
 
  it("marks the input as invalid if the value is not a valid email", async () => {
  const { user } = plainRender(<EmailInputTest id="test-email" aria-label="Test email" />);
- const emailInput = screen.getByLabelText("Test email");
+ const emailInput = screen.getByRole('textbox', { name: "Test email" });
 
  await user.type(emailInput, "foo");
 

web/src/components/core/SectionSkeleton.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2022-2023] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -23,17 +23,17 @@ import React from "react";
 import { Skeleton } from "@patternfly/react-core";
 import { _ } from "~/i18n";
 
-const SectionSkeleton = ({ numRows = 2 }) => {
- const WaitingSkeleton = ({ width }) => {
- return (
- <Skeleton
- screenreaderText={_("Waiting")}
- fontSize="sm"
- width={width}
- />
- );
- };
+const WaitingSkeleton = ({ width }) => {
+ return (
+ <Skeleton
+ screenreaderText={_("Waiting")}
+ fontSize="sm"
+ width={width}
+ />
+ );
+};
 
+const SectionSkeleton = ({ numRows = 2 }) => {
  return (
  <>
  {

web/src/components/product/ProductPage.test.jsx

@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { act, screen, within } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 
 import { BUSY } from "~/client/status";
 import { installerRender } from "~/test-utils";
@@ -177,7 +177,7 @@ describe("when the services are busy", () => {
  });
 
  it("shows disabled buttons", async () => {
- await act(async () => installerRender(<ProductPage />));
+ installerRender(<ProductPage />);
 
  const selectButton = await screen.findByRole("button", { name: "Change product" });
  const registerButton = screen.getByRole("button", { name: "Register" });