fix(web): add a regresion test for LoginPage

As an attempt to avoid breaking it because changes at Layout component
like it happens after #1825

As a side-effect, the Header component has been improved a bit by
rendering the InstallerOptions dialog only when it can be open.

web/src/components/core/LoginPage.test.tsx

@@ -22,15 +22,32 @@
 
 import React from "react";
 import { screen, within } from "@testing-library/react";
-import { plainRender } from "~/test-utils";
+import { installerRender, mockRoutes, plainRender } from "~/test-utils";
 import { LoginPage } from "~/components/core";
 import { AuthErrors } from "~/context/auth";
+import { PlainLayout } from "../layout";
+import { InstallationPhase } from "~/types/status";
 
 let consoleErrorSpy: jest.SpyInstance;
 let mockIsAuthenticated: boolean;
 let mockLoginError;
 const mockLoginFn = jest.fn();
 
+const phase: InstallationPhase = InstallationPhase.Startup;
+const isBusy: boolean = false;
+
+jest.mock("~/queries/status", () => ({
+  useInstallerStatus: () => ({
+    phase,
+    isBusy,
+  }),
+}));
+
+jest.mock("~/queries/issues", () => ({
+  ...jest.requireActual("~/queries/issues"),
+  useAllIssues: () => [],
+}));
+
 jest.mock("~/context/auth", () => ({
   ...jest.requireActual("~/context/auth"),
   useAuth: () => {
@@ -44,16 +61,29 @@ jest.mock("~/context/auth", () => ({
 
 describe("LoginPage", () => {
   beforeAll(() => {
+    mockRoutes("/login");
+    mockLoginFn.mockResolvedValue({ status: 200 });
     mockIsAuthenticated = false;
     mockLoginError = null;
-    mockLoginFn.mockResolvedValue({ status: 200 });
     consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
   });
 
   afterAll(() => {
     consoleErrorSpy.mockRestore();
   });
 
+  // Regresion test: when wrapped by Layout, it shouldn't fail with
+  // "No QueryClient set, use QueryClientProvider to set one"
+  // See commit ecc8d0865abbbebc7795e39bd85ec9462010d065
+  it("renders its content even when wrapped by Layout", async () => {
+    installerRender(
+      <PlainLayout>
+        <LoginPage />
+      </PlainLayout>,
+    );
+    await screen.findByRole("form", { name: "Login form" });
+  });
+
   describe("when user is not authenticated", () => {
     it("renders reference to root", () => {
       plainRender(<LoginPage />);

web/src/components/layout/Header.tsx

@@ -105,10 +105,12 @@ const OptionsDropdown = ({ showInstallerOptions }) => {
         </DropdownList>
       </Dropdown>
 
-      <InstallerOptions
-        isOpen={isInstallerOptionsOpen}
-        onClose={() => setIsInstallerOptionsOpen(false)}
-      />
+      {showInstallerOptions && (
+        <InstallerOptions
+          isOpen={isInstallerOptionsOpen}
+          onClose={() => setIsInstallerOptionsOpen(false)}
+        />
+      )}
     </>
   );
 };