Add Application Test

Signed-off-by: Triona Doyle <bot@example.com>
Signed-off-by: Triona Doyle <tekton@example.com>

Author: Triona Doyle

test/ui-e2e/.auth/setup.ts

@@ -1,9 +1,9 @@
-import { test as setup } from '@playwright/test';
+import { test as setup, expect } from '@playwright/test';
 
 const authFile = '.auth/storageState.json';
 
 setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
-  // Navigate to the OpenShift Console
+  //navigate to the OpenShift console
   const targetUrl = baseURL || process.env.CONSOLE_URL || process.env.BASE_URL;
 
   if (!targetUrl) {
@@ -19,23 +19,19 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
     .or(page.locator('input[name="username"]'))
     .or(page.getByPlaceholder(/Username/i));
 
-  //wait for the IDP screen OR the Username field to appear
-  try {
-    await Promise.race([
-      idpScreenText.waitFor({ state: 'visible', timeout: 15000 }),
-      usernameInput.waitFor({ state: 'visible', timeout: 15000 })
-    ]);
-  } catch (e) {
-    console.log("Timed out waiting for OpenShift login page to render.");
-  }
+  //fail loudly if the page is dead so we don't get weird errors later
+  await expect(
+    idpScreenText.or(usernameInput).first(), 
+    "OpenShift login page failed to load. Check cluster health and URL."
+  ).toBeVisible({ timeout: 20000 });
 
   const idpName = process.env.IDP || 'kube:admin'; 
   const user = process.env.CLUSTER_USER || 'kubeadmin';
 
   if (await idpScreenText.isVisible()) {
     console.log(`IDP selection screen detected. Selecting provider: "${idpName}"`);
 
-    // look for the specific IDP 
+    //look for the specific IDP 
     const idpLink = page.getByRole('link', { name: new RegExp(idpName, 'i') });
 
     await idpLink.waitFor({ state: 'visible', timeout: 5000 });
@@ -44,7 +40,7 @@ setup('authenticate to OpenShift Cluster', async ({ page, baseURL }) => {
     console.log("No IDP screen detected (or already selected), proceeding to credentials...");
   }
 
-  // fill in the Credentials
+  //fill in the credentials
   await usernameInput.waitFor({ state: 'visible', timeout: 10000 });
   await usernameInput.fill(user); 
 

test/ui-e2e/run-ui-tests.sh

@@ -15,15 +15,23 @@ export CLUSTER_USER=${CLUSTER_USER:-"kubeadmin"}
 export IDP=${IDP:-"kube:admin"}
 
 #check auth state first
-echo "Checking cluster authentication..."
-if ! oc whoami > /dev/null 2>&1; then
-    if [ -n "$OC_API_URL" ] && [ -n "$CLUSTER_PASSWORD" ]; then
-        echo "Attempting automated login..."
-        oc login "$OC_API_URL" -u "$CLUSTER_USER" -p "$CLUSTER_PASSWORD" --insecure-skip-tls-verify=true
-    else
-        echo "Error: Not logged in. Missing OC_API_URL or CLUSTER_PASSWORD."
+echo "Syncing CLI context..."
+if [ -n "$OC_API_URL" ] && [ -n "$CLUSTER_PASSWORD" ]; then
+    # If variables exist, FORCE the CLI to match them so there is no cross-cluster confusion
+    echo "Logging into $OC_API_URL..."
+    oc login "$OC_API_URL" -u "$CLUSTER_USER" -p "$CLUSTER_PASSWORD" --insecure-skip-tls-verify=true > /dev/null 2>&1
+    
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to log into the cluster. Please check the credentials in your .env file."
         exit 1
     fi
+elif ! oc whoami > /dev/null 2>&1; then
+    # If variables don't exist AND we aren't logged in, fail out
+    echo "Error: Not logged in. Missing OC_API_URL or CLUSTER_PASSWORD."
+    exit 1
+else
+    # If variables don't exist but we ARE logged in locally, just use the current session
+    echo "No .env credentials found. Using existing oc CLI session..."
 fi
 
 #find the URLs for console and argocd 

test/ui-e2e/src/fixtures.ts

@@ -0,0 +1,14 @@
+import { test as base, expect } from '@playwright/test';
+import { LoginPage } from './pages/LoginPage';
+
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+    await loginPage.loginViaOpenShift();
+    await use(page);
+  },
+});
+
+//export it so spec files can use it
+export { expect };

test/ui-e2e/src/pages/ApplicationsPage.ts

