[ZEPPELIN-6373] Add E2E tests about share area

zeppelin-web-angular/e2e/models/about-zeppelin-modal.ts

@@ -0,0 +1,69 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Locator, Page } from '@playwright/test';
+import { BasePage } from './base-page';
+
+export class AboutZeppelinModal extends BasePage {
+  readonly modal: Locator;
+  readonly modalTitle: Locator;
+  readonly closeButton: Locator;
+  readonly logo: Locator;
+  readonly heading: Locator;
+  readonly versionText: Locator;
+  readonly getInvolvedLink: Locator;
+  readonly licenseLink: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.modal = page.locator('[role="dialog"]').filter({ has: page.getByText('About Zeppelin') });
+    this.modalTitle = page.locator('.ant-modal-title', { hasText: 'About Zeppelin' });
+    this.closeButton = page.getByRole('button', { name: 'Close' });
+    this.logo = page.locator('img[alt="Apache Zeppelin"]');
+    this.heading = page.locator('h3', { hasText: 'Apache Zeppelin' });
+    this.versionText = page.locator('.about-version');
+    this.getInvolvedLink = page.getByRole('link', { name: 'Get involved!' });
+    this.licenseLink = page.getByRole('link', { name: 'Licensed under the Apache License, Version 2.0' });
+  }
+
+  async isModalVisible(): Promise<boolean> {
+    return this.modal.isVisible();
+  }
+
+  async close(): Promise<void> {
+    await this.closeButton.click();
+  }
+
+  async getVersionText(): Promise<string> {
+    return (await this.versionText.textContent()) || '';
+  }
+
+  async isLogoVisible(): Promise<boolean> {
+    return this.logo.isVisible();
+  }
+
+  async clickGetInvolvedLink(): Promise<void> {
+    await this.getInvolvedLink.click();
+  }
+
+  async clickLicenseLink(): Promise<void> {
+    await this.licenseLink.click();
+  }
+
+  async getGetInvolvedHref(): Promise<string | null> {
+    return this.getInvolvedLink.getAttribute('href');
+  }
+
+  async getLicenseHref(): Promise<string | null> {
+    return this.licenseLink.getAttribute('href');
+  }
+}

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

@@ -23,10 +23,6 @@ export class BasePage {
 
   async waitForPageLoad(): Promise<void> {
     await this.page.waitForLoadState('domcontentloaded');
-    try {
-      await this.loadingScreen.waitFor({ state: 'hidden', timeout: 5000 });
-    } catch {
-      console.log('Loading screen not found');
-    }
+    await this.loadingScreen.waitFor({ state: 'hidden', timeout: 5000 });
   }
 }

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

