Fix welcome banner tests

- Update associated snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap

@@ -81,6 +81,7 @@ exports[`extension special characters in page registrations renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap

@@ -81,6 +81,7 @@ exports[`navigate to extension page renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap

@@ -81,6 +81,7 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/application-update/__snapshots__/installing-update.test.ts.snap

@@ -82,6 +82,7 @@ exports[`installing update when started renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -367,6 +368,7 @@ exports[`installing update when started when user checks for updates renders 1`]
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -652,6 +654,7 @@ exports[`installing update when started when user checks for updates when new up
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -962,6 +965,7 @@ exports[`installing update when started when user checks for updates when new up
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1272,6 +1276,7 @@ exports[`installing update when started when user checks for updates when new up
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1557,6 +1562,7 @@ exports[`installing update when started when user checks for updates when no new
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap

@@ -107,6 +107,7 @@ exports[`encourage user to update when sufficient time passed since update was d
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -392,6 +393,7 @@ exports[`encourage user to update when sufficient time passed since update was d
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap

@@ -82,6 +82,7 @@ exports[`installing update using tray when started renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -367,6 +368,7 @@ exports[`installing update using tray when started when user checks for updates
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -652,6 +654,7 @@ exports[`installing update using tray when started when user checks for updates
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -962,6 +965,7 @@ exports[`installing update using tray when started when user checks for updates
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1272,6 +1276,7 @@ exports[`installing update using tray when started when user checks for updates
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1557,6 +1562,7 @@ exports[`installing update using tray when started when user checks for updates
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/application-update/child-features/force-update/__snapshots__/force-update.test.ts.snap

@@ -107,6 +107,7 @@ exports[`force user to update when too long since update was downloaded when app
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -417,6 +418,7 @@ exports[`force user to update when too long since update was downloaded when app
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -774,6 +776,7 @@ exports[`force user to update when too long since update was downloaded when app
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap

@@ -82,6 +82,7 @@ exports[`periodical checking of updates given updater is enabled and configurati
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap

@@ -82,6 +82,7 @@ exports[`selection of update stability when started renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/catalog/__snapshots__/opening-entity-details.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`opening catalog entity details panel renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap

@@ -173,6 +173,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -549,6 +550,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1313,6 +1315,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1598,6 +1601,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -1883,6 +1887,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -2168,6 +2173,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -2465,6 +2471,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/entity-settings/__snapshots__/showing-settings-for-correct-entity.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`Showing correct entity settings renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -81,6 +81,7 @@ exports[`extensions - navigation using application menu renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -81,6 +81,7 @@ exports[`preferences - navigation using application menu renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap

@@ -82,6 +82,7 @@ exports[`show-about-using-tray renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`status-bar-items-originating-from-extensions when application starts wh
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap

@@ -82,6 +82,7 @@ exports[`extendability-using-extension-api given an extension with a weakly type
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -376,6 +377,7 @@ exports[`extendability-using-extension-api given an extension with top-bar items
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -661,6 +663,7 @@ exports[`extendability-using-extension-api given an extension with top-bar items
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"
@@ -946,6 +949,7 @@ exports[`extendability-using-extension-api renders 1`] = `
           >
             <i
               class="Icon logo svg focusable"
+              data-testid="no-welcome-banners-icon"
             >
               <span
                 class="icon"

packages/core/src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap

@@ -81,6 +81,7 @@ exports[`welcome - navigation using application menu renders 1`] = `
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"
@@ -1116,6 +1117,7 @@ exports[`welcome - navigation using application menu when navigated somewhere el
         >
           <i
             class="Icon logo svg focusable"
+            data-testid="no-welcome-banners-icon"
           >
             <span
               class="icon"

packages/core/src/features/welcome/banners-from-extension.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import type { RenderResult } from "@testing-library/react";
+import { screen } from "@testing-library/react";
+import { defaultWidth } from "../../renderer/components/+welcome/welcome";
+import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
+
+describe("Banners from extensions", () => {
+  let builder: ApplicationBuilder;
+  let renderResult: RenderResult;
+
+  beforeEach(async () => {
+    builder = getApplicationBuilder();
+    renderResult = await builder.render();
+  });
+
+  it("initially renderes welcome page", () => {
+    expect(renderResult.queryByTestId("welcome-page")).toBeInTheDocument();
+  });
+
+  it("shows the empty welcome banner icon", () => {
+    expect(renderResult.queryByTestId("no-welcome-banners-icon")).toBeInTheDocument();
+  });
+
+  describe("when an extension is enabled with a single welcome banner", () => {
+    beforeEach(() => {
+      builder.extensions.enable({
+        id: "some-id",
+        name: "some-name",
+        rendererOptions: {
+          welcomeBanners: [
+            {
+              Banner: () => <div data-testid="some-test-id" />,
+            },
+          ],
+        },
+      });
+    });
+
+    it("renders the banner from the extension", () => {
+      expect(renderResult.queryByTestId("some-test-id")).toBeInTheDocument();
+    });
+
+    it("no longer shows the empty welcome banner icon", () => {
+      expect(renderResult.queryByTestId("no-welcome-banners-icon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when an extension is enabled with multiple banners with custom widths", () => {
+    beforeEach(() => {
+      builder.extensions.enable({
+        id: "some-id",
+        name: "some-name",
+        rendererOptions: {
+          welcomeBanners: [
+            {
+              width: 100,
+              Banner: () => <div />,
+            },
+            {
+              width: 800,
+              Banner: () => <div />,
+            },
+          ],
+        },
+      });
+    });
+
+    it("no longer shows the empty welcome banner icon", () => {
+      expect(renderResult.queryByTestId("no-welcome-banners-icon")).not.toBeInTheDocument();
+    });
+
+    it("computes an opropriate width for the carosel", () => {
+      expect(screen.queryByTestId("welcome-banner-container")).toHaveStyle({
+        // should take the max width of the banners (if > defaultWidth)
+        width: `800px`,
+      });
+      expect(screen.queryByTestId("welcome-text-container")).toHaveStyle({
+        width: `${defaultWidth}px`,
+      });
+      expect(screen.queryByTestId("welcome-menu-container")).toHaveStyle({
+        width: `${defaultWidth}px`,
+      });
+    });
+  });
+});

packages/core/src/renderer/components/+welcome/__test__/welcome.test.tsx

@@ -1,102 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import { screen } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-import { defaultWidth, Welcome } from "../welcome";
-import { computed } from "mobx";
-import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
-import type { DiRender } from "../../test-utils/renderFor";
-import { renderFor } from "../../test-utils/renderFor";
-import type { DiContainer } from "@ogre-tools/injectable";
-import rendererExtensionsInjectable from "../../../../extensions/renderer-extensions.injectable";
-import { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
-import type { WelcomeBannerRegistration } from "../welcome-banner-items/welcome-banner-registration";
-import currentlyInClusterFrameInjectable from "../../../routes/currently-in-cluster-frame.injectable";
-
-describe("<Welcome/>", () => {
-  let render: DiRender;
-  let di: DiContainer;
-  let welcomeBannersStub: WelcomeBannerRegistration[];
-
-  beforeEach(() => {
-    di = getDiForUnitTesting({ doGeneralOverrides: true });
-
-    di.override(currentlyInClusterFrameInjectable, () => false);
-
-    render = renderFor(di);
-    welcomeBannersStub = [];
-
-    di.override(rendererExtensionsInjectable, () =>
-      computed(() => [
-        new TestExtension({
-          id: "some-id",
-          welcomeBanners: welcomeBannersStub,
-        }),
-      ]),
-    );
-  });
-
-  it("renders <Banner /> registered in WelcomeBannerRegistry and hide logo", async () => {
-    const testId = "testId";
-
-    welcomeBannersStub.push({
-      Banner: () => <div data-testid={testId} />,
-    });
-
-    const { container } = render(<Welcome />);
-
-    expect(screen.queryByTestId(testId)).toBeInTheDocument();
-    expect(container.getElementsByClassName("logo").length).toBe(0);
-  });
-
-  it("calculates max width from WelcomeBanner.width registered in WelcomeBannerRegistry", async () => {
-    welcomeBannersStub.push({
-      width: 100,
-      Banner: () => <div />,
-    });
-
-    welcomeBannersStub.push({
-      width: 800,
-      Banner: () => <div />,
-    });
-
-    render(<Welcome />);
-
-    expect(screen.queryByTestId("welcome-banner-container")).toHaveStyle({
-      // should take the max width of the banners (if > defaultWidth)
-      width: `800px`,
-    });
-    expect(screen.queryByTestId("welcome-text-container")).toHaveStyle({
-      width: `${defaultWidth}px`,
-    });
-    expect(screen.queryByTestId("welcome-menu-container")).toHaveStyle({
-      width: `${defaultWidth}px`,
-    });
-  });
-});
-
-class TestExtension extends LensRendererExtension {
-  constructor({
-    id,
-    welcomeBanners,
-  }: {
-    id: string;
-    welcomeBanners: WelcomeBannerRegistration[];
-  }) {
-    super({
-      id,
-      absolutePath: "irrelevant",
-      isBundled: false,
-      isCompatible: false,
-      isEnabled: false,
-      manifest: { name: id, version: "some-version", engines: { lens: "^5.5.0" }},
-      manifestPath: "irrelevant",
-    });
-
-    this.welcomeBanners = welcomeBanners;
-  }
-}

packages/core/src/renderer/components/+welcome/welcome.tsx

@@ -71,7 +71,11 @@ const NonInjectedWelcome = observer(({
             ))}
           </Carousel>
         ) : (
-          <Icon svg="logo-lens" className="logo" />
+          <Icon
+            svg="logo-lens"
+            className="logo"
+            data-testid="no-welcome-banners-icon"
+          />
         )}
 
         <div className="flex justify-center">