True test (#142)

* set up testing folders

* test math functions

* test color functions

* test a11y functions

* allow for error testing

* test oColor functions v1

* allow for warn testing

* test oColor functions v2

* test oColor functions v2

* change returned color in oColorGetColorFor mixin

* test oColor functions v3

* test oColor mixins v1

* return null if value null when warning

* linting

* remove warn helper, it doesnt help

* remove test-runner to prep for true in obt

main.scss

@@ -1,4 +1,6 @@
 @import 'src/scss/variables';
+
+@import 'src/scss/tools/error';
 @import 'src/scss/tools/color';
 @import 'src/scss/tools/maths';
 @import 'src/scss/tools/a11y';

src/scss/_functions.scss

@@ -17,7 +17,7 @@
 
 		@return map-get($o-colors-palette, $name);
 	} @else {
-		@warn "Color name '#{inspect($name)}' is not defined in the palette";
+		@warn "Color name '#{inspect($name)}' is not defined in the palette.";
 		@return null;
 	}
 }
@@ -100,7 +100,7 @@
 
 	@if ($color == null) {
 		@if ($default or $default == null) {
-			@return $default;
+			@return oColorsGetPaletteColor($default);
 		} @else {
 			$warn: "Undefined use-case: can't resolve use case list '#{inspect($namelist)}'";
 
@@ -128,7 +128,7 @@
 
 	@if not (map-has-key($o-colors-tints, $color)) {
 		$color-tints: map-keys($o-colors-tints);
-		@error "It is not possible to use a tint of: #{$color}, please use one of: #{$color-tints} instead.";
+		@return _error("It is not possible to use a tint of: #{$color}, please use one of: #{$color-tints} instead.");
 	}
 
 	@if (map-has-key(map-get($o-colors-tints, $color), 'hue')) {
@@ -155,7 +155,7 @@
 	$testContrast: oColorsCheckContrast($textColor, $background, false);
 
 	@if not $testContrast {
-		@error "The combination of #{$opacity}% #{$baseColor} on #{$background} does not pass WCAG guidelines for color contrast.";
+		@return _error "The combination of #{$opacity}% #{$baseColor} on #{$background} does not pass WCAG guidelines for color contrast.";
 	} @else if $testContrast == 'large' {
 		@warn "When using this combination (#{$opacity}% #{$baseColor} on #{$background}) please use a font size larger than 18px.";
 	}

src/scss/_mixins.scss

@@ -14,7 +14,7 @@
 	$newcolor: ($name: $color);
 
 	$o-colors-palette: map-merge($o-colors-palette, $newcolor) !global;
-}
+};
 
 /// Add a custom use case property
 ///

src/scss/_variables.scss

@@ -1,11 +1,15 @@
 $o-colors-is-silent: true !default;
 
+$_o-colors-brand: if(global-variable-exists(o-brand), if($o-brand != null, $o-brand, 'master'), 'master');
+
 $o-colors-palette: () !default;
 $_o-colors-experimental-palette: (
 	'slate-white-15':        #dedfe0, // oColorsMix('slate', 'white', 15): to support work on internal brand design
 	'slate-white-5':         #f4f4f5, // oColorsMix('slate', 'white', 5): to support work on internal brand design
 );
+
 $_o-colors-experimental-palette-warning: true !default;
+
 $o-colors-usecases: () !default;
 
-$_o-colors-brand: if(global-variable-exists(o-brand), if($o-brand != null, $o-brand, 'master'), 'master');
+$_test-environment: false !default;

src/scss/tools/_a11y.scss

@@ -48,7 +48,7 @@
 	}
 
 	@if $warnings {
-		@error "This combination of #{$col1} with #{$col2} does not pass WCAG color contrast guidelines.";
+		@return _error("This combination of #{$col1} with #{$col2} does not pass WCAG color contrast guidelines.");
 	}
 
 	@return false;

src/scss/tools/_error.scss

