[ZEPPELIN-6358] Add E2E tests about /#/notebook/:noteid for New UI

zeppelin-web-angular/e2e/global-teardown.ts

@@ -17,6 +17,67 @@ async function globalTeardown() {
 
   LoginTestUtil.resetCache();
   console.log('✅ Test cache cleared');
+
+  // Clean up test notebooks that may have been left behind due to test failures
+  if (!process.env.CI) {
+    await cleanupTestNotebooks();
+  } else {
+    console.log('ℹ️ Skipping test notebook cleanup in CI environment.');
+  }
+}
+
+async function cleanupTestNotebooks() {
+  try {
+    console.log('🗂️ Cleaning up test notebooks...');
+
+    const baseURL = 'http://localhost:4200';
+
+    // Get all notebooks
+    const response = await fetch(`${baseURL}/api/notebook`);
+    const data = await response.json();
+
+    if (!data.body || !Array.isArray(data.body)) {
+      console.log('No notebooks found or invalid response format');
+      return;
+    }
+
+    // Filter notebooks that start with "Test Notebook" (created by createTestNotebook)
+    const testNotebooks = data.body.filter(
+      (notebook: { path: string }) => notebook.path && notebook.path.startsWith('/Test Notebook ')
+    );
+
+    if (testNotebooks.length === 0) {
+      console.log('✅ No test notebooks to clean up');
+      return;
+    }
+
+    console.log(`Found ${testNotebooks.length} test notebooks to delete`);
+
+    // Delete test notebooks
+    for (const notebook of testNotebooks) {
+      try {
+        console.log(`Deleting test notebook: ${notebook.id} (${notebook.path})`);
+        const deleteResponse = await fetch(`${baseURL}/api/notebook/${notebook.id}`, {
+          method: 'DELETE'
+        });
+
+        if (deleteResponse.ok) {
+          console.log(`✅ Deleted: ${notebook.path}`);
+        } else {
+          console.warn(`⚠️ Failed to delete ${notebook.path}: ${deleteResponse.status}`);
+        }
+
+        // Small delay to avoid overwhelming the server
+        await new Promise(resolve => setTimeout(resolve, 50));
+      } catch (error) {
+        console.warn(`⚠️ Error deleting notebook ${notebook.id}:`, error);
+      }
+    }
+
+    console.log('✅ Test notebook cleanup completed');
+  } catch (error) {
+    console.warn('⚠️ Failed to cleanup test notebooks:', error);
+  }
 }
 
 export default globalTeardown;

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

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

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

