[RFC] feat(testing-library-dom): add esm mirror of testing-library-dom

package.json

@@ -36,7 +36,7 @@
         "docs:start": "yarn docs:analyze && run-p watch:css build:watch \"docs:ts -w\" docs:start:watch",
         "docs:start:watch": "node ./tasks/watch-documentation.js",
         "docs:ts": "tsc --build documentation/tsconfig.json",
-        "get-ready": "yarn build:clear-cache && run-p process-icons process-spectrum && yarn build:clean",
+        "get-ready": "yarn build:clear-cache && run-p process-icons process-spectrum testing-library && yarn build:clean",
         "icons": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\"",
         "icons:ui": "lerna run --scope @spectrum-web-components/icons-ui build",
         "icons:workflow": "lerna run --scope @spectrum-web-components/icons-workflow build",
@@ -83,6 +83,7 @@
         "test:visual:clean:current": "rimraf test/visual/screenshots-current",
         "test:watch": "yarn test:watch:focus unit",
         "test:watch:focus": "yarn test:build && run-p watch:css \"test:build -w\" \"test:start --watch --group {1}\" --",
+        "testing-library": "cd projects/testing-library__dom && yarn build",
         "watch:css": "node ./tasks/watch-css.js"
     },
     "peerDependencies": {
@@ -220,6 +221,7 @@
         "yargs": "^17.0.1"
     },
     "resolutions": {
+        "@web/**/rollup": "2.51.0",
         "cssnano/**/postcss-calc": "7.0.0"
     },
     "customElements": "documentation/custom-elements.json",

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

@@ -15,6 +15,7 @@ import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
 import '../sp-action-bar.js';
 import { ActionBar } from '..';
 import { Default } from '../stories/action-bar.stories.js';