@@ -0,0 +1,9 @@
+/// Allows for errors to be tested in dev environments
+// Code from: https://github.com/oddbird/true/issues/92
+@function _error($message, $capture: $_test-environment) {
+	@if $capture {
+		@return 'ERROR: #{$message}';
+	}
+
+	@error('#{$message}');
+};

test/scss/_functions.test.scss

@@ -0,0 +1,107 @@
+@include describe('oColors functions') {
+	@include describe('oColorsGetPaletteColor') {
+		@include it('returns CSS color for palette color name') {
+			@include assert-equal(oColorsGetPaletteColor('transparent'), (transparent));
+			@include assert-equal(oColorsGetPaletteColor('inherit'), (inherit));
+			@include assert-equal(oColorsGetPaletteColor('paper'), (#fff1e5));
+			@include assert-equal(oColorsGetPaletteColor('black'), (#000000));
+			@include assert-equal(oColorsGetPaletteColor('white'), (#ffffff));
+			@include assert-equal(oColorsGetPaletteColor('claret'), (#990f3d));
+			@include assert-equal(oColorsGetPaletteColor('oxford'), (#0f5499));
+			@include assert-equal(oColorsGetPaletteColor('teal'), (#0d7680));
+			@include assert-equal(oColorsGetPaletteColor('wheat'), (#f2dfce));
+			@include assert-equal(oColorsGetPaletteColor('sky'), (#cce6ff));
+			@include assert-equal(oColorsGetPaletteColor('velvet'), (#593380));
+			@include assert-equal(oColorsGetPaletteColor('mandarin'), (#ff8833));
+			@include assert-equal(oColorsGetPaletteColor('lemon'), (#ffec1a));
+			@include assert-equal(oColorsGetPaletteColor('candy'), (#ff7faa));
+			@include assert-equal(oColorsGetPaletteColor('wasabi'), (#96cc28));
+			@include assert-equal(oColorsGetPaletteColor('jade'), (#00b359));
+			@include assert-equal(oColorsGetPaletteColor('crimson'), (#cc0000));
+			@include assert-equal(oColorsGetPaletteColor('org-b2c'), (#4e96eb));
+			@include assert-equal(oColorsGetPaletteColor('org-b2c-dark'), (#3a70af));
+			@include assert-equal(oColorsGetPaletteColor('org-b2c-light'), (#99c6fb));
+		};
+	};
+
+	@include describe('oColorsMix') {
+		@include it('returns a color based on background and base color') {
+			@include assert-equal(oColorsMix(), (#33302e));
+			@include assert-equal(oColorsMix($color: 'candy'), (#ff96b6));
+			@include assert-equal(oColorsMix('candy'), (#ff96b6));
+			@include assert-equal(oColorsMix($background: 'lemon'), (#332f05));
+			@include assert-equal(oColorsMix($percentage: 20), (#ccc1b7));
+			@include assert-equal(oColorsMix($color: 'claret', $background: 'wheat', $percentage: 50), (#c67786));
+			@include assert-equal(oColorsMix('claret', 'wheat', 50), (#c67786));
+		};
+	};
+
+	@include describe('oColorsGetUseCase') {
+		@include it('returns the palette color name for a use case') {
+			@include assert-equal(oColorsGetUseCase(page, background), ('paper'));
+			@include assert-equal(oColorsGetUseCase(box, background), ('wheat'));
+			@include assert-equal(oColorsGetUseCase(link, text), ('teal'));
+			@include assert-equal(oColorsGetUseCase(link-hover, text), ('black-70'));
+			@include assert-equal(oColorsGetUseCase(link-title, text), ('black-80'));
+			@include assert-equal(oColorsGetUseCase(link-title-hover, text), ('black-70'));
+			@include assert-equal(oColorsGetUseCase(tag-link, text), ('claret'));
+			@include assert-equal(oColorsGetUseCase(tag-link-hover, text), ('claret-30'));
+			@include assert-equal(oColorsGetUseCase(opinion-tag-link, text), ('oxford'));
+			@include assert-equal(oColorsGetUseCase(opinion-tag-link-hover, text), ('oxford-30'));
+			@include assert-equal(oColorsGetUseCase(title, text), ('black'));
+			@include assert-equal(oColorsGetUseCase(body, text), ('black-80'));
+			@include assert-equal(oColorsGetUseCase(muted, text), ('black-20'));
+			@include assert-equal(oColorsGetUseCase(opinion, background), ('sky'));
+			@include assert-equal(oColorsGetUseCase(hero, background), ('wheat'));
+			@include assert-equal(oColorsGetUseCase(hero-opinion, background), ('oxford'));
+			@include assert-equal(oColorsGetUseCase(hero-highlight, background), ('claret'));
+			@include assert-equal(oColorsGetUseCase(section-life-arts, all), ('velvet'));
+			@include assert-equal(oColorsGetUseCase(section-life-arts-alt, all), ('candy'));
+			@include assert-equal(oColorsGetUseCase(section-magazine, all), ('oxford'));
+			@include assert-equal(oColorsGetUseCase(section-magazine-alt, all), ('sky'));
+			@include assert-equal(oColorsGetUseCase(section-house-home, all), ('jade'));
+			@include assert-equal(oColorsGetUseCase(section-house-home-alt, all), ('wasabi'));
+			@include assert-equal(oColorsGetUseCase(section-money, all), ('crimson'));
+			@include assert-equal(oColorsGetUseCase(section-money-alt, all), ('white'));
+		};
+	};
+
+	@include describe('oColorsGetColorFor') {
+		@include describe('returns the CSS color for the first defined use case in a prioritised list') {
+			@include it('for a single use case') {
+				@include assert-equal(oColorsGetColorFor(page, background), (#fff1e5));
+			};
+
+			@include it('for a use case with one or multiple fallbacks') {
+				@include assert-equal(oColorsGetColorFor(test-page page, background), (#fff1e5));
+			};
+
+			@include it('for a use case with no specific property (e.g. all)') {
+				@include assert-equal(oColorsGetColorFor(section-life-arts), (#593380));
+			};
+
+			@include it('and assigns a fallback in case of non existent use case') {
+				@include assert-equal(
+				oColorsGetColorFor(test-link, text, $options: ('default': 'teal-20')),
+				(oColorsGetPaletteColor('teal-20')));
+			};
+		};
+	};
+
+	@include describe('oColorsGetTint') {
+		@include it('returns a customised version of palette colors that accept shading') {
+			@include assert-equal(oColorsGetTint('black', 10), (#e6d9ce));
+		};
+
+		@include it('returns an error if palette color doesn\'t accept shading') {
+			@include assert-equal(oColorsGetTint('paper', 10),
+			('ERROR: It is not possible to use a tint of: paper, please use one of: black, white, claret, oxford, teal, wheat, sky, slate, velvet, mandarin, lemon, candy, wasabi, jade, crimson instead.'));
+		};
+	};
+
+	@include describe('oColorsGetTextColor') {
+		@include it('returns a text color based on background and opacity percentage') {
+			@include assert-equal(oColorsGetTextColor(oColorsGetPaletteColor('paper')), (#1a1817));
+		};
+	};
+};

test/scss/_mixins.test.scss

@@ -0,0 +1,36 @@
+@include describe('oColors mixins') {
+	@include describe('oColorsSetColor') {
+		@include it('adds a custom palette color') {
+			@include oColorsSetColor('olive', #808000);
+			@include assert-equal(oColorsGetPaletteColor('olive'), (#808000))
+		};
+	};
+
+	@include describe('oColorSetUseCase') {
+		@include it('add a custom use case property') {
+			@include oColorsSetUseCase(test-case, text, 'candy');
+			@include assert-equal(oColorsGetUseCase(test-case, text), ('candy'));
+		};
+	};
+
+	@include describe('oColorsFor') {
+		@include test('outputs property declarations for all defined properties for a use case') {
+			@include oColorsSetUseCase(test-color, text, 'jade');
+			@include oColorsSetUseCase(test-color, background, 'wheat');
+			@include assert() {
+				@include output($selector: false) {
+					.test-colors {
+						@include oColorsFor(test-color);
+					}
+				};
+
+				@include expect($selector: false) {
+					.test-colors {
+						background-color: #f2dfce;
+						color: #00b359;
+					}
+				};
+			};
+		};
+	};
+};

test/scss/index.test.scss

@@ -0,0 +1,12 @@
+@import 'true';
+
+
+@import '../../main';
+$_test-environment: true;
+
+@import 'tools/a11y.test';
+@import 'tools/color.test';
+@import 'tools/maths.test';
+
+@import 'functions.test';
+@import 'mixins.test';

test/scss/tools/_a11y.test.scss

@@ -0,0 +1,20 @@
+@include describe('a11y functions') {
+	@include describe('oColorsGetWCAGRating') {
+		@include test('checks contrast ratio and returns rating') {
+			@include assert-equal(oColorsGetWCAGRating(#000000, #ffffff), ('AAA')); // black, white
+			@include assert-equal(oColorsGetWCAGRating(#f2dfce, #cc0000), ('AA')); // wheat, crimson
+			@include assert-equal(oColorsGetWCAGRating(#ff7faa, #990f3d), ('AA18')); // candy, claret
+			@include assert-equal(oColorsGetWCAGRating(#fff1e5, #ffffff), ('fail')); //paper, white
+		};
+	};
+
+	@include describe('oColorsCheckContrast') {
+		@include test('checks contrast of two colors and reports') {
+			@include assert-equal(oColorsCheckContrast(#000000, #ffffff), ('pass'));
+			@include assert-equal(oColorsCheckContrast(#f2dfce, #cc0000), ('pass')); // wheat, crimson
+			@include assert-equal(oColorsCheckContrast(#ff7faa, #990f3d), ('large')); // candy, claret
+			@include assert-equal(oColorsCheckContrast(#fff1e5, #ffffff),  // candy, claret
+			('ERROR: This combination of #fff1e5 with #ffffff does not pass WCAG color contrast guidelines.'));
+		};
+	};
+};

test/scss/tools/_color.test.scss

@@ -0,0 +1,30 @@
+@include describe('color functions') {
+	@include describe('oColorsColorBrightness') {
+		@include test('returns the % of brightness in a color') {
+			@include assert-equal(round(oColorsColorBrightness(#ffffff)), (100%));
+			@include assert-equal(round(oColorsColorBrightness(#000000)), (0%));
+			@include assert-equal(round(oColorsColorBrightness(#fff1e5)), (96%));
+		};
+	};
+
+	@include describe('oColorsColorLuminance')  {
+		@include test('returns luminance of a color as float') {
+			@include assert-equal(oColorsColorLuminance(#ffffff), (1));
+			@include assert-equal(oColorsColorLuminance(#000000), (0));
+		};
+	};
+
+	@include describe('oColorsGetContrastRatio') {
+		@include test('calculate the contrast ratio between two colors') {
+			@include assert-equal(oColorsGetContrastRatio(#ffffff, #fff1e5), (1.1));
+			@include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), (18.5));
+		};
+	};
+
+	@include describe('oColorsGetContrastRatio') {
+		@include test('calculate the contrast ratio between two colors') {
+			@include assert-equal(oColorsGetContrastRatio(#ffffff, #fff1e5), (1.1));
+			@include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), (18.5));
+		};
+	};
+};

test/scss/tools/_maths.test.scss

@@ -0,0 +1,15 @@
+@include describe('Math functions') {
+	@include describe('sqrt') {
+		@include it('finds the square root of a number') {
+			@include assert-equal(sqrt(4), (2));
+			@include assert-equal(sqrt(121), (11));
+		};
+	};
+
+	@include describe('pow') {
+		@include it('finds the power of an exponent for a number') {
+			@include assert-equal(pow(1, 9), (1));
+			@include assert-equal(pow(3, 3), (27));
+		};
+	};
+};