Skip to content

Commit 2c69ad8

Browse files
cossssmincossssmin
committed
test: update tests
improved names, remove duplication
1 parent 5175272 commit 2c69ad8

10 files changed

Lines changed: 632 additions & 418 deletions

‎test/process.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ import plugin from '../src/index.js';
44
const clean = html => html.replace(/(\n|\t)/g, '').trim();
55

66
export async function process(html, options) {
7-
return await posthtml([plugin(options)]).process(html).then(result => clean(result.html));
7+
const posthtmlOptions = options.parserOptions || {};
8+
return await posthtml([plugin(options)]).process(html, posthtmlOptions).then(result => clean(result.html));
89
}

‎test/test-attributes.js‎

Lines changed: 106 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,162 @@
1-
import { test, expect } from 'vitest'
1+
import { test, expect } from 'vitest';
2+
import { process } from './process.js';
3+
24
import plugin from '../src/index.js';
35
import posthtml from 'posthtml';
46
import pull from 'lodash/pull';
57

68
const clean = html => html.replace(/(\n|\t)/g, '').trim();
79

8-
test('Must merge and map attributes not props to first node', async () => {
10+
test('Maps and merges attributes (not props) to first node', async () => {
911
const actual = `<component src="components/component-mapped-attributes.html" data-something="Test an attribute" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component>`;
1012
const expected = `<div class="text-dark m-3 bg-light p-2" style="background: red; display: flex; font-size: 20px" data-something="Test an attribute">My Title Default body</div>`;
1113

12-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
13-
14-
expect(html).toBe(expected);
14+
process(actual,
15+
{
16+
root: './test/templates',
17+
tag: 'component'
18+
}
19+
)
20+
.then(html => {
21+
expect(html).toBe(expected);
22+
});
1523
});
1624

17-
test('Must merge and map attributes not props to node with attribute "attributes" without style', async () => {
25+
test('Maps and merges attributes (not props) to node with attribute `attributes` without style', async () => {
1826
const actual = `<component src="components/component-mapped-attributes2.html" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component>`;
1927
const expected = `<div class="mapped"><div class="text-dark m-3 bg-light p-2" style="display: flex; font-size: 20px">My Title Default body</div></div>`;
2028

21-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
22-
23-
expect(html).toBe(expected);
29+
process(actual,
30+
{
31+
root: './test/templates',
32+
tag: 'component'
33+
}
34+
)
35+
.then(html => {
36+
expect(html).toBe(expected);
37+
});
2438
});
2539

26-
test('Must merge and map attributes not props to node with attribute "attributes" without class', async () => {
40+
test('Maps and merges attributes (not props) to node with attribute `attributes` without class', async () => {
2741
const actual = `<component src="components/component-mapped-attributes3.html" title="My Title" class="bg-light p-2" style="display: block; font-size: 20px"></component>`;
2842
const expected = `<div class="mapped"><div style="border: 1px solid black; display: block; font-size: 20px" class="bg-light p-2">My Title Default body</div></div>`;
2943

30-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
31-
32-
expect(html).toBe(expected);
44+
process(actual,
45+
{
46+
root: './test/templates',
47+
tag: 'component'
48+
}
49+
)
50+
.then(html => {
51+
expect(html).toBe(expected);
52+
});
3353
});
3454

35-
test('Must not map attributes for component without any elements', async () => {
55+
test('Does not map attributes for components that have no elements', async () => {
3656
const actual = `<div><component src="components/component-without-elements.html" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component></div>`;
3757
const expected = `<div>I am a component without any elements. Yeah, something uncommon but just for testing. My Title</div>`;
3858

39-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
40-
41-
expect(html).toBe(expected);
59+
process(actual,
60+
{
61+
root: './test/templates',
62+
tag: 'component'
63+
}
64+
)
65+
.then(html => {
66+
expect(html).toBe(expected);
67+
});
4268
});
4369

44-
test('Must override class and style attributes', async () => {
70+
test('Overrides class and style attributes', async () => {
4571
const actual = `<component src="components/component-mapped-attributes.html" override:class="override-class" override:style="background: black"></component>`;
4672
const expected = `<div class="override-class" style="background: black">Default title Default body</div>`;
4773

48-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
49-
50-
expect(html).toBe(expected);
74+
process(actual,
75+
{
76+
root: './test/templates',
77+
tag: 'component'
78+
}
79+
)
80+
.then(html => {
81+
expect(html).toBe(expected);
82+
});
5183
});
5284

53-
test('Must remove an attributes that has "undefined" or "null" value', async () => {
85+
test('Removes attributes containing `undefined` or `null` values', async () => {
5486
const actual = `<component src="components/remove-attributes.html" tabindex="-1">My button</component>`;
5587
const expected = `<button class="btn btn-primary" data-bs-dismiss="true" data-bs-backdrop="false" tabindex="-1">My button</button><div>works also in all nodes</div>`;
5688

57-
const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
58-
59-
expect(html).toBe(expected);
89+
process(actual,
90+
{
91+
root: './test/templates',
92+
tag: 'component'
93+
}
94+
)
95+
.then(html => {
96+
expect(html).toBe(expected);
97+
});
6098
});
6199

62-
test('Must override valid attributes', async () => {
100+
test('Overrides known attributes', async () => {
63101
const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
64102
const expected = `<button tabindex="-1" custom-attribute="A custom attribute">My button</button>`;
65103

66-
const html = await posthtml([plugin({
67-
root: './test/templates',
68-
tag: 'component',
69-
elementAttributes: {
70-
BUTTON: attrs => {
71-
// Remove title
72-
pull(attrs, 'title');
104+
process(actual,
105+
{
106+
root: './test/templates',
107+
tag: 'component',
108+
elementAttributes: {
109+
BUTTON: attrs => {
110+
// Remove title
111+
pull(attrs, 'title');
73112

74-
// Add custom-attribute
75-
attrs.push('custom-attribute');
113+
// Add custom-attribute
114+
attrs.push('custom-attribute');
76115

77-
return attrs;
116+
return attrs;
117+
}
78118
}
79119
}
80-
})]).process(actual).then(result => clean(result.html));
81-
82-
expect(html).toBe(expected);
120+
)
121+
.then(html => {
122+
expect(html).toBe(expected);
123+
});
83124
});
84125

85-
test('Must work with tag without attributes', async () => {
126+
test('Works with tags that have no attributes', async () => {
86127
const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
87128
const expected = `<button>My button</button>`;
88129

89-
const html = await posthtml([plugin({
90-
root: './test/templates',
91-
tag: 'component',
92-
elementAttributes: {
93-
BUTTON: _ => {
94-
// Return empty array means no attributes
95-
return [];
130+
process(actual,
131+
{
132+
root: './test/templates',
133+
tag: 'component',
134+
elementAttributes: {
135+
BUTTON: _ => {
136+
// Return empty array means no attributes
137+
return [];
138+
}
96139
}
97140
}
98-
})]).process(actual).then(result => clean(result.html));
99-
100-
expect(html).toBe(expected);
141+
)
142+
.then(html => {
143+
expect(html).toBe(expected);
144+
});
101145
});
102146

103-
test('Must use safelist and blocklist', async () => {
147+
test('Uses `safelist` and `blocklist`', async () => {
104148
const actual = `<component src="components/override-attributes.html" tabindex="-1" title="My button" custom-attribute="A custom attribute">My button</component>`;
105149
const expected = `<button custom-attribute="A custom attribute">My button</button>`;
106150

107-
const html = await posthtml([plugin({
108-
root: './test/templates',
109-
tag: 'component',
110-
safelistAttributes: ['custom-attribute'],
111-
blocklistAttributes: ['role', 'tabindex']
112-
})]).process(actual).then(result => clean(result.html));
113-
114-
expect(html).toBe(expected);
151+
process(actual,
152+
{
153+
root: './test/templates',
154+
tag: 'component',
155+
safelistAttributes: ['custom-attribute'],
156+
blocklistAttributes: ['role', 'tabindex'],
157+
}
158+
)
159+
.then(html => {
160+
expect(html).toBe(expected);
161+
});
115162
});

‎test/test-errors.js‎

Lines changed: 78 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,100 @@
1-
import { test, expect } from 'vitest'
2-
import plugin from '../src/index.js';
3-
import posthtml from 'posthtml';
4-
5-
const clean = html => html.replace(/(\n|\t)/g, '').trim();
6-
7-
test('Must fail when namespace is unknown', async () => {
8-
const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
9-
10-
await expect(() => posthtml([plugin({ root: './test/templates', strict: true })]).process(actual).then(result => clean(result.html)))
11-
.rejects.toThrow()
1+
import { test, expect } from 'vitest';
2+
import { process } from './process.js';
3+
4+
test('Throws if namespace is unknown', async () => {
5+
await expect(() => process(
6+
`<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`,
7+
{ root: './test/templates', strict: true }
8+
)).rejects.toThrow();
129
});
1310

14-
test('Must return node as-is when namespace is unknown with strict mode disabled', async () => {
15-
const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
16-
const expected = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
17-
18-
const html = await posthtml([plugin({root: './test/templates', strict: false})]).process(actual).then(result => clean(result.html));
19-
20-
expect(html).toBe(expected);
11+
test('Throws when push tag missing name attribute', async () => {
12+
await expect(() => process(
13+
`<div><push></push></div>`,
14+
{
15+
root: './test/templates',
16+
strict: true
17+
}
18+
)).rejects.toThrow();
2119
});
2220

23-
test('Must return node as-is when namespace is empty with strict mode disabled', async () => {
24-
const actual = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
25-
const expected = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
26-
27-
const html = await posthtml([plugin({root: './test/templates', strict: false, namespaces: {name: 'empty-namespace', root: './test/templates/empty-namespace'}})]).process(actual).then(result => clean(result.html));
28-
29-
expect(html).toBe(expected);
21+
test('Throws when push tag missing name attribute value', async () => {
22+
await expect(() => process(
23+
`<div><push name></push></div>`,
24+
{ root: './test/templates', strict: true }
25+
)).rejects.toThrow();
3026
});
3127

32-
test('Must return node as-is when x-tag is not found with strict mode disabled', async () => {
33-
const actual = `<div><x-button>Submit</x-button></div>`;
34-
const expected = `<div><x-button>Submit</x-button></div>`;
35-
36-
const html = await posthtml([plugin({root: './test/templates/empty-root', strict: false})]).process(actual).then(result => clean(result.html));
37-
38-
expect(html).toBe(expected);
28+
test('Throws when component is not found (strict mode enabled)', async () => {
29+
await expect(() => process(
30+
`<div><component src="not-found.html">Submit</component></div>`,
31+
{
32+
root: './test/templates/empty-root',
33+
tag: 'component',
34+
strict: true,
35+
}
36+
)).rejects.toThrow();
3937
});
4038

41-
test('Must return node as-is when component is not found with strict mode disabled', async () => {
42-
const actual = `<div><component src="not-found.html">Submit</component></div>`;
43-
const expected = `<div><component src="not-found.html">Submit</component></div>`;
44-
45-
const html = await posthtml([plugin({tag: 'component', strict: false})]).process(actual).then(result => clean(result.html));
46-
47-
expect(html).toBe(expected);
39+
test('Throws when component is not found in namespace (strict mode enabled)', async () => {
40+
await expect(() => process(
41+
`<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`,
42+
{
43+
root: './test/templates',
44+
strict: true,
45+
namespaces: [
46+
{
47+
name: 'empty-namespace',
48+
root: './test/templates/empty-namespace',
49+
}
50+
]
51+
}
52+
)).rejects.toThrow();
4853
});
4954

50-
test('Must fail when component is not found with strict mode enabled', async () => {
51-
const actual = `<div><component src="not-found.html">Submit</component></div>`;
55+
test('Returns node as-is when namespace is unknown (strict mode disabled)', async () => {
56+
const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
5257

53-
await expect(() => posthtml([plugin({ root: './test/templates/empty-root', tag: 'component', strict: true })]).process(actual).then(result => clean(result.html)))
54-
.rejects.toThrow()
58+
process(actual, { root: './test/templates', strict: false })
59+
.then(html => {
60+
expect(html).toBe(actual);
61+
});
5562
});
5663

57-
test('Must fail when component is not found in defined namespace with strict mode enabled', async () => {
64+
test('Returns node as-is when namespace is empty (strict mode disabled)', async () => {
5865
const actual = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
5966

60-
await expect(() => posthtml([
61-
plugin({root: './test/templates', strict: true, namespaces: [{name: 'empty-namespace', root: './test/templates/empty-namespace'}]})
62-
])
63-
.process(actual)
64-
.then(result => clean(result.html))
65-
).rejects.toThrow()
67+
process(actual,
68+
{
69+
root: './test/templates',
70+
strict: false,
71+
namespaces: [
72+
{
73+
name: 'empty-namespace',
74+
root: './test/templates/empty-namespace',
75+
}
76+
]
77+
}
78+
)
79+
.then(html => {
80+
expect(html).toBe(actual);
81+
});
6682
});
6783

68-
test('Must fail when push tag missing name attribute', async () => {
69-
const actual = `<div><push></push></div>`;
84+
test('Returns node as-is when x-tag is not found (strict mode disabled)', async () => {
85+
const actual = `<div><x-button>Submit</x-button></div>`;
7086

71-
await expect(() => posthtml([
72-
plugin({root: './test/templates', strict: true})
73-
])
74-
.process(actual)
75-
.then(result => clean(result.html))
76-
).rejects.toThrow();
87+
process(actual, { root: './test/templates/empty-root', strict: false })
88+
.then(html => {
89+
expect(html).toBe(actual);
90+
});
7791
});
7892

79-
test('Must fail when push tag missing name attribute value', async () => {
80-
const actual = `<div><push name></push></div>`;
93+
test('Returns node as-is when component is not found (strict mode disabled)', async () => {
94+
const actual = `<div><component src="not-found.html">Submit</component></div>`;
8195

82-
await expect(async () => posthtml([plugin({root: './test/templates', strict: true})]).process(actual).then(result => clean(result.html)))
83-
.rejects.toThrow();
96+
process(actual, { tag: 'component', strict: false })
97+
.then(html => {
98+
expect(html).toBe(actual);
99+
});
84100
});

0 commit comments

Comments
 (0)