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();

  // Wait for button to be actionable
  await expect(button).toBeInViewport(); // Ensures it's visible within the viewport
  await expect(button).toBeEnabled(); // Ensures it's not disabled

  // Click the button. Playwright's click action automatically waits for the element
  // to be actionable (visible, stable, enabled, unobscured).
  // Retry clicking the button until the modal is visible or retries are exhausted
  for (let i = 0; i < 5; i++) {
    // eslint-disable-next-line no-await-in-loop
    await button.click({ force: true });
    try {
      // Wait for a short period to see if the modal appears
      // eslint-disable-next-line no-await-in-loop
      await page.waitForSelector('[data-testid="put-back-page-modal"]', { state: 'visible', timeout: 500 });
      break; // Modal appeared, exit loop
    }
    catch (error) {
      // Modal did not appear, wait a bit before retrying
      if (i < 4) { // Don't wait after the last attempt
        // eslint-disable-next-line no-await-in-loop
        await page.waitForTimeout(1000);
      }
    }
  }

  // Assert that the modal is visible after retries
  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);
});