Fix browser specs

* Run browser specs in Travis CI. Fix #38
* Test with live remote images #37

.travis.yml

@@ -1,7 +1,10 @@
 language: node_js
 node_js:
   - "6"
+addons:
+  firefox: "latest"
 before_script:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+  - sleep 3 # give xvfb some time to start

karma.conf.js

@@ -63,22 +63,15 @@ module.exports = function (config) {
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false,
+    singleRun: true,
 
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity,
-
-    customLaunchers: {
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    }
   }
 
   if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci', 'Firefox'];
+    configuration.browsers = ['Firefox'];
   }
 
   config.set(configuration)

package.json

@@ -51,8 +51,8 @@
     "pretest": "npm run clean && npm run build",
     "test": "npm run test:node && npm run test:browser",
     "test:node": "./node_modules/.bin/mocha lib/test/**/*.spec.js",
-    "test:browser": "./node_modules/.bin/karma start karma.conf.js --single-run",
-    "prepublish": "npm run test"
+    "test:browser": "./node_modules/.bin/karma start karma.conf.js",
+    "prepublish": "npm run clean && npm run build"
   },
   "repository": {
     "type": "git",

src/image/node.ts

@@ -65,7 +65,7 @@ export default class NodeImage extends ImageBase {
         } else if (image instanceof Buffer) {
             return this._loadByJimp(image)
         } else {
-            return Bluebird.reject(new Error("Cannot load image from HTMLImageElement in node environment"))
+            return Bluebird.reject(new Error('Cannot load image from HTMLImageElement in node environment'))
         }
     }
     clear(): void {

src/test/common/helper.ts

@@ -34,16 +34,16 @@ const displayColorDiffTable = (p: string, diff: string[][]) => {
 const paletteCallback = (sample: Sample, done?: MochaDone) =>
     (err: Error, palette?: Palette) => {
         if (err != null) { throw err }
-        expect(palette, "palette should be returned").not.to.be.null
+        expect(palette, 'palette should be returned').not.to.be.null
 
         let failCount = 0
         let testWithTarget = (name: string, actual: Swatch, target: string) => {
             let key = sample.i.toString()
             let expected = REFERENCE_PALETTE[target][key][name]
             let result = {
                 target,
-                expected: expected != null ? expected : "null",
-                status: "N/A",
+                expected: expected != null ? expected : 'null',
+                status: 'N/A',
                 diff: -1
             }
 
@@ -67,7 +67,7 @@ const paletteCallback = (sample: Sample, done?: MochaDone) =>
         for (let name in palette) {
             var left
             let actual = palette[name]
-            let colorDiff = [name, (left = (actual != null ? actual.getHex() : undefined)) != null ? left : "null"]
+            let colorDiff = [name, (left = (actual != null ? actual.getHex() : undefined)) != null ? left : 'null']
             for (let target of TARGETS) {
                 let r = testWithTarget(name, actual, target)
                 colorDiff.push(r.expected)

src/test/vibrant.browser-spec.ts

@@ -16,55 +16,63 @@ import {
   testVibrantAsPromised
 } from './common/helper'
 
-describe("Vibrant", () => {
-  it("exports to window", () => {
-    expect(Vibrant).not.to.be.null
-    expect(Vibrant.Util).not.to.be.null
-    expect(Vibrant.Quantizer).not.to.be.null
-    expect(Vibrant.Generator).not.to.be.null
-    expect(Vibrant.Filter).not.to.be.null
+describe('Vibrant', () => {
+  it('exports to window', () => {
+    expect(Vibrant, 'Vibrant').not.to.be.undefined
+    expect(Vibrant.Util, 'Vibrant.Util').not.to.be.undefined
+    expect(Vibrant.Quantizer, 'Vibrant.Quantizer').not.to.be.undefined
+    expect(Vibrant.Generator, 'Vibrant.Generator').not.to.be.undefined
+    expect(Vibrant.Filter, 'Vibrant.Filter').not.to.be.undefined
   })
-  describe("Palette Extraction", () => {
+  describe('Palette Extraction', () => {
     SAMPLES.forEach((example) => {
       it(`${example.fileName} (callback)`, done => testVibrant(Vibrant, example, done, 'relativeUrl'))
       it(`${example.fileName} (Promise)`, () => testVibrantAsPromised(Vibrant, example, 'relativeUrl'))
     })
   })
 
-  describe("Browser Image", () => {
+  describe('Browser Image', () => {
     let loc = window.location
     let BrowserImage: ImageClass = Vibrant.DefaultOpts.ImageClass
-    let CROS_URL = "http://example.com/foo.jpg"
-    let RELATIVE_URL = "foo/bar.jpg"
-    let SAME_ORIGIN_URL = `${loc.protocol}//${loc.host}/foo/bar.jpg`
-    it("should set crossOrigin flag for images form foreign origin", () => {
-      let m = new BrowserImage()
-      m.load(CROS_URL)
-      expect((<any>m).image.crossOrigin, `${CROS_URL} should have crossOrigin === 'anonymous'`)
-        .to.equal("anonymous")
-    })
+    const CROS_URL = 'https://avatars3.githubusercontent.com/u/922715?v=3&s=460'
+    const RELATIVE_URL = 'base/data/1.jpg'
+    const SAME_ORIGIN_URL = `${loc.protocol}//${loc.host}/${RELATIVE_URL}`
 
+    it('should set crossOrigin flag for images form foreign origin', () =>
+      new BrowserImage().load(CROS_URL)
+        .then((m) => {
+          expect((<any>m).image.crossOrigin, `${CROS_URL} should have crossOrigin === 'anonymous'`)
+            .to.equal('anonymous')
+          expect(m.getImageData()).to.be.an.instanceOf(ImageData)
+        })
+    )
 
-    it("should not set crossOrigin flag for images from same origin", () => {
-      let m1 = new BrowserImage()
-      m1.load(RELATIVE_URL)
-      expect((<any>m1).image.crossOrigin, `${RELATIVE_URL} should not have crossOrigin set`)
-        .not.to.equal("anonymous")
-      let m2 = new BrowserImage()
-      m2.load(SAME_ORIGIN_URL)
-      expect((<any>m2).image.crossOrigin, `${SAME_ORIGIN_URL} should not have crossOrigin set`)
-        .not.to.equal("anonymous")
-    })
+    it('should not set crossOrigin flag for images from same origin (relative URL)', () =>
+      new BrowserImage().load(RELATIVE_URL)
+        .then((m) => {
+          expect((<any>m).image.crossOrigin, `${RELATIVE_URL} should not have crossOrigin set`)
+            .not.to.equal('anonymous')
+        })
+    )
+
+
+    it('should not set crossOrigin flag for images from same origin (absolute URL)', () => 
+      new BrowserImage().load(SAME_ORIGIN_URL)
+        .then((m) => {
+          expect((<any>m).image.crossOrigin, `${SAME_ORIGIN_URL} should not have crossOrigin set`)
+            .not.to.equal('anonymous')
+        })
+    )
 
-    it("should accept HTMLImageElement as input", () => {
+    it('should accept HTMLImageElement as input', () => {
       let img = document.createElement('img')
       img.src = SAMPLES[0].relativeUrl
 
       let m1 = new BrowserImage()
-      return m1.load(img) 
+      return m1.load(img)
     })
 
-    it("should accept HTMLImageElement that is already loaded as input", (done) => {
+    it('should accept HTMLImageElement that is already loaded as input', (done) => {
       let img = document.createElement('img')
       img.src = SAMPLES[0].relativeUrl
 

src/test/vibrant.spec.ts

@@ -15,15 +15,15 @@ import {
 
 import Vibrant = require('../')
 
-describe("Palette Extraction", () => {
-    describe("process samples", () =>
+describe('Palette Extraction', () => {
+    describe('process samples', () =>
         SAMPLES.forEach((sample) => {
             it(`${sample.fileName} (callback)`, done => testVibrant(Vibrant, sample, done))
             it(`${sample.fileName} (Promise)`, () => testVibrantAsPromised(Vibrant, sample))
         })
     )
 
-    describe("process remote images (http)", function () {
+    describe('process remote images (http)', function () {
         let server: http.Server = null
 
         before(() => {

src/util.ts

@@ -226,20 +226,20 @@ export function hexDiff(hex1: string, hex2: string): number {
 
 export function getColorDiffStatus(d: number): string {
     if (d < DELTAE94_DIFF_STATUS.NA)
-        return "N/A"
+        return 'N/A'
     // Not perceptible by human eyes
     if (d <= DELTAE94_DIFF_STATUS.PERFECT)
-        return "Perfect"
+        return 'Perfect'
     // Perceptible through close observation
     if (d <= DELTAE94_DIFF_STATUS.CLOSE)
-        return "Close"
+        return 'Close'
     // Perceptible at a glance
     if (d <= DELTAE94_DIFF_STATUS.GOOD)
-        return "Good"
+        return 'Good'
     // Colors are more similar than opposite
     if (d < DELTAE94_DIFF_STATUS.SIMILAR)
-        return "Similar"
-    return "Wrong"
+        return 'Similar'
+    return 'Wrong'
 
 }
 

src/vibrant.ts

@@ -12,11 +12,19 @@ import defaults = require('lodash/defaults')
 
 import Builder from './builder'
 
+import * as Util from './util'
+
 import * as Quantizer from './quantizer'
 import * as Generator from './generator'
+import * as Filter from './filter'
+
 
 class Vibrant {
-    static Builder: Builder
+    static Builder = Builder 
+    static Quantizer = Quantizer
+    static Generator = Generator
+    static Filter = Filter
+    static Util = Util
 
     static DefaultOpts: Partial<Options> = {
         colorCount: 64,