Common tests

libraries/__shared__/tests/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "tests",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "chai": "4.3.10"
+  }
+}

libraries/__shared__/tests/src/advanced-tests.js

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect } from 'chai'
+
+
+function skip() {
+  this.skip();
+  return {};
+}
+export default function (
+  {
+    renderComponentWithProperties = skip,
+    renderComponentWithDeclarativeEvent = skip
+  }
+) {
+
+
+  describe('advanced support', function () {
+
+    describe('attributes and properties', function () {
+      it('will pass array data as a property', async function () {
+        this.weight = 2
+        const { wc } = await renderComponentWithProperties.call(this)
+        let data = wc.arr
+        expect(data).to.eql(['c', 'u', 's', 't', 'o', 'm'])
+      })
+
+      it('will pass object data as a property', async function () {
+        this.weight = 2
+        const { wc } = await renderComponentWithProperties.call(this)
+        let data = wc.obj
+        expect(data).to.eql({org: 'webcomponents', repo: 'custom-elements-everywhere'})
+      })
+
+      it('will pass object data to a camelCase-named property', async function () {
+        this.weight = 2
+        const { wc } = await renderComponentWithProperties.call(this)
+        let data = wc.camelCaseObj;
+        expect(data).to.eql({label: "passed"});
+      })
+
+    })
+
+    describe('events', function () {
+      it('can declaratively listen to a lowercase DOM event dispatched by a Custom Element', async function () {
+        this.weight = 2
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
+        expect(wc).to.exist
+        let handled = root.querySelector('#lowercase')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+
+      it('can declaratively listen to a kebab-case DOM event dispatched by a Custom Element', async function () {
+        this.weight = 1
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
+        let handled = root.querySelector('#kebab')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+
+      it('can declaratively listen to a camelCase DOM event dispatched by a Custom Element', async function () {
+        this.weight = 1
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
+        let handled = root.querySelector('#camel')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+
+      it('can declaratively listen to a CAPScase DOM event dispatched by a Custom Element', async function () {
+        this.weight = 1
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
+        let handled = root.querySelector('#caps')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+
+      it('can declaratively listen to a PascalCase DOM event dispatched by a Custom Element', async function () {
+        this.weight = 1
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithDeclarativeEvent.call(this)
+        let handled = root.querySelector('#pascal')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+    })
+  })
+}

libraries/__shared__/tests/src/basic-tests.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {expect} from 'chai'
+
+function skip() {
+  this.skip();
+  return {};
+}
+
+export default function (
+  {
+    renderComponentWithoutChildren = skip,
+    renderComponentWithChildren = skip,
+    renderComponentWithChildrenRerender = skip,
+    renderComponentWithDifferentViews = skip,
+    renderComponentWithProperties = skip,
+    renderComponentWithImperativeEvent = skip,
+  }) {
+
+  describe('basic support', function () {
+
+    describe('no children', function () {
+      it('can display a Custom Element with no children', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithoutChildren.call(this);
+        expect(wc).to.exist
+      })
+    })
+
+    describe('with children', function () {
+      function expectHasChildren(wc) {
+        expect(wc).to.exist
+        let shadowRoot = wc.shadowRoot
+        let heading = shadowRoot.querySelector('h1')
+        expect(heading).to.exist
+        expect(heading.textContent).to.eql('Test h1')
+        let paragraph = shadowRoot.querySelector('p')
+        expect(paragraph).to.exist
+        expect(paragraph.textContent).to.eql('Test p')
+      }
+
+      it('can display a Custom Element with children in a Shadow Root', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithChildren.call(this);
+        expectHasChildren(wc)
+      })
+
+      it('can display a Custom Element with children in a Shadow Root and pass in Light DOM children', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithChildrenRerender.call(this);
+        expectHasChildren(wc)
+        expect(wc.textContent.includes('2')).to.be.true
+      })
+
+      it('can display a Custom Element with children in the Shadow DOM and handle hiding and showing the element', async function () {
+        this.weight = 3
+        const { wc, toggle, root = document } = await renderComponentWithDifferentViews.call(this);
+        expectHasChildren(wc)
+        await toggle()
+        const dummy = root.querySelector('#dummy')
+        expect(dummy).to.exist
+        expect(dummy.textContent).to.eql('Dummy view')
+        await toggle()
+        expectHasChildren(wc)
+      })
+    })
+
+    describe('attributes and properties', function () {
+      it('will pass boolean data as either an attribute or a property', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithProperties.call(this);
+        let data = wc.bool || wc.hasAttribute('bool')
+        expect(data).to.be.true
+      })
+
+      it('will pass numeric data as either an attribute or a property', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithProperties.call(this);
+        let data = wc.num || wc.getAttribute('num')
+        expect(parseInt(data, 10)).to.eql(42)
+      })
+
+      it('will pass string data as either an attribute or a property', async function () {
+        this.weight = 3
+        const { wc } = await renderComponentWithProperties.call(this);
+        let data = wc.str || wc.getAttribute('str')
+        expect(data).to.eql('custom')
+      })
+    })
+
+    describe('events', async function () {
+      it('can imperatively listen to a DOM event dispatched by a Custom Element', async function () {
+        this.weight = 3
+        const { wc, click = wc.click.bind(wc), root = document } = await renderComponentWithImperativeEvent.call(this)
+        expect(wc).to.exist
+        let handled = root.querySelector('#handled')
+        expect(handled.textContent).to.eql('false')
+        await click()
+        expect(handled.textContent).to.eql('true')
+      })
+    })
+  })
+}

libraries/angular/karma.conf.js

@@ -43,10 +43,10 @@ module.exports = function (config) {
       // RxJs.
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
-      'tests.webpack.ts'
+      'tests.webpack.js'
     ],
     preprocessors: {
-      'tests.webpack.ts': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader
+      'tests.webpack.js': ['webpack', 'sourcemap'] // preprocess with webpack and our sourcemap loader
     },
     mime: {
       'text/x-typescript': ['ts']
@@ -68,6 +68,7 @@ module.exports = function (config) {
         extensions: ['.js', '.ts'],
         modules: [
           path.resolve(__dirname, '../__shared__/webcomponents/src'),
+          path.resolve(__dirname, '../__shared__/tests/src'),
           path.resolve(__dirname, './node_modules')
         ]
       },

libraries/angular/package.json

@@ -42,7 +42,7 @@
       ],
       "files": [
         "karma.conf.js",
-        "tests.webpack.ts",
+        "tests.webpack.js",
         "tsconfig.json",
         "src",
         "meta"