test: add e2e tests for tempalte

This commit is contained in:
Nurul Huda (Apon) 2026-04-14 14:38:11 +06:00
parent e74562badf
commit cd8c912f2f
No known key found for this signature in database
GPG Key ID: 5D3F1DE2855A2F79
4 changed files with 90 additions and 1 deletions

View File

@ -74,7 +74,7 @@ export default defineConfig({
command: 'zig build dev',
cwd: '../../',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
reuseExistingServer: process.env.TEMPLATE_TESTS || !process.env.CI,
// Wait for 5 mins for the server to start, since zig build can be slow on the first run
timeout: 1000 * 60 * 5,
},

View File

@ -0,0 +1,38 @@
import { test, expect } from '@playwright/test';
if (process.env.TEMPLATE_TESTS){
test.describe('Template Home UI and Navigation', () => {
test('Counter supports increment, decrement, and reset from any numeric state', async ({ page }) => {
// 1. Capture initial counter value (do not hardcode, treat as dynamic baseline).
await page.goto('http://localhost:3000/');
const counter = page.locator('main h5');
const baseline = Number((await counter.textContent()) ?? 'NaN');
expect(Number.isInteger(baseline)).toBeTruthy();
// 2. Click Increment once.
await page.getByRole('button', { name: 'Increment' }).click();
const afterIncrement = Number((await counter.textContent()) ?? 'NaN');
expect(afterIncrement).toBe(baseline + 1);
// 3. Click Decrement twice.
await page.getByRole('button', { name: 'Decrement' }).click();
await page.getByRole('button', { name: 'Decrement' }).click();
const afterTwoDecrements = Number((await counter.textContent()) ?? 'NaN');
expect(afterTwoDecrements).toBe(afterIncrement - 2);
// 4. Click Reset.
await page.getByRole('button', { name: 'Reset' }).click();
await expect(counter).toHaveText('0');
// 5. Click Decrement repeatedly (for example 10-15 times).
for (let i = 0; i < 12; i++) {
await page.getByRole('button', { name: 'Decrement' }).click();
}
const negativeValue = Number((await counter.textContent()) ?? 'NaN');
expect(negativeValue).toBeLessThan(0);
await expect(page.getByRole('button', { name: 'Increment' })).toBeVisible();
});
});
}

View File

@ -0,0 +1,30 @@
import { test, expect } from '@playwright/test';
if (process.env.TEMPLATE_TESTS) {
test.describe('Template Home UI and Navigation', () => {
test('Home page renders critical content and controls', async ({ page }) => {
// 1. Navigate to http://localhost:3000/ from a fresh browser context.
await page.goto('http://localhost:3000/');
// 2. Locate primary calls-to-action and controls.
await expect(page).toHaveTitle('Ziex');
await expect(page.getByRole('heading', { name: 'Ziex' })).toBeVisible();
await expect(page.getByText('Ziex is a framework for building web applications with Zig.')).toBeVisible();
const docsLink = page.getByRole('link', { name: 'See Ziex Docs →' });
await expect(docsLink).toBeVisible();
await expect(docsLink).toHaveAttribute('href', 'https://ziex.dev');
await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Decrement' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Increment' })).toBeVisible();
const value = Number((await page.locator('main h5').textContent()) ?? 'NaN');
expect(Number.isInteger(value)).toBeTruthy();
const aboutLink = page.getByRole('link', { name: 'Navigate to About Page' });
await expect(aboutLink).toBeVisible();
await expect(aboutLink).toHaveAttribute('href', '/about');
});
});
}

View File

@ -0,0 +1,21 @@
import { test, expect } from '@playwright/test';
if (process.env.TEMPLATE_TESTS) {
test.describe('Template Home UI and Navigation', () => {
test('Internal routing between Home and About works and returns cleanly', async ({ page }) => {
// 1. From home page, click 'Navigate to About Page'.
await page.goto('http://localhost:3000/');
await page.getByRole('link', { name: 'Navigate to About Page' }).click();
await expect(page).toHaveURL(/\/about$/);
await expect(page.getByRole('heading', { name: 'Ziex' })).toBeVisible();
await expect(page.getByRole('link', { name: 'Back to Home' })).toBeVisible();
// 2. Click 'Back to Home'.
await page.getByRole('link', { name: 'Back to Home' }).click();
await expect(page).toHaveURL(/\/$/);
await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Decrement' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Increment' })).toBeVisible();
});
});
}