Skip to content
This repository was archived by the owner on Aug 20, 2024. It is now read-only.

Commit 8cce4b3

Browse files
mskeltonmskelton
authored
Update iframe tests (#115)
* Make test site for iframe tests Fixes #104 * Update toBeChecked * Update more iframe tests * Update frame src * Fix more tests * Fix toEqualText * More fixes * Finish iframe setup * Convert to TS * Fix jest config
1 parent 437f3ec commit 8cce4b3

File tree

18 files changed

+159
-74
lines changed

18 files changed

+159
-74
lines changed

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
src/
2+
lib/config/
3+
tests/
24
coverage/
35
jest.config.js
46
tsconfig.json

‎config/global-setup.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import http from "http"
2+
import fs from "fs"
3+
import path from "path"
4+
import setup from "jest-playwright-preset/setup"
5+
import type { Config } from "@jest/types"
6+
7+
const requestListener =
8+
(html: string) => (_: http.IncomingMessage, res: http.ServerResponse) => {
9+
res.writeHead(200)
10+
res.end(html)
11+
}
12+
13+
export default async (config: Config.GlobalConfig) => {
14+
const filePath = path.join(__dirname, "iframe.html")
15+
const html = await fs.promises.readFile(filePath, { encoding: "utf-8" })
16+
17+
global.server = http.createServer(requestListener(html))
18+
global.server.listen(8080)
19+
20+
await setup(config)
21+
}

‎config/global-teardown.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import teardown from "jest-playwright-preset/teardown"
2+
import type { Config } from "@jest/types"
3+
4+
export default async (config: Config.GlobalConfig) => {
5+
await teardown(config)
6+
global.server.close()
7+
}

‎config/iframe.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Testing Playground</title>
5+
<style>
6+
.foo {
7+
color: red;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
<h1><code>expect-playwright</code> Testing Playground</h1>
13+
14+
<section>
15+
<h1>Inputs</h1>
16+
<input id="checkbox-checked" type="checkbox" checked />
17+
<label for="checkbox-checked">Checked</label>
18+
19+
<input id="checkbox-unchecked" type="checkbox" />
20+
<label for="checkbox-unchecked">Unchecked</label>
21+
22+
<input id="input-empty" type="text" />
23+
<input id="input-filled" type="text" value="bar" />
24+
</section>
25+
26+
<section>
27+
<h1>Text</h1>
28+
<p id="text">Foobar</p>
29+
</section>
30+
31+
<section>
32+
<h1>Attributes</h1>
33+
<p id="attr" aria-label="foobar">Hi</p>
34+
</section>
35+
36+
<section>
37+
<h1>Styles</h1>
38+
<p id="styles" class="foo">I'm red!</p>
39+
</section>
40+
41+
<section>
42+
<h1>Count</h1>
43+
<p class="count">Number 1</p>
44+
<p class="count">Number 2</p>
45+
</section>
46+
</body>
47+
</html>

‎config/types.d.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
declare module "jest-playwright-preset/setup" {
2+
import { Config } from "@jest/types"
3+
function setup(config: Config.GlobalConfig): Promise<void>
4+
export default setup
5+
}
6+
7+
declare module "jest-playwright-preset/teardown" {
8+
import { Config } from "@jest/types"
9+
function teardown(config: Config.GlobalConfig): Promise<void>
10+
export default teardown
11+
}
12+
13+
declare namespace NodeJS {
14+
interface Global {
15+
server: import("http").Server
16+
}
17+
}

‎jest.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
module.exports = {
2+
globalSetup: "./config/global-setup.ts",
3+
globalTeardown: "./config/global-teardown.ts",
24
preset: "jest-playwright-preset",
35
testMatch: ["**/src/**/*.test.ts"],
46
collectCoverage: true,

‎src/matchers/toBeChecked/index.test.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { assertSnapshot } from "../tests/utils"
22

3-
const iframeSrc = `<iframe src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-checkbox.html">`
4-
53
describe("toBeChecked", () => {
64
beforeEach(async () => {
75
await jestPlaywright.resetContext()
@@ -14,11 +12,11 @@ describe("toBeChecked", () => {
1412
})
1513

1614
it("positive in frame", async () => {
17-
await page.setContent(iframeSrc)
15+
await page.setContent(`<iframe src="http://localhost:8080">`)
1816
const handle = await page.$("iframe")
1917
const iframe = await handle?.contentFrame()
20-
await expect(handle).toBeChecked("#scales")
21-
await expect(iframe).toBeChecked("#scales")
18+
await expect(handle).toBeChecked("#checkbox-checked")
19+
await expect(iframe).toBeChecked("#checkbox-checked")
2220
})
2321

2422
it("negative: target element isn't checked", async () => {
@@ -55,11 +53,11 @@ describe("toBeChecked", () => {
5553
})
5654

5755
it("positive in frame", async () => {
58-
await page.setContent(iframeSrc)
56+
await page.setContent(`<iframe src="http://localhost:8080">`)
5957
const handle = await page.$("iframe")
6058
const iframe = await handle?.contentFrame()
61-
await expect(handle).not.toBeChecked("#horns")
62-
await expect(iframe).not.toBeChecked("#horns")
59+
await expect(handle).not.toBeChecked("#checkbox-unchecked")
60+
await expect(iframe).not.toBeChecked("#checkbox-unchecked")
6361
})
6462

6563
it("negative", async () => {

‎src/matchers/toEqualText/index.test.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ describe("toEqualText", () => {
66
})
77
describe("selector", () => {
88
it("positive frame", async () => {
9-
await page.setContent(`<iframe src="https://example.com"></iframe>`)
9+
await page.setContent(`<iframe src="http://localhost:8080"></iframe>`)
1010
const handle = await page.$("iframe")
1111
const iframe = await handle?.contentFrame()
12-
await expect(handle).toEqualText("h1", "Example Domain")
13-
await expect(iframe).toEqualText("h1", "Example Domain")
12+
await expect(handle).toEqualText("#text", "Foobar")
13+
await expect(iframe).toEqualText("#text", "Foobar")
1414
})
1515
it("positive", async () => {
1616
await page.setContent(`<div id="foobar">Bar</div>`)
@@ -22,11 +22,11 @@ describe("toEqualText", () => {
2222
})
2323
describe("with 'not' usage", () => {
2424
it("positive in frame", async () => {
25-
await page.setContent(`<iframe src="https://example.com"></iframe>`)
25+
await page.setContent(`<iframe src="http://localhost:8080"></iframe>`)
2626
const handle = await page.$("iframe")
2727
const iframe = await handle?.contentFrame()
28-
await expect(handle).not.toEqualText("h1", "Foo")
29-
await expect(iframe).not.toEqualText("h1", "Foo")
28+
await expect(handle).not.toEqualText("#text", "Foo")
29+
await expect(iframe).not.toEqualText("#text", "Foo")
3030
})
3131
it("positive", async () => {
3232
await page.setContent(`<div id="foobar">Bar</div>`)

‎src/matchers/toHaveFocus/index.test.ts‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { assertSnapshot } from "../tests/utils"
22

3-
const iframeSrc = `<iframe src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-text.html">`
4-
53
describe("toHaveFocus", () => {
64
beforeEach(async () => {
75
await jestPlaywright.resetContext()
@@ -15,16 +13,16 @@ describe("toHaveFocus", () => {
1513
})
1614

1715
it("positive in frame", async () => {
18-
await page.setContent('<iframe src="https://example.com">')
16+
await page.setContent('<iframe src="http://localhost:8080">')
1917
await page.keyboard.press("Tab")
2018

2119
const handle = page.$("iframe")
22-
await expect(handle).toHaveFocus("a")
23-
await expect(await handle).toHaveFocus("a")
20+
await expect(handle).toHaveFocus("#checkbox-checked")
21+
await expect(await handle).toHaveFocus("#checkbox-checked")
2422

2523
const frame = (await handle)?.contentFrame()
26-
await expect(frame).toHaveFocus("a")
27-
await expect(await frame).toHaveFocus("a")
24+
await expect(frame).toHaveFocus("#checkbox-checked")
25+
await expect(await frame).toHaveFocus("#checkbox-checked")
2826
})
2927

3028
it("negative", async () => {
@@ -58,15 +56,15 @@ describe("toHaveFocus", () => {
5856
})
5957

6058
it("positive in frame", async () => {
61-
await page.setContent('<iframe src="https://example.com">')
59+
await page.setContent('<iframe src="http://localhost:8080">')
6260

6361
const handle = page.$("iframe")
64-
await expect(handle).not.toHaveFocus("a")
65-
await expect(await handle).not.toHaveFocus("a")
62+
await expect(handle).not.toHaveFocus("#checkbox-checked")
63+
await expect(await handle).not.toHaveFocus("#checkbox-checked")
6664

6765
const frame = (await handle)?.contentFrame()
68-
await expect(frame).not.toHaveFocus("a")
69-
await expect(await frame).not.toHaveFocus("a")
66+
await expect(frame).not.toHaveFocus("#checkbox-checked")
67+
await expect(await frame).not.toHaveFocus("#checkbox-checked")
7068
})
7169

7270
it("negative", async () => {

‎src/matchers/toHaveSelector/index.test.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,14 @@ describe("toHaveSelector", () => {
99
await expect(page).toHaveSelector("#foobar")
1010
})
1111
it("positive in frame", async () => {
12-
await page.setContent(`<iframe src="https://example.com"></iframe>`)
13-
const selector = "a:text-is('More information...')"
14-
12+
await page.setContent(`<iframe src="http://localhost:8080"></iframe>`)
1513
const handle = page.$("iframe")
16-
await expect(handle).toHaveSelector(selector)
17-
await expect(await handle).toHaveSelector(selector)
14+
await expect(handle).toHaveSelector("#attr")
15+
await expect(await handle).toHaveSelector("#attr")
1816

1917
const frame = (await handle)?.contentFrame()
20-
await expect(frame).toHaveSelector(selector)
21-
await expect(await frame).toHaveSelector(selector)
18+
await expect(frame).toHaveSelector("#attr")
19+
await expect(await frame).toHaveSelector("#attr")
2220
})
2321
it("negative", async () => {
2422
await assertSnapshot(() =>

0 commit comments

Comments
 (0)