Skip to content

Commit 14beda1

Browse files
WestbrookWestbrook
committed
feat(testing-library__dom): monkey patched testing-library__dom mirror
1 parent 54d636f commit 14beda1

File tree

12 files changed

+569
-84
lines changed

12 files changed

+569
-84
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
"docs:start": "yarn docs:analyze && run-p watch:css build:watch \"docs:ts -w\" docs:start:watch",
3737
"docs:start:watch": "node ./tasks/watch-documentation.js",
3838
"docs:ts": "tsc --build documentation/tsconfig.json",
39-
"get-ready": "yarn build:clear-cache && run-p process-icons process-spectrum && yarn build:clean",
39+
"get-ready": "yarn build:clear-cache && run-p process-icons process-spectrum testing-library && yarn build:clean",
4040
"icons": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\"",
4141
"icons:ui": "lerna run --scope @spectrum-web-components/icons-ui build",
4242
"icons:workflow": "lerna run --scope @spectrum-web-components/icons-workflow build",
@@ -83,6 +83,7 @@
8383
"test:visual:clean:current": "rimraf test/visual/screenshots-current",
8484
"test:watch": "yarn test:watch:focus unit",
8585
"test:watch:focus": "yarn test:build && run-p watch:css \"test:build -w\" \"test:start --watch --group {1}\" --",
86+
"testing-library": "cd projects/testing-library__dom && yarn build",
8687
"watch:css": "node ./tasks/watch-css.js"
8788
},
8889
"peerDependencies": {
@@ -220,6 +221,7 @@
220221
"yargs": "^17.0.1"
221222
},
222223
"resolutions": {
224+
"@web/**/rollup": "2.51.0",
223225
"cssnano/**/postcss-calc": "7.0.0"
224226
},
225227
"customElements": "documentation/custom-elements.json",

‎packages/action-bar/test/action-bar.test.ts

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
1515
import '../sp-action-bar.js';
1616
import { ActionBar } from '..';
1717
import { Default } from '../stories/action-bar.stories.js';
18+
import { getByLabelText } from 'testing-library__dom';
1819

