Merge pull request #5217 from Polymer/3.x-test-green

3.x - getting to green

.travis.yml

@@ -17,7 +17,8 @@ before_script:
 #  '\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run
 #  update-types".' && false)
 script:
-- wct --npm --module-resolution=node -l chrome -l firefox
+- node ./node_modules/.bin/polymer test --npm --module-resolution=node -l chrome
+- node ./node_modules/.bin/polymer test --npm --module-resolution=node -l firefox
 - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then travis_wait 30 ./util/travis-sauce-test.sh; fi
 env:
   global:

gulpfile.js

@@ -113,7 +113,23 @@ class AddClosureTypeImport extends Transform {
 
 gulp.task('clean', () => del([DIST_DIR, 'closure.log']));
 
-gulp.task('closure', ['generate-externs'], () => {
+gulp.task('generate-externs', gulp.series('clean', async () => {
+  let genClosure = require('@polymer/gen-closure-declarations').generateDeclarations;
+  const declarations = await genClosure();
+  await fs.writeFile('externs/closure-types.js', `${header}${declarations}`);
+}));
+
+gulp.task('generate-typescript', async () => {
+  let genTs = require('@polymer/gen-typescript-declarations').generateDeclarations;
+  await del(['types/**/*.d.ts', '!types/extra-types.d.ts']);
+  const config = await fs.readJson('gen-tsd.json');
+  const files = await genTs('.', config);
+  for (const [filePath, contents] of files) {
+    await fs.outputFile(path.join('types', filePath), contents);
+  }
+});
+
+gulp.task('closure', gulp.series('generate-externs', () => {
 
   let entry, splitRx, joinRx, addClosureTypes;
 
@@ -203,14 +219,14 @@ gulp.task('closure', ['generate-externs'], () => {
     .pipe(gulpif(joinRx, minimalDocument()))
     .pipe(gulpif(joinRx, size({title: 'closure size', gzip: true, showTotal: false, showFiles: true})))
     .pipe(gulp.dest(COMPILED_DIR));
-});
+}));
 
 gulp.task('lint-closure', (done) => {
   CLOSURE_LINT_ONLY = true;
   runseq('closure', done);
 });
 
-gulp.task('estimate-size', ['clean'], () => {
+gulp.task('estimate-size', gulp.series('clean', () => {
 
   const babelPresets = {
     presets: [['minify', {regexpConstructors: false, simplifyComparisons: false}]]
@@ -247,7 +263,7 @@ gulp.task('estimate-size', ['clean'], () => {
     .pipe(gulpif(/polymer\.html$/, size({ title: 'bundled size', gzip: true, showTotal: false, showFiles: true })))
     // write to the bundled folder
     .pipe(gulp.dest(BUNDLED_DIR));
-});
+}));
 
 gulp.task('lint-eslint', function() {
   return gulp.src(['lib/**/*.js', 'test/unit/*.{html,js}', 'util/*.js'])
@@ -264,22 +280,6 @@ gulp.task('update-types', (done) => {
   runseq('generate-externs', 'generate-typescript', done);
 });
 
-gulp.task('generate-externs', ['clean'], async () => {
-  let genClosure = require('@polymer/gen-closure-declarations').generateDeclarations;
-  const declarations = await genClosure();
-  await fs.writeFile('externs/closure-types.js', `${header}${declarations}`);
-});
-
-gulp.task('generate-typescript', async () => {
-  let genTs = require('@polymer/gen-typescript-declarations').generateDeclarations;
-  await del(['types/**/*.d.ts', '!types/extra-types.d.ts']);
-  const config = await fs.readJson('gen-tsd.json');
-  const files = await genTs('.', config);
-  for (const [filePath, contents] of files) {
-    await fs.outputFile(path.join('types', filePath), contents);
-  }
-});
-
 gulp.task('update-version', () => {
   return gulp.src('lib/utils/boot.js')
   .pipe(replace(/(window.Polymer.version = )'\d+\.\d+\.\d+'/, `$1'${require('./package.json').version}'`))

lib/mixins/element-mixin.js

@@ -300,9 +300,8 @@ export const ElementMixin = dedupingMixin(base => {
       let template = /** @type {PolymerElementConstructor} */ (this).template;
       if (template) {
         if (typeof template === 'string') {
-          let t = document.createElement('template');
-          t.innerHTML = template;
-          template = t;
+          console.error('template getter must return HTMLTemplateElement');
+          template = null;
         } else {
           template = template.cloneNode(true);
         }

lib/utils/gestures.js

@@ -125,7 +125,7 @@ function canBeLabelled(el) {
  * @return {!Array<!HTMLLabelElement>} Relevant label for `el`
  */
 function matchingLabels(el) {
-  let labels = [...(/** @type {HTMLInputElement} */((el).labels || []))];
+  let labels = Array.prototype.slice.call(/** @type {HTMLInputElement} */(el).labels || []);
   // IE doesn't have `labels` and Safari doesn't populate `labels`
   // if element is in a shadowroot.
   // In this instance, finding the non-ancestor labels is enough,

package.json

@@ -10,9 +10,9 @@
   "devDependencies": {
     "@polymer/gen-closure-declarations": "^0.4.0",
     "@polymer/gen-typescript-declarations": "^1.2.0",
-    "@polymer/iron-component-page": "3.0.0-pre.12",
-    "@polymer/test-fixture": "3.0.0-pre.12",
-    "@webcomponents/webcomponentsjs": "^2.0.0-0",
+    "@polymer/iron-component-page": "^3.0.0-pre.12",
+    "@polymer/test-fixture": "^3.0.0-pre.12",
+    "@webcomponents/webcomponentsjs": "^2.0.0-beta.3",
     "babel-eslint": "^7.2.3",
     "babel-preset-minify": "^0.2.0",
     "del": "^3.0.0",
@@ -20,7 +20,7 @@
     "eslint-plugin-html": "^4.0.1",
     "fs-extra": "^5.0.0",
     "google-closure-compiler": "^20180204.0.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
     "gulp-babel": "^6.1.2",
     "gulp-eslint": "^4.0.0",
     "gulp-if": "^2.0.1",
@@ -31,14 +31,15 @@
     "merge-stream": "^1.0.1",
     "parse5": "^4.0.0",
     "polymer-build": "^2.1.1",
+    "polymer-cli": "^1.7.0",
     "run-sequence": "^2.2.0",
     "through2": "^2.0.0",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "web-component-tester": "^6.6.0-pre.5"
+    "wct-browser-legacy": "^1.0.0"
   },
   "scripts": {
     "build": "gulp",
-    "test": "npm run lint && wct",
+    "test": "npm run lint && polymer test --npm --module-resolution=node",
+    "serve": "polymer serve --npm --module-resolution=node",
     "lint": "gulp lint",
     "update-types": "gulp update-types"
   },

test/smoke/ordering-test.html

@@ -18,10 +18,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <body>
 
 <script type="module">
-import { PolymerElement } from '../../polymer-element.js';
+import { PolymerElement, html } from '../../polymer-element.js';
 class XA extends PolymerElement {
   static get template() {
-    return `<x-b prop="[[prop]]"></x-b>`;
+    return html`<x-b prop="[[prop]]"></x-b>`;
   }
   static get observers() { return ['propChanged(prop)']}
   propChanged() {
@@ -101,7 +101,7 @@ customElements.define('x-b', XB);
 
 class XC extends PolymerElement {
   static get template() {
-    return `<div></div>`;
+    return html`<div></div>`;
   }
   static get observers() { return ['propChanged(prop)']}
   propChanged() {

test/unit/custom-style.html

@@ -631,8 +631,8 @@ suite('custom-style', function() {
     assertComputed(el, '11px', 'right');
     assertComputed(el, '12px', 'top');
 
-    // Avoid Edge 16 bug with CSS Custom Properties and Fonts.
-    if (navigator.userAgent.match('Edge/16') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
+    // Avoid Edge bug with CSS Custom Properties and Fonts.
+    if (navigator.userAgent.match('Edge') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
       return;
     }
 

test/unit/dom-repeat-elements.js

@@ -195,7 +195,7 @@ Polymer({
   }
 });
 let XNestedRepeat = Polymer({
-    _template: `
+    _template: html`
   <template id="repeater" is="dom-repeat" items="{{items}}" as="itema" index-as="indexa" on-dom-change="domUpdateHandler">
     <x-foo on-test1="testHandler1"
            innera-prop="{{innera.prop}}"
@@ -254,8 +254,7 @@ let XNestedRepeat = Polymer({
 class XNestedRepeatMutable extends MutableData(XNestedRepeat) {
   static get template() {
     if (!this._templateEl) {
-      this._templateEl = document.createElement('template');
-      this._templateEl.innerHTML = XNestedRepeat.template;
+      this._templateEl = XNestedRepeat.template.cloneNode(true);
     }
     return this.makeRepeatsMutable(this._templateEl.cloneNode(true));
   }

test/unit/polymer.element.html

@@ -247,11 +247,11 @@ window.SubMixinElement = SubMixinElement;
   </dom-module>
 
   <script type="module">
-import '../../polymer-element.js';
+import { html } from '../../polymer-element.js';
 
 class SubNewTemplate extends window.MyElement {
   static get template() {
-    return `
+    return html`
       <h1>Sub template</h1>
       <div id="subContent">{{prop2}}</div>`;
   }

test/unit/styling-cross-scope-apply.html

@@ -577,7 +577,7 @@ suite('scoped-styling-apply', function() {
   });
 
   test('mixins apply to @keyframe rules', function(done) {
-    if (navigator.userAgent.match('Edge/16') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
+    if (navigator.userAgent.match('Edge') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
       // skip test due to missing variable support in keyframes
       // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12084341/
       this.skip();

test/unit/styling-only-with-template.html

@@ -76,4 +76,4 @@ suite('styling-only-template', function () {
   });
 });
 </script>
-</body>
+</body>

test/unit/styling-scoped.html

@@ -587,7 +587,7 @@ Polymer({is: 'x-slotted'});
   </style>
 </template>
 <script type="module">
-import { PolymerElement } from '../../polymer-element.js';
+import { PolymerElement, html } from '../../polymer-element.js';
 customElements.define('x-class-no-is', class extends PolymerElement {
   static get template() {
     return window.xClass;
@@ -596,7 +596,7 @@ customElements.define('x-class-no-is', class extends PolymerElement {
 
 customElements.define('x-template-string', class extends PolymerElement {
   static get template() {
-    return `<style>
+    return html`<style>
       :host {
         display: block;
         border: 1px solid orange;
@@ -848,7 +848,7 @@ suite('scoped-styling', function() {
   });
 
   test('keyframes change scope', function(done) {
-    if (navigator.userAgent.match('Edge/16') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
+    if (navigator.userAgent.match('Edge') && (!window.ShadyCSS || window.ShadyCSS.nativeCss)) {
       // skip test due to missing variable support in keyframes
       // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12084341/
       this.skip();

util/travis-sauce-test.sh

@@ -9,4 +9,4 @@
 # subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 #
 set -x
-wct --npm --module-resolution=node -s 'windows 10/microsoftedge@14' -s 'windows 10/microsoftedge@15' -s 'windows 10/microsoftedge@16' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@9' -s 'macos 10.12/safari@10' -s 'macos 10.13/safari@11' -s 'Linux/chrome@41'
+node ./node_modules/.bin/polymer test --npm --module-resolution=node -s 'windows 10/microsoftedge@15' -s 'windows 10/microsoftedge@17' -s 'windows 8.1/internet explorer@11' -s 'os x 10.11/safari@9' -s 'macos 10.12/safari@10' -s 'macos 10.13/safari@11' -s 'Linux/chrome@41'