Skip to content

Commit 11734e3

Browse files
mikemai2awesomemikemai2awesome
committed
fix: update tests
1 parent f6c98a2 commit 11734e3

8 files changed

+187
-19
lines changed

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-all-caps-xxlarge-bold-quote-using-bolt-text-w-o-shadow-dom-renders-1-snap.png

7.34 KB
Loading

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-all-caps-xxlarge-bold-quote-using-bolt-text-w-shadow-dom-renders-1-snap.png

7.34 KB
Loading

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-code-text-using-bolt-text-w-shadow-dom-renders-1-snap.png

5.87 KB
Loading

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-default-bolt-text-w-shadow-dom-renders-1-snap.png

6.25 KB
Loading

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-xxxlarge-headline-using-bolt-text-w-o-shadow-dom-renders-1-snap.png

10.7 KB
Loading

‎packages/components/bolt-text/__tests__/__image_snapshots__/text-js-bolt-text-component-xxxlarge-headline-using-bolt-text-w-shadow-dom-renders-1-snap.png

15 KB
Loading

‎packages/components/bolt-text/__tests__/__snapshots__/text.js.snap

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<bolt-text> Component All caps xxlarge bold quote using <bolt-text> w/ Shadow DOM renders 2`] = `
4+
<bolt-text
5+
font-size="xxlarge"
6+
font-weight="bold"
7+
letter-spacing="wide"
8+
quoted="true"
9+
style=""
10+
text-transform="uppercase"
11+
>
12+
This is a quote
13+
</bolt-text>
14+
`;
15+
16+
exports[`<bolt-text> Component All caps xxlarge bold quote using <bolt-text> w/o Shadow DOM renders 2`] = `
17+
<bolt-text
18+
font-size="xxlarge"
19+
font-weight="bold"
20+
letter-spacing="wide"
21+
quoted="true"
22+
style=""
23+
text-transform="uppercase"
24+
>
25+
<!---->
26+
27+
28+
29+
30+
31+
<p
32+
class="c-bolt-text-v2 c-bolt-text-v2--block c-bolt-text-v2--body c-bolt-text-v2--font-size-xxlarge c-bolt-text-v2--font-weight-bold c-bolt-text-v2--font-style-regular c-bolt-text-v2--color-theme-body c-bolt-text-v2--letter-spacing-wide c-bolt-text-v2--align-inherit c-bolt-text-v2--text-transform-uppercase c-bolt-text-v2--line-height-regular c-bolt-text-v2--opacity-100 c-bolt-text-v2--quoted"
33+
style=""
34+
>
35+
<!---->
36+
<!---->
37+
<!---->
38+
This is a quote
39+
<!---->
40+
<!---->
41+
<!---->
42+
</p>
43+
44+
45+
46+
47+
<!---->
48+
</bolt-text>
49+
`;
50+
51+
exports[`<bolt-text> Component Code text using <bolt-text> w/ Shadow DOM renders 2`] = `
52+
<bolt-text
53+
font-family="code"
54+
style=""
55+
>
56+
This is code text
57+
</bolt-text>
58+
`;
59+
60+
exports[`<bolt-text> Component Default <bolt-text> w/ Shadow DOM renders 2`] = `
61+
<bolt-text
62+
style=""
63+
>
64+
This is regular text
65+
</bolt-text>
66+
`;
67+
68+
exports[`<bolt-text> Component xxxlarge headline using <bolt-text> w/ Shadow DOM renders 2`] = `
69+
<bolt-text
70+
font-size="xxxlarge"
71+
headline="true"
72+
style=""
73+
>
74+
This is xxxlarge headline
75+
</bolt-text>
76+
`;
77+
78+
exports[`<bolt-text> Component xxxlarge headline using <bolt-text> w/o Shadow DOM renders 2`] = `
79+
<bolt-text
80+
font-size="xxxlarge"
81+
headline="true"
82+
style=""
83+
>
84+
<!---->
85+
86+
87+
88+
89+
90+
<h2
91+
class="c-bolt-text-v2 c-bolt-text-v2--block c-bolt-text-v2--headline c-bolt-text-v2--font-size-xxxlarge c-bolt-text-v2--font-weight-bold c-bolt-text-v2--font-style-regular c-bolt-text-v2--color-theme-headline c-bolt-text-v2--letter-spacing-narrow c-bolt-text-v2--align-inherit c-bolt-text-v2--text-transform-regular c-bolt-text-v2--line-height-regular c-bolt-text-v2--opacity-100"
92+
style=""
93+
>
94+
<!---->
95+
<!---->
96+
<!---->
97+
This is xxxlarge headline
98+
<!---->
99+
<!---->
100+
<!---->
101+
</h2>
102+
103+
104+
105+
106+
<!---->
107+
</bolt-text>
108+
`;

‎packages/components/bolt-text/__tests__/text.js

Lines changed: 79 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('<bolt-text> Component', () => {
3939
const renderedTextHTML = await page.evaluate(() => {
4040
const text = document.createElement('bolt-text');
4141

42-
text.textContent = `This is bolt text`;
42+
text.textContent = `This is regular text`;
4343
document.body.appendChild(text);
4444

4545
return text.outerHTML;
@@ -56,27 +56,19 @@ describe('<bolt-text> Component', () => {
5656
expect(renderedHTML).toMatchSnapshot();
5757
});
5858

59-
// Basic Usage (Light DOM)
60-
test('Default <bolt-text> w/o Shadow DOM renders', async function() {
59+
// Code text (Shadow DOM)
60+
test('Code text using <bolt-text> w/ Shadow DOM renders', async function() {
6161
const renderedTextHTML = await page.evaluate(() => {
6262
const text = document.createElement('bolt-text');
6363

64-
text.textContent = `This is bolt text`;
64+
text.textContent = `This is code text`;
65+
text.setAttribute('font-family', 'code');
6566
document.body.appendChild(text);
66-
text.useShadow = false;
67-
text.updated();
6867

6968
return text.outerHTML;
7069
});
7170

7271
const renderedHTML = await html(renderedTextHTML);
73-
74-
expect(
75-
renderedHTML
76-
.querySelector('.c-bolt-text-v2')
77-
.classList.contains('c-bolt-text-v2--font-size-medium'),
78-
).toBe(true);
79-
8072
const image = await page.screenshot();
8173

8274
expect(image).toMatchImageSnapshot({
@@ -87,12 +79,12 @@ describe('<bolt-text> Component', () => {
8779
expect(renderedHTML).toMatchSnapshot();
8880
});
8981

90-
// Headline and xxxlarge size (Shadow DOM)
91-
test('<bolt-text> with headline and xxxlarge font-size w/ Shadow DOM renders', async function() {
82+
// xxxlarge Headline (Shadow DOM)
83+
test('xxxlarge headline using <bolt-text> w/ Shadow DOM renders', async function() {
9284
const renderedTextHTML = await page.evaluate(() => {
9385
const text = document.createElement('bolt-text');
9486

95-
text.textContent = `This is bolt text`;
87+
text.textContent = `This is xxxlarge headline`;
9688
text.setAttribute('headline', true);
9789
text.setAttribute('font-size', 'xxxlarge');
9890
document.body.appendChild(text);
@@ -111,12 +103,12 @@ describe('<bolt-text> Component', () => {
111103
expect(renderedHTML).toMatchSnapshot();
112104
});
113105

114-
// Headline and xxxlarge size (Light DOM)
115-
test('<bolt-text> with headline and xxxlarge font-size w/o Shadow DOM renders', async function() {
106+
// xxxlarge Headline (Light DOM)
107+
test('xxxlarge headline using <bolt-text> w/o Shadow DOM renders', async function() {
116108
const renderedTextHTML = await page.evaluate(() => {
117109
const text = document.createElement('bolt-text');
118110

119-
text.textContent = `This is bolt text`;
111+
text.textContent = `This is xxxlarge headline`;
120112
text.setAttribute('headline', true);
121113
text.setAttribute('font-size', 'xxxlarge');
122114
document.body.appendChild(text);
@@ -126,12 +118,39 @@ describe('<bolt-text> Component', () => {
126118
return text.outerHTML;
127119
});
128120

121+
const renderedHTML = await html(renderedTextHTML);
122+
const image = await page.screenshot();
123+
129124
expect(
130125
renderedHTML
131126
.querySelector('.c-bolt-text-v2')
132127
.classList.contains('c-bolt-text-v2--font-size-xxxlarge'),
133128
).toBe(true);
134129

130+
expect(image).toMatchImageSnapshot({
131+
failureThreshold: '0.01',
132+
failureThresholdType: 'percent',
133+
});
134+
135+
expect(renderedHTML).toMatchSnapshot();
136+
});
137+
138+
// All caps xxlarge bold quote (Shadow DOM)
139+
test('All caps xxlarge bold quote using <bolt-text> w/ Shadow DOM renders', async function() {
140+
const renderedTextHTML = await page.evaluate(() => {
141+
const text = document.createElement('bolt-text');
142+
143+
text.textContent = `This is a quote`;
144+
text.setAttribute('quoted', true);
145+
text.setAttribute('letter-spacing', 'wide');
146+
text.setAttribute('text-transform', 'uppercase');
147+
text.setAttribute('font-size', 'xxlarge');
148+
text.setAttribute('font-weight', 'bold');
149+
document.body.appendChild(text);
150+
151+
return text.outerHTML;
152+
});
153+
135154
const renderedHTML = await html(renderedTextHTML);
136155
const image = await page.screenshot();
137156

@@ -143,5 +162,46 @@ describe('<bolt-text> Component', () => {
143162
expect(renderedHTML).toMatchSnapshot();
144163
});
145164

165+
// All caps xxlarge bold quote (Light DOM)
166+
test('All caps xxlarge bold quote using <bolt-text> w/o Shadow DOM renders', async function() {
167+
const renderedTextHTML = await page.evaluate(() => {
168+
const text = document.createElement('bolt-text');
169+
170+
text.textContent = `This is a quote`;
171+
text.setAttribute('quoted', true);
172+
text.setAttribute('letter-spacing', 'wide');
173+
text.setAttribute('text-transform', 'uppercase');
174+
text.setAttribute('font-size', 'xxlarge');
175+
text.setAttribute('font-weight', 'bold');
176+
document.body.appendChild(text);
177+
text.useShadow = false;
178+
text.updated();
179+
180+
return text.outerHTML;
181+
});
182+
183+
const renderedHTML = await html(renderedTextHTML);
184+
const image = await page.screenshot();
185+
186+
expect(
187+
renderedHTML
188+
.querySelector('.c-bolt-text-v2')
189+
.classList.contains(
190+
'c-bolt-text-v2--quoted',
191+
'c-bolt-text-v2--letter-spacing-wide',
192+
'c-bolt-text-v2--text-transform-uppercase',
193+
'c-bolt-text-v2--font-size-xxlarge',
194+
'c-bolt-text-v2--font-weight-bold',
195+
),
196+
).toBe(true);
197+
198+
expect(image).toMatchImageSnapshot({
199+
failureThreshold: '0.01',
200+
failureThresholdType: 'percent',
201+
});
202+
203+
expect(renderedHTML).toMatchSnapshot();
204+
});
205+
146206
// @todo: Bold, wide letter spacing, color, and quoted
147207
});

0 commit comments

Comments
 (0)