feat(testing-library__dom): monkey patched testing-library__dom mirror

package.json

@@ -16,11 +16,12 @@
     },
     "scripts": {
         "analyze": "lit-analyzer 'packages/*/src/**/!(*.css).ts'",
-        "get-ready": "yarn build:clear-cache && run-p spectrum-vars process-icons process-spectrum && yarn build",
+        "get-ready": "yarn build:clear-cache && run-p spectrum-vars process-icons process-spectrum testing-library && yarn build",
         "postinstall": "yarn get-ready",
         "spectrum-vars": "node ./scripts/spectrum-vars.js && prettier --write 'packages/**/*.css'",
         "process-spectrum": "node ./scripts/process-spectrum-css.js && prettier --write 'packages/**/*.css'",
         "process-icons": "run-p icons icons:ui icons:workflow",
+        "testing-library": "cd projects/testing-library__dom && yarn build",
         "icons": "node ./scripts/process-icons.js && prettier --write '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",

packages/actionbar/test/actionbar.test.ts

@@ -14,6 +14,7 @@ import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
 import '../sp-actionbar.js';
 import { Actionbar } from '../';
 import { Default } from '../stories/actionbar.stories.js';
+import { getByLabelText } from 'testing-library__dom';
 
 describe('Actionbar', () => {
     it('loads', async () => {
@@ -24,6 +25,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/testing-library__dom/.gitignore

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

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,33 @@
+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) => {
+        results = results.concat([
+            ...(child.querySelectorAllWithShadowDOM(query) || []),
+        ]);
+    });
+    return results;
+};
+
+export * from './dom.js';

projects/testing-library__dom/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "testing-library__dom",
+    "version": "7.20.1",
+    "description": "mirror of @testing-library/dom, bundled and exposed as ES module",
+    "author": "",
+    "main": "index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/bundled-es-modules/testing-library-dom.git"
+    },
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@rollup/plugin-alias": "^2.2.0",
+        "@rollup/plugin-replace": "^2.2.1",
+        "@testing-library/dom": "^7.20.1",
+        "babel-core": "^6.26.3",
+        "core-js": "^2.5.7",
+        "rollup": "^1.0.0",
+        "rollup-plugin-commonjs": "^9.0.0",
+        "rollup-plugin-copy": "^3.0.0",
+        "rollup-plugin-ignore": "^1.0.5",
+        "rollup-plugin-node-builtins": "^2.1.2",
+        "rollup-plugin-node-globals": "^1.4.0",
+        "rollup-plugin-node-resolve": "^4.0.0",
+        "rollup-plugin-replace": "^2.1.0",
+        "semver": ">=4.3.2"
+    },
+    "scripts": {
+        "build": "rollup -c ./rollup.config.js"
+    }
+}

projects/testing-library__dom/rollup.config.js

@@ -0,0 +1,25 @@
+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',
+            }),
+        ],
+    },
+];

web-test-runner.config.js

@@ -13,6 +13,7 @@ module.exports = {
             'packages/icons-ui/**',
             'packages/icons-workflow/**',
             'test/**',
+            'projects/**',
         ],
         threshold: {
             statements: 98,