+import { getByLabelText } from 'testing-library__dom';
 
 describe('ActionBar', () => {
     it('loads', async () => {
@@ -25,6 +26,8 @@ describe('ActionBar', () => {
         expect(el).to.not.be.undefined;
 
         await expect(el).to.be.accessible();
+        const input = getByLabelText(el, 'Edit');
+        expect(input).to.not.be.undefined;
     });
 
     it('accepts variants', async () => {

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

@@ -14,6 +14,7 @@ import '../sp-sidenav.js';
 import '../sp-sidenav-item.js';
 import { SideNavItem } from '../';
 import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
+import { getByText, queryByText } from 'testing-library__dom';
 
 describe('Sidenav Item', () => {
     it('can exist disabled and with no parent', async () => {
@@ -69,29 +70,31 @@ describe('Sidenav Item', () => {
 
         await elementUpdated(el);
 
-        expect(el.shadowRoot).to.exist;
-        if (!el.shadowRoot) return;
-
-        let slot: HTMLSlotElement | null = el.shadowRoot.querySelector(
-            'slot:not([name])'
-        );
-        expect(slot).not.to.exist;
+        let section1 = queryByText(el, 'Section 1');
+        let section2 = queryByText(el, 'Section 2');
 
         expect(el.expanded).to.be.false;
+        expect(section1, 'section 1: closed initial').to.be.null;
+        expect(section2, 'section 2: closed initial').to.be.null;
 
         el.click();
-
         await elementUpdated(el);
 
         expect(el.expanded).to.be.true;
+        section1 = getByText(el, 'Section 1');
+        section2 = getByText(el, 'Section 2');
+        expect(section1, 'section 1: opened').to.not.be.null;
+        expect(section2, 'section 2: opened').to.not.be.null;
 
-        slot = el.shadowRoot.querySelector(
-            'slot:not([name])'
-        ) as HTMLSlotElement;
-        expect(slot).to.exist;
-        if (!slot) return;
+        el.click();
+        await elementUpdated(el);
+
+        section1 = queryByText(el, 'Section 1');
+        section2 = queryByText(el, 'Section 2');
 
-        expect(slot.assignedElements().length).to.equal(2);
+        expect(el.expanded).to.be.false;
+        expect(section1, 'section 1: closed').to.be.null;
+        expect(section2, 'section 2: closed').to.be.null;
     });
 
     it('populated `aria-current`', async () => {

projects/example-project-rollup/package.json

@@ -38,7 +38,7 @@
     "eslint-config-prettier": "^7.1.0",
     "prettier": "^2.0.4",
     "rimraf": "^2.6.3",
-    "rollup": "^2.3.4",
+    "rollup": "^2.51.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-styles": "^3.10.0",
     "rollup-plugin-visualizer": "^4.0.4",

projects/testing-library__dom/.gitignore

@@ -0,0 +1 @@
+dom.js

projects/testing-library__dom/README.md

@@ -0,0 +1,12 @@
+# DOM Testing Library + Shadow DOM
+
+<a href="https://www.emojione.com/emoji/1f419" rel="nofollow">
+  <img height="80" width="80" alt="octopus" src="https://raw.githubusercontent.com/testing-library/dom-testing-library/master/other/octopus.png">
+</a>
+
+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.
+
+<a href="https://testing-library.com/" rel="nofollow"><strong>Read the docs</strong></a>
+
+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

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

projects/testing-library__dom/index.js

@@ -0,0 +1,56 @@
+HTMLDocument.prototype.querySelectorAllWithShadowDOM = function(query) {
+    const isNotCustomElementParent = true;
+    const children = [...(this.children || [])].filter(
+        (child) => isNotCustomElementParent || !!child.assignedSlot
+    );
+    let results = children.filter((el) => el.matches(query));
+    if (this.shadowRoot) {
+        results = results.concat([
+            ...(this.shadowRoot.querySelectorAllWithShadowDOM(query) || []),
+        ]);
+    }
+    children.map((child) => {
+        if (child.querySelectorAllWithShadowDOM) {
+            results = results.concat([
+                ...(child.querySelectorAllWithShadowDOM(query) || []),
+            ]);
+        }
+    });
+    return results;
+};
+
+HTMLElement.prototype.querySelectorAllWithShadowDOM = function(query) {
+    const isNotCustomElementParent = this.tagName.search('-') === -1;
+    const children = [...(this.children || [])].filter(
+        (child) => isNotCustomElementParent || !!child.assignedSlot
+    );
+    let results = children.filter((el) => el.matches(query));
+    if (this.shadowRoot) {
+        results = results.concat([
+            ...(this.shadowRoot.querySelectorAllWithShadowDOM(query) || []),
+        ]);
+    }
+    children.map((child) => {
+        if (child.querySelectorAllWithShadowDOM) {
+            results = results.concat([
+                ...(child.querySelectorAllWithShadowDOM(query) || []),
+            ]);
+        }
+    });
+    return results;
+};
+
+ShadowRoot.prototype.querySelectorAllWithShadowDOM = function(query) {
+    const children = [...(this.children || [])];
+    let results = children.filter((el) => el.matches(query));
+    children.map((child) => {
+        if (child.querySelectorAllWithShadowDOM) {
+            results = results.concat([
+                ...(child.querySelectorAllWithShadowDOM(query) || []),
+            ]);
+        }
+    });
+    return results;
+};
+
+export * from './dom.js';

projects/testing-library__dom/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "testing-library__dom",
+    "version": "8.1.0-beta.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "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.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/bundled-es-modules/testing-library-dom.git"
+    },
+    "author": "",
+    "main": "index.js",
+    "scripts": {
+        "build": "rollup -c ./rollup.config.js"
+    },
+    "keywords": [
+        "web components",
+        "shadow dom",
+        "testing",
+        "ui",
+        "dom",
+        "jsdom",
+        "unit",
+        "integration",
+        "functional",
+        "end-to-end",
+        "e2e"
+    ],
+    "devDependencies": {
+        "@rollup/plugin-alias": "^3.1.2",
+        "@rollup/plugin-commonjs": "^19.0.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-replace": "^2.4.2",
+        "@testing-library/dom": "^8.1.0",
+        "babel-core": "^6.26.3",
+        "core-js": "^3.14.0",
+        "rollup": "^2.51.0",
+        "semver": ">=4.3.2"
+    }
+}

projects/testing-library__dom/rollup.config.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+
+export default [
+    {
+        input: require.resolve(
+            '@testing-library/dom/dist/@testing-library/dom.esm.js'
+        ),
+        output: {
+            file: './dom.js',
+            format: 'es',
+        },
+        plugins: [
+            resolve({
+                browser: true,
+                preferBuiltins: false,
+            }),
+            commonjs(),
+            replace({
+                querySelectorAll: 'querySelectorAllWithShadowDOM',
+                'process.env.NODE_ENV': "'production'",
+            }),
+        ],
+    },
+];

web-test-runner.config.js

@@ -57,6 +57,7 @@ export default {
             'packages/styles/**',
             'test/**',
             'node_modules/**',
+            'projects/**',
         ],
         threshold: {
             statements: 98,