blog/test/e2e/header.spec.ts

import { test, expect } from '@playwright/test'

test.beforeEach(async ({ page }) => {
  await page.goto('/gatsby-redirect-from/')
})

test('matches screenshot', async ({ page }) => {
  await expect(page.locator('header[aria-label="Header"]')).toHaveScreenshot()
})

test('all menu buttons are present', async ({ page }) => {
  const theme = page.getByTitle('Toggle Theme')
  const search = page.getByRole('button', { name: 'Search' })
  const menu = page.getByTitle('Menu')

  await expect(theme).toBeVisible()
  await expect(search).toBeVisible()
  await expect(menu).toBeVisible()
})

test('page menu is working', async ({ page }) => {
  const menuButton = page.getByTitle('Menu')
  const menu = page.locator('nav[aria-label="Pages"]')
  const body = page.locator('body')

  expect(menu).toBeHidden()
  expect(body).not.toHaveClass(/has-menu-open/)

  // open menu
  await menuButton.click()
  await expect(menu).toBeVisible()
  await expect(body).toHaveClass(/has-menu-open/)

  // close menu
  await menuButton.click()
  await expect(menu).toBeHidden()
  await expect(body).not.toHaveClass('has-menu-open')
})

test('search ui is working', async ({ page }) => {
  const search = page.getByRole('button', { name: 'Search' })
  const emptyMessage = 'Awaiting your input fellow web wanderer'

  // Mock the api call before search
  await page.route('*/**/api/posts', async (route) => {
    const json = [
      { data: { title: 'MomCorp Wallpaper' }, slug: 'momcorp-wallpaper' }
    ]
    await route.fulfill({ json })
  })

  // open search
  await search.click()
  await expect(page.getByText(emptyMessage)).toBeVisible()

  // fill search field
  const searchField = page.getByPlaceholder('Search everything')
  searchField.focus()
  await searchField.fill('wallpaper')
  await expect(page.getByText(emptyMessage)).toBeHidden()
  await expect(page.getByText('No results found')).toBeHidden()
  await expect(page.getByText('MomCorp Wallpaper')).toBeVisible()

  // empty search field
  await searchField.fill('')
  await expect(page.getByText(emptyMessage)).toBeVisible()

  // close search
  await page.getByRole('button', { name: 'Close search' }).click()
  await expect(searchField).toBeHidden()
})

test('theme toggle is working', async ({ page }) => {
  const themeToggle = page.getByTitle('Toggle Theme')
  const htmlElement = page.locator('html')

  // Check initial theme (assuming it's 'light' by default)
  await expect(htmlElement).toHaveAttribute('data-theme', 'light')

  // Click to toggle theme
  await themeToggle.click()
  await expect(htmlElement).toHaveAttribute('data-theme', 'dark')

  // Click to toggle theme back
  await themeToggle.click()
  await expect(htmlElement).toHaveAttribute('data-theme', 'light')
})