zeppelin-web-angular/e2e/tests/share/note-create/note-create-modal.spec.ts

/*
 * 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 { test, expect } from '@playwright/test';
import { HomePage } from '../../../models/home-page';
import { NoteCreateModal } from '../../../models/note-create-modal';
import { addPageAnnotationBeforeEach, PAGES, waitForZeppelinReady } from '../../../utils';

test.describe('Note Create Modal', () => {
  let homePage: HomePage;
  let noteCreateModal: NoteCreateModal;

  addPageAnnotationBeforeEach(PAGES.SHARE.NOTE_CREATE);

  test.beforeEach(async ({ page }) => {
    homePage = new HomePage(page);
    noteCreateModal = new NoteCreateModal(page);

    await page.goto('/');
    await waitForZeppelinReady(page);

    await homePage.clickCreateNewNote();
    await page.waitForSelector('input[name="noteName"]');
  });

  test('Given user clicks Create New Note, When modal opens, Then modal should display all required elements', async () => {
    await expect(noteCreateModal.modal).toBeVisible();
    await expect(noteCreateModal.noteNameInput).toBeVisible();
    await expect(noteCreateModal.createButton).toBeVisible();
    await expect(noteCreateModal.interpreterDropdown).toBeVisible();
    await expect(noteCreateModal.folderInfoAlert).toBeVisible();
    await expect(noteCreateModal.folderInfoAlert).toContainText('/');
  });

  test('Given Create Note modal is open, When checking default note name, Then auto-generated name should follow pattern', async () => {
    const noteName = await noteCreateModal.getNoteName();
    expect(noteName).toMatch(/Untitled Note \d+/);
  });

  test('Given Create Note modal is open, When entering custom note name and creating, Then new note should be created successfully', async ({
    page
  }) => {
    const uniqueName = `Test Note ${Date.now()}`;
    await noteCreateModal.setNoteName(uniqueName);
    await noteCreateModal.clickCreate();

    // Wait for modal to disappear
    await expect(noteCreateModal.modal).not.toBeVisible();

    await expect(page).toHaveURL(/notebook\//);

    // Verify the note was created with the correct name
    const notebookTitle = page.locator('[data-testid="notebook-title"]');
    await expect(notebookTitle).toContainText(uniqueName);

    // Verify in the navigation tree if available
    await page.goto('/#/');
    await waitForZeppelinReady(page);
    await page.locator('zeppelin-node-list').waitFor({ state: 'visible', timeout: 15000 });
    const noteInTree = page.getByRole('link', { name: uniqueName });
    await expect(noteInTree).toBeVisible();
  });

  test('Given Create Note modal is open, When entering note name with folder path, Then note should be created in folder', async ({
    page
  }) => {
    const folderPath = `/TestFolder/SubFolder`;
    const noteName = `Note ${Date.now()}`;
    const fullPath = `${folderPath}/${noteName}`;

    await noteCreateModal.setNoteName(fullPath);
    await noteCreateModal.clickCreate();

    // Wait for modal to disappear
    await expect(noteCreateModal.modal).not.toBeVisible();

    await expect(page).toHaveURL(/notebook\//);

    // Verify the note was created with the correct name (without folder path)
    const notebookTitle = page.locator('[data-testid="notebook-title"]');
    await expect(notebookTitle).toContainText(noteName);

    // Verify the folder structure was created
    await page.goto('/#/');
    await waitForZeppelinReady(page);
    await page.locator('zeppelin-node-list').waitFor({ state: 'visible', timeout: 15000 });
    await expect(page.locator('a.name[data-testid="folder-TestFolder"]')).toBeVisible();
  });

  test('Given Create Note modal is open, When clicking close button, Then modal should close', async () => {
    await noteCreateModal.close();
    await expect(noteCreateModal.modal).not.toBeVisible();
  });

  test('Given Create Note modal is open, When viewing folder info alert, Then alert should contain folder creation instructions', async () => {
    await expect(noteCreateModal.folderInfoAlert).toBeVisible();
    await expect(noteCreateModal.folderInfoAlert).toContainText("Use '/' to create folders");
  });
});