Adapt integration tests to recent changes

Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>

integration/__tests__/app-preferences.tests.ts

@@ -52,7 +52,7 @@ describe("preferences page tests", () => {
     ];
 
     for (const { id, header } of pages) {
-      await window.click(`[data-testid=${id}-tab]`);
+      await window.click(`[data-testid=tab-link-for-${id}]`);
       await window.waitForSelector(`[data-testid=${id}-header] >> text=${header}`);
     }
   }, 10*60*1000);

integration/__tests__/cluster-pages.tests.ts

@@ -12,295 +12,11 @@
 import * as utils from "../helpers/utils";
 import { minikubeReady } from "../helpers/minikube";
 import type { Frame, Page } from "playwright";
+import { groupBy, toPairs } from "lodash/fp";
+import { pipeline } from "@ogre-tools/fp";
 
 const TEST_NAMESPACE = "integration-tests";
 
-function getSidebarSelectors(itemId: string) {
-  const root = `.SidebarItem[data-test-id="${itemId}"]`;
-
-  return {
-    expandSubMenu: `${root} .nav-item`,
-    subMenuLink: (href: string) => `[data-testid=cluster-sidebar] .sub-menu a[href^="${href}"]`,
-  };
-}
-
-function getLoadedSelector(page: CommonPage): string {
-  if (page.expectedText) {
-    return `${page.expectedSelector} >> text='${page.expectedText}'`;
-  }
-
-  return page.expectedSelector;
-}
-
-interface CommonPage {
-  name: string;
-  href: string;
-  expectedSelector: string;
-  expectedText?: string;
-}
-
-interface TopPageTest {
-  page: CommonPage;
-}
-
-interface SubPageTest {
-  drawerId: string;
-  pages: CommonPage[];
-}
-
-type CommonPageTest = TopPageTest | SubPageTest;
-
-function isTopPageTest(test: CommonPageTest): test is TopPageTest {
-  return typeof (test as any).page === "object";
-}
-
-const commonPageTests: CommonPageTest[] = [{
-  page: {
-    name: "Cluster",
-    href: "/overview",
-    expectedSelector: "div[data-testid='cluster-overview-page'] div.label",
-    expectedText: "CPU",
-  },
-},
-{
-  page: {
-    name: "Nodes",
-    href: "/nodes",
-    expectedSelector: "h5.title",
-    expectedText: "Nodes",
-  },
-},
-{
-  drawerId: "workloads",
-  pages: [
-    {
-      name: "Overview",
-      href: "/workloads",
-      expectedSelector: "h5.box",
-      expectedText: "Overview",
-    },
-    {
-      name: "Pods",
-      href: "/pods",
-      expectedSelector: "h5.title",
-      expectedText: "Pods",
-    },
-    {
-      name: "Deployments",
-      href: "/deployments",
-      expectedSelector: "h5.title",
-      expectedText: "Deployments",
-    },
-    {
-      name: "DaemonSets",
-      href: "/daemonsets",
-      expectedSelector: "h5.title",
-      expectedText: "Daemon Sets",
-    },
-    {
-      name: "StatefulSets",
-      href: "/statefulsets",
-      expectedSelector: "h5.title",
-      expectedText: "Stateful Sets",
-    },
-    {
-      name: "ReplicaSets",
-      href: "/replicasets",
-      expectedSelector: "h5.title",
-      expectedText: "Replica Sets",
-    },
-    {
-      name: "Jobs",
-      href: "/jobs",
-      expectedSelector: "h5.title",
-      expectedText: "Jobs",
-    },
-    {
-      name: "CronJobs",
-      href: "/cronjobs",
-      expectedSelector: "h5.title",
-      expectedText: "Cron Jobs",
-    },
-  ],
-},
-{
-  drawerId: "config",
-  pages: [
-    {
-      name: "ConfigMaps",
-      href: "/configmaps",
-      expectedSelector: "h5.title",
-      expectedText: "Config Maps",
-    },
-    {
-      name: "Secrets",
-      href: "/secrets",
-      expectedSelector: "h5.title",
-      expectedText: "Secrets",
-    },
-    {
-      name: "Resource Quotas",
-      href: "/resourcequotas",
-      expectedSelector: "h5.title",
-      expectedText: "Resource Quotas",
-    },
-    {
-      name: "Limit Ranges",
-      href: "/limitranges",
-      expectedSelector: "h5.title",
-      expectedText: "Limit Ranges",
-    },
-    {
-      name: "HPA",
-      href: "/hpa",
-      expectedSelector: "h5.title",
-      expectedText: "Horizontal Pod Autoscalers",
-    },
-    {
-      name: "Pod Disruption Budgets",
-      href: "/poddisruptionbudgets",
-      expectedSelector: "h5.title",
-      expectedText: "Pod Disruption Budgets",
-    },
-  ],
-},
-{
-  drawerId: "networks",
-  pages: [
-    {
-      name: "Services",
-      href: "/services",
-      expectedSelector: "h5.title",
-      expectedText: "Services",
-    },
-    {
-      name: "Endpoints",
-      href: "/endpoints",
-      expectedSelector: "h5.title",
-      expectedText: "Endpoints",
-    },
-    {
-      name: "Ingresses",
-      href: "/ingresses",
-      expectedSelector: "h5.title",
-      expectedText: "Ingresses",
-    },
-    {
-      name: "Network Policies",
-      href: "/network-policies",
-      expectedSelector: "h5.title",
-      expectedText: "Network Policies",
-    },
-  ],
-},
-{
-  drawerId: "storage",
-  pages: [
-    {
-      name: "Persistent Volume Claims",
-      href: "/persistent-volume-claims",
-      expectedSelector: "h5.title",
-      expectedText: "Persistent Volume Claims",
-    },
-    {
-      name: "Persistent Volumes",
-      href: "/persistent-volumes",
-      expectedSelector: "h5.title",
-      expectedText: "Persistent Volumes",
-    },
-    {
-      name: "Storage Classes",
-      href: "/storage-classes",
-      expectedSelector: "h5.title",
-      expectedText: "Storage Classes",
-    },
-  ],
-},
-{
-  page: {
-    name: "Namespaces",
-    href: "/namespaces",
-    expectedSelector: "h5.title",
-    expectedText: "Namespaces",
-  },
-},
-{
-  page: {
-    name: "Events",
-    href: "/events",
-    expectedSelector: "h5.title",
-    expectedText: "Events",
-  },
-},
-{
-  drawerId: "helm",
-  pages: [
-    {
-      name: "Charts",
-      href: "/helm/charts",
-      expectedSelector: "div.HelmCharts input",
-    },
-    {
-      name: "Releases",
-      href: "/helm/releases",
-      expectedSelector: "h5.title",
-      expectedText: "Releases",
-    },
-  ],
-},
-{
-  drawerId: "users",
-  pages: [
-    {
-      name: "Service Accounts",
-      href: "/service-accounts",
-      expectedSelector: "h5.title",
-      expectedText: "Service Accounts",
-    },
-    {
-      name: "Roles",
-      href: "/roles",
-      expectedSelector: "h5.title",
-      expectedText: "Roles",
-    },
-    {
-      name: "Cluster Roles",
-      href: "/cluster-roles",
-      expectedSelector: "h5.title",
-      expectedText: "Cluster Roles",
-    },
-    {
-      name: "Role Bindings",
-      href: "/role-bindings",
-      expectedSelector: "h5.title",
-      expectedText: "Role Bindings",
-    },
-    {
-      name: "Cluster Role Bindings",
-      href: "/cluster-role-bindings",
-      expectedSelector: "h5.title",
-      expectedText: "Cluster Role Bindings",
-    },
-    {
-      name: "Pod Security Policies",
-      href: "/pod-security-policies",
-      expectedSelector: "h5.title",
-      expectedText: "Pod Security Policies",
-    },
-  ],
-},
-{
-  drawerId: "custom-resources",
-  pages: [
-    {
-      name: "Definitions",
-      href: "/crd/definitions",
-      expectedSelector: "h5.title",
-      expectedText: "Custom Resources",
-    },
-  ],
-}];
-
 utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
   let window: Page, cleanup: () => Promise<void>, frame: Frame;
 
