fix(web): display the "finished" page (#1727)

## Problem

The "Installation Finished" page is not shown when the installation
finishes. It seems to be related
to latest changes regarding the application layout. Now, the `App`
component is not always on top.

## Solution

Listen for status changes in the installation progress page.

## Testing

- Tested manually

web/package/agama-web-ui.changes

@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Mon Nov 04 20:32:29 UTC 2024 - David Diaz <[email protected]>
+
+- Add missing subscription to avoid Agama getting stuck at the installation
+  progress when the installation finishes
+  (gh#agama-project/agama#1726, gh#agama-project/agama#1727).
+
 -------------------------------------------------------------------
 Wed Oct 30 22:26:29 UTC 2024 - David Diaz <[email protected]>
 

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

@@ -25,20 +25,58 @@ import { screen } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 import { InstallationPhase } from "~/types/status";
 import InstallationProgress from "./InstallationProgress";
+import { ROOT } from "~/routes/paths";
+
+let isBusy = false;
+let phase = InstallationPhase.Install;
+const mockInstallerStatusChanges = jest.fn();
 
 jest.mock("~/components/core/ProgressReport", () => () => <div>ProgressReport Mock</div>);
 
 jest.mock("~/queries/status", () => ({
   ...jest.requireActual("~/queries/status"),
-  useInstallerStatus: () => ({ isBusy: true, phase: InstallationPhase.Install }),
+  useInstallerStatus: () => ({ isBusy, phase }),
+  useInstallerStatusChanges: () => mockInstallerStatusChanges(),
 }));
 
 describe("InstallationProgress", () => {
-  it("renders progress report", () => {
+  it("subscribes to installer status", () => {
     installerRender(<InstallationProgress />);
-    screen.getByText("ProgressReport Mock");
+    expect(mockInstallerStatusChanges).toHaveBeenCalled();
   });
 
-  it.todo("redirects to root path when not in an installation phase");
-  it.todo("redirects to installatino finished path if in an installation phase but not busy");
+  describe("when not in an installation phase", () => {
+    beforeEach(() => {
+      phase = InstallationPhase.Config;
+    });
+
+    it("redirects to the root path", async () => {
+      installerRender(<InstallationProgress />);
+      await screen.findByText(`Navigating to ${ROOT.root}`);
+    });
+  });
+
+  describe("when installer in the installation phase and busy", () => {
+    beforeEach(() => {
+      phase = InstallationPhase.Install;
+      isBusy = true;
+    });
+
+    it("renders progress report", () => {
+      installerRender(<InstallationProgress />);
+      screen.getByText("ProgressReport Mock");
+    });
+  });
+
+  describe("when installer in the installation phase but not busy", () => {
+    beforeEach(() => {
+      phase = InstallationPhase.Install;
+      isBusy = false;
+    });
+
+    it("redirect to installation finished path", async () => {
+      installerRender(<InstallationProgress />);
+      await screen.findByText(`Navigating to ${ROOT.installationFinished}`);
+    });
+  });
 });

web/src/components/core/InstallationProgress.tsx

@@ -26,10 +26,11 @@ import ProgressReport from "./ProgressReport";
 import { InstallationPhase } from "~/types/status";
 import { ROOT as PATHS } from "~/routes/paths";
 import { Navigate } from "react-router-dom";
-import { useInstallerStatus } from "~/queries/status";
+import { useInstallerStatus, useInstallerStatusChanges } from "~/queries/status";
 
 function InstallationProgress() {
   const { isBusy, phase } = useInstallerStatus({ suspense: true });
+  useInstallerStatusChanges();
 
   if (phase !== InstallationPhase.Install) {
     return <Navigate to={PATHS.root} replace />;