-
Notifications
You must be signed in to change notification settings - Fork 15
/
heading.spec.ts
74 lines (61 loc) · 2.76 KB
/
heading.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { TestWindow } from '@stencil/core/testing';
import { UIHeadingComponent } from './heading';
describe('ui-heading', () => {
it('should build', () => {
expect(new UIHeadingComponent()).toBeTruthy();
});
let testWindow;
beforeEach(() => {
testWindow = new TestWindow();
});
describe('rendering', () => {
it('should render the text in the slot', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading>Hello World</ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.textContent.trim()).toEqual('Hello World');
});
it('should apply xlarge class when xlarge is passed as an attribute', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading xlarge></ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.querySelector('span').className).toEqual('xlarge');
});
it('should apply large class when large is passed as an attribute', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading large></ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.querySelector('span').className).toEqual('large');
});
it('should apply regular class when no sizing attribute is set', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading></ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.querySelector('span').className).toEqual('regular');
});
it('should apply small class when small is passed as an attribute', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading small></ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.querySelector('span').className).toEqual('small');
});
it('should apply xsmall class when xsmall is passed as an attribute', async () => {
const element = await testWindow.load({
components: [UIHeadingComponent],
html: '<ui-heading xsmall></ui-heading>'
}) as HTMLHeadingElement;
await testWindow.flush();
expect(element.querySelector('span').className).toEqual('xsmall');
});
});
});