Templatize basic test suite

package.json

@@ -72,9 +72,11 @@
     "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-radio-group": "^3.0.1",
     "@polymer/paper-slider": "^3.0.1",
+    "@types/chai": "^4.1.7",
+    "@types/mocha": "^5.2.5",
     "@types/pngjs": "^3.3.2",
-    "@types/puppeteer": "^1.11.1",
     "@types/prismjs": "^1.9.0",
+    "@types/puppeteer": "^1.11.1",
     "@types/three": "^0.93.12",
     "@webcomponents/webcomponentsjs": "~2.1.3",
     "chai": "^4.1.2",
@@ -89,8 +91,8 @@
     "mocha": "^5.2.0",
     "pngjs": "^3.3.3",
     "polymer-build": "^3.1.1",
-    "puppeteer": "^1.11.0",
     "prismjs": "^1.15.0",
+    "puppeteer": "^1.11.0",
     "resize-observer-polyfill": "^1.5.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.0",

src/test/features/ar-spec.js

@@ -17,6 +17,7 @@ import {IS_IOS} from '../../constants.js';
 import {$enterARElement, ARMixin} from '../../features/ar.js';
 import ModelViewerElementBase, {$canvas} from '../../model-viewer-base.js';
 import {assetPath, pickShadowDescendant, timePasses, waitForEvent} from '../helpers.js';
+import {BasicSpecTemplate} from '../templates.js';
 
 const expect = chai.expect;
 
@@ -37,15 +38,7 @@ suite('ModelViewerElementBase with ARMixin', () => {
       customElements.define(tagName, ModelViewerElement);
     });
 
