mirror of https://github.com/kremalicious/blog.git
88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
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')
|
|
})
|