@@ -0,0 +1,113 @@
+import { Page, expect, Locator } from '@playwright/test';
+
+export class ApplicationsPage {
+  readonly page: Page;
+  readonly newAppButton: Locator;
+  readonly appNameInput: Locator;
+  readonly projectInput: Locator;
+  readonly repoUrlInput: Locator;
+  readonly pathInput: Locator;
+  readonly clusterUrlInput: Locator;
+  readonly namespaceInput: Locator;
+  readonly createButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    
+    //header buttons
+    this.newAppButton = page.getByRole('button', { name: /NEW APP/i });
+    this.createButton = page.getByRole('button', { name: 'Create', exact: true });    
+
+    this.appNameInput = page.getByLabel('Application Name', { exact: true });
+    this.projectInput = page.locator('[qe-id="application-create-field-project"]');
+    this.repoUrlInput = page.locator('.argo-form-row').filter({ hasText: 'Repository URL' }).locator('input').first();
+    this.pathInput = page.locator('.argo-form-row').filter({ hasText: 'Path' }).locator('input').first();
+    
+    //dest
+    this.clusterUrlInput = page.locator('.argo-form-row').filter({ hasText: 'Cluster URL' }).locator('input').first();
+    this.namespaceInput = page.locator('.argo-form-row')
+                              .filter({ has: page.getByText('Namespace', { exact: true }) })
+                              .locator('input').first();
+  }
+
+  async navigate() {
+    await this.page.goto('/applications');
+    
+    //ingnore the "failed to load data" banner if it appears
+    const errorBanner = this.page.getByText('try again');
+    try {
+      //wait 3 secs
+      await errorBanner.waitFor({ state: 'visible', timeout: 3000 });
+      await errorBanner.click(); 
+    } catch (error) {
+      //banner didn't appear so just continue
+    }
+    
+    await expect(this.newAppButton).toBeVisible({ timeout: 15000 });
+  }
+
+  //helper for fields that need to have select a pre existing option
+  async fillDropdown(locator: Locator, value: string) {
+    await locator.click();
+    await locator.pressSequentially(value, { delay: 50 }); 
+    await this.page.waitForTimeout(500); 
+    await locator.press('Enter');
+  }
+
+  async createApp(appName: string, repoUrl: string, repoPath: string) {
+    await this.newAppButton.click();
+    await this.page.getByText('Loading...').first().waitFor({ state: 'hidden', timeout: 15000 });
+
+    await this.appNameInput.fill(appName);
+    await this.fillDropdown(this.projectInput, 'default'); 
+    
+    //src
+    await this.repoUrlInput.fill(repoUrl);
+    await this.pathInput.fill(repoPath);
+    
+    //dest
+    await this.clusterUrlInput.fill('https://kubernetes.default.svc');
+    
+    //deploy
+    await this.namespaceInput.fill('openshift-gitops');
+    await this.createButton.click();
+  }
+
+async syncApplication(appName: string) {
+    //search for app
+    await this.page.getByPlaceholder(/Search applications/i).fill(appName);
+
+    const appContainer = this.page.locator('.white-box, .argo-table-list__row').filter({ hasText: appName });
+    await appContainer.waitFor({ state: 'visible', timeout: 20000 });
+    await appContainer.getByText('Sync', { exact: true }).click();
+    
+    //slideout panel 
+    const resourcesSection = this.page.locator('.argo-form-row').filter({ hasText: 'SYNCHRONIZE RESOURCES' });
+    await expect(resourcesSection).toContainText('spring-petclinic', { timeout: 15000 });
+
+    //click all
+    await resourcesSection.getByText('all', { exact: true }).click();
+    
+    //handle the validation error that appears in older versions
+    const validationWarning = resourcesSection.getByText('Select at least one resource');
+    await this.page.waitForTimeout(500);
+    
+    //if the red text exists (4.14) wait for it to vanish so means boxes are checked
+    if (await validationWarning.isVisible()) {
+        await validationWarning.waitFor({ state: 'hidden', timeout: 10000 });
+    }
+    
+    //click
+    await this.page.getByRole('button', { name: /^synchronize$/i }).click();
+  }
+
+  async verifyStatus(appName: string) {
+    //re-apply search filter just in case
+    await this.page.getByPlaceholder(/Search applications/i).fill(appName);
+    const appContainer = this.page.locator('.white-box, .argo-table-list__row').filter({ hasText: appName });
+    
+    //90 secs
+    await expect(appContainer.getByText(/synced/i)).toBeVisible({ timeout: 90000 });
+    await expect(appContainer.getByText(/healthy/i)).toBeVisible({ timeout: 90000 });
+  }
+}

