From 6d6461bbd9ed0491a1b9947dc7de108bdbf43f43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Wed, 10 Apr 2024 15:07:03 +0100
Subject: [PATCH] web: Enable type checking in core/Section.test.jsx

---
 web/src/components/core/Section.test.jsx | 20 ++++++++++++++------
 web/src/components/layout/Icon.jsx       | 10 +++-------
 web/src/components/layout/Icon.test.jsx  |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/src/components/core/Section.test.jsx b/web/src/components/core/Section.test.jsx
index f132a637a6..ede96d0118 100644
--- a/web/src/components/core/Section.test.jsx
+++ b/web/src/components/core/Section.test.jsx
@@ -19,18 +19,23 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React from "react";
 import { screen, within } from "@testing-library/react";
 import { plainRender, installerRender } from "~/test-utils";
 import { Section } from "~/components/core";
 
+let consoleErrorSpy;
+
 describe("Section", () => {
   beforeAll(() => {
-    jest.spyOn(console, "error").mockImplementation();
+    consoleErrorSpy = jest.spyOn(console, "error");
+    consoleErrorSpy.mockImplementation();
   });
 
   afterAll(() => {
-    console.error.mockRestore();
+    consoleErrorSpy.mockRestore();
   });
 
   describe("when title is given", () => {
@@ -60,7 +65,8 @@ describe("Section", () => {
     });
 
     it("does not render an icon if not valid icon name is given", () => {
-      const { container } = plainRender(<Section title="Settings" icon="not-valid-icon-name" />);
+      // @ts-expect-error: Creating the icon name dynamically is unlikely, but let's be safe.
+      const { container } = plainRender(<Section title="Settings" icon={`fake-${Date.now()}-icon`} />);
       const icon = container.querySelector("svg");
       expect(icon).toBeNull();
     });
@@ -124,12 +130,14 @@ describe("Section", () => {
 
   it("sets predictable header id if name is given", () => {
     plainRender(<Section title="Settings" name="settings" />);
-    screen.getByRole("heading", { name: "Settings", id: "settings-header-section" });
+    const section = screen.getByRole("heading", { name: "Settings" });
+    expect(section).toHaveAttribute("id", "settings-section-header");
   });
 
   it("sets partially random header id if name is not given", () => {
-    plainRender(<Section title="Settings" name="settings" />);
-    screen.getByRole("heading", { name: "Settings", id: /.*(-header-section)$/ });
+    plainRender(<Section title="Settings" />);
+    const section = screen.getByRole("heading", { name: "Settings" });
+    expect(section).toHaveAttribute("id", expect.stringContaining("section-header"));
   });
 
   it("renders a polite live region", () => {
diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index 09d2a36e92..33a1f229e0 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -172,13 +172,9 @@ const PREDEFINED_SIZES = [
  * @returns {JSX.Element|null} null if requested icon is not available or given a falsy value as name; JSX block otherwise.
  */
 export default function Icon({ name, size, ...otherProps }) {
-  if (!name) {
-    console.error(`Icon called without name. '${name}' given instead. Rendering nothing.`);
-    return null;
-  }
-
-  if (!icons[name]) {
-    console.error(`Icon '${name}' not found!`);
+  // NOTE: Reaching this is unlikely, but let's be safe.
+  if (!name || !icons[name]) {
+    console.error(`Icon '${name}' not found.`);
     return null;
   }
 
diff --git a/web/src/components/layout/Icon.test.jsx b/web/src/components/layout/Icon.test.jsx
index 2e7a707e88..6864edd835 100644
--- a/web/src/components/layout/Icon.test.jsx
+++ b/web/src/components/layout/Icon.test.jsx
@@ -86,7 +86,7 @@ describe("Icon", () => {
     it("outputs to console.error", () => {
       plainRender(<Icon name="" />);
       expect(console.error).toHaveBeenCalledWith(
-        expect.stringContaining("Rendering nothing")
+        expect.stringContaining("not found")
       );
     });