Skip to content

Commit 8ac85e1

Browse files
Austin1serbAustin1serb
committed
unit tests written
1 parent 1c05190 commit 8ac85e1

26 files changed

Lines changed: 1420 additions & 1137 deletions

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ export declare const bodyAttributes: {
44
"data-mobile": "false" | "true";
55
"data-number": "1" | "2";
66
"data-scope": "off" | "on";
7-
"data-theme": "dark" | "light";
7+
"data-theme": "dark" | "light" | "three-dark" | "three-light";
88
"data-theme-2": "dark" | "light";
9-
"data-theme-three": "dark" | "light";
9+
"data-theme-three": "light";
1010
"data-toggle-boolean": "false" | "true";
11-
"data-toggle-function": "black" | "white";
11+
"data-toggle-function": "black" | "blue" | "green" | "red" | "white";
1212
"data-use-effect-theme": "dark" | "light";
1313
};

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import { bodyAttributes } from '@zero-ui/attributes';
1+
import { bodyAttributes } from "@zero-ui/attributes";
22
import './globals.css';
3-
export default function RootLayout({ children }) {
4-
return (
5-
<html lang="en">
6-
<body
7-
{...bodyAttributes}
8-
className="bg-red test-ww this is to test the body tag"
9-
id="88">
3+
export default function RootLayout({
4+
children
5+
}) {
6+
return <html lang="en">
7+
<body {...bodyAttributes} className="bg-red test-ww this is to test the body tag" id="88">
108
{children}
119
</body>
12-
</html>
13-
);
14-
}
10+
</html>;
11+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ export declare const bodyAttributes: {
44
"data-mobile": "false" | "true";
55
"data-number": "1" | "2";
66
"data-scope": "off" | "on";
7-
"data-theme": "dark" | "light";
7+
"data-theme": "dark" | "light" | "three-dark" | "three-light";
88
"data-theme-2": "dark" | "light";
9-
"data-theme-three": "dark" | "light";
9+
"data-theme-three": "light";
1010
"data-toggle-boolean": "false" | "true";
11-
"data-toggle-function": "black" | "white";
11+
"data-toggle-function": "black" | "blue" | "green" | "red" | "white";
1212
"data-use-effect-theme": "dark" | "light";
1313
};

‎packages/core/__tests__/fixtures/vite/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react';
44

55
// https://vite.dev/config/
66
export default defineConfig({
7-
plugins: [react(), zeroUI()]
7+
plugins: [zeroUI(), react()]
88
});

‎packages/core/__tests__/unit/ast.test.cjs‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const path = require('path');
55
const os = require('os');
66
const { performance } = require('node:perf_hooks');
77
const { findAllSourceFiles } = require('../../dist/postcss/helpers.cjs');
8-
const { collectUseUISetters, extractVariants } = require('../../dist/postcss/ast-v2.cjs');
8+
const { collectUseUISetters, extractVariants } = require('../../dist/postcss/ast-parsing.cjs');
99

1010
const ComponentImports = readFile(path.join(__dirname, './fixtures/test-components.jsx'));
1111
const AllPatternsComponent = readFile(path.join(__dirname, './fixtures/ts-test-components.tsx'));
@@ -70,7 +70,7 @@ test('collectUseUISetters - basic functionality', async () => {
7070
const [theme, setTheme] = useUI('theme', 'light');
7171
const [size, setSize] = useUI('size', 'medium');
7272
return <>
73-
<Button theme={theme} setTheme={setTheme("light")} />
73+
<Button theme={theme} setTheme={setTheme("light")} />
7474
<Button size={size} setSize={setSize("medium")} />
7575
</>;
7676
}
@@ -95,8 +95,8 @@ export function ComponentSimple() {
9595
const [, setSize] = useUI('size', 'medium');
9696
return (
9797
<div>
98-
<button onClick={() => setTheme('dark')}>setTheme</button>
99-
<button onClick={() => setSize('large')}>setSize</button>
98+
<button onClick={() => setTheme('dark')} className="theme-light:bg-red-500 theme-dark:bg-blue-500 theme-blue:bg-green-500 theme-purple:bg-purple-500">setTheme</button>
99+
<button onClick={() => setSize('large')} className="size-medium:bg-red-500 size-large:bg-blue-500">setSize</button>
100100
</div>
101101
);
102102
}
@@ -105,9 +105,13 @@ export function ComponentSimple() {
105105

106106
async () => {
107107
const variants = extractVariants('src/app/Component.jsx');
108+
console.log('variants: ', variants);
109+
assert.strictEqual(variants.length, 2);
108110
assert.strictEqual(variants.length, 2);
109-
assert.ok(variants.some((v) => v.key === 'theme' && v.values.includes('light')));
110-
assert.ok(variants.some((v) => v.key === 'size' && v.values.includes('medium')));
111+
112+
assert.ok(variants.some((v) => v.key === 'theme' && ['light', 'dark', 'blue', 'purple'].every((c) => v.values.includes(c))));
113+
114+
assert.ok(variants.some((v) => v.key === 'size' && ['medium', 'large'].every((c) => v.values.includes(c))));
111115
}
112116
);
113117
});

