Skip to content

Commit 4d02345

Browse files
jycouetjycouet
committed
test with tailwindcss & prettier
1 parent 262ac80 commit 4d02345

File tree

3 files changed

+86
-60
lines changed

3 files changed

+86
-60
lines changed

‎packages/addons/_tests/_setup/suite.ts‎

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,21 @@ export const execAsync = promisify(exec);
2121

2222
type Fixtures<Addons extends AddonMap> = {
2323
page: Page;
24-
run(variant: ProjectVariant, options: OptionMap<Addons>): Promise<string>;
24+
run(flavor: Flavor<Addons>): string;
25+
};
26+
27+
type Flavor<Addons extends AddonMap> = {
28+
variant: ProjectVariant;
29+
kind: { type: string; options: OptionMap<Addons> };
2530
};
2631

2732
export function setupTest<Addons extends AddonMap>(
2833
addons: Addons,
29-
options?: { browser?: boolean }
34+
options?: {
35+
kinds: Array<Flavor<Addons>['kind']>;
36+
filter?: (flavor: Flavor<Addons>) => boolean;
37+
browser?: boolean;
38+
}
3039
) {
3140
const test = vitest.test.extend<Fixtures<Addons>>({} as any);
3241

@@ -44,8 +53,18 @@ export function setupTest<Addons extends AddonMap>(
4453
});
4554
}
4655

47-
vitest.beforeAll(({ name }) => {
48-
const testName = path.dirname(name).split('/').at(-1)!;
56+
const flavors: Array<Flavor<Addons>> = [];
57+
for (const kind of options?.kinds ?? []) {
58+
for (const variant of variants) {
59+
const flavor = { variant, kind };
60+
if (!options?.filter || options?.filter?.(flavor)) {
61+
flavors.push(flavor);
62+
}
63+
}
64+
}
65+
let testName: string;
66+
vitest.beforeAll(async ({ name }) => {
67+
testName = path.dirname(name).split('/').at(-1)!;
4968

5069
// constructs a builder for create test projects
5170
create = createProject({ cwd, templatesDir, testName });
@@ -65,32 +84,36 @@ export function setupTest<Addons extends AddonMap>(
6584
private: true
6685
})
6786
);
68-
});
6987