test/ui-e2e/src/pages/LoginPage.ts

@@ -12,10 +12,19 @@ export class LoginPage {
     await this.page.goto('/');
   }
 
-  async loginViaOpenShift(user: string, pass: string, idp: string = 'kube:admin') {
-    //click the SSO button on the Argo CD landing page
+  async loginViaOpenShift(user?: string, pass?: string, idp: string = 'kube:admin') {
     const ssoButton = this.page.getByText(/LOG IN VIA OPENSHIFT/i);
-    await ssoButton.waitFor({ state: 'visible', timeout: 10000 });
+    const newAppButton = this.page.getByRole('button', { name: /NEW APP/i });
+
+    //wait dynamically for either the login screen OR the dashboard to render
+    await ssoButton.or(newAppButton).first().waitFor({ state: 'visible', timeout: 20000 });
+
+    //if we landed straight on the dashboard, the cluster was already fully authenticated
+    if (await newAppButton.isVisible()) {
+      return;
+    }
+
+    //otherwise, click the SSO button on the Argo CD landing page
     await ssoButton.click();
 
     //handle the OpenShift IDP selection screen if it appears
@@ -27,11 +36,16 @@ export class LoginPage {
         //if it's not there then OpenShift likely defaulted to another
     }
 
-    //fil out the OpenShift credentials 
-    await this.page.getByLabel(/Username/i).waitFor({ state: 'visible' });
-    await this.page.getByLabel(/Username/i).fill(user);
-    await this.page.getByLabel(/Password/i).fill(pass);
-    await this.page.getByRole('button', { name: /Log in/i }).click();
+    //check if manual login is actually required
+    const usernameInput = this.page.getByLabel(/Username/i);
+    const needsLogin = await usernameInput.waitFor({ state: 'visible', timeout: 5000 }).then(() => true).catch(() => false);
+
+    if (needsLogin && user && pass) {
+      //fil out the OpenShift credentials 
+      await usernameInput.fill(user);
+      await this.page.getByLabel(/Password/i).fill(pass);
+      await this.page.getByRole('button', { name: /Log in/i }).click();
+    }
 
     //Auth Handle the Allow Permissions screen
     try {

test/ui-e2e/tests/create-application.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '../src/fixtures'; 
+import { ApplicationsPage } from '../src/pages/ApplicationsPage';
+
+test.describe('ArgoCD Create Application', () => {
+  //declare appname 
+  let appName: string;
+
+test.afterEach(async ({ page }) => {
+    if (!appName) return;
+
+    console.log(`cleaning up: deleting ${appName} via api`);
+    
+    const response = await page.request.delete(`/api/v1/applications/${appName}?cascade=true`, {
+      headers: { 'Content-Type': 'application/json' }
+    });
+    
+    //ignore 404 (already gone) or 403 (no permission on this cluster)
+    if (response.status() === 404 || response.status() === 403) {
+      if (response.status() === 403) console.log('warning: rbac bypass on this cluster');
+      return;
+    }
+
+    //only fail for actual server errors
+    expect(response.status()).toBeLessThan(400); 
+  });
+
+  test('Deploy the Spring Petclinic application via UI', async ({ page }) => {
+    test.setTimeout(180000); 
+    
+    const appsPage = new ApplicationsPage(page);
+    appName = `spring-petclinic-${Date.now()}`; 
+    const publicRepo = 'https://github.com/redhat-developer/openshift-gitops-getting-started.git';
+    const repoPath = 'app';
+
+    await appsPage.navigate();
+    await appsPage.createApp(appName, publicRepo, repoPath);
+    await appsPage.syncApplication(appName);
+    await appsPage.verifyStatus(appName);
+  });
+  
+});

test/ui-e2e/tests/login.spec.ts

@@ -3,6 +3,9 @@ import { LoginPage } from '../src/pages/LoginPage';
 
 test.describe('Argo CD SSO Authentication', () => {
 
+  //give the manual login flow plenty of time to finish
+  test.setTimeout(60000);
+
   //clear storageState to force a full login flow for this specific test
   test.use({ storageState: { cookies: [], origins: [] } });
 
@@ -20,4 +23,5 @@ test.describe('Argo CD SSO Authentication', () => {
     //Check the button is visible as proof of successful login
     await expect(page.getByRole('button', { name: /NEW APP/i })).toBeVisible({ timeout: 15000 });
   });
+  
 });