From 447a124f7e0181a07a5a98ce2894c79763629d81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz?=
 <1691872+dgdavid@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:35:00 +0100
Subject: [PATCH] fix(web): add forgotten ReactRouter#useHref mock (#1537)

https://github.com/openSUSE/agama/pull/1536 faced some problems in CI
not reproducible locally resulting in a set of changes in the test suite
to make CI happy.

But these CI complaints were right since a mock for ReactRouter#useHref
hook was forgotten and not sent as part of the changes, reason why
initial tests were not working.
---
 web/src/components/core/Link.test.tsx     | 11 +++++------
 web/src/components/l10n/L10nPage.test.jsx | 14 +++++++-------
 web/src/test-utils.js                     |  1 +
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/src/components/core/Link.test.tsx b/web/src/components/core/Link.test.tsx
index 46075c7d0d..68681c17ef 100644
--- a/web/src/components/core/Link.test.tsx
+++ b/web/src/components/core/Link.test.tsx
@@ -21,20 +21,19 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
+import { plainRender } from "~/test-utils";
 import { Link } from "~/components/core";
 
 describe("Link", () => {
   it("renders an HTML `a` tag with the `href` attribute set to given `to` prop", () => {
-    installerRender(<Link to="somewhere">Agama Link</Link>);
+    plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" }) as HTMLLinkElement;
     // NOTE: Link uses ReactRouter#useHref hook which is mocked in test-utils.js
-    // TODO: Not using toHaveAttribute("href", "somewhere") because some weird problems at CI
-    expect(link.href).toContain("somewhere");
+    expect(link).toHaveAttribute("href", "somewhere");
   });
 
   it("renders it as primary when either, using a truthy `isPrimary` prop or `variant` is set to primary", () => {
-    const { rerender } = installerRender(<Link to="somewhere">Agama Link</Link>);
+    const { rerender } = plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" });
 
     expect(link.classList.contains("pf-m-primary")).not.toBe(true);
@@ -71,7 +70,7 @@ describe("Link", () => {
   });
 
   it("renders it as secondary when neither is given, a truthy `isPrimary` nor `variant`", () => {
-    const { rerender } = installerRender(<Link to="somewhere">Agama Link</Link>);
+    const { rerender } = plainRender(<Link to="somewhere">Agama Link</Link>);
     const link = screen.getByRole("link", { name: "Agama Link" });
 
     expect(link.classList.contains("pf-m-secondary")).toBe(true);
diff --git a/web/src/components/l10n/L10nPage.test.jsx b/web/src/components/l10n/L10nPage.test.jsx
index 3737fb0ebc..6fc5cec858 100644
--- a/web/src/components/l10n/L10nPage.test.jsx
+++ b/web/src/components/l10n/L10nPage.test.jsx
@@ -21,7 +21,7 @@
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
+import { plainRender } from "~/test-utils";
 import L10nPage from "~/components/l10n/L10nPage";
 
 let mockLoadedData;
@@ -57,7 +57,7 @@ beforeEach(() => {
 });
 
 it("renders a section for configuring the language", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Language" });
   within(region).getByText("English - United States");
   within(region).getByText("Change");
@@ -69,7 +69,7 @@ describe("if there is no selected language", () => {
   });
 
   it("renders a button for selecting a language", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Language" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");
@@ -77,7 +77,7 @@ describe("if there is no selected language", () => {
 });
 
 it("renders a section for configuring the keyboard", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Keyboard" });
   within(region).getByText("English");
   within(region).getByText("Change");
@@ -89,7 +89,7 @@ describe("if there is no selected keyboard", () => {
   });
 
   it("renders a button for selecting a keyboard", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Keyboard" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");
@@ -97,7 +97,7 @@ describe("if there is no selected keyboard", () => {
 });
 
 it("renders a section for configuring the time zone", () => {
-  installerRender(<L10nPage />);
+  plainRender(<L10nPage />);
   const region = screen.getByRole("region", { name: "Time zone" });
   within(region).getByText("Europe - Berlin");
   within(region).getByText("Change");
@@ -109,7 +109,7 @@ describe("if there is no selected time zone", () => {
   });
 
   it("renders a button for selecting a time zone", () => {
-    installerRender(<L10nPage />);
+    plainRender(<L10nPage />);
     const region = screen.getByRole("region", { name: "Time zone" });
     within(region).getByText("Not selected yet");
     within(region).getByText("Select");
diff --git a/web/src/test-utils.js b/web/src/test-utils.js
index b296837e10..b1a404ab22 100644
--- a/web/src/test-utils.js
+++ b/web/src/test-utils.js
@@ -74,6 +74,7 @@ const mockRoutes = (...routes) => initialRoutes.mockReturnValueOnce(routes);
 // Centralize the react-router-dom mock here
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
+  useHref: (to) => to,
   useNavigate: () => mockNavigateFn,
   Navigate: ({ to: route }) => <>Navigating to {route}</>,
   Outlet: () => <>Outlet Content</>,