test(heureka): supply mock data instead of mocking component

apps/heureka-next/src/components/Shell/Shell.test.tsx

@@ -3,44 +3,64 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react"
+import React, { ReactNode } from "react"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { MockedProvider } from "@apollo/client/testing"
 import { Shell } from "./Shell"
+import { GetServicesDocument } from "../../generated/graphql"
+import { VULNERABILITIES } from "../../constants"
 
-/**
- * let's mock Services because that is a dependency of Shell
- * and has been tested independently
- **/
-vitest.mock("../Services/Services", () => ({
-  Services: () => <div>render services here...</div>,
-}))
+const mocks = [
+  {
+    request: {
+      query: GetServicesDocument,
+    },
+    result: {
+      data: {
+        Services: {
+          edges: [
+            {
+              node: {
+                id: "some-id",
+                ccrn: "some-ccrn",
+                __typename: "Service",
+              },
+              __typename: "ServiceEdge",
+            },
+          ],
+          __typename: "ServiceConnection",
+        },
+      },
+    },
+  },
+]
 
 const renderShell = () => ({
   user: userEvent.setup(),
-  ...render(<Shell />),
+  ...render(
+    <MockedProvider mocks={mocks}>
+      <Shell />
+    </MockedProvider>
+  ),
 })
 
 describe("Shell", () => {
-  it("should render correctly", () => {
+  it("should render correctly", async () => {
     renderShell()
     // assert that page header is rendered
     expect(screen.getByText("Heureka")).toBeInTheDocument()
     // assert that the top navigation is rendered
     expect(screen.getByText("Services")).toBeInTheDocument()
     expect(screen.getByText("Vulnerabilities")).toBeInTheDocument()
     expect(screen.getByText("Images")).toBeInTheDocument()
-  })
-
-  it("should render services view by default", () => {
-    renderShell()
-    expect(screen.getByText("render services here...")).toBeInTheDocument()
+    // assert that the default view 'Services' is rendered
+    expect(await screen.findByText("some-ccrn")).toBeInTheDocument()
   })
 
   it("should allow switching to other view", async () => {
     const { user } = renderShell()
     await user.click(screen.getByText("Vulnerabilities"))
     expect(screen.getByText("render vulnerabilities here...")).toBeInTheDocument()
-    expect(screen.queryByText("render services here...")).not.toBeInTheDocument()
   })
 })

apps/heureka-next/src/components/Shell/Shell.tsx

@@ -6,14 +6,34 @@
 import React, { useState, ReactNode } from "react"
 import { AppShell, Container, PageHeader } from "@cloudoperators/juno-ui-components"
 import { MessagesProvider, Messages } from "@cloudoperators/juno-messages-provider"
-import { Navigation } from "../Navigation"
-import { ShellContent } from "./ShellContent"
-import { AppProps } from "../../App"
-import { SERVICES } from "../../constants"
 import styles from "../../styles.scss?inline"
+import { Navigation } from "../Navigation"
+import { IMAGES, SERVICES, VULNERABILITIES } from "../../constants"
+import { Services } from "../Services"
+import { Vulnerabilities } from "../Vulnerabilities"
+import { Images } from "../Images"
+
+const getViewComponent = (selectedView: ReactNode) => {
+  switch (selectedView) {
+    case SERVICES:
+      return Services
+    case VULNERABILITIES:
+      return Vulnerabilities
+    case IMAGES:
+      return Images
+    default:
+      return () => null
+  }
+}
+
+type ShellProps = {
+  embedded?: boolean
+  defaultSelectedView?: ReactNode
+}
 
-export const Shell = ({ embedded }: AppProps) => {
-  const [selectedView, setSelectedView] = useState<ReactNode>(SERVICES)
+export const Shell = ({ embedded, defaultSelectedView = SERVICES }: ShellProps) => {
+  const [selectedView, setSelectedView] = useState<ReactNode>(defaultSelectedView)
+  const SelectedViewComponent = getViewComponent(selectedView)
 
   return (
     <AppShell
@@ -28,7 +48,7 @@ export const Shell = ({ embedded }: AppProps) => {
           <MessagesProvider>
             <Messages />
           </MessagesProvider>
-          <ShellContent selectedView={selectedView} />
+          <SelectedViewComponent />
         </>
       </Container>
     </AppShell>