@@ -0,0 +1,152 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Locator, Page } from '@playwright/test';
+import { BasePage } from './base-page';
+
+export class HeaderPage extends BasePage {
+  readonly header: Locator;
+  readonly brandLogo: Locator;
+  readonly brandLink: Locator;
+  readonly notebookMenuItem: Locator;
+  readonly notebookDropdownTrigger: Locator;
+  readonly notebookDropdown: Locator;
+  readonly jobMenuItem: Locator;
+  readonly userDropdownTrigger: Locator;
+  readonly userBadge: Locator;
+  readonly userDropdown: Locator;
+  readonly searchInput: Locator;
+  readonly themeToggleButton: Locator;
+  readonly connectionStatusBadge: Locator;
+
+  readonly userMenuItems: {
+    aboutZeppelin: Locator;
+    interpreter: Locator;
+    notebookRepos: Locator;
+    credential: Locator;
+    configuration: Locator;
+    logout: Locator;
+    switchToClassicUI: Locator;
+  };
+
+  constructor(page: Page) {
+    super(page);
+    this.header = page.locator('.header');
+    this.brandLogo = page.locator('.header .brand .logo');
+    this.brandLink = page.locator('.header .brand');
+    this.notebookMenuItem = page.locator('[nz-menu-item]').filter({ hasText: 'Notebook' });
+    this.notebookDropdownTrigger = page.locator('.node-list-trigger');
+    this.notebookDropdown = page.locator('zeppelin-node-list.ant-dropdown-menu');
+    this.jobMenuItem = page.getByRole('link', { name: 'Job' });
+    this.userDropdownTrigger = page.locator('.header .user .status');
+    this.userBadge = page.locator('.header .user nz-badge');
+    this.userDropdown = page.locator('ul[nz-menu]').filter({ has: page.getByText('About Zeppelin') });
+    this.searchInput = page.locator('.header .search input[type="text"]');
+    this.themeToggleButton = page.locator('zeppelin-theme-toggle button');
+    this.connectionStatusBadge = page.locator('.header .user nz-badge');
+
+    this.userMenuItems = {
+      aboutZeppelin: page.getByText('About Zeppelin', { exact: true }),
+      interpreter: page.getByRole('link', { name: 'Interpreter' }),
+      notebookRepos: page.getByRole('link', { name: 'Notebook Repos' }),
+      credential: page.getByRole('link', { name: 'Credential' }),
+      configuration: page.getByRole('link', { name: 'Configuration' }),
+      logout: page.getByText('Logout', { exact: true }),
+      switchToClassicUI: page.getByRole('link', { name: 'Switch to Classic UI' })
+    };
+  }
+
+  async clickBrandLogo(): Promise<void> {
+    await this.brandLink.waitFor({ state: 'visible', timeout: 10000 });
+    await this.brandLink.click();
+  }
+
+  async clickNotebookMenu(): Promise<void> {
+    await this.notebookDropdownTrigger.waitFor({ state: 'visible', timeout: 10000 });
+    await this.notebookDropdownTrigger.click();
+  }
+
+  async clickJobMenu(): Promise<void> {
+    await this.jobMenuItem.waitFor({ state: 'visible', timeout: 10000 });
+    await this.jobMenuItem.click();
+  }
+
+  async clickUserDropdown(): Promise<void> {
+    await this.userDropdownTrigger.waitFor({ state: 'visible', timeout: 10000 });
+    await this.userDropdownTrigger.click();
+  }
+
+  async clickAboutZeppelin(): Promise<void> {
+    await this.userMenuItems.aboutZeppelin.click();
+  }
+
+  async clickInterpreter(): Promise<void> {
+    await this.userMenuItems.interpreter.click();
+  }
+
+  async clickNotebookRepos(): Promise<void> {
+    await this.userMenuItems.notebookRepos.click();
+  }
+
+  async clickCredential(): Promise<void> {
+    await this.userMenuItems.credential.click();
+  }
+
+  async clickConfiguration(): Promise<void> {
+    await this.userMenuItems.configuration.click();
+  }
+
+  async clickLogout(): Promise<void> {
+    await this.userMenuItems.logout.click();
+  }
+
+  async clickSwitchToClassicUI(): Promise<void> {
+    await this.userMenuItems.switchToClassicUI.click();
+  }
+
+  async isHeaderVisible(): Promise<boolean> {
+    return this.header.isVisible();
+  }
+
+  async getUsernameText(): Promise<string> {
+    return (await this.userBadge.textContent()) || '';
+  }
+
+  async getConnectionStatus(): Promise<string> {
+    const status = await this.connectionStatusBadge.locator('.ant-badge-status-dot').getAttribute('class');
+    if (status?.includes('success')) {
+      return 'success';
+    }
+    if (status?.includes('error')) {
+      return 'error';
+    }
+    return 'unknown';
+  }
+
+  async isNotebookDropdownVisible(): Promise<boolean> {
+    return this.notebookDropdown.isVisible();
+  }
+
+  async isUserDropdownVisible(): Promise<boolean> {
+    return this.userDropdown.isVisible();
+  }
+
+  async isLogoutMenuItemVisible(): Promise<boolean> {
+    return this.userMenuItems.logout.isVisible();
+  }
+
+  async searchNote(query: string): Promise<void> {
+    await this.searchInput.waitFor({ state: 'visible', timeout: 10000 });
+    await this.searchInput.fill(query);
+    await this.page.keyboard.press('Enter');
+  }
+}

zeppelin-web-angular/e2e/models/header-page.util.ts

