Merge pull request #8907 from weseek/support/148649-replace-tests-with-playwright

support: Replace tests with playwright (20-basic-features/20-basic-features--access-to-pagelist)

apps/app/playwright/20-basic-features/access-to-pagelist.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const openPageAccessoriesModal = async(page: Page): Promise<void> => {
+  await page.goto('/');
+  await page.getByTestId('pageListButton').click();
+  await expect(page.getByTestId('descendants-page-list-modal')).toBeVisible();
+};
+
+test('Page list modal is successfully opened', async({ page }) => {
+  await openPageAccessoriesModal(page);
+  await expect(page.getByTestId('page-list-item-L').first()).not.toContainText('You cannot see this page');
+});
+
+test('Successfully open PageItemControl', async({ page }) => {
+  await openPageAccessoriesModal(page);
+  await page.getByTestId('page-list-item-L').first().getByTestId('open-page-item-control-btn').click();
+  await expect(page.locator('.dropdown-menu.show')).toBeVisible();
+});
+
+test('Successfully close modal', async({ page }) => {
+  await openPageAccessoriesModal(page);
+  await page.locator('.btn-close').click();
+  await expect(page.getByTestId('descendants-page-list-modal')).not.toBeVisible();
+});
+
+test('Timeline list successfully openend', async({ page }) => {
+  await openPageAccessoriesModal(page);
+  await page.getByTestId('timeline-tab-button').click();
+  await expect(page.locator('.card-timeline').first()).toBeVisible();
+});

apps/app/src/components/DescendantsPageListModal.tsx

@@ -55,7 +55,7 @@ export const DescendantsPageListModal = (): JSX.Element => {
         isLinkEnabled: () => !isSharedUser,
       },
       timeline: {
-        Icon: () => <span className="material-symbols-outlined">timeline</span>,
+        Icon: () => <span data-testid="timeline-tab-button" className="material-symbols-outlined">timeline</span>,
         Content: () => {
           if (status == null || !status.isOpened) {
             return <></>;

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--access-to-pagelist.cy.ts

@@ -1,95 +0,0 @@
-const openPageAccessoriesModal = () => {
-  cy.visit('/');
-  cy.collapseSidebar(true);
-  cy.waitUntilSkeletonDisappear();
-
-  // open PageAccessoriesModal
-  cy.getByTestid('pageListButton').should('be.visible').click();
-  cy.getByTestid('descendants-page-list-modal').then($elem => $elem.is(':visible'));
-
-  // cy.waitUntil(() => {
-  //   // do
-  //   cy.getByTestid('pageListButton').click();
-  //   // wait until
-  //   return cy.getByTestid('descendants-page-list-modal').then($elem => $elem.is(':visible'));
-  // });
-
-  cy.waitUntilSpinnerDisappear();
-}
-
-context('Access to pagelist', () => {
-  const ssPrefix = 'access-to-pagelist-';
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-
-    openPageAccessoriesModal();
-  });
-
-  it('Page list modal is successfully opened ', () => {
-    // Wait until the string "You cannot see this page" is no longer displayed
-    cy.getByTestid('page-list-item-L').eq(0).within(() => {
-      cy.get('.material-symbols-outlined').contains('error').should('not.exist');
-    });
-
-    cy.waitUntilSpinnerDisappear();
-    cy.waitUntilSkeletonDisappear();
-    cy.screenshot(`${ssPrefix}1-open-pagelist-modal`);
-  });
-
-  it('Successfully open PageItemControl', () => {
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('descendants-page-list-modal').within(() => {
-        cy.getByTestid('page-list-item-L').first().within(() => {
-          cy.getByTestid('open-page-item-control-btn').click();
-        });
-      });
-      // wait until
-      return cy.get('.dropdown-menu.show').then($elem => $elem.is(':visible'));
-    });
-
-    cy.get('.dropdown-menu.show').within(() => {
-      cy.getByTestid('open-page-duplicate-modal-btn').should('be.visible')
-    });
-
-    cy.waitUntilSkeletonDisappear();
-    cy.waitUntilSpinnerDisappear();
-    cy.screenshot(`${ssPrefix}2-open-page-item-control-menu`);
-  });
-
-  it('Successfully expand and close modal', () => {
-    cy.get('.btn-close').eq(0).click();
-
-    cy.waitUntilSkeletonDisappear();
-    cy.waitUntilSpinnerDisappear();
-    cy.screenshot(`${ssPrefix}7-page-list-modal-size-fullscreen`);
-
-    // Check that the modal has been closed
-    cy.getByTestid('descendants-page-list-modal').should('not.be.visible')
-    cy.screenshot(`${ssPrefix}8-close-page-list-modal`);
-  });
-});
-
-context('Access to timeline', () => {
-  const ssPrefix = 'access-to-timeline-';
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-
-    openPageAccessoriesModal();
-  });
-
-  it('Timeline list successfully openend', () => {
-    cy.getByTestid('descendants-page-list-modal').parent().should('have.class','show').within(() => {
-      cy.get('.nav-title > li').eq(1).find('a').click();
-    });
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(500); // wait for loading wiki
-    cy.screenshot(`${ssPrefix}1-timeline-list`);
-  });
-});