refactoring tests

Author: dididy

zeppelin-web-angular/e2e/models/base-page.ts

@@ -17,14 +17,73 @@ export const BASE_URL = 'http://localhost:4200';
 
 export class BasePage {
   readonly page: Page;
-  readonly e2eTestFolder: Locator;
+
+  // Common Zeppelin component locators
+  readonly zeppelinNodeList: Locator;
+  readonly zeppelinWorkspace: Locator;
+  readonly zeppelinHeader: Locator;
+  readonly zeppelinPageHeader: Locator;
 
   constructor(page: Page) {
     this.page = page;
-    this.e2eTestFolder = page.locator(`[data-testid="folder-${E2E_TEST_FOLDER}"]`);
+    this.zeppelinNodeList = page.locator('zeppelin-node-list');
+    this.zeppelinWorkspace = page.locator('zeppelin-workspace');
+    this.zeppelinHeader = page.locator('zeppelin-header');
+    this.zeppelinPageHeader = page.locator('zeppelin-page-header');
   }
 
   async waitForPageLoad(): Promise<void> {
     await this.page.waitForLoadState('domcontentloaded', { timeout: 15000 });
   }
+
+  // Common navigation patterns
+  async navigateToRoute(
+    route: string,
+    options?: { timeout?: number; waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' }
+  ): Promise<void> {
+    await this.page.goto(`/#${route}`, {
+      waitUntil: 'domcontentloaded',
+      timeout: 60000,
+      ...options
+    });
+    await this.waitForPageLoad();
+  }
+
+  async navigateToHome(): Promise<void> {
+    await this.navigateToRoute('/');
+  }
+
+  getCurrentPath(): string {
+    const url = new URL(this.page.url());
+    return url.hash || url.pathname;
+  }
+
+  async waitForUrlNotContaining(fragment: string): Promise<void> {
+    await this.page.waitForURL(url => !url.toString().includes(fragment));
+  }
+
+  // Common form interaction patterns
+  async fillInput(locator: Locator, value: string, options?: { timeout?: number; force?: boolean }): Promise<void> {
+    await locator.fill(value, { timeout: 15000, ...options });
+  }
+
+  async clickElement(locator: Locator, options?: { timeout?: number; force?: boolean }): Promise<void> {
+    await locator.click({ timeout: 15000, ...options });
+  }
+
+  async getInputValue(locator: Locator): Promise<string> {
+    return await locator.inputValue();
+  }
+
+  async isElementVisible(locator: Locator): Promise<boolean> {
+    return await locator.isVisible();
+  }
+
+  async isElementEnabled(locator: Locator): Promise<boolean> {
+    return await locator.isEnabled();
+  }
+
+  async getElementText(locator: Locator): Promise<string> {
+    return (await locator.textContent()) || '';
+  }
 }

zeppelin-web-angular/e2e/models/dark-mode-page.ts

@@ -24,7 +24,7 @@ export class DarkModePage extends BasePage {
   }
 
   async toggleTheme() {
-    await this.themeToggleButton.click();
+    await this.clickElement(this.themeToggleButton);
   }
 
   async assertDarkTheme() {

zeppelin-web-angular/e2e/models/folder-rename-page.util.ts

@@ -10,29 +10,20 @@
  * limitations under the License.
  */
 
-import { expect, Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { FolderRenamePage } from './folder-rename-page';
 
 export class FolderRenamePageUtil {
-  constructor(
-    private readonly page: Page,
-    private readonly folderRenamePage: FolderRenamePage
-  ) {}
+  private folderRenamePage: FolderRenamePage;
 
-  private getFolderNode(folderName: string) {
-    return this.page
-      .locator('.node')
-      .filter({
-        has: this.page.locator('.folder .name', { hasText: folderName })
-      })
-      .first();
+  constructor(folderRenamePage: FolderRenamePage) {
+    this.folderRenamePage = folderRenamePage;
   }
 
   async verifyRenameButtonIsVisible(folderName: string): Promise<void> {
     await this.folderRenamePage.hoverOverFolder(folderName);
     const folderNode = this.getFolderNode(folderName);
     const renameButton = folderNode.locator('.folder .operation a[nz-tooltip][nztooltiptitle="Rename folder"]');
-    // Just verify the element exists in DOM, not visibility(for Webkit & Edge)
     await expect(renameButton).toHaveCount(1);
   }
 
@@ -53,8 +44,6 @@ export class FolderRenamePageUtil {
 
   async verifyRenameModalOpens(folderName: string): Promise<void> {
     await this.folderRenamePage.clickRenameMenuItem(folderName);
-
-    // Wait for modal to appear with extended timeout
     await expect(this.folderRenamePage.renameModal).toBeVisible({ timeout: 10000 });
   }
 
@@ -71,21 +60,17 @@ export class FolderRenamePageUtil {
 
     await this.folderRenamePage.clickConfirm();
 
-    // Wait for the modal to disappear
     await expect(this.folderRenamePage.renameModal).not.toBeVisible({ timeout: 10000 });
 
-    // Wait for the UI to update before reloading for the old name to disappear
-    const oldFolder = this.page.locator('.folder .name', { hasText: oldName });
+    const oldFolder = this.folderRenamePage.page.locator('.folder .name', { hasText: oldName });
     await expect(oldFolder).not.toBeVisible({ timeout: 10000 });
 
-    // Optional: Keep the reload as a final sanity check against the backend state
-    await this.page.reload();
-    await this.page.waitForLoadState('networkidle', { timeout: 15000 });
+    await this.folderRenamePage.page.reload();
+    await this.folderRenamePage.waitForPageLoad();
 
     const baseNewName = newName.split('/').pop();
 
-    // Ensure the folder list is stable and contains the new folder after reload
-    await this.page.waitForFunction(
+    await this.folderRenamePage.page.waitForFunction(
       ([expectedBaseName]) => {
         if (!expectedBaseName) {
           throw Error('Renamed Folder name is not exist.');
@@ -103,15 +88,12 @@ export class FolderRenamePageUtil {
     await this.folderRenamePage.clickRenameMenuItem(folderName);
     await this.folderRenamePage.clearNewName();
 
-    // NEW ASSERTION: The confirm button should be disabled when the input is empty.
     await expect(this.folderRenamePage.confirmButton).toBeDisabled({ timeout: 5000 });
 
-    // Clean up: Click cancel to close the modal after verifying validation.
     await this.folderRenamePage.clickCancel();
     await expect(this.folderRenamePage.renameModal).not.toBeVisible({ timeout: 5000 });
 
-    // Verify the original folder still exists and was not renamed or deleted.
-    const originalFolderLocator = this.page.locator('.folder .name', { hasText: folderName });
+    const originalFolderLocator = this.folderRenamePage.page.locator('.folder .name', { hasText: folderName });
     await expect(originalFolderLocator).toBeVisible({ timeout: 5000 });
   }
 
@@ -127,4 +109,13 @@ export class FolderRenamePageUtil {
     await this.verifyRenameButtonIsVisible(folderName);
     await this.verifyDeleteButtonIsVisible(folderName);
   }
+
+  private getFolderNode(folderName: string) {
+    return this.folderRenamePage.page
+      .locator('.node')
+      .filter({
+        has: this.folderRenamePage.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first();
+  }
 }

zeppelin-web-angular/e2e/models/home-page.ts

@@ -10,8 +10,7 @@
  * limitations under the License.
  */
 
-import { expect, Locator, Page } from '@playwright/test';
-import { getCurrentPath, waitForUrlNotContaining } from '../utils';
+import { Locator, Page } from '@playwright/test';
 import { BasePage } from './base-page';
 
 export class HomePage extends BasePage {
@@ -20,7 +19,6 @@ export class HomePage extends BasePage {
   readonly helpSection: Locator;
   readonly communitySection: Locator;
   readonly createNewNoteButton: Locator;
-  readonly filterInput: Locator;
   readonly zeppelinLogo: Locator;
   readonly anonymousUserIndicator: Locator;
   readonly welcomeSection: Locator;
@@ -29,10 +27,12 @@ export class HomePage extends BasePage {
   readonly helpCommunityColumn: Locator;
   readonly welcomeDescription: Locator;
   readonly refreshNoteButton: Locator;
-  readonly notebookList: Locator;
   readonly notebookHeading: Locator;
   readonly helpHeading: Locator;
   readonly communityHeading: Locator;
+  readonly createNoteModal: Locator;
+  readonly createNoteButton: Locator;
+  readonly notebookNameInput: Locator;
   readonly externalLinks: {
     documentation: Locator;
     mailingList: Locator;
@@ -67,7 +67,6 @@ export class HomePage extends BasePage {
     this.helpSection = page.locator('text=Help').first();
     this.communitySection = page.locator('text=Community').first();
     this.createNewNoteButton = page.getByText('Create new Note', { exact: true }).first();
-    this.filterInput = page.locator('input[placeholder*="Filter"]');
     this.zeppelinLogo = page.locator('text=Zeppelin').first();
     this.anonymousUserIndicator = page.locator('text=anonymous');
     this.welcomeSection = page.locator('.welcome');
@@ -76,10 +75,12 @@ export class HomePage extends BasePage {
     this.helpCommunityColumn = page.locator('[nz-col]').last();
     this.welcomeDescription = page.locator('.welcome').getByText('Zeppelin is web-based notebook');
     this.refreshNoteButton = page.locator('a.refresh-note');
-    this.notebookList = page.locator('zeppelin-node-list');
     this.notebookHeading = this.notebookColumn.locator('h3');
     this.helpHeading = page.locator('h3').filter({ hasText: 'Help' });
     this.communityHeading = page.locator('h3').filter({ hasText: 'Community' });
+    this.createNoteModal = page.locator('div.ant-modal-content');
+    this.createNoteButton = this.createNoteModal.locator('button', { hasText: 'Create' });
+    this.notebookNameInput = this.createNoteModal.locator('input[name="noteName"]');
 
     this.externalLinks = {
       documentation: page.locator('a[href*="zeppelin.apache.org/docs"]'),
@@ -110,45 +111,22 @@ export class HomePage extends BasePage {
     };
   }
 
-  async navigateToHome(): Promise<void> {
-    await this.page.goto('/#/', {
-      waitUntil: 'load',
-      timeout: 60000
-    });
-    await this.waitForPageLoad();
-  }
-
   async navigateToLogin(): Promise<void> {
-    await this.page.goto('/#/login');
-    await this.waitForPageLoad();
+    await this.navigateToRoute('/login');
     // Wait for potential redirect to complete by checking URL change
-    await waitForUrlNotContaining(this.page, '#/login');
+    await this.waitForUrlNotContaining('#/login');
   }
 
   async isHomeContentDisplayed(): Promise<boolean> {
-    try {
-      await expect(this.welcomeHeading).toBeVisible();
-      return true;
-    } catch {
-      return false;
-    }
+    return this.isElementVisible(this.welcomeHeading);
   }
 
   async isAnonymousUser(): Promise<boolean> {
-    try {
-      await expect(this.anonymousUserIndicator).toBeVisible();
-      return true;
-    } catch {
-      return false;
-    }
+    return this.isElementVisible(this.anonymousUserIndicator);
   }
 
   async clickZeppelinLogo(): Promise<void> {
-    await this.zeppelinLogo.click();
-  }
-
-  getCurrentPath(): string {
-    return getCurrentPath(this.page);
+    await this.clickElement(this.zeppelinLogo);
   }
 
   async getWelcomeHeadingText(): Promise<string> {
@@ -162,23 +140,42 @@ export class HomePage extends BasePage {
   }
 
   async clickRefreshNotes(): Promise<void> {
-    await this.refreshNoteButton.click();
+    await this.clickElement(this.refreshNoteButton);
   }
 
   async isNotebookListVisible(): Promise<boolean> {
-    return this.notebookList.isVisible();
+    return this.isElementVisible(this.zeppelinNodeList);
   }
 
   async clickCreateNewNote(): Promise<void> {
-    await this.nodeList.createNewNoteLink.click();
+    await this.clickElement(this.nodeList.createNewNoteLink);
+    await this.createNoteModal.waitFor({ state: 'visible' });
+  }
+
+  async createNote(notebookName: string): Promise<void> {
+    await this.clickCreateNewNote();
+    await this.fillInput(this.notebookNameInput, notebookName, { force: true });
+
+    // Wait for input value to be set (especially important for Webkit)
+    await this.page.waitForFunction(
+      name => {
+        const input = document.querySelector('input[name="noteName"]') as HTMLInputElement;
+        return input && input.value === name;
+      },
+      notebookName,
+      { timeout: 5000 }
+    );
+
+    await this.clickElement(this.createNoteButton);
+    await this.waitForPageLoad();
   }
 
   async clickImportNote(): Promise<void> {
-    await this.nodeList.importNoteLink.click();
+    await this.clickElement(this.nodeList.importNoteLink);
   }
 
   async filterNotes(searchTerm: string): Promise<void> {
-    await this.nodeList.filterInput.fill(searchTerm);
+    await this.fillInput(this.nodeList.filterInput, searchTerm);
   }
 
   async waitForRefreshToComplete(): Promise<void> {