Skip to content

Commit c1ef5c1

Browse files
olivierwilkinsonolivierwilkinson
committed
feat: Initial release
0 parents  commit c1ef5c1

17 files changed

+1222
-0
lines changed

‎.eslintrc

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"extends": "./node_modules/kcd-scripts/eslint.js",
3+
"rules": {
4+
"babel/new-cap": "off",
5+
"func-names": "off",
6+
"babel/no-unused-expressions": "off",
7+
"prefer-arrow-callback": "off",
8+
"testing-library/no-await-sync-query": "off",
9+
"testing-library/no-dom-import": "off",
10+
"testing-library/prefer-screen-queries": "off"
11+
},
12+
"overrides": [
13+
{
14+
"files": ["wdio.conf.js", "*/**/*.e2e.js"],
15+
"globals": {
16+
"browser": "readonly"
17+
}
18+
}
19+
]
20+
}

‎.github/workflows/webdriverio-testing-library.yml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
name: webdriverio-testing-library
2+
on:
3+
push:
4+
branches:
5+
- 'master'
6+
pull_request:
7+
8+
jobs:
9+
test:
10+
name: 'node ${{ matrix.node }} chrome ${{ matrix.os }} '
11+
runs-on: '${{ matrix.os }}'
12+
strategy:
13+
matrix:
14+
os: [ubuntu-latest]
15+
node: [12, 10]
16+
steps:
17+
- uses: nanasess/setup-chromedriver@master
18+
with:
19+
chromedriver-version: '79.0.3945.36'
20+
- run: |
21+
export DISPLAY=:99
22+
sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional
23+
- uses: actions/setup-node@v1
24+
with:
25+
node-version: ${{ matrix.node }}
26+
- uses: actions/checkout@v1
27+
- run: npm install
28+
- run: npm run validate
29+
env:
30+
CI: true
31+
release:
32+
runs-on: ubuntu-latest
33+
needs: test
34+
steps:
35+
- uses: actions/setup-node@v1
36+
with:
37+
node-version: 12
38+
- uses: actions/checkout@v1
39+
- run: npm install
40+
- run: npm run build
41+
- run: ls -asl dist
42+
- run: npx semantic-release
43+
env:
44+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
45+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
24+
# nyc test coverage
25+
.nyc_output
26+
27+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
28+
.grunt
29+
30+
# Bower dependency directory (https://bower.io/)
31+
bower_components
32+
33+
# node-waf configuration
34+
.lock-wscript
35+
36+
# Compiled binary addons (https://nodejs.org/api/addons.html)
37+
build/Release
38+
39+
# Dependency directories
40+
node_modules/
41+
jspm_packages/
42+
43+
# Optional npm cache directory
44+
.npm
45+
46+
# Optional eslint cache
47+
.eslintcache
48+
49+
# Optional REPL history
50+
.node_repl_history
51+
52+
# Output of 'npm pack'
53+
*.tgz
54+
55+
# Yarn Integrity file
56+
.yarn-integrity
57+
58+
# dotenv environment variables file
59+
.env
60+
.env.test
61+
62+
# parcel-bundler cache (https://parceljs.org/)
63+
.cache
64+
65+
# next.js build output
66+
.next
67+
68+
# nuxt.js build output
69+
.nuxt
70+
71+
# vuepress build output
72+
.vuepress/dist
73+
74+
# Serverless directories
75+
.serverless/
76+
77+
# FuseBox cache
78+
.fusebox/
79+
80+
# DynamoDB Local files
81+
.dynamodb/
82+
dist
83+
ignorethis.txt
84+
tests_output

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

‎.prettierignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
package.json
2+
node_modules
3+
dist
4+
coverage

‎.prettierrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": true,
7+
"trailingComma": "all",
8+
"bracketSpacing": false,
9+
"jsxBracketSameLine": false
10+
}

‎.travis.yml

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
dist: trusty
2+
sudo: required
3+
addons:
4+
firefox: latest
5+
apt:
6+
sources:
7+
- google-chrome
8+
packages:
9+
- google-chrome-stable fluxbox
10+
before_script:
11+
- export DISPLAY=:99.0
12+
- sh -e /etc/init.d/xvfb start
13+
- sleep 3
14+
- fluxbox >/dev/null 2>&1 &
15+
language: node_js
16+
node_js: 'stable'
17+
before_install:
18+
- stty cols 80
19+
notifications:
20+
email: false
21+
script: npm run validate
22+
after_success: npx semantic-release
23+
branches:
24+
only:
25+
- master
26+
- next

