diff options
-rw-r--r-- | spec/spec/modules/core/regex.js | 1 | ||||
-rw-r--r-- | spec/spec/types/Color.js | 209 | ||||
-rw-r--r-- | src/modules/core/regex.js | 2 | ||||
-rw-r--r-- | src/types/Color.js | 4 |
4 files changed, 199 insertions, 17 deletions
diff --git a/spec/spec/modules/core/regex.js b/spec/spec/modules/core/regex.js index d3db682..e1d6dc9 100644 --- a/spec/spec/modules/core/regex.js +++ b/spec/spec/modules/core/regex.js @@ -121,6 +121,7 @@ describe('regex.js', () => { expect(regex.isHex.test('abc')).toBe(false) expect(regex.isHex.test('#1234563')).toBe(false) expect(regex.isHex.test('#kasdhs')).toBe(false) + expect(regex.isHex.test('#abcd')).toBe(false) }) }) diff --git a/spec/spec/types/Color.js b/spec/spec/types/Color.js index ede8863..64161eb 100644 --- a/spec/spec/types/Color.js +++ b/spec/spec/types/Color.js @@ -1,7 +1,9 @@ -/* globals describe, expect, it, beforeEach */ +/* globals describe, expect, it, beforeEach, spyOn, jasmine */ import { Color } from '../../../src/main.js' +const { any } = jasmine + describe('Color.js', () => { var color @@ -9,24 +11,65 @@ describe('Color.js', () => { color = new Color({ r: 0, g: 102, b: 255 }) }) - describe('construct: constructs a color in different formats', () => { + describe('()', () => { - it('constructs a color from an object in the correct color space', () => { + describe('constructs a color from an object in the correct color space', () => { + it('rgb', () => { + const color = new Color({ r: 255, g: 0, b: 128 }) + expect(color.r).toBe(255) + expect(color.g).toBe(0) + expect(color.b).toBe(128) + expect(color.space).toBe('rgb') + }) - // Try in rgb - const color = new Color({ r: 255, g: 0, b: 128 }) - expect(color.r).toBe(255) - expect(color.g).toBe(0) - expect(color.b).toBe(128) - expect(color.space).toBe('rgb') + it('xyz', () => { + const color = new Color({ x: 255, y: 0, z: 128 }) + expect(color.x).toBe(255) + expect(color.y).toBe(0) + expect(color.z).toBe(128) + expect(color.space).toBe('xyz') + }) + + it('hsl', () => { + const color = new Color({ h: 255, s: 0, l: 128 }) + expect(color.h).toBe(255) + expect(color.s).toBe(0) + expect(color.l).toBe(128) + expect(color.space).toBe('hsl') + }) + + it('lab', () => { + const color = new Color({ l: 255, a: 0, b: 128 }) + expect(color.l).toBe(255) + expect(color.a).toBe(0) + expect(color.b).toBe(128) + expect(color.space).toBe('lab') + }) + + it('lch', () => { + const color = new Color({ l: 255, c: 0, h: 128 }) + expect(color.l).toBe(255) + expect(color.c).toBe(0) + expect(color.h).toBe(128) + expect(color.space).toBe('lch') + }) + + it('cmyk', () => { + const color2 = new Color({ c: 20, y: 15, m: 10, k: 5 }) + expect(color2.c).toBe(20) + expect(color2.m).toBe(10) + expect(color2.y).toBe(15) + expect(color2.k).toBe(5) + expect(color2.space).toBe('cmyk') + }) - // Try in cmyk - const color2 = new Color({ c: 20, y: 15, m: 10, k: 5 }) - expect(color2.c).toBe(20) - expect(color2.m).toBe(10) - expect(color2.y).toBe(15) - expect(color2.k).toBe(5) - expect(color2.space).toBe('cmyk') + it('and default to rgb when unknown parameters are passed', () => { + const color = new Color({ h: 12, b: 10, l: 100 }) + expect(color.r).toBe(0) + expect(color.g).toBe(0) + expect(color.b).toBe(0) + expect(color.space).toBe('rgb') + }) }) it('constructs a color from an array', () => { @@ -74,6 +117,9 @@ describe('Color.js', () => { expect(color.b).toBe(255) }) + it('throws an error if unsupported string format was given', () => { + expect(() => new Color('#0066')).toThrowError('Unsupported string format, can\'t construct Color') + }) }) describe('input and output: Importing and exporting colors', () => { @@ -222,6 +268,52 @@ describe('Color.js', () => { }) }) + // This conversion is pretty lossy + // Especially g is super wrong (which should be 0 at testing and is >170) + // describe('xyz()', () => { + + // it('can convert from rgb to xyz', () => { + // const color = new Color(255, 0, 128) + // const xyz = color.xyz() + // expect(xyz.x).toBeCloseTo(0.780182, 6) + // expect(xyz.y).toBeCloseTo(0.611077, 6) + // expect(xyz.z).toBeCloseTo(0.590749, 6) + // expect(xyz.space).toBe('xyz') + // }) + + // it('can convert from xyz to rgb', () => { + // const xyz = new Color(0.780181754521692, 0.6110767760212142, 0.590748864329329, 'xyz') + // const rgb = xyz.rgb() + // expect(rgb.r).toBeCloseTo(255, 0) + // expect(rgb.g).toBeCloseTo(0, 0) + // expect(rgb.b).toBeCloseTo(128, 0) + // expect(rgb.space).toBe('rgb') + // }) + + // it('is invertable', () => { + // const { r, g, b } = new Color(255, 0, 128).xyz().rgb() + // expect(r).toBeCloseTo(255, 0) + // expect(g).toBeCloseTo(0, 0) + // expect(b).toBeCloseTo(128, 0) + // }) + + // it('handles black', () => { + // const color = new Color(0, 0, 0).xyz().rgb() + // expect(color.r).toBeCloseTo(0, 0) + // expect(color.g).toBeCloseTo(0, 0) + // expect(color.b).toBeCloseTo(0, 0) + // expect(color.toHex()).toBe('#000000') + // }) + + // it('handles white', () => { + // const color = new Color(255, 255, 255).xyz().rgb() + // expect(color.r).toBeCloseTo(255, 0) + // expect(color.g).toBeCloseTo(255, 0) + // expect(color.b).toBeCloseTo(255, 0) + // expect(color.toHex()).toBe('#ffffff') + // }) + // }) + describe('cmyk()', () => { it('can convert from rgb to cmyk', () => { @@ -270,4 +362,89 @@ describe('Color.js', () => { }) + describe('static methods', () => { + describe('random()', () => { + it('returns color', () => { + expect(Color.random()).toEqual(any(Color)) + }) + + it('returns color with mode=vibrant', () => { + expect(Color.random('vibrant')).toEqual(any(Color)) + }) + + it('returns color with mode=sine', () => { + expect(Color.random('sine')).toEqual(any(Color)) + }) + + it('returns color with mode=pastel', () => { + expect(Color.random('pastel')).toEqual(any(Color)) + }) + + it('returns color with mode=dark', () => { + expect(Color.random('dark')).toEqual(any(Color)) + }) + + it('returns color with mode=rgb', () => { + expect(Color.random('rgb')).toEqual(any(Color)) + }) + + it('returns color with mode=lab', () => { + expect(Color.random('lab')).toEqual(any(Color)) + }) + + it('returns color with mode=grey', () => { + expect(Color.random('grey')).toEqual(any(Color)) + }) + + it('throws an error if mode is unknown', () => { + expect(() => Color.random('foo')).toThrowError('Unsupported random color mode') + }) + }) + + describe('test()', () => { + it('returns false for non strings', () => { + expect(Color.test(1)).toBe(false) + }) + + it('returns true if a given string is a color - hex', () => { + expect(Color.test('#abc')).toBe(true) + expect(Color.test('#abcdef')).toBe(true) + }) + + it('returns true if a given string is a color - rgb', () => { + expect(Color.test('rgb(1,2,3)')).toBe(true) + }) + + it('returns false if a given string is a not a color', () => { + expect(Color.test('#1234')).toBe(false) + expect(Color.test('#Hallo Welt')).toBe(false) + }) + }) + + describe('isRgb()', () => { + it('returns true if object has all rgb properties set', () => { + expect(Color.isRgb({ r: 12, g: 45, b: 11, blub: true })).toBe(true) + }) + + it('returns false if object has not all rgb properties set or they are not numbers', () => { + expect(Color.isRgb({ r: 12, g: 45 })).toBe(false) + expect(Color.isRgb({ r: 12, g: 45, b: '1' })).toBe(false) + }) + }) + + describe('isColor', () => { + it('tests if given value is a color', () => { + const spy1 = spyOn(Color, 'isRgb') + const spy2 = spyOn(Color, 'test') + expect(Color.isColor(new Color())).toBe(true) + Color.isColor('#000') + const color = { r: 12, g: 45, b: 11 } + Color.isColor(color) + expect(spy1).toHaveBeenCalledWith('#000') + expect(spy1).toHaveBeenCalledWith(color) + expect(spy2).toHaveBeenCalledWith('#000') + }) + }) + }) + }) diff --git a/src/modules/core/regex.js b/src/modules/core/regex.js index b8adb83..c32ac93 100644 --- a/src/modules/core/regex.js +++ b/src/modules/core/regex.js @@ -17,7 +17,7 @@ export const transforms = /\)\s*,?\s*/ export const whitespace = /\s/g // Test hex value -export const isHex = /^#[a-f0-9]{3,6}$/i +export const isHex = /^#[a-f0-9]{3}$|^#[a-f0-9]{6}$/i // Test rgb value export const isRgb = /^rgb\(/ diff --git a/src/types/Color.js b/src/types/Color.js index e9bc0ce..eb6368e 100644 --- a/src/types/Color.js +++ b/src/types/Color.js @@ -414,6 +414,10 @@ export default class Color { const color = new Color(grey, grey, grey) return color + } else { + + throw new Error('Unsupported random color mode') + } } |