‎packages/core/__tests__/unit/index.test.cjs‎

Lines changed: 25 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const os = require('os');
77
// This file is the entry point for the react-zero-ui library, that uses postcss to trigger the build process
88
const plugin = require('../../dist/postcss/index.cjs');
99

10-
const { patchConfigAlias, toKebabCase, patchPostcssConfig, patchViteConfig } = require('../../dist/postcss/helpers.cjs');
10+
const { patchTsConfig, toKebabCase, patchPostcssConfig, patchViteConfig } = require('../../dist/postcss/helpers.cjs');
1111

1212
function getAttrFile() {
1313
return path.join(process.cwd(), '.zero-ui', 'attributes.js');
@@ -68,7 +68,6 @@ test('generates body attributes file correctly', async () => {
6868
// Read and parse attributes
6969
const content = fs.readFileSync(getAttrFile(), 'utf-8');
7070
console.log('\n📄 Generated attributes file:');
71-
console.log(content);
7271

7372
// Verify content
7473
assert(content.includes('export const bodyAttributes'), 'Should export bodyAttributes');
@@ -104,7 +103,6 @@ test('generates body attributes file correctly when kebab-case is used', async (
104103
assert(fs.existsSync(getAttrFile()), 'Attributes file should exist');
105104

106105
const content = fs.readFileSync(getAttrFile(), 'utf-8');
107-
console.log('result.css: ', result.css);
108106

109107
// Verify content
110108
assert(content.includes('export const bodyAttributes'), 'Should export bodyAttributes');
@@ -318,9 +316,9 @@ test('handles multiple files and deduplication', async () => {
318316
);
319317
});
320318

321-
test('handles parsing errors gracefully', async () => {
322-
await runTest(
323-
{
319+
test('throws on invalid syntax', async () => {
320+
await assert.rejects(async () => {
321+
await runTest({
324322
'src/valid.jsx': `
325323
import { useUI } from '@react-zero-ui/core';
326324
function Valid() {
@@ -335,16 +333,8 @@ test('handles parsing errors gracefully', async () => {
335333
{{{ invalid syntax
336334
}
337335
`,
338-
},
339-
(result) => {
340-
console.log('\n🔍 Parse Error Test:');
341-
// Should still process valid files
342-
assert(result.css.includes('@custom-variant valid-working'), 'Should process valid files');
343-
344-
// Should not crash on invalid files
345-
assert(result.css.includes('AUTO-GENERATED'), 'Should complete processing');
346-
}
347-
);
336+
});
337+
}, /Unexpected token, expected ","/);
348338
});
349339

350340
test('throws on empty string initial value', () => {
@@ -559,7 +549,7 @@ test('handles concurrent file modifications', async () => {
559549
);
560550
});
561551

562-
test('patchConfigAlias - config file patching', async (t) => {
552+
test('patchTsConfig - config file patching', async (t) => {
563553
await t.test('patches tsconfig.json when it exists', async () => {
564554
const testDir = fs.mkdtempSync(path.join(os.tmpdir(), 'zero-ui-config-test'));
565555
const originalCwd = process.cwd();
@@ -571,8 +561,8 @@ test('patchConfigAlias - config file patching', async (t) => {
571561
const tsconfigContent = { compilerOptions: { target: 'ES2015', module: 'ESNext' } };
572562
fs.writeFileSync('tsconfig.json', JSON.stringify(tsconfigContent, null, 2));
573563

574-
// Run patchConfigAlias
575-
patchConfigAlias();
564+
// Run patchTsConfig
565+
patchTsConfig();
576566

577567
// Read the updated config
578568
const updatedConfig = JSON.parse(fs.readFileSync('tsconfig.json', 'utf-8'));
@@ -600,8 +590,8 @@ test('patchConfigAlias - config file patching', async (t) => {
600590
const jsconfigContent = { compilerOptions: { target: 'ES2015' } };
601591
fs.writeFileSync('jsconfig.json', JSON.stringify(jsconfigContent, null, 2));
602592

603-
// Run patchConfigAlias
604-
patchConfigAlias();
593+
// Run patchTsConfig
594+
patchTsConfig();
605595

606596
// Read the updated config
607597
const updatedConfig = JSON.parse(fs.readFileSync('jsconfig.json', 'utf-8'));
@@ -626,8 +616,8 @@ test('patchConfigAlias - config file patching', async (t) => {
626616
try {
627617
process.chdir(testDir);
628618

629-
// Run patchConfigAlias (should not throw)
630-
patchConfigAlias();
619+
// Run patchTsConfig (should not throw)
620+
patchTsConfig();
631621

632622
// Verify no files were created
633623
assert(!fs.existsSync('tsconfig.json'), 'Should not create tsconfig.json');
@@ -656,8 +646,8 @@ test('patchConfigAlias - config file patching', async (t) => {
656646
fs.writeFileSync('tsconfig.json', JSON.stringify(tsconfigContent, null, 2));
657647
const originalContent = fs.readFileSync('tsconfig.json', 'utf-8');
658648

659-
// Run patchConfigAlias
660-
patchConfigAlias();
649+
// Run patchTsConfig
650+
patchTsConfig();
661651

662652
// Verify the config was not modified
663653
const updatedContent = fs.readFileSync('tsconfig.json', 'utf-8');
@@ -679,8 +669,8 @@ test('patchConfigAlias - config file patching', async (t) => {
679669
const tsconfigContent = { include: ['src/**/*'] };
680670
fs.writeFileSync('tsconfig.json', JSON.stringify(tsconfigContent, null, 2));
681671

682-
// Run patchConfigAlias
683-
patchConfigAlias();
672+
// Run patchTsConfig
673+
patchTsConfig();
684674

685675
// Read the updated config
686676
const updatedConfig = JSON.parse(fs.readFileSync('tsconfig.json', 'utf-8'));
@@ -717,8 +707,8 @@ test('patchConfigAlias - config file patching', async (t) => {
717707
}`;
718708
fs.writeFileSync('tsconfig.json', tsconfigContent);
719709

720-
// Run patchConfigAlias
721-
patchConfigAlias();
710+
// Run patchTsConfig
711+
patchTsConfig();
722712

723713
// Verify file was updated (should parse despite comments)
724714
const updatedConfig = JSON.parse(fs.readFileSync('tsconfig.json', 'utf-8'));
@@ -733,7 +723,7 @@ test('patchConfigAlias - config file patching', async (t) => {
733723
}
734724
});
735725

736-
await t.test('patchConfigAlias prefers tsconfig.json over jsconfig.json', async () => {
726+
await t.test('patchTsConfig prefers tsconfig.json over jsconfig.json', async () => {
737727
const testDir = fs.mkdtempSync(path.join(os.tmpdir(), 'zero-ui-config-test'));
738728
const originalCwd = process.cwd();
739729

@@ -744,8 +734,8 @@ test('patchConfigAlias - config file patching', async (t) => {
744734
fs.writeFileSync('tsconfig.json', JSON.stringify({ compilerOptions: {} }, null, 2));
745735
fs.writeFileSync('jsconfig.json', JSON.stringify({ compilerOptions: {} }, null, 2));
746736

747-
// Run patchConfigAlias
748-
patchConfigAlias();
737+
// Run patchTsConfig
738+
patchTsConfig();
749739

750740
// Verify tsconfig.json was modified
751741
const tsconfigContent = JSON.parse(fs.readFileSync('tsconfig.json', 'utf-8'));
@@ -1464,7 +1454,6 @@ test('generated variants for initial value without setterFn', async () => {
14641454
},
14651455
(result) => {
14661456
console.log('\n📄 Initial value without setterFn:');
1467-
console.log(result.css);
14681457

14691458
assert(result.css.includes('@custom-variant theme-light'));
14701459
}
@@ -1491,9 +1480,8 @@ test('handles complex string boolean toggle patterns', async () => {
14911480
`,
14921481
},
14931482
(result) => {
1494-
const content = fs.readFileSync(getAttrFile(), 'utf-8');
1483+
// const content = fs.readFileSync(getAttrFile(), 'utf-8');
14951484
console.log('\n📄 String boolean edge cases:');
1496-
console.log(content);
14971485

14981486
// Should only have true/false variants for string booleans
14991487
assert(result.css.includes('@custom-variant modal-visible-true'));
@@ -1549,7 +1537,6 @@ test.skip('extracts values from deeply nested function calls', async () => {
15491537
},
15501538
(result) => {
15511539
console.log('\n📄 Nested calls extraction:');
1552-
console.log(result.css);
15531540

15541541
// Should extract all literal values
15551542
assert(result.css.includes('@custom-variant theme-light')); // initial
@@ -1587,7 +1574,7 @@ test('handles ternary and logical expressions', async () => {
15871574
15881575
// Logical expressions
15891576
const handleError = () => {
1590-
setStatus(error && 'error' || 'success');
1577+
setStatus(hasError && 'error' || 'success');
15911578
};
15921579
15931580
// Complex logical
@@ -1601,11 +1588,11 @@ test('handles ternary and logical expressions', async () => {
16011588
},
16021589
(result) => {
16031590
console.log('\n📄 Expression handling:');
1604-
console.log(result.css);
16051591

16061592
// Ternary values
16071593
assert(result.css.includes('@custom-variant status-loading'));
16081594
assert(result.css.includes('@custom-variant status-ready'));
1595+
assert(result.css.includes('@custom-variant status-idle'));
16091596
assert(result.css.includes('@custom-variant status-error'));
16101597
assert(result.css.includes('@custom-variant status-success'));
16111598

@@ -1655,7 +1642,6 @@ export function Pages() {
16551642
},
16561643
(result) => {
16571644
console.log('\n📄 Constants:');
1658-
console.log(result.css);
16591645

16601646
assert(result.css.includes('@custom-variant theme-dark'));
16611647
assert(result.css.includes('@custom-variant theme-default'));
@@ -1710,7 +1696,6 @@ test('resolves constants and imported values -- COMPLEX --', async () => {
17101696
},
17111697
(result) => {
17121698
console.log('\n📄 Constants resolution:');
1713-
console.log(result.css);
17141699

17151700
// Should resolve local constants
17161701
assert(result.css.includes('@custom-variant theme-pending-state'));
@@ -1765,7 +1750,6 @@ test.skip('handles all common setter patterns - full coverage sanity check - COM
17651750
},
17661751
(result) => {
17671752
console.log('\n📄 Full coverage test:');
1768-
console.log(result.css);
17691753

17701754
// ✅ things that MUST be included
17711755
assert(result.css.includes('@custom-variant theme-dark'));
@@ -1822,7 +1806,6 @@ test('handles arrow functions and function expressions', async () => {
18221806
},
18231807
(result) => {
18241808
console.log('\n📄 Function expressions:');
1825-
console.log(result.css);
18261809

18271810
assert(result.css.includes('@custom-variant component-state-quick'));
18281811
assert(result.css.includes('@custom-variant component-state-block'));
@@ -1862,7 +1845,6 @@ test('handles multiple setters for same state key', async () => {
18621845
},
18631846
(result) => {
18641847
console.log('\n📄 Multiple setters:');
1865-
console.log(result.css);
18661848

18671849
// Should combine all values from different setters for same key
18681850
assert(result.css.includes('@custom-variant global-theme-light'));
@@ -1904,7 +1886,6 @@ test('ignores dynamic and non-literal values', async () => {
19041886
},
19051887
(result) => {
19061888
console.log('\n📄 Dynamic values filtering:');
1907-
console.log(result.css);
19081889

19091890
// Should only have literals
19101891
assert(result.css.includes('@custom-variant theme-default')); // initial
@@ -1958,9 +1939,6 @@ test('handles edge cases with unusual syntax', async () => {
19581939
`,
19591940
},
19601941
(result) => {
1961-
console.log('\n📄 Edge cases:');
1962-
console.log(result.css);
1963-
19641942
// Basic cases that should work
19651943
assert(result.css.includes('@custom-variant edge-state-first'));
19661944
assert(result.css.includes('@custom-variant edge-state-second'));

0 commit comments

Comments
 (0)