Skip to content

Commit 71eeeab

Browse files
Austin1serbAustin1serb
committed
fix: updated vite test
1 parent b21ef94 commit 71eeeab

File tree

16 files changed

+633
-573
lines changed

16 files changed

+633
-573
lines changed

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ Use these tips when working with the codebase or generating examples.
1414
- Only use `useUI` for UI-only state (themes, flags, etc.).
1515
- Prefer kebab-case keys (`sidebar-open`) so generated variants are predictable.
1616
- Always pass a default value to `useUI(key, defaultValue)` to avoid flashes during SSR.
17+
- The first value is ALWAYS STALE, do not use it if you need reactivity.
1718
- Mutate the state anywhere in the app: `const [, setTheme] = useUI('theme', 'light');` then call `setTheme('dark')`.
1819
- Compose Tailwind classes anywhere with the pattern `key-value:` like `theme-dark:bg-black`.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ export default defineConfig({
3535
cwd: path.resolve(__dirname, '../fixtures/next'),
3636
url: BASE_URL,
3737
timeout: 60_000, // Give more time for CI environments
38-
reuseExistingServer: !process.env.CI, // Don't reuse in CI
38+
reuseExistingServer: false, // Don't reuse in CI
3939
},
4040
});

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default defineConfig({
1515
expect: { timeout: 15_000 },
1616
reporter: [
1717
['list'], // Shows test results in terminal
18-
['html'] // Also keep HTML report
1918
],
2019

2120
use: {
@@ -40,10 +39,10 @@ export default defineConfig({
4039
},
4140
],
4241
webServer: {
43-
command: 'pnpm run dev',
42+
command: 'pnpm run build-and-preview',
4443
cwd: path.resolve(__dirname, '../fixtures/vite'),
4544
url: BASE_URL,
4645
timeout: 60_000, // Give more time for CI environments
47-
reuseExistingServer: !process.env.CI, // Don't reuse in CI
46+
reuseExistingServer: false, // Don't reuse in CI
4847
},
4948
});

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@ test('Vite CLI scaffolds .zero-ui + vite.config', async () => {
1111
// CLI setup is handled by global setup, just verify the results
1212
const attrs = path.join(projectDir, '.zero-ui/attributes.js');
1313
const vite = path.join(projectDir, 'vite.config.ts');
14+
const attrsContent = readFileSync(attrs, 'utf8');
1415

1516
await expect.poll(() => existsSync(attrs)).toBeTruthy();
16-
await expect.poll(() => readFileSync(attrs, 'utf8')).toContain('export const bodyAttributes');
17+
console.log('[Vite CLI] attrs', attrsContent);
18+
await expect.poll(() => attrsContent).toContain('export const bodyAttributes');
19+
console.log('[Vite CLI] vite', vite);
1720

1821
await expect
1922
.poll(() => {
@@ -22,4 +25,5 @@ test('Vite CLI scaffolds .zero-ui + vite.config', async () => {
2225
return /from ['"]@austinserb\/react-zero-ui\/vite['"]/.test(src) && /\bplugins:\s*\[.*zeroUI\(\).*]/s.test(src);
2326
})
2427
.toBeTruthy();
28+
console.log('[Vite CLI] vite', vite);
2529
});

‎packages/core/__tests__/e2e/nextSetup.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,4 @@ export default async function globalSetup() {
2020
await new Promise(resolve => setTimeout(resolve, 5000));
2121

2222
console.log('[Global Setup] ✅ Next.js fixture setup complete!✅');
23-
2423
}

‎packages/core/__tests__/e2e/viteSetup.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,4 @@ export default async function globalSetup() {
2121
console.log('[Global Setup] ⏳ Waiting 5 seconds for file system to stabilize...');
2222
await new Promise(resolve => setTimeout(resolve, 5000));
2323
return;
24-
2524
}

‎packages/core/__tests__/fixtures/next/.zero-ui/attributes.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* AUTO-GENERATED - DO NOT EDIT */
22
export declare const bodyAttributes: {
3+
"data-auto-theme": "dark" | "light";
34
"data-theme": "dark" | "light";
45
"data-theme-2": "dark" | "light";
56
"data-theme-three": "dark" | "light";

‎packages/core/__tests__/fixtures/next/.zero-ui/attributes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* AUTO-GENERATED - DO NOT EDIT */
22
export const bodyAttributes = {
3+
"data-auto-theme": "light",
34
"data-theme": "light",
45
"data-theme-2": "light",
56
"data-theme-three": "light"

‎packages/core/__tests__/fixtures/next/app/page.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,84 @@
11
'use client';
22

33
import useUI from '@austinserb/react-zero-ui';
4+
import { useEffect, useState } from 'react';
5+
6+
// Component that automatically cycles through themes using useEffect
7+
function AutoThemeComponent() {
8+
const [, setAutoTheme] = useUI<'light' | 'dark'>('auto-theme', 'light');
9+
const [isRunning, setIsRunning] = useState(false);
10+
const [cycleCount, setCycleCount] = useState(0);
11+
12+
useEffect(() => {
13+
if (!isRunning) return;
14+
15+
const interval = setInterval(() => {
16+
setAutoTheme(prev => {
17+
const newTheme = prev === 'light' ? 'dark' : 'light';
18+
setCycleCount(count => count + 1);
19+
return newTheme;
20+
});
21+
}, 2000); // Switch every 2 seconds
22+
23+
return () => clearInterval(interval);
24+
}, [isRunning, setAutoTheme]);
25+
26+
return (
27+
<div
28+
className="auto-theme-light:bg-blue-50 auto-theme-dark:bg-blue-900 auto-theme-light:border-blue-200 auto-theme-dark:border-blue-700 border-2 rounded-lg p-6 transition-colors duration-500"
29+
data-testid="auto-theme-container">
30+
<h3 className="auto-theme-light:text-blue-900 auto-theme-dark:text-blue-100 text-xl font-bold mb-4">Auto Theme Switcher (useEffect Test)</h3>
31+
32+
<div className="space-y-4">
33+
<button
34+
type="button"
35+
onClick={() => setIsRunning(prev => !prev)}
36+
className="auto-theme-light:bg-blue-600 auto-theme-dark:bg-blue-400 auto-theme-light:text-white auto-theme-dark:text-blue-900 auto-theme-light:hover:bg-blue-700 auto-theme-dark:hover:bg-blue-300 px-4 py-2 rounded-md font-medium transition-colors"
37+
data-testid="auto-theme-toggle">
38+
{isRunning ? 'Stop Auto Theme' : 'Start Auto Theme'}
39+
</button>
40+
41+
<div className="auto-theme-light:bg-white auto-theme-dark:bg-blue-800 auto-theme-light:border-blue-100 auto-theme-dark:border-blue-600 border rounded-md p-4">
42+
<div className="space-y-2">
43+
<div className="auto-theme-light:text-blue-800 auto-theme-dark:text-blue-200">
44+
Current Theme:
45+
<span className="auto-theme-light:block hidden font-semibold text-blue-600"> Light Mode</span>
46+
<span className="auto-theme-dark:block hidden font-semibold text-blue-300"> Dark Mode</span>
47+
</div>
48+
49+
<div className="auto-theme-light:text-blue-600 auto-theme-dark:text-blue-400 text-sm">Status: {isRunning ? 'Auto-switching...' : 'Stopped'}</div>
50+
51+
<div className="auto-theme-light:text-blue-500 auto-theme-dark:text-blue-500 text-sm">Cycle Count: {cycleCount}</div>
52+
</div>
53+
</div>
54+
55+
<div className="grid grid-cols-2 gap-4">
56+
<div className="auto-theme-light:bg-green-100 auto-theme-dark:bg-green-800 auto-theme-light:text-green-800 auto-theme-dark:text-green-200 p-3 rounded text-center">
57+
<div className="auto-theme-light:block hidden">☀️ Light Theme Active</div>
58+
<div className="auto-theme-dark:block hidden">🌙 Dark Theme Active</div>
59+
</div>
60+
61+
<div className="auto-theme-light:bg-purple-100 auto-theme-dark:bg-purple-800 auto-theme-light:text-purple-800 auto-theme-dark:text-purple-200 p-3 rounded text-center">
62+
<div className="auto-theme-light:text-purple-600 auto-theme-dark:text-purple-300">Reactive UI</div>
63+
<div className="text-sm mt-1">No Re-renders!</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
);
69+
}
470

571
export default function Page() {
672
const [, setTheme] = useUI<'light' | 'dark'>('theme', 'light');
773
const [, setTheme2] = useUI<'light' | 'dark'>('theme-2', 'light');
874
const [, setThemeThree] = useUI<'light' | 'dark'>('themeThree', 'light');
975
return (
1076
<>
77+
{/* Auto Theme Component - NEW */}
78+
<AutoThemeComponent />
79+
80+
<hr className="my-8" />
81+
1182
<div
1283
className="theme-light:bg-gray-100 theme-dark:bg-gray-900 text-blue-900"
1384
data-testid="theme-container">

‎packages/core/__tests__/fixtures/vite/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc -b && vite build",
9-
"preview": "vite preview",
10-
"clean": "rm -rf node_modules package-lock.json"
9+
"build-and-preview": "vite build && vite preview --port 5173"
1110
},
1211
"dependencies": {
1312
"react": "^19.1.0",

0 commit comments

Comments
 (0)