‎README.md

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<div align="center">
2+
<h1>webdriverio-testing-library</h1>
3+
4+
</a>
5+
6+
<p>WebdriverIO utilities that encourage good testing practices laid down by dom-testing-library.</p>
7+
8+
<p><strong>Based heavily on the great work on <a href="https://github.com/testing-library/nightwatch-testing-library">nightwatch-testing-library</a></strong></p>
9+
10+
</div>
11+
12+
<hr />
13+
14+
[![Build Status][build-badge]][build]
15+
[![version][version-badge]][package]
16+
[![MIT License][license-badge]][license]
17+
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
18+
19+
[![PRs Welcome][prs-badge]][prs]
20+
[![Code of Conduct][coc-badge]][coc]
21+
22+
<div align="center">
23+
<a href="https://testingjavascript.com">
24+
<img width="500" alt="TestingJavaScript.com Learn the smart, efficient way to test any JavaScript application." src="https://raw.githubusercontent.com/kentcdodds/cypress-testing-library/master/other/testingjavascript.jpg" />
25+
</a>
26+
</div>
27+
28+
## The problem
29+
30+
You want to use [dom-testing-library](https://github.com/kentcdodds/dom-testing-library) methods in your [webdriverio][webdriverio] tests.
31+
32+
## This solution
33+
34+
Based heavily on [nightwatch-testing-library][nightwatch-testing-library]
35+
36+
This allows you to use all the useful [dom-testing-library](https://github.com/kentcdodds/dom-testing-library) methods in your tests.
37+
38+
## Table of Contents
39+
40+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
41+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
42+
43+
- [Installation](#installation)
44+
- [Usage](#usage)
45+
- [Other Solutions](#other-solutions)
46+
- [LICENSE](#license)
47+
48+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
49+
50+
## Installation
51+
52+
This module is distributed via [npm][npm] which is bundled with [node][node] and
53+
should be installed as one of your project's `devDependencies`:
54+
55+
```
56+
npm install --save-dev webdriverio-testing-library
57+
```
58+
59+
## Usage
60+
61+
### setupBrowser
62+
63+
Accepts a WebdriverIO BrowserObject and resolves with
64+
dom-testing-library queries modifed to return WebdriverIO Elements. All the
65+
queries are async, including queryBy and getBy variants, and are bound to
66+
`document.body` by default.
67+
68+
```
69+
const {setupBrowser} = require('webdriverio-testing-library');
70+
71+
it('can click button', async () => {
72+
const {getByText} = await setupBrowser(browser)
73+
74+
const button = await getByText('Button Text');
75+
await button.click();
76+
77+
expect(await button.getText()).toEqual('Button Clicked')
78+
})
79+
```
80+
81+
Queries are also added to the BrowserObject and Elements as commands. The
82+
browser commands are scoped to the `document.body` as above and the Element
83+
commands are scoped to the element.
84+
85+
```
86+
it('adds queries as browser commands', async () => {
87+
await setupBrowser(browser);
88+
89+
expect(await browser.getByText('Page Heading')).toBeDefined()
90+
})
91+
92+
it('adds queries as element commands scoped to element', async () => {
93+
await setupBrowser(browser);
94+
95+
const nested = await browser.$('*[data-testid="nested"]');
96+
const button = await nested.getByText('Button Text')
97+
await button.click()
98+
99+
expect(await button.getText()).toEqual('Button Clicked')
100+
})
101+
```
102+
103+
### within
104+
105+
Returns queries scoped to a WebdriverIO element
106+
107+
```
108+
const {within} = require('webdriverio-testing-library')
109+
110+
it('within scopes queries to element', async () => {
111+
const nested = await browser.$('*[data-testid="nested"]');
112+
113+
const button = await within(nested).getByText('Button Text');
114+
await button.click();
115+
116+
expect(await button.getText()).toEqual('Button Clicked')
117+
});
118+
```
119+
120+
### configure
121+
122+
Lets you pass a config to dom-testing-library
123+
124+
```
125+
const {configure} = require('webdriverio-testing-library')
126+
127+
beforeEach(() => {
128+
configure({testIdAttribute: 'data-automation-id'})
129+
})
130+
afterEach(() => {
131+
configure(null)
132+
})
133+
134+
it('lets you configure queries', async () => {
135+
const {getByTestId} = await setupBrowser(browser)
136+
137+
expect(await getByTestId('testid-in-data-automation-id-attr')).toBeDefined()
138+
})
139+
```
140+
141+
## Other Solutions
142+
143+
I'm not aware of any, if you are please [make a pull request][prs] and add it
144+
here!
145+
146+
## LICENSE
147+
148+
MIT
149+
150+
[npm]: https://www.npmjs.com/
151+
[node]: https://nodejs.org
152+
[build-badge]: https://github.com/olivierwilkinson/webdriverio-testing-library/workflows/webdriverio-testing-library/badge.svg
153+
[build]: https://github.com/olivierwilkinson/webdriverio-testing-library/actions?query=branch%3Amaster+workflow%3Awebdriverio-testing-library
154+
[version-badge]: https://img.shields.io/npm/v/olivierwilkinson/webdriverio-testing-library.svg?style=flat-square
155+
[package]: https://www.npmjs.com/package/olivierwilkinson/webdriverio-testing-library
156+
[downloads-badge]: https://img.shields.io/npm/dm/olivierwilkinson/webdriverio-testing-library.svg?style=flat-square
157+
[npmtrends]: http://www.npmtrends.com/olivierwilkinson/webdriverio-testing-library
158+
[license-badge]: https://img.shields.io/npm/l/olivierwilkinson/webdriverio-testing-library.svg?style=flat-square
159+
[license]: https://github.com/olivierwilkinson/webdriverio-testing-library/blob/master/LICENSE
160+
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
161+
[prs]: http://makeapullrequest.com
162+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
163+
[coc]: https://github.com/olivierwilkinson/webdriverio-testing-library/blob/master/other/CODE_OF_CONDUCT.md
164+
[dom-testing-library]: https://github.com/testing-library/dom-testing-library
165+
[webdriverio]: https://webdriver.io/
166+
[nightwatch-testing-library]: https://github.com/testing-library/nightwatch-testing-library

0 commit comments

Comments
 (0)