70-
// runs before each test case
71-
vitest.beforeEach<Fixtures<Addons>>(async (ctx) => {
72-
let browserCtx: BrowserContext;
73-
if (withBrowser) {
74-
browserCtx = await browser.newContext();
75-
ctx.page = await browserCtx.newPage();
76-
}
77-
ctx.run = async (variant, options) => {
78-
const cwd = create({ testId: ctx.task.id, variant });
88+
for (const { variant, kind } of flavors) {
89+
const cwd = create({ testId: `${kind.type}-${variant}`, variant });
7990

8091
// test metadata
8192
const metaPath = path.resolve(cwd, 'meta.json');
82-
fs.writeFileSync(metaPath, JSON.stringify({ variant, options }, null, '\t'), 'utf8');
93+
fs.writeFileSync(metaPath, JSON.stringify({ variant, kind }, null, '\t'), 'utf8');
8394

84-
// run addon
8595
const { pnpmBuildDependencies } = await installAddon({
8696
cwd,
8797
addons,
88-
options,
98+
options: kind.options,
8999
packageManager: 'pnpm'
90100
});
91101
addPnpmBuildDependencies(cwd, 'pnpm', ['esbuild', ...pnpmBuildDependencies]);
102+
}
103+
104+
execSync('pnpm install', { cwd: path.resolve(cwd, testName), stdio: 'pipe' });
105+
});
106+
107+
// runs before each test case
108+
vitest.beforeEach<Fixtures<Addons>>(async (ctx) => {
109+
let browserCtx: BrowserContext;
110+
if (withBrowser) {
111+
browserCtx = await browser.newContext();
112+
ctx.page = await browserCtx.newPage();
113+
}
92114

93-
return cwd;
115+
ctx.run = (flavor) => {
116+
return path.join(cwd, testName, `${flavor.kind.type}-${flavor.variant}`);
94117
};
95118

96119
return async () => {
@@ -101,7 +124,7 @@ export function setupTest<Addons extends AddonMap>(
101124
};
102125
});
103126

104-
return { test, variants, prepareServer };
127+
return { test, variants, prepareServer, flavors };
105128
}
106129

107130
type PrepareServerOptions = {
@@ -118,7 +141,7 @@ async function prepareServer(
118141
page,
119142
previewCommand = 'npm run preview',
120143
buildCommand = 'npm run build',
121-
installCommand = 'pnpm install --no-frozen-lockfile'
144+
installCommand
122145
}: PrepareServerOptions,
123146
afterInstall?: () => Promise<any> | any
124147
) {

‎packages/addons/_tests/prettier/test.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ import { execSync } from 'node:child_process';
44
import { setupTest } from '../_setup/suite.ts';
55
import prettier from '../../prettier/index.ts';
66

7-
const { test, variants } = setupTest({ prettier }, { browser: false });
7+
const { test, flavors } = setupTest(
8+
{ prettier },
9+
{ kinds: [{ type: 'default', options: { prettier: {} } }], browser: false }
10+
);
811

9-
test.concurrent.for(variants)('core - %s', async (variant, { expect, ...ctx }) => {
10-
const cwd = await ctx.run(variant, { prettier: {} });
12+
test.concurrent.for(flavors)('core - %variant', (flavor, { expect, ...ctx }) => {
13+
const cwd = ctx.run(flavor);
1114

1215
const unformattedFile = 'const foo = "bar"';
1316
fs.writeFileSync(path.resolve(cwd, 'src/lib/foo.js'), unformattedFile, 'utf8');
1417

15-
expect(() => execSync('pnpm install', { cwd, stdio: 'pipe' })).not.toThrow();
16-
1718
expect(() => execSync('pnpm lint', { cwd, stdio: 'pipe' })).toThrow();
1819

1920
expect(() => execSync('pnpm format', { cwd, stdio: 'pipe' })).not.toThrow();

‎packages/addons/_tests/tailwindcss/test.ts‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,40 @@ import { setupTest } from '../_setup/suite.ts';
33
import { addFixture } from './fixtures.ts';
44
import tailwindcss from '../../tailwindcss/index.ts';
55

6-
const { test, variants, prepareServer } = setupTest({ tailwindcss });
7-
8-
test.concurrent.for(variants)('none - %s', async (variant, { page, ...ctx }) => {
9-
const cwd = await ctx.run(variant, { tailwindcss: { plugins: [] } });
10-
11-
// ...add test files
12-
addFixture(cwd, variant);
13-
14-
const { close } = await prepareServer({ cwd, page });
15-
// kill server process when we're done
16-
ctx.onTestFinished(async () => await close());
17-
18-
const el = page.getByTestId('base');
19-
await expect(el).toHaveCSS('background-color', 'oklch(0.446 0.043 257.281)');
20-
await expect(el).toHaveCSS('border-color', 'oklch(0.985 0.002 247.839)');
21-
await expect(el).toHaveCSS('border-width', '4px');
22-
await expect(el).toHaveCSS('margin-top', '4px');
23-
});
24-
25-
test.concurrent.for(variants)('typography - %s', async (variant, { page, ...ctx }) => {
26-
const cwd = await ctx.run(variant, { tailwindcss: { plugins: ['typography'] } });
27-
28-
// ...add files
29-
addFixture(cwd, variant);
30-
31-
const { close } = await prepareServer({ cwd, page });
32-
// kill server process when we're done
33-
ctx.onTestFinished(async () => await close());
34-
35-
const el = page.getByTestId('typography');
36-
await expect(el).toHaveCSS('font-size', '18px');
37-
await expect(el).toHaveCSS('line-height', '28px');
38-
await expect(el).toHaveCSS('text-align', 'right');
39-
await expect(el).toHaveCSS('text-decoration-line', 'line-through');
40-
});
6+
const { test, prepareServer, flavors } = setupTest(
7+
{ tailwindcss },
8+
{
9+
kinds: [
10+
{ type: 'none', options: { tailwindcss: { plugins: [] } } },
11+
{ type: 'typography', options: { tailwindcss: { plugins: ['typography'] } } }
12+
]
13+
}
14+
);
15+
16+
test.concurrent.for(flavors)(
17+
'tailwindcss $kind.type $variant ',
18+
async (flavor, { page, ...ctx }) => {
19+
const cwd = ctx.run(flavor);
20+
21+
// ...add test files
22+
addFixture(cwd, flavor.variant);
23+
24+
const { close } = await prepareServer({ cwd, page });
25+
// kill server process when we're done
26+
ctx.onTestFinished(async () => await close());
27+
28+
if (flavor.kind.type === 'none') {
29+
const el = page.getByTestId('base');
30+
await expect(el).toHaveCSS('background-color', 'oklch(0.446 0.043 257.281)');
31+
await expect(el).toHaveCSS('border-color', 'oklch(0.985 0.002 247.839)');
32+
await expect(el).toHaveCSS('border-width', '4px');
33+
await expect(el).toHaveCSS('margin-top', '4px');
34+
} else if (flavor.kind.type === 'typography') {
35+
const el = page.getByTestId('typography');
36+
await expect(el).toHaveCSS('font-size', '18px');
37+
await expect(el).toHaveCSS('line-height', '28px');
38+
await expect(el).toHaveCSS('text-align', 'right');
39+
await expect(el).toHaveCSS('text-decoration-line', 'line-through');
40+
}
41+
}
42+
);

0 commit comments

Comments
 (0)