From 66b6811dfc2054bd9a47409b880558b5e4a21e6f Mon Sep 17 00:00:00 2001 From: akfish Date: Mon, 27 Feb 2017 21:20:58 +0800 Subject: [PATCH] Fix browser specs * Run browser specs in Travis CI. Fix #38 * Test with live remote images #37 --- .travis.yml | 3 ++ karma.conf.js | 11 +---- package.json | 4 +- src/image/node.ts | 2 +- src/test/common/helper.ts | 8 ++-- src/test/vibrant.browser-spec.ts | 70 ++++++++++++++++++-------------- src/test/vibrant.spec.ts | 6 +-- src/util.ts | 12 +++--- src/vibrant.ts | 10 ++++- 9 files changed, 69 insertions(+), 57 deletions(-) diff --git a/.travis.yml b/.travis.yml index 7e1cc91..79ae774 100644 --- a/.travis.yml +++ b/.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 diff --git a/karma.conf.js b/karma.conf.js index 12d357d..5bfea59 100644 --- a/karma.conf.js +++ b/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) diff --git a/package.json b/package.json index eb4ce5a..58a50f7 100644 --- a/package.json +++ b/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", diff --git a/src/image/node.ts b/src/image/node.ts index 6ef7efc..2da4145 100644 --- a/src/image/node.ts +++ b/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 { diff --git a/src/test/common/helper.ts b/src/test/common/helper.ts index 2bfc786..644f32e 100644 --- a/src/test/common/helper.ts +++ b/src/test/common/helper.ts @@ -34,7 +34,7 @@ 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) => { @@ -42,8 +42,8 @@ const paletteCallback = (sample: Sample, done?: MochaDone) => 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) diff --git a/src/test/vibrant.browser-spec.ts b/src/test/vibrant.browser-spec.ts index 698e8a2..4621056 100644 --- a/src/test/vibrant.browser-spec.ts +++ b/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((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((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((m1).image.crossOrigin, `${RELATIVE_URL} should not have crossOrigin set`) - .not.to.equal("anonymous") - let m2 = new BrowserImage() - m2.load(SAME_ORIGIN_URL) - expect((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((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((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 diff --git a/src/test/vibrant.spec.ts b/src/test/vibrant.spec.ts index 7f72a18..69993a8 100644 --- a/src/test/vibrant.spec.ts +++ b/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(() => { diff --git a/src/util.ts b/src/util.ts index 15312da..57883d0 100644 --- a/src/util.ts +++ b/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' } diff --git a/src/vibrant.ts b/src/vibrant.ts index 57a6d1a..9004386 100644 --- a/src/vibrant.ts +++ b/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 = { colorCount: 64,