Skip to content

Commit 6531041

Browse files
Austin1serbAustin1serb
committed
fix: Fixed playwright tests, and added cli script
1 parent e9bd137 commit 6531041

File tree

7 files changed

+56
-189
lines changed

7 files changed

+56
-189
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"prepack:core": "pnpm -F @austinserb/react-zero-ui pack --pack-destination ./dist",
1313
"i-tarball": "node scripts/install-local-tarball.js",
1414
"lint": "eslint .",
15-
"lint:fix": "eslint . --fix"
15+
"lint:fix": "eslint . --fix",
16+
"test:all": "pnpm install --frozen-lockfile && pnpm prepack:core && pnpm lint && pnpm i-tarball && pnpm test"
1617
},
1718
"devDependencies": {
1819
"eslint": "^9.0.0",

‎packages/core/__tests__/config/playwright.next.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default defineConfig({
2525
projects: [
2626
{
2727
name: "next-e2e",
28-
testMatch: /.*next\.spec\.js/,
28+
testMatch: /.*next.*\.spec\.js/, // Matches both cli-next.spec.js and next.spec.js
2929
use: {
3030
baseURL: BASE_URL,
3131
},

‎packages/core/__tests__/config/playwright.vite.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default defineConfig({
2525
projects: [
2626
{
2727
name: "vite-e2e",
28-
testMatch: /.*vite\.spec\.js/,
28+
testMatch: /.*vite.*\.spec\.js/, // Matches both cli-vite.spec.js and vite.spec.js
2929
use: {
3030
baseURL: BASE_URL,
3131
},

‎packages/core/__tests__/e2e/next.spec.js‎

Lines changed: 24 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,33 @@
1-
21
import { test, expect } from '@playwright/test';
32

3+
// Table-driven so every toggle runs in its own fresh browser context.
4+
const scenarios = [
5+
{ toggle: 'theme-toggle', attr: 'data-theme' },
6+
{ toggle: 'theme-toggle-secondary', attr: 'data-theme-2' },
7+
{ toggle: 'theme-toggle-3', attr: 'data-theme-three' },
8+
];
49

10+
test.describe('Zero-UI Next Integration', () => {
11+
for (const { toggle, attr } of scenarios) {
12+
test(`toggles <${attr}> from light → dark`, async ({ page }) => {
13+
// 1️⃣ Load fully hydrated page
14+
await page.goto('/', { waitUntil: 'networkidle' });
15+
console.log(`✅ page loaded testing ${attr} from light → dark`);
516

17+
const body = page.locator('body');
18+
const button = page.getByTestId(toggle);
619

7-
test.describe('Zero-UI Next.js Integration', () => {
8-
9-
10-
test('Browser loads initial theme on body', async ({ page }) => {
11-
12-
await page.goto('/', { waitUntil: 'networkidle' });
13-
14-
// body attribute check + theme = initial theme
15-
const theme = await page.getAttribute('body', 'data-theme');
16-
expect(theme).toBe('light');
17-
});
18-
19-
test('theme toggles on button click', async ({ page }) => {
20-
await page.goto('/');
21-
22-
// Wait for hydration and button
23-
const button = page.getByTestId('theme-toggle');
24-
await expect(button).toBeVisible();
25-
26-
// Wait for container to ensure styles are applied
27-
const container = page.getByTestId('theme-container');
28-
await expect(container).toHaveClass(/theme-light:/); // initially light
29-
30-
// Read initial theme attribute
31-
const before = await page.getAttribute('body', 'data-theme');
32-
console.log('🌞 before:', before);
33-
34-
// Click to toggle
35-
await button.click();
36-
37-
// Wait for DOM to reflect change
38-
await page.waitForTimeout(100); // Optional: add debounce if needed
39-
const after = await page.getAttribute('body', 'data-theme');
40-
console.log('🌙 after:', after);
41-
42-
// Assertion
43-
expect(before).toBe('light');
44-
expect(after).toBe('dark');
45-
});
46-
47-
test('theme2 toggles on button click', async ({ page }) => {
48-
await page.goto('/');
49-
50-
// Wait for hydration and button
51-
const button = page.getByTestId('theme-toggle-secondary');
52-
await expect(button).toBeVisible();
53-
54-
// Wait for container to ensure styles are applied
55-
const container = page.getByTestId('theme-container-secondary');
56-
await expect(container).toHaveClass(/theme-2-light:/); // initially light
57-
58-
// Read initial theme attribute
59-
const before = await page.getAttribute('body', 'data-theme-2');
60-
console.log('🌞 before:', before);
61-
62-
// Click to toggle
63-
await button.click();
64-
65-
// Wait for DOM to reflect change
66-
await page.waitForTimeout(100); // Optional: add debounce if needed
67-
const after = await page.getAttribute('body', 'data-theme-2');
68-
console.log('🌙 after:', after);
69-
70-
// Assertion
71-
expect(before).toBe('light');
72-
expect(after).toBe('dark');
73-
});
74-
75-
test('theme3 toggles on button click', async ({ page }) => {
76-
await page.goto('/');
77-
78-
// Wait for hydration and button
79-
const button = page.getByTestId('theme-toggle-3');
80-
await expect(button).toBeVisible();
81-
82-
// Wait for container to ensure styles are applied
83-
const container = page.getByTestId('theme-container-3');
84-
await expect(container).toHaveClass(/theme-three-light:/); // initially light
85-
86-
// Read initial theme attribute
87-
const before = await page.getAttribute('body', 'data-theme-three');
88-
console.log('🌞 before:', before);
8920

90-
// Click to toggle
91-
await button.click();
21+
// 2️⃣ Assert initial state
22+
await expect(body).toHaveAttribute(attr, 'light');
23+
await expect(button).toBeVisible((console.log(`✅ ${button} is visible`))); // auto-retries until true
9224

93-
// Wait for DOM to reflect change
94-
await page.waitForTimeout(100); // Optional: add debounce if needed
95-
const after = await page.getAttribute('body', 'data-theme-three');
96-
console.log('🌙 after:', after);
9725

98-
// Assertion
99-
expect(before).toBe('light');
100-
expect(after).toBe('dark');
101-
});
26+
// 3️⃣ Action
27+
await button.click((console.log(`✅ ${button} clicked`)));
10228

103-
});
29+
// 4️⃣ Final state
30+
await expect(body).toHaveAttribute(attr, 'dark', (console.log(`✅ body attr changes after click`)));
31+
});
32+
}
33+
});

‎packages/core/__tests__/e2e/vite.spec.js‎

Lines changed: 24 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,33 @@
1-
21
import { test, expect } from '@playwright/test';
32

4-
test.describe('Zero-UI Vite Integration', () => {
5-
6-
7-
test('Browser loads initial theme on body ⚛️', async ({ page }) => {
8-
9-
await page.goto('/', { waitUntil: 'domcontentloaded' });
10-
11-
// body attribute check + theme = initial theme
12-
const theme = await page.getAttribute('body', 'data-theme');
13-
expect(theme).toBe('light');
14-
});
15-
16-
test('theme toggles on button click', async ({ page }) => {
17-
await page.goto('/');
18-
19-
// Wait for hydration and button
20-
const button = page.getByTestId('theme-toggle');
21-
await expect(button).toBeVisible();
22-
23-
// Wait for container to ensure styles are applied
24-
const container = page.getByTestId('theme-container');
25-
await expect(container).toHaveClass(/theme-light:/); // initially light
26-
27-
// Read initial theme attribute
28-
const before = await page.getAttribute('body', 'data-theme');
29-
console.log('🌞 before:', before);
30-
31-
// Click to toggle
32-
await button.click();
3+
// Table-driven so every toggle runs in its own fresh browser context.
4+
const scenarios = [
5+
{ toggle: 'theme-toggle', attr: 'data-theme' },
6+
{ toggle: 'theme-toggle-secondary', attr: 'data-theme-2' },
7+
{ toggle: 'theme-toggle-3', attr: 'data-theme-three' },
8+
];
339

34-
// Wait for DOM to reflect change
35-
await page.waitForTimeout(100); // Optional: add debounce if needed
36-
const after = await page.getAttribute('body', 'data-theme');
37-
console.log('🌙 after:', after);
38-
39-
// Assertion
40-
expect(before).toBe('light');
41-
expect(after).toBe('dark');
42-
});
43-
44-
test('theme2 toggles on button click', async ({ page }) => {
45-
await page.goto('/');
46-
47-
// Wait for hydration and button
48-
const button = page.getByTestId('theme-toggle-secondary');
49-
await expect(button).toBeVisible();
50-
51-
// Wait for container to ensure styles are applied
52-
const container = page.getByTestId('theme-container-secondary');
53-
await expect(container).toHaveClass(/theme-2-light:/); // initially light
54-
55-
// Read initial theme attribute
56-
const before = await page.getAttribute('body', 'data-theme-2');
57-
console.log('🌞 before:', before);
58-
59-
// Click to toggle
60-
await button.click();
61-
62-
// Wait for DOM to reflect change
63-
await page.waitForTimeout(100); // Optional: add debounce if needed
64-
const after = await page.getAttribute('body', 'data-theme-2');
65-
console.log('🌙 after:', after);
66-
67-
// Assertion
68-
expect(before).toBe('light');
69-
expect(after).toBe('dark');
70-
});
71-
72-
test('theme3 toggles on button click', async ({ page }) => {
73-
await page.goto('/');
10+
test.describe('Zero-UI Vite Integration', () => {
11+
for (const { toggle, attr } of scenarios) {
12+
test(`toggles <${attr}> from light → dark`, async ({ page }) => {
13+
// 1️⃣ Load fully hydrated page
14+
await page.goto('/', { waitUntil: 'networkidle' });
15+
console.log(`✅ page loaded testing ${attr} from light → dark`);
7416

75-
// Wait for hydration and button
76-
const button = page.getByTestId('theme-toggle-3');
77-
await expect(button).toBeVisible();
17+
const body = page.locator('body');
18+
const button = page.getByTestId(toggle);
7819

79-
// Wait for container to ensure styles are applied
80-
const container = page.getByTestId('theme-container-3');
81-
await expect(container).toHaveClass(/theme-three-light:/); // initially light
8220

83-
// Read initial theme attribute
84-
const before = await page.getAttribute('body', 'data-theme-three');
85-
console.log('🌞 before:', before);
21+
// 2️⃣ Assert initial state
22+
await expect(body).toHaveAttribute(attr, 'light');
23+
await expect(button).toBeVisible((console.log(`✅ ${button} is visible`))); // auto-retries until true
8624

87-
// Click to toggle
88-
await button.click();
8925

90-
// Wait for DOM to reflect change
91-
await page.waitForTimeout(100); // Optional: add debounce if needed
92-
const after = await page.getAttribute('body', 'data-theme-three');
93-
console.log('🌙 after:', after);
26+
// 3️⃣ Action
27+
await button.click((console.log(`✅ ${button} clicked`)));
9428

95-
// Assertion
96-
expect(before).toBe('light');
97-
expect(after).toBe('dark');
98-
});
99-
});
29+
// 4️⃣ Final state
30+
await expect(body).toHaveAttribute(attr, 'dark', (console.log(`✅ body attr changes after click`)));
31+
});
32+
}
33+
});

‎packages/core/__tests__/helpers/loadCli.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// tests/helpers/loadCli.js
1+
// __tests__/helpers/loadCli.js
22
import { createRequire } from 'node:module';
33
import path from 'node:path';
44

‎packages/core/__tests__/helpers/resetProjectState.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// __tests__/helpers/resetProjectState.js
12
import fs from 'node:fs';
23
import path from 'node:path';
34
import { rmSync } from 'node:fs';
@@ -16,12 +17,13 @@ export async function resetZeroUiState(projectDir, isNext = false) {
1617
/* ─── 1. wipe .zero-ui ─────────────────────────────────────────────── */
1718
const zeroUiDir = path.join(projectDir, '.zero-ui');
1819
if (fs.existsSync(zeroUiDir)) {
19-
console.log('[Reset] ✅ Removing .zero-ui directory');
2020
rmSync(zeroUiDir, { recursive: true, force: true });
21+
console.log('[Reset] ✅ Removed .zero-ui directory');
2122
} else {
2223
console.log('[Reset] ⏭️ .zero-ui directory not found, skipping');
2324
}
2425

26+
2527
/* ─── 2. Next.js cleanup (tsconfig + postcss) ──────────────────────── */
2628
if (isNext) {
2729
console.log('[Reset] 🔧 Running Next.js cleanup');

0 commit comments

Comments
 (0)