Skip to content

Commit fd5effc

Browse files
wwwillchenwwwillchen
committed
Create diffHtml test util and use it for conditional_event_handler_test.ts
1 parent a1f4eff commit fd5effc

File tree

4 files changed

+152
-1
lines changed

4 files changed

+152
-1
lines changed

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
.yarn
22
# Prettier destroys some of the special markdown directives
33
docs/**/*.md
4+
5+
# Test outputs (need exact formatting for assertions to pass)
6+
mesop/tests/e2e/**/*.html

‎mesop/test_utils/e2e/diff_html.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {Page, expect} from '@playwright/test';
2+
3+
export async function diffHtml(page: Page, filename = 'after') {
4+
expect(
5+
prettyPrintHtml(
6+
await page.evaluate(() =>
7+
// Remove angular framework DOM markups, particularly those that include machine-generated ids which
8+
// are brittle.
9+
document.body.innerHTML
10+
.replace(
11+
/<span _ngcontent-ng-[0-9a-z]+="" style="display: none;"><\/span>/g,
12+
'',
13+
)
14+
.replace(/ _ngcontent-ng-[0-9a-z]+=""/g, '')
15+
.replace(/ _nghost-ng-[0-9a-z]+=""/g, '')
16+
.replace(/ ng-reflect-[\-a-z]+=".*?"/g, '')
17+
.replace(/<!--.*?-->/gs, ''),
18+
),
19+
),
20+
).toMatchSnapshot(`${filename}.html`);
21+
}
22+
23+
function prettyPrintHtml(htmlString: string): string {
24+
const tab = ' '; // Two space indentation.
25+
let formatted = '';
26+
let indent = ''; // The current indentation
27+
28+
htmlString.split(/>\s*</).forEach((element) => {
29+
// If the element is a closing tag, decrease indentation
30+
if (element.match(/^\/\w/)) {
31+
indent = indent.substring(tab.length);
32+
}
33+
34+
formatted += `${indent}<${element}>\n`;
35+
36+
// If the element is an opening tag, increase indentation
37+
if (element.match(/^<?\w[^>]*[^\/]$/)) {
38+
indent += tab;
39+
}
40+
});
41+
42+
// Clean-up extra "<" prefix and ">\n" postfix:
43+
return `${formatted.substring(1, formatted.length - 2).trim()}\n`;
44+
}

‎mesop/tests/e2e/conditional_event_handler_test.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import {test, expect} from '@playwright/test';
2+
import {diffHtml} from '../../test_utils/e2e/diff_html';
23

34
test('test conditional event handler', async ({page}) => {
45
await page.goto('/testing/conditional_event_handler');
5-
await page.goto('http://localhost:32123/testing/conditional_event_handler');
66
await page.getByLabel('first checkbox').check();
77
await page.getByLabel('second checkbox').check();
88
expect(
99
await page.getByText('second checkbox has been').textContent(),
1010
).toEqual('second checkbox has been checked');
11+
12+
await diffHtml(page);
1113
});

‎mesop/tests/e2e/conditional_event_handler_test.ts-snapshots/after-chromium-darwin.html

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<mesop-app ng-version="17.2.1">
2+
<router-outlet>
3+
</router-outlet>
4+
<mesop-shell>
5+
<div class="status">
6+
</div>
7+
<mat-sidenav-container class="mat-drawer-container mat-sidenav-container" style="height: 100%;">
8+
<mat-sidenav-content class="mat-drawer-content mat-sidenav-content">
9+
<component-renderer style="">
10+
<component-renderer>
11+
<mesop-text>
12+
<div class="mat-">Make sure tracing discovers event handlers that are conditional</div>
13+
</mesop-text>
14+
</component-renderer>
15+
<component-renderer>
16+
<ng-component>
17+
<component-renderer>
18+
<ng-component>
19+
<mat-checkbox class="mat-mdc-checkbox mat-accent mat-mdc-checkbox-checked" id="mat-mdc-checkbox-1">
20+
<div mat-internal-form-field="" class="mdc-form-field mat-internal-form-field">
21+
<div class="mdc-checkbox">
22+
<div class="mat-mdc-checkbox-touch-target">
23+
</div>
24+
<input type="checkbox" class="mdc-checkbox__native-control mdc-checkbox--anim-unchecked-checked mdc-checkbox--selected" id="mat-mdc-checkbox-1-input" tabindex="0">
25+
<div class="mdc-checkbox__ripple">
26+
</div>
27+
<div class="mdc-checkbox__background">
28+
<svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" class="mdc-checkbox__checkmark">
29+
<path fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path">
30+
</path>
31+
</svg>
32+
<div class="mdc-checkbox__mixedmark">
33+
</div>
34+
</div>
35+
<div mat-ripple="" class="mat-ripple mat-mdc-checkbox-ripple mat-mdc-focus-indicator">
36+
</div>
37+
</div>
38+
<label class="mdc-label" for="mat-mdc-checkbox-1-input">
39+
<component-renderer>
40+
<mesop-text>
41+
<div class="mat-">first checkbox</div>
42+
</mesop-text>
43+
</component-renderer>
44+
</label>
45+
</div>
46+
</mat-checkbox>
47+
</ng-component>
48+
</component-renderer>
49+
</ng-component>
50+
</component-renderer>
51+
<component-renderer>
52+
<ng-component>
53+
<component-renderer>
54+
<ng-component>
55+
<mat-checkbox class="mat-mdc-checkbox mat-accent mat-mdc-checkbox-checked" id="mat-mdc-checkbox-2">
56+
<div mat-internal-form-field="" class="mdc-form-field mat-internal-form-field">
57+
<div class="mdc-checkbox">
58+
<div class="mat-mdc-checkbox-touch-target">
59+
</div>
60+
<input type="checkbox" class="mdc-checkbox__native-control mdc-checkbox--anim-unchecked-checked mdc-checkbox--selected" id="mat-mdc-checkbox-2-input" tabindex="0">
61+
<div class="mdc-checkbox__ripple">
62+
</div>
63+
<div class="mdc-checkbox__background">
64+
<svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" class="mdc-checkbox__checkmark">
65+
<path fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path">
66+
</path>
67+
</svg>
68+
<div class="mdc-checkbox__mixedmark">
69+
</div>
70+
</div>
71+
<div mat-ripple="" class="mat-ripple mat-mdc-checkbox-ripple mat-mdc-focus-indicator">
72+
<div class="mat-ripple-element" style="left: -8.28427px; top: -8.28427px; height: 56.5685px; width: 56.5685px; transition-duration: 150ms; transform: scale3d(1, 1, 1); opacity: 0;">
73+
</div>
74+
</div>
75+
</div>
76+
<label class="mdc-label" for="mat-mdc-checkbox-2-input">
77+
<component-renderer>
78+
<mesop-text>
79+
<div class="mat-">second checkbox</div>
80+
</mesop-text>
81+
</component-renderer>
82+
</label>
83+
</div>
84+
</mat-checkbox>
85+
</ng-component>
86+
</component-renderer>
87+
</ng-component>
88+
</component-renderer>
89+
<component-renderer>
90+
<mesop-text>
91+
<div class="mat-">second checkbox has been checked</div>
92+
</mesop-text>
93+
</component-renderer>
94+
</component-renderer>
95+
</mat-sidenav-content>
96+
</mat-sidenav-container>
97+
</mesop-shell>
98+
</mesop-app>
99+
<script src="zone.js/dist/zone.js">
100+
</script>
101+
<script src="prod_bundle/bundle.js" type="module">
102+
</script>

0 commit comments

Comments
 (0)