@@ -0,0 +1,169 @@
+/*
+ * 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 FolderRenamePage extends BasePage {
+  readonly folderList: Locator;
+  readonly contextMenu: Locator;
+  readonly renameMenuItem: Locator;
+  readonly deleteMenuItem: Locator;
+  readonly moveToTrashMenuItem: Locator;
+  readonly renameModal: Locator;
+  readonly renameInput: Locator;
+  readonly confirmButton: Locator;
+  readonly cancelButton: Locator;
+  readonly validationError: Locator;
+  readonly deleteIcon: Locator;
+  readonly deleteConfirmation: Locator;
+  readonly deleteConfirmButton: Locator;
+  readonly deleteCancelButton: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.folderList = page.locator('zeppelin-node-list');
+    this.contextMenu = page.locator('.operation'); // Operation buttons area instead of dropdown
+    this.renameMenuItem = page.locator('a[nz-tooltip][nztooltiptitle="Rename folder"]').first();
+    this.deleteMenuItem = page.locator('a[nz-tooltip][nztooltiptitle="Move folder to Trash"]').first();
+    this.moveToTrashMenuItem = page.locator('a[nz-tooltip][nztooltiptitle="Move folder to Trash"]').first();
+    this.renameModal = page.locator('.ant-modal');
+    this.renameInput = page.locator('input[placeholder="Insert New Name"]');
+    this.confirmButton = page.getByRole('button', { name: 'Rename' });
+    this.cancelButton = page.locator('.ant-modal-close-x'); // Modal close button
+    this.validationError = page.locator(
+      '.ant-form-item-explain, .error-message, .validation-error, .ant-form-item-explain-error'
+    );
+    this.deleteIcon = page.locator('i[nz-icon][nztype="delete"]');
+    this.deleteConfirmation = page.locator('.ant-popover').filter({ hasText: 'This folder will be moved to trash.' });
+    this.deleteConfirmButton = page.getByRole('button', { name: 'OK' }).last();
+    this.deleteCancelButton = page.getByRole('button', { name: 'Cancel' }).last();
+  }
+
+  async hoverOverFolder(folderName: string): Promise<void> {
+    // Wait for the folder list to be loaded
+    await this.folderList.waitFor({ state: 'visible' });
+
+    // Find the folder node by locating the .node that contains the specific folder name
+    // Use a more reliable selector that targets the folder name exactly
+    const folderNode = this.page
+      .locator('.node')
+      .filter({
+        has: this.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first();
+
+    // Wait for the folder to be visible and hover over the entire .node container
+    await folderNode.waitFor({ state: 'visible' });
+    await folderNode.hover();
+
+    // Wait for hover effects to take place by checking for interactive elements
+    await folderNode
+      .locator('a[nz-tooltip], i[nztype], button')
+      .first()
+      .waitFor({
+        state: 'visible',
+        timeout: 2000
+      })
+      .catch(() => {
+        console.log('No interactive elements found after hover, continuing...');
+      });
+  }
+
+  async clickDeleteIcon(folderName: string): Promise<void> {
+    // First hover over the folder to reveal the delete icon
+    await this.hoverOverFolder(folderName);
+
+    // Find the specific folder node and its delete button
+    const folderNode = this.page
+      .locator('.node')
+      .filter({
+        has: this.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first();
+
+    const deleteIcon = folderNode.locator('a[nz-tooltip][nztooltiptitle="Move folder to Trash"]');
+    await deleteIcon.click();
+  }
+
+  async clickRenameMenuItem(folderName: string): Promise<void> {
+    if (folderName) {
+      // Ensure the specific folder is hovered first
+      await this.hoverOverFolder(folderName);
+
+      // Find the specific folder node and its rename button
+      const folderNode = this.page
+        .locator('.node')
+        .filter({
+          has: this.page.locator('.folder .name', { hasText: folderName })
+        })
+        .first();
+
+      const renameIcon = folderNode.locator('a[nz-tooltip][nztooltiptitle="Rename folder"]');
+      await renameIcon.click();
+
+      // Wait for modal to appear by checking for its presence
+      await this.renameModal.waitFor({ state: 'visible', timeout: 3000 });
+    } else {
+      // Fallback to generic rename button (now using .first() to avoid strict mode)
+      await this.renameMenuItem.click();
+      await this.renameModal.waitFor({ state: 'visible', timeout: 3000 });
+    }
+  }
+
+  async enterNewName(name: string): Promise<void> {
+    await this.renameInput.fill(name);
+  }
+
+  async clearNewName(): Promise<void> {
+    await this.renameInput.clear();
+  }
+
+  async clickConfirm(): Promise<void> {
+    await this.confirmButton.click();
+
+    // Wait for validation or submission to process by monitoring modal state
+    await this.page
+      .waitForFunction(
+        () => {
+          // Check if modal is still open or if validation errors appeared
+          const modal = document.querySelector('.ant-modal-wrap');
+          const validationErrors = document.querySelectorAll('.ant-form-item-explain-error, .has-error');
+
+          // If modal closed or validation errors appeared, processing is complete
+          return !modal || validationErrors.length > 0 || (modal && getComputedStyle(modal).display === 'none');
+        },
+        { timeout: 2000 }
+      )
+      .catch(() => {
+        console.log('Modal state check timeout, continuing...');
+      });
+  }
+
+  async clickCancel(): Promise<void> {
+    await this.cancelButton.click();
+  }
+
+  async isRenameModalVisible(): Promise<boolean> {
+    return this.renameModal.isVisible();
+  }
+
+  async isFolderVisible(folderName: string): Promise<boolean> {
+    return this.page
+      .locator('.node')
+      .filter({
+        has: this.page.locator('.folder .name', { hasText: folderName })
+      })
+      .first()
+      .isVisible();
+  }
+}