@@ -323,54 +39,59 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
     await frame.waitForSelector(`.Menu >> text="Remove"`);
   });
 
-  it("should navigate around common cluster pages", async () => {
+  it(
-    for (const test of commonPageTests) {
+    "should navigate around common cluster pages",
-      if (isTopPageTest(test)) {
-        const { href, expectedText, expectedSelector } = test.page;
-        const menuButton = await frame.waitForSelector(`a[href^="${href}"]`);
 
-        await menuButton.click();
+    async () => {
-        await frame.waitForSelector(`${expectedSelector} >> text='${expectedText}'`);
+      const scenariosByParent = pipeline(
+        scenarios,
+        groupBy("parentSidebarItemTestId"),
+        toPairs,
+      );
 
-        continue;
+      for (const [parentSidebarItemTestId, scenarios] of scenariosByParent) {
+        if (parentSidebarItemTestId !== "null") {
+          await frame.click(`[data-testid="${parentSidebarItemTestId}"]`);
         }
 
-      const { drawerId, pages } = test;
+        for (const scenario of scenarios) {
-      const selectors = getSidebarSelectors(drawerId);
+          await frame.click(`[data-testid="${scenario.sidebarItemTestId}"]`);
-      const mainPageSelector = `${selectors.subMenuLink(pages[0].href)} >> text='${pages[0].name}'`;
 
-      await frame.click(selectors.expandSubMenu);
+          await frame.waitForSelector(
-      await frame.waitForSelector(mainPageSelector);
+            scenario.expectedSelector,
-
+            selectorTimeout,
-      for (const page of pages) {
+          );
-        const subPageButton = await frame.waitForSelector(selectors.subMenuLink(page.href));
-
-        await subPageButton.click();
-        await frame.waitForSelector(getLoadedSelector(page));
         }
-
-      await frame.click(selectors.expandSubMenu);
-      await frame.waitForSelector(mainPageSelector, { state: "hidden" });
       }
-  }, 10*60*1000);
+    },
 
-  it("show logs and highlight the log search entries", async () => {
+    10 * 60 * 1000,
-    await frame.click(`a[href="/workloads"]`);
+  );
-    await frame.click(`a[href="/pods"]`);
 
-    const namespacesSelector = await frame.waitForSelector(".NamespaceSelect");
+  it(
+    "show logs and highlight the log search entries",
+    async () => {
+      await navigateToPods(frame);
+
+      const namespacesSelector = await frame.waitForSelector(
+        ".NamespaceSelect",
+      );
 
       await namespacesSelector.click();
       await namespacesSelector.type("kube-system");
       await namespacesSelector.press("Enter");
       await namespacesSelector.click();
 
-    const kubeApiServerRow = await frame.waitForSelector("div.TableCell >> text=kube-apiserver");
+      const kubeApiServerRow = await frame.waitForSelector(
+        "div.TableCell >> text=kube-apiserver",
+      );
 
       await kubeApiServerRow.click();
       await frame.waitForSelector(".Drawer", { state: "visible" });
 
-    const showPodLogsIcon = await frame.waitForSelector(".Drawer .drawer-title .Icon >> text=subject");
+      const showPodLogsIcon = await frame.waitForSelector(
+        ".Drawer .drawer-title .Icon >> text=subject",
+      );
 
       showPodLogsIcon.click();
 
@@ -379,45 +100,61 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
       await frame.waitForSelector(".LogList .VirtualList");
       await frame.waitForSelector(".LogResourceSelector");
 
-    const logSearchInput = await frame.waitForSelector(".LogSearch .SearchInput input");
+      const logSearchInput = await frame.waitForSelector(
+        ".LogSearch .SearchInput input",
+      );
 
       await logSearchInput.type(":");
       await frame.waitForSelector(".LogList .list span.active");
 
-    const showTimestampsButton = await frame.waitForSelector(".LogControls .show-timestamps");
+      const showTimestampsButton = await frame.waitForSelector(
+        ".LogControls .show-timestamps",
+      );
 
       await showTimestampsButton.click();
 
-    const showPreviousButton = await frame.waitForSelector(".LogControls .show-previous");
+      const showPreviousButton = await frame.waitForSelector(
+        ".LogControls .show-previous",
+      );
 
       await showPreviousButton.click();
-  }, 10*60*1000);
+    },
+    10 * 60 * 1000,
+  );
 
-  it("should show the default namespaces", async () => {
+  it(
-    await frame.click('a[href="/namespaces"]');
+    "should show the default namespaces",
+    async () => {
+      await navigateToNamespaces(frame);
       await frame.waitForSelector("div.TableCell >> text='default'");
       await frame.waitForSelector("div.TableCell >> text='kube-system'");
-  }, 10*60*1000);
+    },
+    10 * 60 * 1000,
+  );
 
-  it(`should create the ${TEST_NAMESPACE} and a pod in the namespace`, async () => {
+  it(
-    await frame.click('a[href="/namespaces"]');
+    `should create the ${TEST_NAMESPACE} and a pod in the namespace`,
+    async () => {
+      await navigateToNamespaces(frame);
       await frame.click("button.add-button");
-    await frame.waitForSelector("div.AddNamespaceDialog >> text='Create Namespace'");
+      await frame.waitForSelector(
+        "div.AddNamespaceDialog >> text='Create Namespace'",
+      );
 
-    const namespaceNameInput = await frame.waitForSelector(".AddNamespaceDialog input");
+      const namespaceNameInput = await frame.waitForSelector(
+        ".AddNamespaceDialog input",
+      );
 
       await namespaceNameInput.type(TEST_NAMESPACE);
       await namespaceNameInput.press("Enter");
 
       await frame.waitForSelector(`div.TableCell >> text=${TEST_NAMESPACE}`);
 
-    if ((await frame.innerText(`a[href^="/workloads"] .expand-icon`)) === "keyboard_arrow_down") {
+      await navigateToPods(frame);
-      await frame.click(`a[href^="/workloads"]`);
-    }
 
-    await frame.click(`a[href^="/pods"]`);
+      const namespacesSelector = await frame.waitForSelector(
-
+        ".NamespaceSelect",
-    const namespacesSelector = await frame.waitForSelector(".NamespaceSelect");
+      );
 
       await namespacesSelector.click();
       await namespacesSelector.type(TEST_NAMESPACE);
@@ -441,7 +178,9 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
       }
 
       const testPodName = "nginx-create-pod-test";
-    const monacoEditor = await frame.waitForSelector(`.Dock.isOpen [data-test-component="monaco-editor"]`);
+      const monacoEditor = await frame.waitForSelector(
+        `.Dock.isOpen [data-test-component="monaco-editor"]`,
+      );
 
       await monacoEditor.click();
       await monacoEditor.type("apiVersion: v1", { delay: 10 });
@@ -466,5 +205,224 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
 
       await frame.click(".Dock .Button >> text='Create'");
       await frame.waitForSelector(`.TableCell >> text=${testPodName}`);
-  }, 10*60*1000);
+    },
+    10 * 60 * 1000,
+  );
 });
