Migrate to web-test-runner (#318)

web-test-runner replaces web-component-tester
https://modern-web.dev/docs/test-runner/overview/

Author: rslawik

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 
 **/*.d.ts*
-!test/wct.d.ts
 **/*.js*
+
+!*.config.js

package-lock.json

@@ -35,7 +35,8 @@
     "build:watch": "tsc --watch",
     "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch",
     "pretest": "npm run build",
-    "test": "wct --module-resolution=node --npm --simpleOutput -l chrome"
+    "test": "web-test-runner",
+    "test:watch": "web-test-runner --watch"
   },
   "contributors": [
     "Wes Alvaro",
@@ -47,15 +48,16 @@
     "lit-element": "^3.0.0"
   },
   "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@open-wc/testing": "^2.5.33",
     "@polymer/decorators": "^3.0.0",
     "@polymer/polymer": "^3.4.1",
-    "@types/chai": "^4.2.11",
     "@types/google.visualization": "0.0.68",
-    "@types/mocha": "^7.0.2",
-    "@web/dev-server": "^0.1.24",
-    "typescript": "^4.4.3",
-    "wct-browser-legacy": "^1.0.2",
-    "web-component-tester": "^6.9.2"
+    "@types/mocha": "^9.0.0",
+    "@web/dev-server": "^0.1.25",
+    "@web/test-runner": "^0.13.20",
+    "sinon": "^11.1.2",
+    "typescript": "^4.4.4"
   },
   "typings": "google-chart.d.ts"
 }

package.json

@@ -15,19 +15,20 @@
  * limitations under the License.
  */
 
+import {assert} from '@esm-bundle/chai';
+import {fixture} from '@open-wc/testing';
 import {timeOut} from '@polymer/polymer/lib/utils/async.js';
 import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js';
+import {spy, SinonSpy} from 'sinon';
 import {GoogleChart} from '../google-chart.js';
 import {dataTable, load, DataTableLike} from '../loader.js';
 import {ready} from './helpers.js';
 
-const assert = chai.assert;
-
 suite('<google-chart>', function() {
   var chart: GoogleChart;
   var waitCheckAndDoneDebouncer: Debouncer|null;
-  setup(function() {
-    chart = fixture('chart-fixture') as GoogleChart;
+  setup(async function() {
+    chart = await fixture('<google-chart></google-chart>') as GoogleChart;
     waitCheckAndDoneDebouncer = null;
   });
   var waitCheckAndDone = function(check: () => unknown, done: () => void) {
@@ -124,7 +125,7 @@ suite('<google-chart>', function() {
       var initialDraw = true;
       chart.addEventListener('google-chart-ready', function() {
         if (initialDraw) {
-          spyRedraw = sinon.spy(chart['chartWrapper']!, 'draw');
+          spyRedraw = spy(chart['chartWrapper']!, 'draw');
           initialDraw = false;
           const options = chart.options as google.visualization.ColumnChartOptions;
           options.title = 'Debounced Title';
@@ -176,7 +177,7 @@ suite('<google-chart>', function() {
     let chart: GoogleChart;
     let dt: google.visualization.DataTable;
     setup(async () => {
-      chart = fixture('chart-fixture') as GoogleChart;
+      chart = await fixture('<google-chart></google-chart>') as GoogleChart;
       dt = await dataTable(undefined);
       dt.addColumn('number', 'x');
       dt.addColumn('number', 'y');
@@ -289,17 +290,17 @@ suite('<google-chart>', function() {
         done();
       });
       load().then(() => {
-        const q = new google.visualization.Query('query.json');
+        const q = new google.visualization.Query('test/query.json');
         q.send((res) => {
           chart.data = res.getDataTable();
         });
       });
     });
     test('[data] is JSON URL for 2D Array', function(done) {
-      setDataAndWaitForRender('test-data-array.json', done);
+      setDataAndWaitForRender('test/test-data-array.json', done);
     });
     test('[data] is JSON URL for DataTable Object format', function(done) {
-      setDataAndWaitForRender('test-data-object.json', done);
+      setDataAndWaitForRender('test/test-data-object.json', done);
     });
     test('[view] is DataView', function(done) {
       chart.addEventListener('google-chart-ready', function() {
@@ -314,8 +315,8 @@ suite('<google-chart>', function() {
       });
     });
     test('multiple calls to JSON URL', function(done) {
-      setDataAndWaitForRender('test-data-array.json', function() {
-        setDataAndWaitForRender('test-data-object.json', done);
+      setDataAndWaitForRender('test/test-data-array.json', function() {
+        setDataAndWaitForRender('test/test-data-object.json', done);
       });
     });
   });

test/basic-tests.html

@@ -15,14 +15,5 @@
 limitations under the License.
 -->
 <html lang="de">
-<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-<script src="../node_modules/wct-browser-legacy/browser.js"></script>
-
-<test-fixture id="type-table">
-  <template>
-    <google-chart type="table"></google-chart>
-  </template>
-</test-fixture>
-
-<script type="module" src="custom-load-test.js"></script>
+<script type="module" src="custom-load.js"></script>
 </html>

test/basic-tests.ts

@@ -15,15 +15,17 @@
  * limitations under the License.
  */
 
+import {assert} from '@esm-bundle/chai';
+import {fixture} from '@open-wc/testing';
+import {runTests} from '@web/test-runner-mocha';
 import '../google-chart.js';
 import {GoogleChart} from '../google-chart.js';
 import {load} from '../loader.js';
 import {ready} from './helpers.js';
 
-const assert = chai.assert;
-
 // This test has to run separately in a clean document because Google Charts
 // API is loaded only once per document.
+runTests(() => {
 suite('Custom load', () => {
   suiteSetup(() => {
     // Ensure Google Charts is not loaded.
@@ -40,10 +42,11 @@ suite('Custom load', () => {
   });
 
   test('loads packages for chart type="table"', async () => {
-    const chart = fixture('type-table') as GoogleChart;
+    const chart = await fixture('<google-chart type="table"></google-chart>') as GoogleChart;
     chart.data = [ ['Data', 'Value'], ['Something', 1] ];
     await ready(chart);
     const chartDiv = chart.shadowRoot!.getElementById('chartdiv')!;
     assert.isAbove(chartDiv.childElementCount, 0);
   });
 });
+});

test/custom-load-test.html

@@ -16,14 +16,13 @@
  */
 
 import '../google-chart.js';
+import {assert} from '@esm-bundle/chai';
 import {customElement, property} from '@polymer/decorators';
 import {PolymerElement, html} from '@polymer/polymer';
 import {GoogleChart} from '../google-chart.js';
 import {DataTableLike} from '../loader.js';
 import {ready} from './helpers.js';
 
-const assert = chai.assert;
-
 suite('<google-chart> use in Polymer element', () => {
   let element: GoogleChartTestElement;
 

test/custom-load-test.ts test/custom-load.ts

@@ -0,0 +1,12 @@
+// https://modern-web.dev/docs/test-runner/cli-and-configuration/
+export default {
+  files: 'test/**/*test*.(html|js)',
+  nodeResolve: true,
+  testFramework: {
+    // https://mochajs.org/api/mocha
+    config: {
+      ui: 'tdd',
+      timeout: '20000', // default 2000
+    },
+  },
+};