Merge pull request #8913 from weseek/support/148769-replace-tests-with-playwright

support: Replace tests with Playwright (20-basic-features/20-basic-features--sticky-features.cy.ts)

apps/app/playwright/20-basic-features/click-page-icons.spec.ts

@@ -1,49 +1,50 @@
 import { test, expect } from '@playwright/test';
 
-test('Successfully Subscribe/Unsubscribe a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const subscribeButton = page.locator('.btn-subscribe');
+test.describe('Click page icons', () => {
+  test.beforeEach(async({ page }) => {
+    await page.goto('/Sandbox');
+  });
 
-  // Subscribe
-  await subscribeButton.click();
-  await expect(subscribeButton).toHaveClass(/active/);
+  test('Successfully Subscribe/Unsubscribe a page', async({ page }) => {
+    const subscribeButton = page.locator('.btn-subscribe');
 
-  // Unsubscribe
-  await subscribeButton.click();
-  await expect(subscribeButton).not.toHaveClass(/active/);
-});
+    // Subscribe
+    await subscribeButton.click();
+    await expect(subscribeButton).toHaveClass(/active/);
 
-test('Successfully Like/Unlike a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const likeButton = page.locator('.btn-like').first();
+    // Unsubscribe
+    await subscribeButton.click();
+    await expect(subscribeButton).not.toHaveClass(/active/);
+  });
 
-  // Like
-  await likeButton.click();
-  await expect(likeButton).toHaveClass(/active/);
+  test('Successfully Like/Unlike a page', async({ page }) => {
+    const likeButton = page.locator('.btn-like').first();
 
-  // Unlike
-  await likeButton.click();
-  await expect(likeButton).not.toHaveClass(/active/);
-});
+    // Like
+    await likeButton.click();
+    await expect(likeButton).toHaveClass(/active/);
 
-test('Successfully Bookmark / Unbookmark a page', async({ page }) => {
-  await page.goto('/Sandbox');
-  const bookmarkButton = page.locator('.btn-bookmark').first();
+    // Unlike
+    await likeButton.click();
+    await expect(likeButton).not.toHaveClass(/active/);
+  });
 
-  // Bookmark
-  await bookmarkButton.click();
-  await expect(bookmarkButton).toHaveClass(/active/);
+  test('Successfully Bookmark / Unbookmark a page', async({ page }) => {
+    const bookmarkButton = page.locator('.btn-bookmark').first();
 
-  // Unbookmark
-  await page.locator('.grw-bookmark-folder-menu-item').click();
-  await expect(bookmarkButton).not.toHaveClass(/active/);
-});
+    // Bookmark
+    await bookmarkButton.click();
+    await expect(bookmarkButton).toHaveClass(/active/);
 
-test('Successfully display list of "seen by user"', async({ page }) => {
-  await page.goto('/Sandbox');
+    // Unbookmark
+    await page.locator('.grw-bookmark-folder-menu-item').click();
+    await expect(bookmarkButton).not.toHaveClass(/active/);
+  });
 
-  await page.locator('.btn-seen-user').click();
+  test('Successfully display list of "seen by user"', async({ page }) => {
+    await page.locator('.btn-seen-user').click();
 
-  const imgCount = await page.locator('.user-list-content').locator('img').count();
-  expect(imgCount).toBe(1);
+    const imgCount = await page.locator('.user-list-content').locator('img').count();
+    expect(imgCount).toBe(1);
+  });
 });

