48949ebb3f
A complete blockchain implementation featuring: - synord: Full node with GHOSTDAG consensus - explorer-web: Modern React blockchain explorer with 3D DAG visualization - CLI wallet and tools - Smart contract SDK and example contracts (DEX, NFT, token) - WASM crypto library for browser/mobile
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Mobile Navigation', () => {
|
|
test.use({ viewport: { width: 375, height: 812 } }); // iPhone X
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/');
|
|
});
|
|
|
|
test('hamburger menu opens and closes', async ({ page }) => {
|
|
// Find hamburger menu button
|
|
const menuButton = page.getByRole('button', { name: /navigation menu/i });
|
|
await expect(menuButton).toBeVisible();
|
|
|
|
// Menu should be closed initially
|
|
await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
|
|
|
|
// Open menu
|
|
await menuButton.click();
|
|
await expect(menuButton).toHaveAttribute('aria-expanded', 'true');
|
|
|
|
// Navigation links should be visible
|
|
await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
|
|
await expect(page.getByRole('link', { name: 'Blocks' })).toBeVisible();
|
|
await expect(page.getByRole('link', { name: 'Mempool' })).toBeVisible();
|
|
await expect(page.getByRole('link', { name: 'DAG' })).toBeVisible();
|
|
|
|
// Close menu
|
|
await menuButton.click();
|
|
await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
test('mobile navigation links work', async ({ page }) => {
|
|
// Open menu
|
|
const menuButton = page.getByRole('button', { name: /navigation menu/i });
|
|
await menuButton.click();
|
|
|
|
// Click Blocks link
|
|
await page.getByRole('navigation', { name: /mobile/i }).getByRole('link', { name: 'Blocks' }).click();
|
|
|
|
// Should navigate to blocks page
|
|
await expect(page).toHaveURL(/\/blocks/);
|
|
|
|
// Menu should close after navigation
|
|
await expect(menuButton).toHaveAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
test('theme toggle is accessible in mobile menu', async ({ page }) => {
|
|
// Open menu
|
|
const menuButton = page.getByRole('button', { name: /navigation menu/i });
|
|
await menuButton.click();
|
|
|
|
// Theme toggle buttons should be visible
|
|
await expect(page.getByRole('button', { name: /light theme/i })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /dark theme/i })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /system theme/i })).toBeVisible();
|
|
});
|
|
|
|
test('mobile search is accessible in menu', async ({ page }) => {
|
|
// Open menu
|
|
const menuButton = page.getByRole('button', { name: /navigation menu/i });
|
|
await menuButton.click();
|
|
|
|
// Search input should be visible
|
|
const searchInput = page.getByRole('combobox', { name: /search/i });
|
|
await expect(searchInput).toBeVisible();
|
|
});
|
|
});
|