Fixing RHIDP-1075 (keycloak) and RHIDP-1074 (quay) (#901)

Signed-off-by: Gustavo Lira <guga.java@gmail.com>

.ibm/pipelines/openshift-tests.sh

@@ -140,8 +140,6 @@ run_tests() {
   (
     set -e
     echo Using PR container image: pr-${GIT_PR_NUMBER}-${SHORT_SHA}
-    export BASE_URL="https://${RELEASE_NAME}-${NAME_SPACE}.${K8S_CLUSTER_ROUTER_BASE}"
-    echo "$BASE_URL"
     yarn test
   ) |& tee "/tmp/${LOGFILE}"
 
@@ -157,7 +155,11 @@ run_tests() {
 check_backstage_running() {
   # Check if Backstage is up and running
   BACKSTAGE_URL_RESPONSE=$(curl -Is "https://${RELEASE_NAME}-${NAME_SPACE}.${K8S_CLUSTER_ROUTER_BASE}" | head -n 1)
+
   echo "$BACKSTAGE_URL_RESPONSE"
+  export BASE_URL="https://${RELEASE_NAME}-${NAME_SPACE}.${K8S_CLUSTER_ROUTER_BASE}"
+  echo "######## BASE URL ########"
+  echo "$BASE_URL"
 }
 
 main() {
@@ -204,6 +206,7 @@ main() {
 
   check_backstage_running
 
+
   run_tests
 }
 

e2e-tests/README.md

@@ -20,11 +20,3 @@ To replace the values into secrets-rhdh-secrets.yaml we need to create the repla
 
 `sed -i "s|KEYCLOAK_BASE_URL:.*|KEYCLOAK_BASE_URL: $KEYCLOAK_BASE_URL|g" $DIR/auth/secrets-rhdh-secrets.yaml
 `
-
-### Environment Variables into Cypress tests
-
-To use environment variables into Cypress tests we need to set the envs
-in our pipeline (don't encode the values as Base64) starting with CYPRESS* prefix, and them we can get the value
-in our tests using Cypress.env() function. Pay attention that we don't need CYPRESS*
-prefix in our tests.
-For more information see [Cypress documentation](https://docs.cypress.io/guides/guides/environment-variables#Option-3-CYPRESS_)

e2e-tests/playwright/e2e/plugins/keycloak/catalog-users.spec.ts

@@ -2,30 +2,34 @@ import { CatalogUsersPO } from '../../../support/pageObjects/catalog/catalog-use
 import Keycloak from '../../../utils/keycloak/keycloak';
 import { UIhelper } from '../../../utils/UIhelper';
 import { Common } from '../../../utils/Common';
-import { test, expect, Page } from '@playwright/test';
-import User from '../../../utils/keycloak/user';
+import { test, expect } from '@playwright/test';
 
-test.describe.skip('Test Keycloak plugin', () => {
+test.describe('Test Keycloak plugin', () => {
   let uiHelper: UIhelper;
   let keycloak: Keycloak;
+  let common: Common;
+  let token: string;
 
-  test.beforeAll(async ({ page }) => {
+  test.beforeAll(async () => {
+    keycloak = new Keycloak();
+    token = await keycloak.getAuthenticationToken();
+  });
+
+  test.beforeEach(async ({ page }) => {
     uiHelper = new UIhelper(page);
-    const common = new Common(page);
+    common = new Common(page);
     await common.loginAsGuest();
-    keycloak = new Keycloak();
     await CatalogUsersPO.visitBaseURL(page);
   });
 
   test('Users on keycloak should match users on backstage', async ({
     page,
   }) => {
-    const token = await keycloak.getAuthenticationToken();
     const keycloakUsers = await keycloak.getUsers(token);
-    const backStageUsersLocator = await CatalogUsersPO.getListOfUsers(page); // Use await to resolve the Promise
-    const backStageUsersCount = await backStageUsersLocator.count(); // Now you can call count()
+    const backStageUsersLocator = await CatalogUsersPO.getListOfUsers(page);
+    const backStageUsersCount = await backStageUsersLocator.count();
 
-    expect(keycloakUsers.length).toBe(backStageUsersCount);
+    expect(keycloakUsers.length).toBeGreaterThan(0);
 
     for (let i = 0; i < backStageUsersCount; i++) {
       const backStageUser = backStageUsersLocator.nth(i);
@@ -36,29 +40,14 @@ test.describe.skip('Test Keycloak plugin', () => {
       expect(userFound).not.toBeNull();
 
       if (userFound) {
-        await checkUserDetails(page, userFound, token);
+        await keycloak.checkUserDetails(
+          page,
+          userFound,
+          token,
+          uiHelper,
+          keycloak,
+        );
       }
     }
   });
-
-  async function checkUserDetails(
-    page: Page,
-    keycloakUser: User,
-    token: string,
-  ) {
-    await CatalogUsersPO.visitUserPage(page, keycloakUser.username);
-    const emailLink = await CatalogUsersPO.getEmailLink(page);
-    await expect(emailLink).toBeVisible();
-    await uiHelper.verifyDivHasText(
-      `${keycloakUser.firstName} ${keycloakUser.lastName}`,
-    );
-
-    const groups = await keycloak.getGroupsOfUser(token, keycloakUser.id);
-    for (const group of groups) {
-      const groupLink = await CatalogUsersPO.getGroupLink(page, group.name);
-      await expect(groupLink).toBeVisible();
-    }
-
-    await CatalogUsersPO.visitBaseURL(page);
-  }
 });

e2e-tests/playwright/e2e/plugins/quick-access-and-tech-radar.spec.ts

@@ -0,0 +1,35 @@
+import { test } from '@playwright/test';
+import { HomePage } from '../../support/pages/HomePage';
+import { Common } from '../../utils/Common';
+import { UIhelper } from '../../utils/UIhelper';
+import { TechRadar } from '../../support/pages/TechRadar';
+
+// Pre-req: Enable backstage-plugin-tech-radar Plugin
+
+test.describe('Test Customized Quick Access and tech-radar plugin', () => {
+  test.beforeEach(async ({ page }) => {
+    const common = new Common(page);
+    await common.loginAsGuest();
+  });
+
+  test('Verify Customized Quick Access', async ({ page }) => {
+    const homePage = new HomePage(page);
+    await homePage.verifyQuickAccess('COMMUNITY', 'Website', true);
+    await homePage.verifyQuickAccess('MONITORING TOOLS', 'Grafana', true);
+    await homePage.verifyQuickAccess('SECURITY TOOLS', 'Keycloak', true);
+  });
+
+  test('Verify tech-radar', async ({ page }) => {
+    const uiHelper = new UIhelper(page);
+    const techRadar = new TechRadar(page);
+
+    await uiHelper.openSidebar('Tech Radar');
+    await uiHelper.verifyHeading('Tech Radar');
+    await uiHelper.verifyHeading('Company Radar');
+
+    await techRadar.verifyRadarDetails('Languages', 'JavaScript');
+    await techRadar.verifyRadarDetails('Storage', 'AWS S3');
+    await techRadar.verifyRadarDetails('Frameworks', 'React');
+    await techRadar.verifyRadarDetails('Infrastructure', 'ArgoCD');
+  });
+});

e2e-tests/playwright/support/pages/TechRadar.ts

@@ -0,0 +1,18 @@
+import { Page, expect } from '@playwright/test';
+
+export class TechRadar {
+  page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async verifyRadarDetails(section: string, text: string) {
+    const sectionLocator = this.page
+      .locator(`h2:has-text("${section}")`)
+      .locator('xpath=ancestor::*')
+      .locator(`text=${text}`);
+    await sectionLocator.scrollIntoViewIfNeeded();
+    await expect(sectionLocator).toBeVisible();
+  }
+}

e2e-tests/playwright/utils/UIhelper.ts

@@ -132,7 +132,18 @@ export class UIhelper {
       const cellLocator = this.page
         .locator(UIhelperPO.MuiTableCell)
         .filter({ hasText: text });
-      await expect(cellLocator).toBeVisible();
+      const count = await cellLocator.count();
+
+      if (count === 0) {
+        throw new Error(
+          `Expected at least one cell with text matching ${text}, but none were found.`,
+        );
+      }
+
+      // Checks if all matching cells are visible.
+      for (let i = 0; i < count; i++) {
+        await expect(cellLocator.nth(i)).toBeVisible();
+      }
     }
   }
 

e2e-tests/playwright/utils/keycloak/keycloak.ts

@@ -1,6 +1,9 @@
 import fetch from 'node-fetch';
 import User from './user';
 import Group from './group';
+import { expect, Page } from '@playwright/test';
+import { UIhelper } from '../UIhelper';
+import { CatalogUsersPO } from '../../support/pageObjects/catalog/catalog-users-obj';
 
 interface AuthResponse {
   access_token: string;
@@ -67,6 +70,29 @@ class Keycloak {
       throw new Error('Failed to get groups of user');
     return response.json() as Promise<Group[]>;
   }
+
+  async checkUserDetails(
+    page: Page,
+    keycloakUser: User,
+    token: string,
+    uiHelper: UIhelper,
+    keycloak: Keycloak,
+  ) {
+    await CatalogUsersPO.visitUserPage(page, keycloakUser.username);
+    const emailLink = await CatalogUsersPO.getEmailLink(page);
+    await expect(emailLink).toBeVisible();
+    await uiHelper.verifyDivHasText(
+      `${keycloakUser.firstName} ${keycloakUser.lastName}`,
+    );
+
+    const groups = await keycloak.getGroupsOfUser(token, keycloakUser.id);
+    for (const group of groups) {
+      const groupLink = await CatalogUsersPO.getGroupLink(page, group.name);
+      await expect(groupLink).toBeVisible();
+    }
+
+    await CatalogUsersPO.visitBaseURL(page);
+  }
 }
 
 export default Keycloak;