frontend: Refactor namespace playwright for app mode

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

e2e-tests/tests/headlampPage.ts

@@ -57,6 +57,25 @@ export class HeadlampPage {
     expect(await pageContent).toContain(text);
   }
 
+  // note: must have minikube started before running these
+  async startFromMainPage() {
+    await this.page.goto('/');
+    await this.page.waitForLoadState('load');
+
+    console.log('MAIN PAGE');
+
+    await this.page.waitForTimeout(5000);
+    const currentURL = this.page.url();
+
+    if (!currentURL.includes('c/minikube')) {
+      console.log('MORE THAN ONE CLUSTER');
+
+      await this.page.waitForSelector('link:has-text("minikube")');
+      await this.page.getByRole('link', { name: 'minikube' }).click();
+      await this.page.waitForLoadState('load');
+    }
+  }
+
   async navigateTopage(page: string, title: RegExp) {
     await this.page.goto(page);
     await this.page.waitForLoadState('load');

e2e-tests/tests/namespaces.spec.ts

@@ -5,16 +5,20 @@ import { NamespacesPage } from './namespacesPage';
 test('create a namespace with the minimal editor then delete it', async ({ page }) => {
   const name = 'testing-e2e';
   const headlampPage = new HeadlampPage(page);
-  await headlampPage.authenticate();
-
-  // If there's no namespaces permission, then we return
-  const content = await page.content();
-  if (!content.includes('Namespaces') || !content.includes('href="/c/main/namespaces')) {
-    return;
+  // If we are running in cluster, we need to authenticate
+  if (process.env.PLAYWRIGHT_TEST_MODE === 'incluster') {
+    await headlampPage.authenticate();
+    // If there's no namespaces permission, then we return
+    const content = await page.content();
+    if (!content.includes('Namespaces') || !content.includes('href="/c/main/namespaces')) {
+      return;
+    }
   }
-
+  await headlampPage.startFromMainPage();
   const namespacesPage = new NamespacesPage(page);
   await namespacesPage.navigateToNamespaces();
   await namespacesPage.createNamespace(name);
   await namespacesPage.deleteNamespace(name);
 });
+
+// to do: add test for 'create a namespace with the create namespace button then delete it'

e2e-tests/tests/namespacesPage.ts

@@ -4,8 +4,9 @@ export class NamespacesPage {
   constructor(private page: Page) {}
 
   async navigateToNamespaces() {
-    await this.page.click('span:has-text("Cluster")');
     await this.page.waitForLoadState('load');
+    await this.page.waitForSelector('span:has-text("Cluster")');
+    await this.page.getByText('Cluster', { exact: true }).click();
     await this.page.waitForSelector('span:has-text("Namespaces")');
     await this.page.click('span:has-text("Namespaces")');
     await this.page.waitForLoadState('load');
@@ -28,35 +29,59 @@ export class NamespacesPage {
     // This makes it a bit more resilient to flakiness.
     const pageContent = await this.page.content();
     if (pageContent.includes(name)) {
-      return;
+      throw new Error(`Test failed: Namespace "${name}" already exists.`);
     }
 
-    await expect(page.getByRole('button', { name: 'Create' })).toBeVisible();
-    await page.getByRole('button', { name: 'Create' }).click();
+    await page.getByText('Create', { exact: true }).click();
 
     await page.waitForLoadState('load');
 
-    await expect(page.getByText('Use minimal editor')).toBeVisible();
-    await page.getByText('Use minimal editor').click();
+    // this is a workaround for the checked input not having any unique identifier
+    const checkedSpan = await page.$('span.Mui-checked');
+
+    if (!checkedSpan) {
+      await expect(page.getByText('Use minimal editor')).toBeVisible();
+
+      await page.getByText('Use minimal editor').click();
+    }
 
     await page.waitForLoadState('load');
+
+    await page.waitForSelector('textarea[aria-label="yaml Code"]', { state: 'visible' });
+
+    await expect(page.getByRole('textbox', { name: 'yaml Code' })).toBeVisible();
     await page.fill('textarea[aria-label="yaml Code"]', yaml);
 
     await expect(page.getByRole('button', { name: 'Apply' })).toBeVisible();
     await page.getByRole('button', { name: 'Apply' }).click();
 
-    await page.waitForSelector(`text=Applied ${name}`);
+    await page.waitForSelector(`a:has-text("${name}")`);
+    await expect(page.locator(`a:has-text("${name}")`)).toBeVisible();
   }
 
   async deleteNamespace(name) {
     const page = this.page;
     await page.click('span:has-text("Namespaces")');
     await page.waitForLoadState('load');
+
     await page.waitForSelector(`text=${name}`);
     await page.click(`a:has-text("${name}")`);
-    await page.click('button[title="Delete"]');
+
+    await page.waitForSelector('button[aria-label="Delete"]');
+    await page.click('button[aria-label="Delete"]');
+
+    await page.waitForLoadState('load');
+
     await page.waitForSelector('text=Are you sure you want to delete this item?');
+    await page.waitForSelector('button:has-text("Yes")');
+
+    await page.waitForLoadState('load');
+
     await page.click('button:has-text("Yes")');
-    await page.waitForSelector(`text=Deleted item ${name}`);
+
+    await page.waitForSelector('h1:has-text("Namespaces")');
+    await page.waitForSelector('td:has-text("Terminating")');
+
+    await expect(page.locator(`a:has-text("${name}")`)).toBeHidden();
   }
 }