Add Playwright test

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

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+test('Subnavigation displays changes on scroll down and up', async({ page }) => {
+  await page.goto('/');
+
+  // 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 }) => {
+  await page.goto('/');
+
+  // 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 }) => {
+  await page.goto('/');
+
+  // 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 }) => {
+  await page.goto('/');
+
+  // 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();
+});