diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 61de0a2..f7072ed 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,11 +12,11 @@ jobs: with: node-version-file: .nvmrc - name: Install dependencies - run: npm install + run: | + npm install + npm install @web/test-runner-playwright --no-save + npx playwright install-deps - name: Lint run: npm run test:lint - - name: Polymer Tests (SauceLabs) - env: - SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY_DESIRE2LEARN }} - SAUCE_USERNAME: Desire2Learn - run: npm run test:polymer:sauce + - name: Unit Tests + run: npx web-test-runner --config web-test-runner.config.js --group default --playwright --browsers chromium firefox webkit diff --git a/.nvmrc b/.nvmrc index da2d398..19c7bdb 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14 \ No newline at end of file +16 \ No newline at end of file diff --git a/CODEOWNERS b/CODEOWNERS index e9fd2bc..cf94d91 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1 @@ -* @dbatiste @dlockhart +* @BrightspaceUI/gaudi-dev diff --git a/README.md b/README.md index dc57613..76b8759 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# d2l-polymer-behaviors +# @brightspace-ui/polymer-behaviors Shared [Polymer](https://www.polymer-project.org/1.0/)-based behaviors and modules for implementing and consuming web components. @@ -7,7 +7,7 @@ Shared [Polymer](https://www.polymer-project.org/1.0/)-based behaviors and modul Install from NPM: ```shell -npm install d2l-polymer-behaviors +npm install @brightspace-ui/polymer-behaviors ``` ## Usage diff --git a/package.json b/package.json index bac9f3f..7b1e2d6 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,34 @@ { "description": "Shared Polymer behaviors for use in web components", + "type": "module", "repository": { "type": "git", - "url": "https://github.com/Brightspace/d2l-polymer-behaviors-ui.git" + "url": "https://github.com/BrightspaceUI/d2l-polymer-behaviors-ui.git" }, - "name": "d2l-polymer-behaviors", + "name": "@brightspace-ui/polymer-behaviors", "scripts": { - "test:lint": "npm run test:lint:wc && npm run test:lint:js", - "test:lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html", - "test:lint:wc": "polymer lint", - "test:polymer:local": "polymer test --skip-plugin sauce", - "test:polymer:sauce": "polymer test --skip-plugin local", - "test": "npm run test:lint && npm run test:polymer:local" + "start": "web-dev-server --node-resolve --watch", + "test": "npm run test:lint && npm run test:headless", + "test:headless": "web-test-runner --group default", + "test:headless:watch": "web-test-runner --group default --watch", + "test:lint": "npm run test:lint:js", + "test:lint:js": "eslint . --ext .js,.html test/**/*.js demo/**/*.js demo/**/*.html" }, "author": "D2L Corporation", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7", "@babel/eslint-parser": "^7", - "@polymer/iron-test-helpers": "^3.0.0", + "@open-wc/testing": "^3", + "@web/dev-server": "^0.1", + "@web/test-runner": "^0.13", "eslint": "^8", "eslint-config-brightspace": "^0.16", "eslint-plugin-html": "^6", "eslint-plugin-import": "^2", "eslint-plugin-lit": "^1", "eslint-plugin-sort-class-members": "^1", - "polymer-cli": "^1.9.5", - "wct-browser-legacy": "^1.0.1" + "sinon": "^14" }, "version": "3.1.0", "files": [ @@ -40,6 +42,9 @@ "d2l-visible-on-ancestor-behavior.js", "requestIdleCallback.js" ], + "publishConfig": { + "access": "public" + }, "dependencies": { "@brightspace-ui/core": "^2", "@polymer/polymer": "^3.0.0", diff --git a/polymer.json b/polymer.json deleted file mode 100644 index 6111e49..0000000 --- a/polymer.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "npm": true, - "lint": { - "rules": [ - "polymer-3" - ] - } -} diff --git a/test/.eslintrc.json b/test/.eslintrc.json index 3dacc9b..28cb560 100644 --- a/test/.eslintrc.json +++ b/test/.eslintrc.json @@ -1,3 +1,3 @@ { - "extends": "brightspace/wct-polymer-3-config" + "extends": "brightspace/open-wc-testing-config" } diff --git a/test/dom-expand-collapse.html b/test/dom-expand-collapse.html deleted file mode 100644 index 6bb268f..0000000 --- a/test/dom-expand-collapse.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - d2l-dom-expand-collapse tests - - - - - - - - - - - - - - - - - - diff --git a/test/dom-expand-collapse.test.js b/test/dom-expand-collapse.test.js new file mode 100644 index 0000000..5fb74e2 --- /dev/null +++ b/test/dom-expand-collapse.test.js @@ -0,0 +1,79 @@ +import '../d2l-dom-expand-collapse.js'; +import { expect, fixture, html } from '@open-wc/testing'; + +describe('d2l-dom-expand-collapse', () => { + describe('collapse', () => { + let collapseFixture; + + beforeEach(async() => { + collapseFixture = await fixture(html`
Some content.
`); + }); + + it('returns rejected promise if node not specified', (done) => { + D2L.Dom.ExpandCollapse.collapse() + .catch(() => { + done(); + }); + }); + + it('collapses element', async() => { + await D2L.Dom.ExpandCollapse.collapse(collapseFixture); + + expect(collapseFixture.getBoundingClientRect().height).to.equal(0); + expect(collapseFixture.offsetParent).to.equal(null); + }); + + it('restores existing style properties', async() => { + collapseFixture.style.display = 'inline-block'; + collapseFixture.style.height = '500px'; + collapseFixture.style.overflow = 'visible'; + collapseFixture.style.transition = 'transform 2s ease-out'; + await D2L.Dom.ExpandCollapse.collapse(collapseFixture); + await D2L.Dom.ExpandCollapse.expand(collapseFixture); + + expect(collapseFixture.style.display).to.equal('inline-block'); + expect(collapseFixture.style.height).to.equal('500px'); + expect(collapseFixture.style.overflow).to.equal('visible'); + const isExpectedTransition = (collapseFixture.style.transition === 'transform 2s ease-out 0s' || collapseFixture.style.transition === 'transform 2s ease-out'); + expect(isExpectedTransition).to.equal(true); + expect(collapseFixture.getAttribute('data-d2l-ec-display')).to.equal(null); + expect(collapseFixture.getAttribute('data-d2l-ec-height')).to.equal(null); + expect(collapseFixture.getAttribute('data-d2l-ec-overflow')).to.equal(null); + expect(collapseFixture.getAttribute('data-d2l-ec-transition')).to.equal(null); + }); + + }); + + describe('expand', () => { + let expandFixture; + + beforeEach(async() => { + expandFixture = await fixture(html`
Some content.
`); + }); + + it('returns rejected promise if node not specified', (done) => { + D2L.Dom.ExpandCollapse.expand() + .catch(() => { + done(); + }); + }); + + it('expands element', async() => { + await D2L.Dom.ExpandCollapse.expand(expandFixture); + + expect(expandFixture.getBoundingClientRect().height).not.to.equal(0); + expect(expandFixture.offsetParent).not.to.equal(null); + }); + + it('removes d2l-hidden if present', async() => { + expandFixture.classList.add('d2l-hidden'); + await D2L.Dom.ExpandCollapse.expand(expandFixture); + + expect(expandFixture.getBoundingClientRect().height).not.to.equal(0); + expect(expandFixture.classList.contains('d2l-hidden')).to.equal(false); + expect(expandFixture.offsetParent).not.to.equal(null); + }); + + }); + +}); diff --git a/test/dom-offset-parent.html b/test/dom-offset-parent.html deleted file mode 100644 index b83e061..0000000 --- a/test/dom-offset-parent.html +++ /dev/null @@ -1,232 +0,0 @@ - - - - - - d2l-dom get-offset-parent tests - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
- - - - - diff --git a/test/dom-offset-parent.test.js b/test/dom-offset-parent.test.js new file mode 100644 index 0000000..7111555 --- /dev/null +++ b/test/dom-offset-parent.test.js @@ -0,0 +1,160 @@ +import '../d2l-dom.js'; +import { expect, fixture, html } from '@open-wc/testing'; +import { PolymerElement, html as polymerHtml } from '@polymer/polymer/polymer-element.js'; + +class TestWrapper extends PolymerElement { + static get properties() { + return { + wrapperId: { + type: String, + value: 'notExpected' + } + }; + } + static get template() { + return polymerHtml` + +
+ +
+ `; + } +} + +window.customElements.define('test-wrapper', TestWrapper); + +describe('d2l-dom', () => { + describe('getOffsetParent', () => { + [ + { name: 'direct-parent', fixture: html` +
+
+
` + }, + { name: 'indirect-parent', fixture: html` +
+
+
` + }, + { name: 'td', fixture: html` +
+ +
+
+
` + }, + { name: 'th', fixture: html` +
+ +
+
+
` + }, + { name: 'table', fixture: html` +
+ +
` + }, + { name: 'wrapper-inside', fixture: html` +
+
+
+
+
` + }, + { name: 'wrapper-passthrough', fixture: html` +
+ +
+ +
` + }, + { name: 'wrapper-is-parent', fixture: html` +
+
+
` + }, + { name: 'nested-wrapper-is-parent', fixture: html` +
+ +
+ +
` + } + ].forEach(test => { + it(test.name, async() => { + const fixt = await fixture(test.fixture); + const child = fixt.querySelector('.child'); + const expected = fixt.querySelector('.expected'); + expect(D2L.Dom.getOffsetParent(child)).to.equal(expected); + }); + }); + + it('wrapper-simple', async() => { + const fixt = await fixture(html` +
+
+
+ `); + const child = fixt.querySelector('.child'); + expect(D2L.Dom.getOffsetParent(child).id).to.equal('expected'); + }); + + it('wrapper-nested', async() => { + const fixt = await fixture(html` +
+ +
+ +
+ `); + const child = fixt.querySelector('.child'); + expect(D2L.Dom.getOffsetParent(child).id).to.equal('expected'); + }); + + it('fallback-when-shadowroot-undefined', () => { + const tempShadowRoot = window.ShadowRoot; + window.ShadowRoot = false; + const child = { + offsetParent: 'this is the offsetParent' + }; + expect(D2L.Dom.getOffsetParent(child)).to.equal(child.offsetParent); + window.ShadowRoot = tempShadowRoot; + }); + + it('body', () => { + const body = document.querySelector('body'); + expect(D2L.Dom.getOffsetParent(body)).to.equal(null); + }); + + it('orphan', () => { + const child = document.createElement('div'); + expect(D2L.Dom.getOffsetParent(child)).to.equal(null); + }); + + it('orphan-with-extra-steps', () => { + const grandparent = document.createElement('div'); + const parent = document.createElement('div'); + const child = document.createElement('div'); + grandparent.appendChild(parent); + parent.appendChild(child); + expect(D2L.Dom.getOffsetParent(child)).to.equal(null); + }); + + it('fixed', async() => { + const fixed = await fixture(html`
`); + const el = fixed.querySelector('#fixed'); + expect(D2L.Dom.getOffsetParent(el)).to.equal(null); + }); + + it('body-is-parent', () => { + const child = document.createElement('div'); + document.body.appendChild(child); + expect(D2L.Dom.getOffsetParent(child)).to.equal(document.body); + }); + }); +}); diff --git a/test/dom-visibility.html b/test/dom-visibility.test.js similarity index 61% rename from test/dom-visibility.html rename to test/dom-visibility.test.js index 8da1aaa..21b8a41 100644 --- a/test/dom-visibility.html +++ b/test/dom-visibility.test.js @@ -1,17 +1,16 @@ - - - - - d2l-dom-visibility tests - - - - - - +import '../d2l-dom-visibility.js'; +import './dom-visibility-components.js'; +import { expect, fixture, html } from '@open-wc/testing'; +import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; + +describe('d2l-dom-visibility', () => { + let Visibility; - -