Skip to content

Commit 7b5e365

Browse files
test: use html helper
1 parent 73be1b4 commit 7b5e365

File tree

3 files changed

+104
-54
lines changed

3 files changed

+104
-54
lines changed

tests/McpContext.test.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,19 @@ import sinon from 'sinon';
1010

1111
import type {TraceResult} from '../src/trace-processing/parse.js';
1212

13-
import {withBrowser} from './utils.js';
13+
import {html, withBrowser} from './utils.js';
1414

1515
describe('McpContext', () => {
1616
it('list pages', async () => {
1717
await withBrowser(async (_response, context) => {
1818
const page = context.getSelectedPage();
19-
await page.setContent(`<!DOCTYPE html>
20-
<button>Click me</button><input type="text" value="Input">`);
19+
await page.setContent(
20+
html`<button>Click me</button
21+
><input
22+
type="text"
23+
value="Input"
24+
/>`,
25+
);
2126
await context.createTextSnapshot();
2227
assert.ok(await context.getElementByUid('1_1'));
2328
await context.createTextSnapshot();

tests/McpResponse.test.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,13 @@ Testing 2`,
5454
it('returns correctly formatted snapshot for a simple tree', async () => {
5555
await withBrowser(async (response, context) => {
5656
const page = context.getSelectedPage();
57-
await page.setContent(`<!DOCTYPE html>
58-
<button>Click me</button><input type="text" value="Input">`);
57+
await page.setContent(
58+
html`<button>Click me</button
59+
><input
60+
type="text"
61+
value="Input"
62+
/>`,
63+
);
5964
await page.focus('button');
6065
response.includeSnapshot();
6166
const result = await response.handle('test', context);
@@ -64,7 +69,7 @@ Testing 2`,
6469
result[0].text,
6570
`# test response
6671
## Page content
67-
uid=1_0 RootWebArea
72+
uid=1_0 RootWebArea "My test page"
6873
uid=1_1 button "Click me" focusable focused
6974
uid=1_2 textbox value="Input"
7075
`,

tests/tools/input.test.ts

Lines changed: 88 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('input', () => {
2929
await withBrowser(async (response, context) => {
3030
const page = context.getSelectedPage();
3131
await page.setContent(
32-
`<!DOCTYPE html><button onclick="this.innerText = 'clicked';">test`,
32+
html`<button onclick="this.innerText = 'clicked';">test</button>`,
3333
);
3434
await context.createTextSnapshot();
3535
await click.handler(
@@ -53,7 +53,9 @@ describe('input', () => {
5353
await withBrowser(async (response, context) => {
5454
const page = context.getSelectedPage();
5555
await page.setContent(
56-
`<!DOCTYPE html><button ondblclick="this.innerText = 'dblclicked';">test`,
56+
html`<button ondblclick="this.innerText = 'dblclicked';"
57+
>test</button
58+
>`,
5759
);
5860
await context.createTextSnapshot();
5961
await click.handler(
@@ -158,7 +160,7 @@ describe('input', () => {
158160
await withBrowser(async (response, context) => {
159161
const page = context.getSelectedPage();
160162
await page.setContent(
161-
`<!DOCTYPE html><button onmouseover="this.innerText = 'hovered';">test`,
163+
html`<button onmouseover="this.innerText = 'hovered';">test</button>`,
162164
);
163165
await context.createTextSnapshot();
164166
await hover.handler(
@@ -184,7 +186,7 @@ describe('input', () => {
184186
it('fills out an input', async () => {
185187
await withBrowser(async (response, context) => {
186188
const page = context.getSelectedPage();
187-
await page.setContent(`<!DOCTYPE html><input>`);
189+
await page.setContent(html`<input />`);
188190
await context.createTextSnapshot();
189191
await fill.handler(
190192
{
@@ -209,7 +211,10 @@ describe('input', () => {
209211
await withBrowser(async (response, context) => {
210212
const page = context.getSelectedPage();
211213
await page.setContent(
212-
`<!DOCTYPE html><select><option value="v1">one</option><option value="v2">two</option></select>`,
214+
html`<select
215+
><option value="v1">one</option
216+
><option value="v2">two</option></select
217+
>`,
213218
);
214219
await context.createTextSnapshot();
215220
await fill.handler(
@@ -239,25 +244,35 @@ describe('input', () => {
239244
it('drags one element onto another', async () => {
240245
await withBrowser(async (response, context) => {
241246
const page = context.getSelectedPage();
242-
await page.setContent(`<!DOCTYPE html>
243-
<div role="button" id="drag" draggable="true">drag me</div>
244-
<div id="drop" aria-label="drop"
245-
style="width: 100px; height: 100px; border: 1px solid black;" ondrop="this.innerText = 'dropped';">
246-
</div>
247-
<script>
248-
drag.addEventListener("dragstart", (event) => {
249-
event.dataTransfer.setData("text/plain", event.target.id);
250-
});
251-
drop.addEventListener("dragover", (event) => {
252-
event.preventDefault();
253-
event.dataTransfer.dropEffect = "move";
254-
});
255-
drop.addEventListener("drop", (event) => {
256-
event.preventDefault();
257-
const data = event.dataTransfer.getData("text/plain");
258-
event.target.appendChild(document.getElementById(data));
259-
});
260-
</script>`);
247+
await page.setContent(
248+
html`<div
249+
role="button"
250+
id="drag"
251+
draggable="true"
252+
>drag me</div
253+
>
254+
<div
255+
id="drop"
256+
aria-label="drop"
257+
style="width: 100px; height: 100px; border: 1px solid black;"
258+
ondrop="this.innerText = 'dropped';"
259+
>
260+
</div>
261+
<script>
262+
drag.addEventListener('dragstart', event => {
263+
event.dataTransfer.setData('text/plain', event.target.id);
264+
});
265+
drop.addEventListener('dragover', event => {
266+
event.preventDefault();
267+
event.dataTransfer.dropEffect = 'move';
268+
});
269+
drop.addEventListener('drop', event => {
270+
event.preventDefault();
271+
const data = event.dataTransfer.getData('text/plain');
272+
event.target.appendChild(document.getElementById(data));
273+
});
274+
</script>`,
275+
);
261276
await context.createTextSnapshot();
262277
await drag.handler(
263278
{
@@ -283,12 +298,24 @@ describe('input', () => {
283298
it('successfully fills out the form', async () => {
284299
await withBrowser(async (response, context) => {
285300
const page = context.getSelectedPage();
286-
await page.setContent(`<!DOCTYPE html>
287-
<form>
288-
<label>username<input name=username type="text"/></label>
289-
<label>email<input name=email type="text"/></label>
290-
<input type=submit value="Submit">
291-
</form>`);
301+
await page.setContent(
302+
html`<form>
303+
<label
304+
>username<input
305+
name="username"
306+
type="text"
307+
/></label>
308+
<label
309+
>email<input
310+
name="email"
311+
type="text"
312+
/></label>
313+
<input
314+
type="submit"
315+
value="Submit"
316+
/>
317+
</form>`,
318+
);
292319
await context.createTextSnapshot();
293320
await fillForm.handler(
294321
{
@@ -335,10 +362,14 @@ describe('input', () => {
335362

336363
await withBrowser(async (response, context) => {
337364
const page = context.getSelectedPage();
338-
await page.setContent(`<!DOCTYPE html>
339-
<form>
340-
<input type="file" id="file-input">
341-
</form>`);
365+
await page.setContent(
366+
html`<form>
367+
<input
368+
type="file"
369+
id="file-input"
370+
/>
371+
</form>`,
372+
);
342373
await context.createTextSnapshot();
343374
await uploadFile.handler(
344375
{
@@ -366,14 +397,21 @@ describe('input', () => {
366397

367398
await withBrowser(async (response, context) => {
368399
const page = context.getSelectedPage();
369-
await page.setContent(`<!DOCTYPE html>
370-
<button id="file-chooser-button">Upload file</button>
371-
<input type="file" id="file-input" style="display: none;">
372-
<script>
373-
document.getElementById('file-chooser-button').addEventListener('click', () => {
374-
document.getElementById('file-input').click();
375-
});
376-
</script>`);
400+
await page.setContent(
401+
html`<button id="file-chooser-button">Upload file</button>
402+
<input
403+
type="file"
404+
id="file-input"
405+
style="display: none;"
406+
/>
407+
<script>
408+
document
409+
.getElementById('file-chooser-button')
410+
.addEventListener('click', () => {
411+
document.getElementById('file-input').click();
412+
});
413+
</script>`,
414+
);
377415
await context.createTextSnapshot();
378416
await uploadFile.handler(
379417
{
@@ -406,7 +444,7 @@ describe('input', () => {
406444

407445
await withBrowser(async (response, context) => {
408446
const page = context.getSelectedPage();
409-
await page.setContent(`<!DOCTYPE html><div>Not a file input</div>`);
447+
await page.setContent(html`<div>Not a file input</div>`);
410448
await context.createTextSnapshot();
411449

412450
await assert.rejects(
@@ -465,11 +503,13 @@ describe('input', () => {
465503
it('processes press_key', async () => {
466504
await withBrowser(async (response, context) => {
467505
const page = context.getSelectedPage();
468-
await page.setContent(`<!DOCTYPE html><script>
469-
logs=[];
470-
document.addEventListener('keydown', e => logs.push('d'+e.key));
471-
document.addEventListener('keyup', e => logs.push('u'+e.key));
472-
</script>`);
506+
await page.setContent(
507+
html`<script>
508+
logs = [];
509+
document.addEventListener('keydown', e => logs.push('d' + e.key));
510+
document.addEventListener('keyup', e => logs.push('u' + e.key));
511+
</script>`,
512+
);
473513
await context.createTextSnapshot();
474514

475515
await pressKey.handler(

0 commit comments

Comments
 (0)