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

Author: Westbrook Johnson

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
     node:
         docker:
-            - image: circleci/node:10.16.0-browsers
+            - image: circleci/node:10.18.1-browsers
         environment:
             NPM_CONFIG_PREFIX: ~/.npm-global
             CHROME_BIN: /usr/bin/google-chrome

karma.conf.js

@@ -28,6 +28,7 @@ module.exports = (config) => {
                 babelConfig: {
                     plugins: ['transform-node-env-inline'],
                 },
+                coverageExclude: ['projects/**/*'],
             },
             browsers: ['FirefoxHeadlessCustom'],
             customLaunchers: {

package.json

@@ -27,7 +27,7 @@
     "type": "module",
     "browser": "lib/index.js",
     "engines": {
-        "node": ">=10.15.0",
+        "node": ">=10.18.0",
         "yarn": ">=1.16.0"
     },
     "scripts": {
@@ -62,7 +62,7 @@
         "prelerna-publish": "yarn get-ready && yarn custom-element-json",
         "lerna-publish": "lerna publish --message 'chore: release new versions'",
         "test": "yarn build && yarn test:ci",
-        "test:build": "tsc --build test/tsconfig-test.json",
+        "test:build": "tsc --build test/tsconfig-test.json && lerna exec --scope testing-library__dom -- yarn build",
         "test:ci": "yarn test:build && karma start --coverage",
         "test:start": "karma start",
         "test:watch": "run-p watch 'test:build -w' 'test:start --auto-watch=true --single-run=false'",

packages/actionbar/test/actionbar.test.ts

@@ -15,6 +15,7 @@ import { Actionbar } from '../';
 import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
 import { waitForPredicate } from '../../../test/testing-helpers';
 import '../../shared/lib/focus-visible.js';
+import { getByLabelText } from 'testing-library__dom';
 
 describe('Actionbar', () => {
     it('loads', async () => {
@@ -23,7 +24,7 @@ describe('Actionbar', () => {
                 <sp-actionbar open>
                     <sp-checkbox indeterminate>228 Selected</sp-checkbox>
                     <div class="spectrum-ButtonGroup">
-                        <sp-action-button quiet>
+                        <sp-action-button quiet label="Edit">
                             <svg
                                 slot="icon"
                                 id="spectrum-icon-18-Edit"
@@ -54,8 +55,14 @@ describe('Actionbar', () => {
         await elementUpdated(el);
 
         expect(el).to.not.be.undefined;
-        expect(el).lightDom.to.equalSnapshot();
-        expect(el).shadowDom.to.equalSnapshot();
+        // expect(el).lightDom.to.equalSnapshot();
+        // expect(el).shadowDom.to.equalSnapshot();
+
+        // const renderRoot = el.shadowRoot
+        //     ? (el.shadowRoot as unknown) as HTMLElement
+        //     : el as HTMLElement;
+        const input = getByLabelText(el, 'Edit');
+        expect(input).to.not.be.undefined;
     });
 
     it('accepts variants', async () => {

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

@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 import '../';
 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 () => {
@@ -68,24 +69,30 @@ describe('Sidenav Item', () => {
 
         await elementUpdated(el);
 
-        expect(el.shadowRoot).to.exist;
-        if (!el.shadowRoot) return;
-
-        let slot = el.shadowRoot.querySelector('slot');
-        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;
+
+        el.click();
+        await elementUpdated(el);
 
-        slot = el.shadowRoot.querySelector('slot');
-        expect(slot).to.exist;
-        if (!slot) return;
+        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;
     });
 });

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.0.0-beta.4",
+    "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.0.0-beta.4",
+        "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',
+            }),
+        ],
+    },
+];