add travis.yml

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - '8'
+  - '10'
+script:
+  - yarn && yarn build && yarn lint && yarn test-all-travis
+cache: yarn
+git:
+  depth: 5

karma.conf.js

@@ -46,7 +46,7 @@ module.exports = function(config) {
     },
     karmaTypescriptConfig,
     reporters: ['progress', 'karma-typescript'],
-    browsers: ['Chrome'],
+    browsers: ['Chrome', 'Firefox', 'Safari'],
     browserStack: {
       username: process.env.BROWSERSTACK_USERNAME,
       accessKey: process.env.BROWSERSTACK_KEY

package.json

@@ -13,6 +13,8 @@
     "build": "yarn lint && tsc && NODE_ENV=production webpack",
     "lint": "tslint -p . -t verbose",
     "test": "yarn lint && karma start",
+    "test-travis": "karma start --singleRun --reporters='dots,karma-typescript,BrowserStack' --hostname='bs-local.com'",
+    "test-all-travis": "./scripts/test-all-travis.sh",
     "build-npm": "./scripts/build-npm.sh"
   },
   "dependencies": {
@@ -31,11 +33,14 @@
     "clang-format": "~1.2.2",
     "jasmine": "^3.2.0",
     "jasmine-core": "^3.2.0",
-    "karma": "^3.0.0",
+    "karma": "~3.0.0",
     "karma-browserstack-launcher": "^1.3.0",
     "karma-chrome-launcher": "^2.2.0",
+    "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.1.2",
+    "karma-safari-launcher": "^1.0.0",
     "karma-typescript": "^3.0.13",
+    "npm-run-all": "^4.1.3",
     "preact-render-spy": "^1.3.0",
     "rimraf": "^2.6.2",
     "tslint": "^5.11.0",

scripts/test-all-travis.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+# Copyright 2018 Google LLC. 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.
+# =============================================================================
+
+set -e
+
+# Run the first karma separately so it can download the BrowserStack binary
+# without conflicting with others.
+yarn test-travis --browsers=bs_chrome_mac
+
+# Run the rest of the karma tests in parallel. These runs will reuse the
+# already downloaded binary.
+npm-run-all -p -c --aggregate-output \
+  "test-travis --browsers=bs_firefox_mac" \
+  "test-travis --browsers=bs_safari_mac"

src/render/barchart_test.ts

@@ -18,8 +18,11 @@
 import {renderBarchart} from './barchart';
 
 describe('renderBarChart', () => {
+  let pixelRatio: number;
+
   beforeEach(() => {
     document.body.innerHTML = '<div id="container"></div>';
+    pixelRatio = window.devicePixelRatio;
   });
 
   it('renders a bar chart', async () => {
@@ -85,7 +88,7 @@ describe('renderBarChart', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.width).toBe('400px');
+    expect(document.querySelector('canvas')!.width).toBe(400 * pixelRatio);
   });
 
   it('sets height of chart', async () => {
@@ -100,6 +103,6 @@ describe('renderBarChart', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.height).toBe('200px');
+    expect(document.querySelector('canvas')!.height).toBe(200 * pixelRatio);
   });
 });

src/render/confusion_matrix_test.ts

@@ -18,8 +18,11 @@
 import {renderConfusionMatrix} from './confusion_matrix';
 
 describe('renderConfusionMatrix', () => {
+  let pixelRatio: number;
+
   beforeEach(() => {
     document.body.innerHTML = '<div id="container"></div>';
+    pixelRatio = window.devicePixelRatio;
   });
 
   it('renders a chart', async () => {
@@ -88,7 +91,7 @@ describe('renderConfusionMatrix', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.width).toBe('400px');
+    expect(document.querySelector('canvas')!.width).toBe(400 * pixelRatio);
   });
 
   it('sets height of chart', async () => {
@@ -102,6 +105,6 @@ describe('renderConfusionMatrix', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.height).toBe('200px');
+    expect(document.querySelector('canvas')!.height).toBe(200 * pixelRatio);
   });
 });

src/render/histogram_test.ts

@@ -20,8 +20,11 @@ import {HistogramStats} from '../types';
 import {renderHistogram} from './histogram';
 
 describe('renderHistogram', () => {
+  let pixelRatio: number;
+
   beforeEach(() => {
     document.body.innerHTML = '<div id="container"></div>';
+    pixelRatio = window.devicePixelRatio;
   });
 
   it('renders a histogram', async () => {
@@ -191,7 +194,7 @@ describe('renderHistogram', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.width).toBe('400px');
+    expect(document.querySelector('canvas')!.width).toBe(400 * pixelRatio);
   });
 
   it('sets height of chart', async () => {
@@ -206,6 +209,6 @@ describe('renderHistogram', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.height).toBe('200px');
+    expect(document.querySelector('canvas')!.height).toBe(200 * pixelRatio);
   });
 });

src/render/linechart_test.ts

@@ -18,8 +18,11 @@
 import {renderLinechart} from './linechart';
 
 describe('renderLineChart', () => {
+  let pixelRatio: number;
+
   beforeEach(() => {
     document.body.innerHTML = '<div id="container"></div>';
+    pixelRatio = window.devicePixelRatio;
   });
 
   it('renders a line chart', async () => {
@@ -140,7 +143,7 @@ describe('renderLineChart', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.width).toBe('400px');
+    expect(document.querySelector('canvas')!.width).toBe(400 * pixelRatio);
   });
 
   it('sets height of chart', async () => {
@@ -157,6 +160,6 @@ describe('renderLineChart', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.height).toBe('200px');
+    expect(document.querySelector('canvas')!.height).toBe(200 * pixelRatio);
   });
 });

src/render/scatterplot_tests.ts

@@ -18,8 +18,11 @@
 import {renderScatterplot} from './scatterplot';
 
 describe('renderScatterplot', () => {
+  let pixelRatio: number;
+
   beforeEach(() => {
     document.body.innerHTML = '<div id="container"></div>';
+    pixelRatio = window.devicePixelRatio;
   });
 
   it('renders a scatterplot', async () => {
@@ -143,7 +146,7 @@ describe('renderScatterplot', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.width).toBe('400px');
+    expect(document.querySelector('canvas')!.width).toBe(400 * pixelRatio);
   });
 
   it('sets height of chart', async () => {
@@ -160,6 +163,6 @@ describe('renderScatterplot', () => {
 
     expect(document.querySelectorAll('.vega-embed').length).toBe(1);
     expect(document.querySelectorAll('canvas').length).toBe(1);
-    expect(document.querySelector('canvas')!.style.height).toBe('200px');
+    expect(document.querySelector('canvas')!.height).toBe(200 * pixelRatio);
   });
 });

src/util/math.ts

@@ -175,10 +175,11 @@ export async function confusionMatrix(
   }
 
   if (numClasses == null) {
-    numClasses =
-        tidy(() => {
-          return maximum(labels.max(), predictions.max()).dataSync()[0] + 1;
-        }) as number;
+    numClasses = tidy(() => {
+                   const max =
+                       maximum(labels.max(), predictions.max()).cast('int32');
+                   return max.dataSync()[0] + 1;
+                 }) as number;
   }
 
   let weightsPromise: Promise<null|TypedArray> = Promise.resolve(null);

src/util/math_test.ts

@@ -99,8 +99,8 @@ describe('tensorStats', () => {
     const data = tf.tensor([2, 3, -400, 500, NaN, -800, 0, 0, 0]);
     const stats = await tensorStats(data);
 
-    expect(stats.max).toBe(500);
-    expect(stats.min).toBe(-800);
+    expect(stats.max).toBeCloseTo(500);
+    expect(stats.min).toBeCloseTo(-800);
     expect(stats.numVals).toBe(9);
     expect(stats.numNans).toBe(1);
     expect(stats.numZeros).toBe(3);
@@ -109,8 +109,8 @@ describe('tensorStats', () => {
   it('computes correct stats — all negative', async () => {
     const data = tf.tensor([-2, -3, -400, -500, NaN, -800]);
     const stats = await tensorStats(data);
-    expect(stats.max).toBe(-2);
-    expect(stats.min).toBe(-800);
+    expect(stats.max).toBeCloseTo(-2);
+    expect(stats.min).toBeCloseTo(-800);
     expect(stats.numVals).toBe(6);
     expect(stats.numNans).toBe(1);
     expect(stats.numZeros).toBe(0);