-    test('can be directly instantiated', () => {
-      const element = new ModelViewerElement();
-      expect(element).to.be.ok;
-    });
-
-    test('can be instantiated with document.createElement', () => {
-      const element = document.createElement(tagName);
-      expect(element).to.be.ok;
-    });
+    BasicSpecTemplate(() => ModelViewerElement, () => tagName);
 
     suite('with unstable-webxr', () => {
       let element;

src/test/features/controls-spec.js

@@ -16,7 +16,7 @@
 import {$controls, $promptElement, ControlsMixin, IDLE_PROMPT, IDLE_PROMPT_THRESHOLD_MS} from '../../features/controls.js';
 import ModelViewerElementBase, {$scene} from '../../model-viewer-base.js';
 import {assetPath, dispatchSyntheticEvent, rafPasses, timePasses, until, waitForEvent} from '../helpers.js';
-
+import {BasicSpecTemplate} from '../templates.js';
 import {settleControls} from '../three-components/SmoothControls-spec.js';
 
 const expect = chai.expect;
@@ -43,15 +43,7 @@ suite('ModelViewerElementBase with ControlsMixin', () => {
       customElements.define(tagName, ModelViewerElement);
     });
 
-    test('can be directly instantiated', () => {
-      const element = new ModelViewerElement();
-      expect(element).to.be.ok;
-    });
-
-    test('can be instantiated with document.createElement', () => {
-      const element = document.createElement(tagName);
-      expect(element).to.be.ok;
-    });
+    BasicSpecTemplate(() => ModelViewerElement, () => tagName);
 
     suite('controls', () => {
       let element;

src/test/features/environment-spec.js

@@ -16,6 +16,7 @@
 import {EnvironmentMixin} from '../../features/environment.js';
 import ModelViewerElementBase, {$scene} from '../../model-viewer-base.js';
 import {assetPath, textureMatchesMeta, timePasses, waitForEvent} from '../helpers.js';
+import {BasicSpecTemplate} from '../templates.js';
 
 const expect = chai.expect;
 const BG_IMAGE_URL = assetPath('equirectangular.png');
@@ -105,6 +106,8 @@ suite('ModelViewerElementBase with EnvironmentMixin', () => {
 
   teardown(() => element.parentNode && element.parentNode.removeChild(element));
 
+  BasicSpecTemplate(() => ModelViewerElement, () => tagName);
+
   test(
       'has default skysphere if no background-image or background-color',
       () => {

src/test/features/loading-spec.js

@@ -16,6 +16,7 @@
 import {$posterElement, LoadingMixin, POSTER_TRANSITION_TIME} from '../../features/loading.js';
 import ModelViewerElementBase, {$canvas} from '../../model-viewer-base.js';
 import {assetPath, dispatchSyntheticEvent, pickShadowDescendant, rafPasses, timePasses, until, waitForEvent} from '../helpers.js';
+import {BasicSpecTemplate} from '../templates.js';
 
 const expect = chai.expect;
 const ASTRONAUT_GLB_PATH = assetPath('Astronaut.glb');
@@ -37,15 +38,8 @@ suite('ModelViewerElementBase with LoadingMixin', () => {
       customElements.define(tagName, ModelViewerElement);
     });
 
-    test('can be directly instantiated', () => {
-      const element = new ModelViewerElement();
-      expect(element).to.be.ok;
-    });
+    BasicSpecTemplate(() => ModelViewerElement, () => tagName);
 
-    test('can be instantiated with document.createElement', () => {
-      const element = document.createElement(tagName);
-      expect(element).to.be.ok;
-    });
     // TODO: Elements must have loaded to hide poster...
 
     suite('loading', () => {

src/test/features/magic-leap-spec.js

@@ -16,6 +16,7 @@
 import {MagicLeapMixin} from '../../features/magic-leap.js';
 import ModelViewerElementBase from '../../model-viewer-base.js';
 import {assetPath, pickShadowDescendant, timePasses} from '../helpers.js';
+import {BasicSpecTemplate} from '../templates.js';
 
 const expect = chai.expect;
 
@@ -36,15 +37,7 @@ suite('ModelViewerElementBase with MagicLeapMixin', () => {
       customElements.define(tagName, ModelViewerElement);
     });
 
-    test('can be directly instantiated', () => {
-      const element = new ModelViewerElement();
-      expect(element).to.be.ok;
-    });
-
-    test('can be instantiated with document.createElement', () => {
-      const element = document.createElement(tagName);
-      expect(element).to.be.ok;
-    });
+    BasicSpecTemplate(() => ModelViewerElement, () => tagName);
 
     suite('magic-leap', () => {
       suite('in standard browser environments', () => {

src/test/model-viewer-base-spec.js

@@ -16,6 +16,7 @@
 import ModelViewerElementBase, {$canvas, $renderer, $scene} from '../model-viewer-base.js';
 
 import {assetPath, timePasses, until, waitForEvent} from './helpers.js';
+import {BasicSpecTemplate} from './templates.js';
 
 const expect = chai.expect;
 
@@ -39,44 +40,7 @@ suite('ModelViewerElementBase', () => {
       customElements.define(tagName, ModelViewerElement);
     });
 
-    test('can be directly instantiated', () => {
-      const element = new ModelViewerElement();
-      expect(element).to.be.ok;
-    });
-
-    test('can be instantiated with document.createElement', () => {
-      const element = document.createElement(tagName);
-      expect(element).to.be.ok;
-    });
-
-    suite('compatibility', () => {
-      suite('when WebGL is not supported', () => {
-        let nativeGetContext;
-
-        setup(() => {
-          nativeGetContext = HTMLCanvasElement.prototype.getContext;
-          HTMLCanvasElement.prototype.getContext = function(type, ...args) {
-            if (/webgl/.test(type)) {
-              return null;
-            }
-            return nativeGetContext.call(this, type, ...args);
-          };
-        });
-
-        teardown(() => {
-          HTMLCanvasElement.prototype.getContext = nativeGetContext;
-        });
-
-        test(
-            'does not explode when created and appended to the document',
-            async () => {
-              const element = new ModelViewerElement();
-              document.body.appendChild(element);
-              await timePasses();
-              document.body.removeChild(element);
-            });
-      });
-    });
+    BasicSpecTemplate(() => ModelViewerElement, () => tagName);
 
     suite('with alt text', () => {
       let element;

src/test/templates.ts

@@ -0,0 +1,55 @@
+import ModelViewerElementBase from '../model-viewer-base.js';
+import {timePasses} from './helpers.js';
+
+export type Constructor<T = object> = {
+  new (...args: any[]): T
+};
+
+const expect = chai.expect;
+
+export const BasicSpecTemplate =
+    (ModelViewerElementAccessor: () => Constructor<ModelViewerElementBase>,
+     tagNameAccessor: () => string) => {
+      test('can be directly instantiated', () => {
+        const ModelViewerElement = ModelViewerElementAccessor();
+        const element = new ModelViewerElement();
+        expect(element).to.be.ok;
+      });
+
+      test('can be instantiated with document.createElement', () => {
+        const tagName = tagNameAccessor();
+        const element = document.createElement(tagName);
+        expect(element).to.be.ok;
+      });
+
+      suite('compatibility', () => {
+        suite('when WebGL is not supported', () => {
+          let nativeGetContext: any;
+
+          setup(() => {
+            nativeGetContext = HTMLCanvasElement.prototype.getContext;
+            HTMLCanvasElement.prototype.getContext = function(
+                type: string, ...args: Array<any>) {
+              if (/webgl/.test(type)) {
+                return null;
+              }
+              return nativeGetContext.call(this, type, ...args);
+            };
+          });
+
+          teardown(() => {
+            HTMLCanvasElement.prototype.getContext = nativeGetContext;
+          });
+
+          test(
+              'does not explode when created and appended to the document',
+              async () => {
+                const ModelViewerElement = ModelViewerElementAccessor();
+                const element = new ModelViewerElement();
+                document.body.appendChild(element);
+                await timePasses();
+                document.body.removeChild(element);
+              });
+        });
+      });
+    };