+
+const selectorTimeout = { timeout: 30000 };
+
+const scenarios = [
+  {
+    expectedSelector: "div[data-testid='cluster-overview-page'] div.label",
+    parentSidebarItemTestId: null,
+    sidebarItemTestId: "sidebar-item-link-for-cluster-overview",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: null,
+    sidebarItemTestId: "sidebar-item-link-for-nodes",
+  },
+
+  {
+    expectedSelector: 'h5 >> text="Overview"',
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-overview",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-pods",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-deployments",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-daemon-sets",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-stateful-sets",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-replica-sets",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-jobs",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-workloads",
+    sidebarItemTestId: "sidebar-item-link-for-cron-jobs",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-config-maps",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-secrets",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-resource-quotas",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-limit-ranges",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-horizontal-pod-auto-scalers",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-config",
+    sidebarItemTestId: "sidebar-item-link-for-pod-disruption-budgets",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-network",
+    sidebarItemTestId: "sidebar-item-link-for-services",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-network",
+    sidebarItemTestId: "sidebar-item-link-for-endpoints",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-network",
+    sidebarItemTestId: "sidebar-item-link-for-ingresses",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-network",
+    sidebarItemTestId: "sidebar-item-link-for-network-policies",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-storage",
+    sidebarItemTestId: "sidebar-item-link-for-persistent-volume-claims",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-storage",
+    sidebarItemTestId: "sidebar-item-link-for-persistent-volumes",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-storage",
+    sidebarItemTestId: "sidebar-item-link-for-storage-classes",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: null,
+    sidebarItemTestId: "sidebar-item-link-for-namespaces",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: null,
+    sidebarItemTestId: "sidebar-item-link-for-events",
+  },
+
+  {
+    expectedSelector: "div.HelmCharts input",
+    parentSidebarItemTestId: "sidebar-item-link-for-helm",
+    sidebarItemTestId: "sidebar-item-link-for-charts",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-helm",
+    sidebarItemTestId: "sidebar-item-link-for-releases",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-service-accounts",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-roles",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-cluster-roles",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-role-bindings",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-cluster-role-bindings",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: "sidebar-item-link-for-user-management",
+    sidebarItemTestId: "sidebar-item-link-for-pod-security-policies",
+  },
+
+  {
+    expectedSelector: "h5.title",
+    parentSidebarItemTestId: null,
+    sidebarItemTestId: "sidebar-item-link-for-custom-resources",
+  },
+];
+
+const navigateToPods = async (frame: Frame) => {
+  await frame.click(`[data-testid="sidebar-item-link-for-workloads"]`);
+  await frame.click(`[data-testid="sidebar-item-link-for-pods"]`);
+};
+
+const navigateToNamespaces = async (frame: Frame) => {
+  await frame.click(`[data-testid="sidebar-item-link-for-namespaces"]`);
+};