-
Notifications
You must be signed in to change notification settings - Fork 784
/
app-root.e2e.ts
81 lines (62 loc) · 2.66 KB
/
app-root.e2e.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
75
76
77
78
79
80
81
import { newE2EPage } from '@stencil/core/testing';
describe('goto root url', () => {
it('have custom hydrate flags and css', async () => {
const page = await newE2EPage({ url: '/' });
const elm = await page.find('app-root');
expect(elm).toHaveAttribute('custom-hydrate-flag');
const elmStyle = await elm.getComputedStyle();
expect(elmStyle.opacity).toBe('1');
const headStyleElm = await page.find('head style[data-styles]');
expect(headStyleElm.innerHTML).toContain('{opacity:0}[custom-hydrate-flag]{opacity:1}');
});
it('should navigate to the index.html page w/out url searchParams', async () => {
// create a new puppeteer page
// and go to the root webpage
const page = await newE2EPage({ url: '/' });
// select the "prop-cmp" element within the page (same as querySelector)
// and once it's received, then return the element's "textContent" property
const elm = await page.find('prop-cmp >>> div');
expect(elm).toEqualText('Hello, my name is Stencil JS');
await page.compareScreenshot('navigate to homepage', {
fullPage: false,
clip: { x: 0, y: 0, width: 400, height: 250 },
omitBackground: true,
});
});
it('should navigate to the index.html page with custom url searchParams', async () => {
// create a new puppeteer page
const page = await newE2EPage({
url: '/?first=Doc&last=Brown',
});
const elm = await page.find('prop-cmp >>> div');
expect(elm).toEqualText('Hello, my name is Doc Brown');
await page.compareScreenshot('navigate to homepage with querystrings');
});
it('should apply global style when navigating to root page', async () => {
const page = await newE2EPage({
url: '/',
});
const elm = await page.find('app-root');
const elmStyle = await elm.getComputedStyle();
expect(elmStyle.borderColor).toBe('rgb(255, 0, 0)');
expect(elmStyle.borderWidth).toBe('5px');
expect(elmStyle.borderStyle).toBe('dotted');
});
it('should apply global style when setting html', async () => {
const page = await newE2EPage({
url: '/',
});
const elm = await page.find('app-root');
const elmStyle = await elm.getComputedStyle();
expect(elmStyle.borderColor).toBe('rgb(255, 0, 0)');
expect(elmStyle.borderWidth).toBe('5px');
expect(elmStyle.borderStyle).toBe('dotted');
const videoElm = await page.find('#video');
const videoStyle = await videoElm.getComputedStyle();
// @Component() styles
expect(videoStyle.borderColor).toBe('rgb(0, 0, 255)');
expect(videoStyle.borderWidth).toBe('2px');
// linaria styles
expect(videoStyle.backgroundColor).toBe('rgba(0, 0, 255, 0.1)');
});
});