/
ratio.js
70 lines (56 loc) · 1.89 KB
/
ratio.js
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
import {
render,
renderString,
stop as stopTwigRenderer,
} from '@bolt/twig-renderer';
import { fixture as html } from '@open-wc/testing-helpers';
async function renderTwig(template, data) {
return await render(template, data, true);
}
const timeout = 60000;
describe('<bolt-ratio> Component', async () => {
let page;
afterAll(async () => {
await stopTwigRenderer();
}, timeout);
beforeEach(async () => {
page = await global.__BROWSER__.newPage();
await page.goto('http://127.0.0.1:4444/', {
timeout: 0,
waitLoad: true,
waitNetworkIdle: true, // defaults to false
});
}, timeout);
test('<bolt-ratio> compiles', async () => {
const results = await render('@bolt-components-ratio/ratio.twig', {
children: '<img src="/fixtures/1200x660.jpg">',
ratio: '1200/660',
});
expect(results.ok).toBe(true);
expect(results.html).toMatchSnapshot();
});
test('Default <bolt-ratio> w/o Shadow DOM renders', async function() {
const renderedRatioHTML = await page.evaluate(() => {
const ratio = document.createElement('bolt-ratio');
const img = document.createElement('img');
img.setAttribute('src', 'http://127.0.0.1:4444/fixtures/1200x660.jpg');
ratio.setAttribute('ratio', '1200/660');
ratio.appendChild(img);
document.body.appendChild(ratio);
ratio.useShadow = false;
ratio.updated();
return ratio.outerHTML;
});
const image = await page.screenshot();
const renderedRatioStyles = await page.evaluate(() => {
const ratio = document.querySelector('bolt-ratio');
return ratio.style.getPropertyValue('--aspect-ratio').trim();
});
expect(renderedRatioStyles).toMatch('1200/660');
expect(image).toMatchImageSnapshot({
failureThreshold: '0.01',
failureThresholdType: 'percent',
});
expect(renderedRatioHTML).toMatchSnapshot();
});
});