Skip to content

Commit 26a5dfc

Browse files
benmonrobenmonro
authored
feat: support for configure (#19)
* feat: support for configure * lint
1 parent 4db8b74 commit 26a5dfc

File tree

5 files changed

+102
-76
lines changed

5 files changed

+102
-76
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"test": "npm-run-all --parallel test:unit test:testcafe",
1616
"semantic-release": "semantic-release"
1717
},
18-
"files": [ "dist" ],
18+
"files": [
19+
"dist"
20+
],
1921
"keywords": [],
2022
"author": "",
2123
"license": "ISC",

‎src/index.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
/* eslint-disable no-new-func */
33
import fs from 'fs'
44
import path from 'path'
5-
import {ClientFunction, Selector} from 'testcafe'
6-
import {queries} from 'dom-testing-library'
5+
import { ClientFunction, Selector } from 'testcafe'
6+
import { queries } from 'dom-testing-library'
77

88
const LIBRARY_UMD_PATH = path.join(
99
'./node_modules',
@@ -20,11 +20,11 @@ export const addTestcafeTestingLibrary = async t => {
2020
window.TestCafeTestingLibrary = {}
2121
},
2222
{
23-
dependencies: {script: LIBRARY_UMD_CONTENT},
23+
dependencies: { script: LIBRARY_UMD_CONTENT },
2424
},
2525
)
2626

27-
await inject.with({boundTestRun: t})()
27+
await inject.with({ boundTestRun: t })()
2828
}
2929

3030
Object.keys(queries).forEach(queryName => {
@@ -60,3 +60,12 @@ export const within = async sel => {
6060

6161
return container
6262
}
63+
64+
65+
export const configure = async options => {
66+
await ClientFunction(new Function(
67+
`
68+
window.DomTestingLibrary.configure(${JSON.stringify(options)});
69+
`
70+
))
71+
}

‎test-app/index.html‎

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>testcafe-testing-library</title>
8-
<style>
9-
blockquote {
10-
margin: 0;
11-
border-left: 4px solid grey;
12-
padding-left: 10px;
13-
color: grey;
14-
}
15-
section {
16-
padding: 10px;
17-
}
18-
</style>
19-
</head>
20-
<body>
21-
<blockquote>
22-
No auto-reload after changing this static HTML markup: click
23-
<span title="Run All Tests">↻</span> Run All Tests.
24-
</blockquote>
25-
<section>
26-
<h2>getByPlaceholderText</h2>
27-
<input type="text" placeholder="Placeholder Text" />
28-
</section>
29-
<section>
30-
<h2>getByText</h2>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>testcafe-testing-library</title>
9+
<style>
10+
blockquote {
11+
margin: 0;
12+
border-left: 4px solid grey;
13+
padding-left: 10px;
14+
color: grey;
15+
}
16+
17+
section {
18+
padding: 10px;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<blockquote>
25+
No auto-reload after changing this static HTML markup: click
26+
<span title="Run All Tests">↻</span> Run All Tests.
27+
</blockquote>
28+
<section>
29+
<h2>getByPlaceholderText</h2>
30+
<input type="text" placeholder="Placeholder Text" />
31+
</section>
32+
<section>
33+
<h2>getByText</h2>
34+
<button onclick="this.innerText = 'Button Clicked'">Button Text</button>
35+
<div id="nested">
36+
<h3>getByText within</h3>
3137
<button onclick="this.innerText = 'Button Clicked'">Button Text</button>
32-
<div id="nested">
33-
<h3>getByText within</h3>
34-
<button onclick="this.innerText = 'Button Clicked'">Button Text</button>
35-
</div>
36-
</section>
37-
<section>
38-
<h2>getByLabelText</h2>
39-
<label for="input-labelled-by-id">Label For Input Labelled By Id</label>
40-
<input
41-
type="text"
42-
placeholder="Input Labelled By Id"
43-
id="input-labelled-by-id"
44-
/>
45-
</section>
46-
<section>
47-
<h2>getByAltText</h2>
48-
<img
49-
src="data:image/png;base64,"
50-
alt="Image Alt Text"
51-
onclick="this.style.border = '5px solid red'"
52-
/>
53-
</section>
54-
<section>
55-
<h2>getByTestId</h2>
56-
<img
57-
data-testid="image-with-random-alt-tag"
58-
src="data:image/png;base64,"
59-
onclick="this.style.border = '5px solid red'"
60-
/>
61-
</section>
62-
<section>
63-
<h2>getAllByText</h2>
64-
<button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 1</button>
65-
<button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 2</button>
66-
</section>
67-
<!-- Prettier unindents the script tag below -->
68-
<script>
69-
document
70-
.querySelector('[data-testid="image-with-random-alt-tag"]')
71-
.setAttribute("alt", "Image Random Alt Text " + Math.random());
72-
</script>
73-
</body>
74-
</html>
38+
</div>
39+
</section>
40+
<section>
41+
<h2>getByLabelText</h2>
42+
<label for="input-labelled-by-id">Label For Input Labelled By Id</label>
43+
<input type="text" placeholder="Input Labelled By Id" id="input-labelled-by-id" />
44+
</section>
45+
<section>
46+
<h2>getByAltText</h2>
47+
<img src="data:image/png;base64," alt="Image Alt Text" onclick="this.style.border = '5px solid red'" />
48+
</section>
49+
<section>
50+
<h2>getByTestId</h2>
51+
<img data-testid="image-with-random-alt-tag" src="data:image/png;base64,"
52+
onclick="this.style.border = '5px solid red'" />
53+
</section>
54+
<section>
55+
<h2>configure</h2>
56+
<img data-automation-id="image-with-random-alt-tag" src="data:image/png;base64,"
57+
onclick="this.style.border = '5px solid red'" />
58+
</section>
59+
<section>
60+
<h2>getAllByText</h2>
61+
<button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 1</button>
62+
<button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 2</button>
63+
</section>
64+
<!-- Prettier unindents the script tag below -->
65+
<script>
66+
document
67+
.querySelector('[data-testid="image-with-random-alt-tag"]')
68+
.setAttribute("alt", "Image Random Alt Text " + Math.random());
69+
</script>
70+
</body>
71+
72+
</html>

‎tests/testcafe/configure.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* eslint-disable import/named */
2+
import { configure, getByTestId, addTestcafeTestingLibrary } from '../../src'
3+
4+
5+
6+
// eslint-disable-next-line babel/no-unused-expressions
7+
fixture`configure`.beforeEach(addTestcafeTestingLibrary)
8+
.page`http://localhost:13370`
9+
10+
11+
test('configure', async t => {
12+
await configure({ testIdAttribute: 'data-automation-id' });
13+
14+
await t
15+
.click(getByTestId('image-with-random-alt-tag'))
16+
})

‎tests/unit/__snapshots__/selectors.test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`exports expected selectors 1`] = `
44
Array [
55
"addTestcafeTestingLibrary",
66
"within",
7+
"configure",
78
"queryAllByLabelText",
89
"getAllByLabelText",
910
"queryByLabelText",

0 commit comments

Comments
 (0)