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

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