1920
describe('ActionBar', () => {
2021
it('loads', async () => {
@@ -25,6 +26,8 @@ describe('ActionBar', () => {
2526
expect(el).to.not.be.undefined;
2627

2728
await expect(el).to.be.accessible();
29+
const input = getByLabelText(el, 'Edit');
30+
expect(input).to.not.be.undefined;
2831
});
2932

3033
it('accepts variants', async () => {

‎packages/sidenav/test/sidenav-item.test.ts

+17-14
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import '../sp-sidenav.js';
1414
import '../sp-sidenav-item.js';
1515
import { SideNavItem } from '../';
1616
import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
17+
import { getByText, queryByText } from 'testing-library__dom';
1718

1819
describe('Sidenav Item', () => {
1920
it('can exist disabled and with no parent', async () => {
@@ -69,29 +70,31 @@ describe('Sidenav Item', () => {
6970

7071
await elementUpdated(el);
7172

72-
expect(el.shadowRoot).to.exist;
73-
if (!el.shadowRoot) return;
74-
75-
let slot: HTMLSlotElement | null = el.shadowRoot.querySelector(
76-
'slot:not([name])'
77-
);
78-
expect(slot).not.to.exist;
73+
let section1 = queryByText(el, 'Section 1');
74+
let section2 = queryByText(el, 'Section 2');
7975

8076
expect(el.expanded).to.be.false;
77+
expect(section1, 'section 1: closed initial').to.be.null;
78+
expect(section2, 'section 2: closed initial').to.be.null;
8179

8280
el.click();
83-
8481
await elementUpdated(el);
8582

8683
expect(el.expanded).to.be.true;
84+
section1 = getByText(el, 'Section 1');
85+
section2 = getByText(el, 'Section 2');
86+
expect(section1, 'section 1: opened').to.not.be.null;
87+
expect(section2, 'section 2: opened').to.not.be.null;
8788

88-
slot = el.shadowRoot.querySelector(
89-
'slot:not([name])'
90-
) as HTMLSlotElement;
91-
expect(slot).to.exist;
92-
if (!slot) return;
89+
el.click();
90+
await elementUpdated(el);
91+
92+
section1 = queryByText(el, 'Section 1');
93+
section2 = queryByText(el, 'Section 2');
9394

94-
expect(slot.assignedElements().length).to.equal(2);
95+
expect(el.expanded).to.be.false;
96+
expect(section1, 'section 1: closed').to.be.null;
97+
expect(section2, 'section 2: closed').to.be.null;
9598
});
9699

97100
it('populated `aria-current`', async () => {

‎projects/example-project-rollup/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"eslint-config-prettier": "^7.1.0",
3939
"prettier": "^2.0.4",
4040
"rimraf": "^2.6.3",
41-
"rollup": "^2.3.4",
41+
"rollup": "^2.51.0",
4242
"rollup-plugin-commonjs": "^10.1.0",
4343
"rollup-plugin-styles": "^3.10.0",
4444
"rollup-plugin-visualizer": "^4.0.4",

‎projects/testing-library__dom/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dom.js

‎projects/testing-library__dom/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# DOM Testing Library + Shadow DOM
2+
3+
<a href="https://www.emojione.com/emoji/1f419" rel="nofollow">
4+
<img height="80" width="80" alt="octopus" src="https://raw.githubusercontent.com/testing-library/dom-testing-library/master/other/octopus.png">
5+
</a>
6+
7+
Shadow DOM support for the simple and complete DOM testing utilities that encourage good testing
8+
practices you've come to know and love from Dom Testing Library.
9+
10+
<a href="https://testing-library.com/" rel="nofollow"><strong>Read the docs</strong></a>
11+
12+
The is an early `beta` release of the DOM Testing Library tools wrapped with some special helpers to access content in both the light and shadow DOM tree of your elements. When following the standard documentation for DOM Testing Library, it should "just work"™️! When it doesn't, it IS `beta` software after all, I hope you'll help out and ensure that the monkey patching currenly applied stays up to date and supports your follow users be productive in their testing persuits.

‎projects/testing-library__dom/index.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// TypeScript Version: 2.8
2+
export * from '@testing-library/dom';

‎projects/testing-library__dom/index.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
HTMLDocument.prototype.querySelectorAllWithShadowDOM = function(query) {
2+
const isNotCustomElementParent = true;
3+
const children = [...(this.children || [])].filter(
4+
(child) => isNotCustomElementParent || !!child.assignedSlot
5+
);
6+
let results = children.filter((el) => el.matches(query));
7+
if (this.shadowRoot) {
8+
results = results.concat([
9+
...(this.shadowRoot.querySelectorAllWithShadowDOM(query) || []),
10+
]);
11+
}
12+
children.map((child) => {
13+
if (child.querySelectorAllWithShadowDOM) {
14+
results = results.concat([
15+
...(child.querySelectorAllWithShadowDOM(query) || []),
16+
]);
17+
}
18+
});
19+
return results;
20+
};
21+
22+
HTMLElement.prototype.querySelectorAllWithShadowDOM = function(query) {
23+
const isNotCustomElementParent = this.tagName.search('-') === -1;
24+
const children = [...(this.children || [])].filter(
25+
(child) => isNotCustomElementParent || !!child.assignedSlot
26+
);
27+
let results = children.filter((el) => el.matches(query));
28+
if (this.shadowRoot) {
29+
results = results.concat([
30+
...(this.shadowRoot.querySelectorAllWithShadowDOM(query) || []),
31+
]);
32+
}
33+
children.map((child) => {
34+
if (child.querySelectorAllWithShadowDOM) {
35+
results = results.concat([
36+
...(child.querySelectorAllWithShadowDOM(query) || []),
37+
]);
38+
}
39+
});
40+
return results;
41+
};
42+
43+
ShadowRoot.prototype.querySelectorAllWithShadowDOM = function(query) {
44+
const children = [...(this.children || [])];
45+
let results = children.filter((el) => el.matches(query));
46+
children.map((child) => {
47+
if (child.querySelectorAllWithShadowDOM) {
48+
results = results.concat([
49+
...(child.querySelectorAllWithShadowDOM(query) || []),
50+
]);
51+
}
52+
});
53+
return results;
54+
};
55+
56+
export * from './dom.js';

‎projects/testing-library__dom/package.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "testing-library__dom",
3+
"version": "8.1.0-beta.1",
4+
"publishConfig": {
5+
"access": "public"
6+
},
7+
"description": "Shadow DOM support for the simple and complete DOM testing utilities that encourage good testing practices you've come to know and love from Dom Testing Library.",
8+
"license": "Apache-2.0",
9+
"repository": {
10+
"type": "git",
11+
"url": "git://github.com/bundled-es-modules/testing-library-dom.git"
12+
},
13+
"author": "",
14+
"main": "index.js",
15+
"scripts": {
16+
"build": "rollup -c ./rollup.config.js"
17+
},
18+
"keywords": [
19+
"web components",
20+
"shadow dom",
21+
"testing",
22+
"ui",
23+
"dom",
24+
"jsdom",
25+
"unit",
26+
"integration",
27+
"functional",
28+
"end-to-end",
29+
"e2e"
30+
],
31+
"devDependencies": {
32+
"@rollup/plugin-alias": "^3.1.2",
33+
"@rollup/plugin-commonjs": "^19.0.0",
34+
"@rollup/plugin-node-resolve": "^13.0.0",
35+
"@rollup/plugin-replace": "^2.4.2",
36+
"@testing-library/dom": "^8.1.0",
37+
"babel-core": "^6.26.3",
38+
"core-js": "^3.14.0",
39+
"rollup": "^2.51.0",
40+
"semver": ">=4.3.2"
41+
}
42+
}

‎projects/testing-library__dom/rollup.config.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
Copyright 2020 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
import resolve from '@rollup/plugin-node-resolve';
14+
import commonjs from '@rollup/plugin-commonjs';
15+
import replace from '@rollup/plugin-replace';
16+
17+
export default [
18+
{
19+
input: require.resolve(
20+
'@testing-library/dom/dist/@testing-library/dom.esm.js'
21+
),
22+
output: {
23+
file: './dom.js',
24+
format: 'es',
25+
},
26+
plugins: [
27+
resolve({
28+
browser: true,
29+
preferBuiltins: false,
30+
}),
31+
commonjs(),
32+
replace({
33+
querySelectorAll: 'querySelectorAllWithShadowDOM',
34+
'process.env.NODE_ENV': "'production'",
35+
}),
36+
],
37+
},
38+
];

‎web-test-runner.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export default {
5757
'packages/styles/**',
5858
'test/**',
5959
'node_modules/**',
60+
'projects/**',
6061
],
6162
threshold: {
6263
statements: 98,

0 commit comments

Comments
 (0)