frontend: Refactor namespace playwright for app mode

Signed-off-by: Vincent T <[email protected]>
headlamp-k8s · Sep 17, 2024 · 9c7fd9e · 9c7fd9e
1 parent 7f3e899
commit 9c7fd9e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/e2e-tests/tests/headlampPage.ts b/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');

diff --git a/e2e-tests/tests/namespaces.spec.ts b/e2e-tests/tests/namespaces.spec.ts
@@ -5,16 +5,33 @@ 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);
+ // 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.authenticate();
 
+ await headlampPage.startFromMainPage();
+
+ const namespacesPage = new NamespacesPage(page);
+
+ await namespacesPage.navigateToNamespaces();
+
  // 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;
  }
 
- 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'
diff --git a/e2e-tests/tests/namespacesPage.ts b/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();
  }
 }