@@ -0,0 +1,134 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, Page } from '@playwright/test';
+import { HeaderPage } from './header-page';
+import { AboutZeppelinModal } from './about-zeppelin-modal';
+import { NodeListPage } from './node-list-page';
+
+export class HeaderPageUtil {
+  constructor(
+    private readonly page: Page,
+    private readonly headerPage: HeaderPage
+  ) {}
+
+  async verifyHeaderIsDisplayed(): Promise<void> {
+    await expect(this.headerPage.header).toBeVisible();
+    await expect(this.headerPage.brandLogo).toBeVisible();
+    await expect(this.headerPage.notebookMenuItem).toBeVisible();
+    await expect(this.headerPage.jobMenuItem).toBeVisible();
+    await expect(this.headerPage.userDropdownTrigger).toBeVisible();
+    await expect(this.headerPage.searchInput).toBeVisible();
+    await expect(this.headerPage.themeToggleButton).toBeVisible();
+  }
+
+  async verifyNavigationToHomePage(): Promise<void> {
+    await this.headerPage.clickBrandLogo();
+    await this.page.waitForURL(/\/(#\/)?$/);
+    const url = this.page.url();
+    expect(url).toMatch(/\/(#\/)?$/);
+  }
+
+  async verifyNavigationToJobManager(): Promise<void> {
+    await this.headerPage.clickJobMenu();
+    await this.page.waitForURL(/jobmanager/);
+    expect(this.page.url()).toContain('jobmanager');
+  }
+
+  async verifyUserDropdownOpens(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await expect(this.headerPage.userMenuItems.aboutZeppelin).toBeVisible();
+  }
+
+  async verifyNotebookDropdownOpens(): Promise<void> {
+    await this.headerPage.clickNotebookMenu();
+    await expect(this.headerPage.notebookDropdown).toBeVisible();
+
+    const nodeList = new NodeListPage(this.page);
+    await expect(nodeList.createNewNoteButton).toBeVisible();
+  }
+
+  async verifyAboutZeppelinModalOpens(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await this.headerPage.clickAboutZeppelin();
+
+    const aboutModal = new AboutZeppelinModal(this.page);
+    await expect(aboutModal.modal).toBeVisible();
+  }
+
+  async verifySearchNavigation(query: string): Promise<void> {
+    await this.headerPage.searchNote(query);
+    await this.page.waitForURL(/search/);
+    expect(this.page.url()).toContain('search');
+    expect(this.page.url()).toContain(query);
+  }
+
+  async verifyConnectionStatus(): Promise<void> {
+    const status = await this.headerPage.getConnectionStatus();
+    expect(['success', 'error']).toContain(status);
+  }
+
+  async verifyUserMenuItemsVisible(isLoggedIn: boolean): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await expect(this.headerPage.userMenuItems.aboutZeppelin).toBeVisible();
+    await expect(this.headerPage.userMenuItems.interpreter).toBeVisible();
+    await expect(this.headerPage.userMenuItems.notebookRepos).toBeVisible();
+    await expect(this.headerPage.userMenuItems.credential).toBeVisible();
+    await expect(this.headerPage.userMenuItems.configuration).toBeVisible();
+    await expect(this.headerPage.userMenuItems.switchToClassicUI).toBeVisible();
+
+    if (isLoggedIn) {
+      const username = await this.headerPage.getUsernameText();
+      expect(username).not.toBe('anonymous');
+      await expect(this.headerPage.userMenuItems.logout).toBeVisible();
+    }
+  }
+
+  async openNotebookDropdownAndVerifyNodeList(): Promise<void> {
+    await this.headerPage.clickNotebookMenu();
+    await expect(this.headerPage.notebookDropdown).toBeVisible();
+
+    const nodeList = new NodeListPage(this.page);
+    await expect(nodeList.createNewNoteButton).toBeVisible();
+    await expect(nodeList.importNoteButton).toBeVisible();
+    await expect(nodeList.filterInput).toBeVisible();
+    await expect(nodeList.treeView).toBeVisible();
+  }
+
+  async navigateToInterpreterSettings(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await this.headerPage.clickInterpreter();
+    await this.page.waitForURL(/interpreter/);
+    expect(this.page.url()).toContain('interpreter');
+  }
+
+  async navigateToNotebookRepos(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await this.headerPage.clickNotebookRepos();
+    await this.page.waitForURL(/notebook-repos/);
+    expect(this.page.url()).toContain('notebook-repos');
+  }
+
+  async navigateToCredential(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await this.headerPage.clickCredential();
+    await this.page.waitForURL(/credential/);
+    expect(this.page.url()).toContain('credential');
+  }
+
+  async navigateToConfiguration(): Promise<void> {
+    await this.headerPage.clickUserDropdown();
+    await this.headerPage.clickConfiguration();
+    await this.page.waitForURL(/configuration/);
+    expect(this.page.url()).toContain('configuration');
+  }
+}