weseek__growi/apps/app/playwright/20-basic-features/use-tools.spec.ts

import { test, expect, type Page } from '@playwright/test';

const openPageItemControl = async(page: Page): Promise<void> => {
  const nav = page.getByTestId('grw-contextual-sub-nav');
  const button = nav.getByTestId('open-page-item-control-btn');

  // Wait for navigation element to be visible and attached
  await expect(nav).toBeVisible();
  await nav.waitFor({ state: 'visible' });

  // Wait for button to be visible, enabled and attached
  await expect(button).toBeVisible();
  await expect(button).toBeEnabled();
  await button.waitFor({ state: 'visible' });

  // Add a small delay to ensure the button is fully interactive
  await page.waitForTimeout(100);

  await button.click();
};

const openPutBackPageModal = async(page: Page): Promise<void> => {
  const alert = page.getByTestId('trash-page-alert');
  const button = alert.getByTestId('put-back-button');

  // Wait for alert element to be visible and attached
  await expect(alert).toBeVisible();
  await alert.waitFor({ state: 'visible' });

  // Wait for button to be visible, enabled and attached
  await expect(button).toBeVisible();
  await expect(button).toBeEnabled();
  await button.waitFor({ state: 'visible' });

  // Scroll to the top of the page to prevent the subnav hide the button
  await page.evaluate(() => {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0; // For Safari and older browsers
  });

  // Add a small delay to ensure scrolling is complete and the button is interactive
  await page.waitForTimeout(200); // Increased delay

  await button.click();
  await expect(page.getByTestId('put-back-page-modal')).toBeVisible();
};

test('Page Deletion and PutBack is executed successfully', async({ page }) => {
  await page.goto('/Sandbox/Bootstrap5');

  // Delete
  await openPageItemControl(page);
  await page.getByTestId('open-page-delete-modal-btn').click();
  await expect(page.getByTestId('page-delete-modal')).toBeVisible();
  await page.getByTestId('delete-page-button').click();

  // PutBack
  await openPutBackPageModal(page);
  await page.getByTestId('put-back-execution-button').click();
  await expect(page.getByTestId('trash-page-alert')).not.toBeVisible();
});

test('PageDuplicateModal is shown successfully', async({ page }) => {
  await page.goto('/Sandbox');

  await openPageItemControl(page);
  await page.getByTestId('open-page-duplicate-modal-btn').click();

  await expect(page.getByTestId('page-duplicate-modal')).toBeVisible();
});

test('PageMoveRenameModal is shown successfully', async({ page }) => {
  await page.goto('/Sandbox');

  await openPageItemControl(page);
  await page.getByTestId('rename-page-btn').click();

  await expect(page.getByTestId('page-rename-modal')).toBeVisible();
});

// TODO: Uncomment after https://redmine.weseek.co.jp/issues/149786
// test('PresentationModal for "/" is shown successfully', async({ page }) => {
//   await page.goto('/');

//   await openPageItemControl(page);
//   await page.getByTestId('open-presentation-modal-btn').click();

//   expect(page.getByTestId('page-presentation-modal')).toBeVisible();
// });

test.describe('Page Accessories Modal', () => {
  test.beforeEach(async({ page }) => {
    await page.goto('/');
    await openPageItemControl(page);
  });

  test('Page History is shown successfully', async({ page }) => {
    await page.getByTestId('open-page-accessories-modal-btn-with-history-tab').click();
    await expect(page.getByTestId(('page-history'))).toBeVisible();
  });

  test('Page Attachment Data is shown successfully', async({ page }) => {
    await page.getByTestId('open-page-accessories-modal-btn-with-attachment-data-tab').click();
    await expect(page.getByTestId('page-attachment')).toBeVisible();
  });

  test('Share Link Management is shown successfully', async({ page }) => {
    await page.getByTestId('open-page-accessories-modal-btn-with-share-link-management-data-tab').click();
    await expect(page.getByTestId('share-link-management')).toBeVisible();
  });
});

test('Successfully add new tag', async({ page }) => {
  const tag = 'we';
  await page.goto('/Sandbox/Bootstrap5');

  await page.locator('#edit-tags-btn-wrapper-for-tooltip').click();
  await expect(page.locator('#edit-tag-modal')).toBeVisible();
  await page.locator('.rbt-input-main').fill(tag);
  await expect(page.locator('#tag-typeahead-asynctypeahead-item-0')).toBeVisible();
  await page.locator('#tag-typeahead-asynctypeahead-item-0').click();
  await page.getByTestId('tag-edit-done-btn').click();
  await expect(page.getByTestId('grw-tag-labels')).toContainText(tag);
});