fix(e2e): update e2e tests to allow guest login

packages/app/package.json

@@ -59,7 +59,6 @@
   "devDependencies": {
     "@backstage/cli": "0.26.4",
     "@backstage/test-utils": "1.5.4",
-    "@playwright/test": "1.32.3",
     "@testing-library/dom": "9.0.0",
     "@testing-library/jest-dom": "6.0.0",
     "@testing-library/react": "14.0.0",

plugins/argocd/tests/argocd.spec.ts

@@ -5,15 +5,19 @@ import {
   preProdApplication,
   prodApplication,
 } from '../dev/__data__';
+import { Common } from './argocdHelper';
 import { verifyAppCard, verifyAppSidebar } from './utils';
 
 test.describe('ArgoCD plugin', () => {
   let argocdPage: Page;
+  let common: Common;
 
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     argocdPage = await context.newPage();
-    await argocdPage.goto('/');
+    common = new Common(argocdPage);
+
+    await common.loginAsGuest();
     await expect(
       argocdPage.getByRole('heading', { name: 'Deployment lifecycle' }),
     ).toBeVisible({ timeout: 20000 });

plugins/argocd/tests/argocdHelper.ts

@@ -0,0 +1,56 @@
+import { expect, Page } from '@playwright/test';
+
+export class Common {
+  page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async verifyHeading(heading: string) {
+    const headingLocator = this.page
+      .locator('h1, h2, h3, h4, h5, h6')
+      .filter({ hasText: heading })
+      .first();
+    await headingLocator.waitFor({ state: 'visible', timeout: 30000 });
+    await expect(headingLocator).toBeVisible();
+  }
+
+  async clickButton(
+    label: string,
+    options: { exact?: boolean; force?: boolean } = {
+      exact: true,
+      force: false,
+    },
+  ) {
+    const muiButtonLabel = 'span[class^="MuiButton-label"]';
+    const selector = `${muiButtonLabel}:has-text("${label}")`;
+    const button = this.page
+      .locator(selector)
+      .getByText(label, { exact: options.exact })
+      .first();
+    await button.waitFor({ state: 'visible' });
+
+    if (options?.force) {
+      await button.click({ force: true });
+    } else {
+      await button.click();
+    }
+  }
+
+  async waitForSideBarVisible() {
+    await this.page.waitForSelector('nav a', { timeout: 120000 });
+  }
+
+  async loginAsGuest() {
+    await this.page.goto('/');
+    // TODO - Remove it after https://issues.redhat.com/browse/RHIDP-2043. A Dynamic plugin for Guest Authentication Provider needs to be created
+    this.page.on('dialog', async dialog => {
+      await dialog.accept();
+    });
+
+    await this.verifyHeading('Select a sign-in method');
+    await this.clickButton('Enter');
+    await this.waitForSideBarVisible();
+  }
+}

plugins/bulk-import/tests/bulkImport.spec.ts

@@ -1,12 +1,18 @@
 import { expect, Page, test } from '@playwright/test';
 
+import { Common } from './bulkImportHelper';
+
 test.describe('Bulk import plugin', () => {
   let page: Page;
+  let common: Common;
 
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     page = await context.newPage();
-    await page.goto('/');
+    common = new Common(page);
+
+    await common.loginAsGuest();
+
     await expect(page.getByRole('link', { name: 'Bulk import' })).toBeEnabled({
       timeout: 20000,
     });

plugins/bulk-import/tests/bulkImportHelper.ts

@@ -0,0 +1,56 @@
+import { expect, Page } from '@playwright/test';
+
+export class Common {
+  page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async verifyHeading(heading: string) {
+    const headingLocator = this.page
+      .locator('h1, h2, h3, h4, h5, h6')
+      .filter({ hasText: heading })
+      .first();
+    await headingLocator.waitFor({ state: 'visible', timeout: 30000 });
+    await expect(headingLocator).toBeVisible();
+  }
+
+  async clickButton(
+    label: string,
+    options: { exact?: boolean; force?: boolean } = {
+      exact: true,
+      force: false,
+    },
+  ) {
+    const muiButtonLabel = 'span[class^="MuiButton-label"]';
+    const selector = `${muiButtonLabel}:has-text("${label}")`;
+    const button = this.page
+      .locator(selector)
+      .getByText(label, { exact: options.exact })
+      .first();
+    await button.waitFor({ state: 'visible' });
+
+    if (options?.force) {
+      await button.click({ force: true });
+    } else {
+      await button.click();
+    }
+  }
+
+  async waitForSideBarVisible() {
+    await this.page.waitForSelector('nav a', { timeout: 120000 });
+  }
+
+  async loginAsGuest() {
+    await this.page.goto('/');
+    // TODO - Remove it after https://issues.redhat.com/browse/RHIDP-2043. A Dynamic plugin for Guest Authentication Provider needs to be created
+    this.page.on('dialog', async dialog => {
+      await dialog.accept();
+    });
+
+    await this.verifyHeading('Select a sign-in method');
+    await this.clickButton('Enter');
+    await this.waitForSideBarVisible();
+  }
+}

plugins/kiali/dev/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Entity } from '@backstage/catalog-model';
 import {
@@ -504,18 +504,16 @@ export const TabsMock = () => {
 const MockProvider = (props: Props) => {
   const content = (
     <KialiProvider entity={props.entity || mockEntity}>
-      <BrowserRouter>
-        <Page themeId="tool">
-          {!props.isEntity && (
-            <>
-              <KialiHeader />
-              <TabsMock />
-              {getRoutes(true)}
-            </>
-          )}
-          {props.isEntity && <Content>{getEntityRoutes()}</Content>}
-        </Page>
-      </BrowserRouter>
+      <Page themeId="tool">
+        {!props.isEntity && (
+          <>
+            <KialiHeader />
+            <TabsMock />
+            {getRoutes(true)}
+          </>
+        )}
+        {props.isEntity && <Content>{getEntityRoutes()}</Content>}
+      </Page>
     </KialiProvider>
   );
 
@@ -533,17 +531,15 @@ const MockProvider = (props: Props) => {
 const MockEntityCard = () => {
   const content = (
     <EntityProvider entity={mockEntity}>
-      <BrowserRouter>
-        <div style={{ padding: '20px' }}>
-          <TestApiProvider apis={[[kialiApiRef, new MockKialiClient()]]}>
-            <Grid container spacing={3} alignItems="stretch">
-              <Grid item md={8} xs={12}>
-                <EntityKialiResourcesCard />
-              </Grid>
+      <div style={{ padding: '20px' }}>
+        <TestApiProvider apis={[[kialiApiRef, new MockKialiClient()]]}>
+          <Grid container spacing={3} alignItems="stretch">
+            <Grid item md={8} xs={12}>
+              <EntityKialiResourcesCard />
             </Grid>
-          </TestApiProvider>
-        </div>
-      </BrowserRouter>
+          </Grid>
+        </TestApiProvider>
+      </div>
     </EntityProvider>
   );
 

plugins/kiali/tests/entityResources.spec.ts

@@ -1,20 +1,22 @@
 import { expect, Page, test } from '@playwright/test';
 
+import { Common } from './kialiHelper';
+
 test.describe('Entity resources', () => {
   let page: Page;
+  let common: Common;
 
   test.describe('kiali resources', () => {
     test.beforeAll(async ({ browser }) => {
       const context = await browser.newContext();
       page = await context.newPage();
+      common = new Common(page);
+
+      await common.loginAsGuest();
       await page.goto('/kiali-entity-card');
       page.locator('[data-test="kiali-tabbed-card"]');
     });
 
-    test.afterAll(async ({ browser }) => {
-      await browser.close();
-    });
-
     test('Workloads content', async () => {
       expect(page.locator('[data-test="virtual-list"]')).toBeDefined();
     });

plugins/kiali/tests/kiali.spec.ts

@@ -1,11 +1,17 @@
 import { expect, Page, test } from '@playwright/test';
 
+import { Common } from './kialiHelper';
+
 test.describe('Kiali plugin', () => {
   let page: Page;
+  let common: Common;
   test.describe('kiali errors', () => {
     test.beforeAll(async ({ browser }) => {
       const context = await browser.newContext();
       page = await context.newPage();
+      common = new Common(page);
+
+      await common.loginAsGuest();
       await page.goto('/kiali-error');
       await page.locator('[data-test="Kiali Errors"]');
     });

plugins/kiali/tests/kialiHelper.ts

@@ -0,0 +1,56 @@
+import { expect, Page } from '@playwright/test';
+
+export class Common {
+  page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async verifyHeading(heading: string) {
+    const headingLocator = this.page
+      .locator('h1, h2, h3, h4, h5, h6')
+      .filter({ hasText: heading })
+      .first();
+    await headingLocator.waitFor({ state: 'visible', timeout: 30000 });
+    await expect(headingLocator).toBeVisible();
+  }
+
+  async clickButton(
+    label: string,
+    options: { exact?: boolean; force?: boolean } = {
+      exact: true,
+      force: false,
+    },
+  ) {
+    const muiButtonLabel = 'span[class^="MuiButton-label"]';
+    const selector = `${muiButtonLabel}:has-text("${label}")`;
+    const button = this.page
+      .locator(selector)
+      .getByText(label, { exact: options.exact })
+      .first();
+    await button.waitFor({ state: 'visible' });
+
+    if (options?.force) {
+      await button.click({ force: true });
+    } else {
+      await button.click();
+    }
+  }
+
+  async waitForSideBarVisible() {
+    await this.page.waitForSelector('nav a', { timeout: 120000 });
+  }
+
+  async loginAsGuest() {
+    await this.page.goto('/');
+    // TODO - Remove it after https://issues.redhat.com/browse/RHIDP-2043. A Dynamic plugin for Guest Authentication Provider needs to be created
+    this.page.on('dialog', async dialog => {
+      await dialog.accept();
+    });
+
+    await this.verifyHeading('Select a sign-in method');
+    await this.clickButton('Enter');
+    await this.waitForSideBarVisible();
+  }
+}

plugins/quay/tests/quay.spec.ts

@@ -1,12 +1,17 @@
 import { expect, Page, test } from '@playwright/test';
 
+import { Common } from './quayHelper';
+
 test.describe('Quay plugin', () => {
   let page: Page;
+  let common: Common;
 
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     page = await context.newPage();
-    await page.goto('/');
+    common = new Common(page);
+
+    await common.loginAsGuest();
     await expect(
       page.getByRole('link', { name: 'backstage-test/test-images' }),
     ).toBeEnabled({ timeout: 20000 });
@@ -16,7 +21,7 @@ test.describe('Quay plugin', () => {
     await browser.close();
   });
 
-  test('All columns are shown', async () => {
+  test('All columns are shown in the table', async () => {
     const columns = [
       'Tag',
       'Last Modified',