apps/app/playwright/20-basic-features/sticky-features.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Sticky features', () => {
+  test.beforeEach(async({ page }) => {
+    await page.goto('/');
+  });
+
+  test('Subnavigation displays changes on scroll down and up', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Scroll back to top
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
+  });
+
+  test('Subnavigation is not displayed when move to other pages', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Move to /Sandbox page
+    await page.goto('/Sandbox');
+    await expect(page.locator('.sticky-outer-wrapper').first()).not.toHaveClass(/active/);
+  });
+
+  test('Able to click buttons on subnavigation switcher when sticky', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 250));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Click editor button
+    await page.getByTestId('editor-button').click();
+    await expect(page.locator('.layout-root')).toHaveClass(/editing/);
+  });
+
+  test('Subnavigation is sticky when on small window', async({ page }) => {
+    // Scroll down to trigger sticky effect
+    await page.evaluate(() => window.scrollTo(0, 500));
+    await expect(page.locator('.sticky-outer-wrapper').first()).toHaveClass(/active/);
+
+    // Set viewport to small size
+    await page.setViewportSize({ width: 600, height: 1024 });
+    await expect(page.getByTestId('grw-contextual-sub-nav').getByTestId('grw-page-editor-mode-manager')).toBeVisible();
+  });
+});

apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -108,6 +108,7 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
         role="group"
         aria-label="page-editor-mode-manager"
         id="grw-page-editor-mode-manager"
+        data-testid="grw-page-editor-mode-manager"
       >
         {(isDeviceLargerThanMd || editorMode !== EditorMode.View) && (
           <PageEditorModeButton

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--sticky-features.cy.ts

@@ -1,93 +0,0 @@
-context('Access to any page', () => {
-  const ssPrefix = 'subnav-';
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-
-    cy.visit('/');
-
-    cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true, true);
-  });
-
-  it('Subnavigation displays changes on scroll down and up', () => {
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-       cy.scrollTo(0, 250);
-      // wait until
-      return cy.get('.sticky-outer-wrapper').should('have.class', 'active');
-    });
-
-    cy.waitUntilSkeletonDisappear();
-    cy.screenshot(`${ssPrefix}visible-on-scroll-down`);
-
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window back to top
-      cy.scrollTo(0, 0);
-      // wait until
-      return cy.get('.sticky-outer-wrapper').should('not.have.class', 'active');
-    });
-
-    cy.screenshot(`${ssPrefix}invisible-on-scroll-top`);
-  });
-
-  it('Subnavigation is not displayed when move to other pages', () => {
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-      cy.scrollTo(0, 250);
-      // wait until
-      return cy.get('.sticky-outer-wrapper').should('have.class', 'active');
-    });
-
-    // Move to /Sandbox page
-    cy.visit('/Sandbox');
-
-    cy.waitUntilSkeletonDisappear();
-    cy.collapseSidebar(true);
-
-    return cy.get('.sticky-outer-wrapper').should('not.have.class', 'active');
-    cy.screenshot(`${ssPrefix}not-visible-on-move-to-other-pages`);
-  });
-
-  it('Able to click buttons on subnavigation switcher when sticky', () => {
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 250px down is enough to trigger sticky effect
-      cy.scrollTo(0, 250);
-      // wait until
-      return cy.get('.sticky-outer-wrapper').should('have.class', 'active');
-    });
-    cy.waitUntil(() => {
-      cy.getByTestid('grw-contextual-sub-nav').within(() => {
-        cy.getByTestid('editor-button').as('editorButton').should('be.visible');
-        cy.get('@editorButton').click();
-      });
-      return cy.get('.layout-root').then($elem => $elem.hasClass('editing'));
-    });
-    cy.getByTestid('grw-editor-navbar-bottom').should('be.visible');
-    // cy.get('.CodeMirror').should('be.visible');
-    cy.screenshot(`${ssPrefix}open-editor-when-sticky`);
-  });
-
-  it('Subnavigation is sticky when on small window', () => {
-    cy.waitUntil(() => {
-      // do
-      // Scroll the window 500px down
-      cy.scrollTo(0, 500);
-      // wait until
-      return cy.get('.sticky-outer-wrapper').should('have.class', 'active');
-    });
-    cy.waitUntilSkeletonDisappear();
-    cy.viewport(600, 1024);
-    cy.getByTestid('grw-contextual-sub-nav').within(() => {
-      cy.get('#grw-page-editor-mode-manager').should('be.visible');
-    })
-    cy.screenshot(`${ssPrefix}sticky-on-small-window`);
-  });
-});