-@import 'util/unit';
-@import 'util/breakpoint';
+@import "true";
-@include describe('Breakpoint') {
- @include it('converts a named breakpoint to an em value') {
- $actual: breakpoint(medium);
- $expected: '(min-width: 40em)';
+@import '../../scss/util/unit';
+@import '../../scss/util/breakpoint';
- @include should(expect($actual), to(be($expected)));
+@include test-module('Breakpoint') {
+
+ @include test('Breakpoint (Named to Em) [function]') {
+ $test: breakpoint(medium);
+ $expect: '(min-width: 40em)';
+
+ @include assert-equal($test, $expect,
+ 'Converts a named breakpoint to an em value');
}
- @include it('converts a pixel or rem breakpoint to em') {
- $expected: '(min-width: 1em)';
+ @include test('Breakpoint (Rem/Px to Em) [function]') {
+ $expect: '(min-width: 1em)';
- @include should(expect(breakpoint(16px)), to(be($expected)));
- @include should(expect(breakpoint(1rem)), to(be($expected)));
+ @include assert-equal(breakpoint(16px), $expect,
+ 'Converts a pixel breakpoint to em');
+ @include assert-equal(breakpoint(1rem), $expect,
+ 'Converts a rem breakpoint to em');
}
- @include it('creates an only range out of a named breakpoint') {
- $actual: breakpoint(medium only);
- $expected: '(min-width: 40em) and (max-width: 63.9375em)';
+ @include test('Breakpoint (Only Range) [function]') {
+ $test: breakpoint(medium only);
+ $expect: '(min-width: 40em) and (max-width: 63.9375em)';
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($test, $expect,
+ 'Creates an only range out of a named breakpoint');
}
- @include it('creates a down range out of a named breakpoint') {
- $actual_medium: breakpoint(medium down);
- $expected_medium: '(max-width: 63.9375em)';
-
- @include should(expect($actual_medium), to(be($expected_medium)));
+ @include test('Breakpoint (Named Down Range) [function]') {
+ $test_medium: breakpoint(medium down);
+ $expect_medium: '(max-width: 63.9375em)';
- $actual_small: breakpoint(small down);
- $expected_small: '(max-width: 39.9375em)';
+ @include assert-equal($test_medium, $expect_medium,
+ 'Creates a down range out of a medium breakpoint');
+
+ $test_small: breakpoint(small down);
+ $expect_small: '(max-width: 39.9375em)';
- @include should(expect($actual_small), to(be($expected_small)));
+ @include assert-equal($test_small, $expect_small,
+ 'Creates a down range out of a small breakpoint');
}
- @include it('creates a down range out of a pixel, rem or em value') {
- $expected: '(max-width: 1em)';
+ @include test('Breakpoint (Value Down Range) [function]') {
+ $expect: '(max-width: 1em)';
- @include should(expect(breakpoint(16px down)), to(be($expected)));
- @include should(expect(breakpoint(1rem down)), to(be($expected)));
- @include should(expect(breakpoint(1em down)), to(be($expected)));
+ @include assert-equal(breakpoint(16px down), $expect,
+ 'Creates a down range out of a pixel value');
+ @include assert-equal(breakpoint(1rem down), $expect,
+ 'Creates a down range out of a rem value');
+ @include assert-equal(breakpoint(1em down), $expect,
+ 'Creates a down range out of an em value');
}
- @include it('returns an empty string for the values zero down or zero up') {
- $expected: '';
+ @include test('Breakpoint (Empty String) [function]') {
+ $expect: '';
- @include should(expect(breakpoint(small up)), to(be($expected)));
- @include should(expect(breakpoint(0 down)), to(be($expected)));
- @include should(expect(breakpoint(0 up)), to(be($expected)));
+ @include assert-equal(breakpoint(small up), $expect,
+ 'Returns an empty string for the value small up');
+ @include assert-equal(breakpoint(0 down), $expect,
+ 'Returns an empty string for the value 0 down');
+ @include assert-equal(breakpoint(0 up), $expect,
+ 'Returns an empty string for the value 0 up');
}
- @include it('creates special media queries for landscape, portrait, and retina') {
- @include should(expect(breakpoint(landscape)), to(be('(orientation: landscape)')));
- @include should(expect(breakpoint(portrait)), to(be('(orientation: portrait)')));
- @include should(expect(breakpoint(retina)), to(be('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)')));
+ @include test('Breakpoint (Orientation/Retina) [function]') {
+ @include assert-equal(breakpoint(landscape), '(orientation: landscape)',
+ 'Creates special media query for landscape');
+ @include assert-equal(breakpoint(portrait), '(orientation: portrait)',
+ 'Creates special media query for portrait');
+ @include assert-equal(breakpoint(retina), '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
+ 'Creates special media query for retina');
}
-}
-@include describe('Map Serialize') {
- @include it('converts a Sass map into a string') {
+ @include test('Map Serialize [function]') {
$input: (
small: 1em,
medium: 2em,
large: 3em,
);
- $actual: -zf-bp-serialize($input);
- $expected: 'small=1em&medium=2em&large=3em';
+ $test: -zf-bp-serialize($input);
+ $expect: 'small=1em&medium=2em&large=3em';
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($test, $expect,
+ 'Converts a Sass map into a string');
}
-}
-@include describe('Map Next') {
- @include it('returns the next value in a map') {
+ @include test('Map Next [function]') {
$input: (
one: 'One',
two: 'Two',
three: 'Three',
);
- $actual: -zf-map-next($input, two);
- $expected: map-get($input, three);
-
- @include should(expect($actual), to(be($expected)));
+ $test_next: -zf-map-next($input, two);
+ $expect_next: map-get($input, three);
+
+ @include assert-equal($test_next, $expect_next,
+ 'Returns the next value in a map');
+
+ $test_last: -zf-map-next($input, three);
+ $expect_last: null;
+
+ @include assert-equal($test_last, $expect_last,
+ 'Returns null if the key is last in the map');
+
+ $test_null: -zf-map-next($input, four);
+ $expect_null: null;
+
+ @include assert-equal($test_null, $expect_null,
+ 'Returns null if the key is not in the map');
}
- @include it('returns null if the key is last in the map') {
- $input: (
- one: 'One',
- two: 'Two',
- three: 'Three',
+ @include test('Get Breakpoint Value [function]') {
+ $config: (
+ small: 0,
+ large: 1,
);
- $actual: -zf-map-next($input, three);
- $expected: null;
-
- @include should(expect($actual), to(be($expected)));
+ $test_kittens: -zf-get-bp-val($config, kittens);
+ $expect_kittens: null;
+
+ @include assert-equal($test_kittens, $expect_kittens,
+ 'Given a non-existant breakpoint name, return null');
+
+ $test_match: -zf-get-bp-val($config, large);
+ $expect_match: 1;
+
+ @include assert-equal($test_match, $expect_match,
+ 'Given a matching breakpoint, returns the exact value');
+ @include assert-equal(-zf-get-bp-val($config, medium), 0,
+ 'Given a nearby breakpoint, returns the next lowest value');
+ @include assert-equal(-zf-get-bp-val($config, xlarge), 1,
+ 'Given a nearby breakpoint, returns the next lowest value');
}
- @include it('returns null if the key is not in the map') {
- $input: (
- one: 'One',
- two: 'Two',
- three: 'Three',
- );
- $actual: -zf-map-next($input, four);
- $expected: null;
-
- @include should(expect($actual), to(be($expected)));
- }
}
-@include describe('Get Breakpoint Value') {
- $config: (
- small: 0,
- large: 1,
- );
-
- @include it('given a non-existant breakpoint name, returns null') {
- $actual: -zf-get-bp-val($config, kittens);
- $expected: null;
-
- @include should(expect($actual), to(be($expected)));
- }
-
- @include it('given a matching breakpoint, returns the exact value') {
- $actual: -zf-get-bp-val($config, large);
- $expected: 1;
-
- @include should(expect($actual), to(be($expected)));
- }
-
- @include it('given a nearby breakpoint, returns the next lowest value') {
- @include should(expect(-zf-get-bp-val($config, medium)), to(be(0)));
- @include should(expect(-zf-get-bp-val($config, xlarge)), to(be(1)));
- }
-}
+@include report;
\ No newline at end of file
-@import 'util/color';
+@import "true";
-@include describe('Foreground') {
- @include it('returns black if the input color is light') {
- $actual: foreground($white);
- $expected: $black;
+@import '../../scss/global';
+@import '../../scss/util/color';
- @include should(expect($actual), to(be($expected)));
+@include test-module('Color') {
+
+ @include test('Foreground (Black) [function]') {
+ $test: foreground($white);
+ $expect: $black;
+
+ @include assert-equal($test, $expect,
+ 'Returns black if the input color is light');
}
- @include it('returns white if the input color is dark') {
- $actual: foreground($black);
- $expected: $white;
+ @include test('Foreground (White) [function]') {
+ $test: foreground($black);
+ $expect: $white;
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($test, $expect,
+ 'Returns white if the input color is dark');
}
-}
-@include describe('Smart Scale') {
- @include it('darkens a light color') {
+ @include test('Smart Scale (Darken) [function]') {
$color: $white;
$scale: 5%;
$threshold: 60%;
- $actual: smart-scale($color, $scale, $threshold);
- $expected: scale-color($color, $lightness: -$scale);
+ $test: smart-scale($color, $scale, $threshold);
+ $expect: scale-color($color, $lightness: -$scale);
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($test, $expect,
+ 'Darkens a light color');
}
- @include it('lightens a dark color') {
+
+ @include test('Smart Scale (Lighten) [function]') {
$color: $black;
$scale: 5%;
$threshold: 60%;
- $actual: smart-scale($color, $scale, $threshold);
- $expected: scale-color($color, $lightness: $scale);
+ $test: smart-scale($color, $scale, $threshold);
+ $expect: scale-color($color, $lightness: $scale);
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($test, $expect,
+ 'Lightens a dark color');
}
}
+
+@include report;
\ No newline at end of file
-@import 'components/flex-video';
-@import 'grid/grid';
-
-@include describe('Flex Video') {
- @include it('creates a percentage value from a ratio') {
- $actual: flex-video(3 by 4);
- $expected: 4 / 3 * 100%;
-
- @include should(expect($actual), to(be($expected)));
- }
-}
-
-@include describe('Grid Column') {
- @include it('creates a column width from a column count') {
- @include should(expect(grid-column(6)), to(be(50%)));
+@import "true";
+
+@import '../../scss/global';
+@import '../../scss/components/flex-video';
+@import '../../scss/grid/grid';
+
+@include test-module('Components') {
+
+ @include test('Flex Video [function]') {
+ $test: flex-video(3 by 4);
+ $expect: 4 / 3 * 100%;
+
+ @include assert-equal($test, $expect,
+ 'Creates a percentage value from a ratio');
+ }
+
+ @include test('Grid Column [function]') {
+ @include assert-equal(grid-column(6), 50%,
+ 'Creates a column width from a column count');
+ @include assert-equal(grid-column(0.5), 50%,
+ 'Creates a column width from a decimal value');
+ @include assert-equal(grid-column(50%), 50%,
+ 'Creates a column width from a percentage value');
+ }
+
+ @include test('Flex Grid Column [function]') {
+ @include assert-equal(flex-grid-column(), 1 1 0px,
+ 'Creates an expanding flex property when passed no value');
+ @include assert-equal(flex-grid-column(shrink), 0 0 auto,
+ 'Creates a shrinking flex property when passed shrink');
+ @include assert-equal(flex-grid-column(6), 0 0 50%,
+ 'Creates a fixed flex property from a column count');
+ @include assert-equal(flex-grid-column(0.5), 0 0 50%,
+ 'Creates a fixed flex property from a decimal value');
+ @include assert-equal(flex-grid-column(50%), 0 0 50%,
+ 'Creates a fixed flex property from a percentage value');
+ @include assert-equal(flex-grid-column(1 of 2), 0 0 50%,
+ 'Creates a fixed flex property from an x of y value');
}
- @include it('creates a column width from a percentage or decimal value') {
- @include should(expect(grid-column(0.5)), to(be(50%)));
- @include should(expect(grid-column(50%)), to(be(50%)));
- }
-
- @include it('creates a column width from an x of y value') {
- @include should(expect(grid-column(1 of 2)), to(be(50%)));
- }
}
-@include describe('Flex Grid Column') {
- @include it('creates an expanding flex property when passed no value') {
- @include should(expect(flex-grid-column()), to(be(1 1 0px)));
- }
-
- @include it('creates a shrinking flex property when passed shrink') {
- @include should(expect(flex-grid-column(shrink)), to(be(0 0 auto)));
- }
-
- @include it('creates a fixed flex property from a column count') {
- @include should(expect(flex-grid-column(6)), to(be(0 0 50%)));
- }
-
- @include it('creates a fixed flex property from a percentage or decimal value') {
- @include should(expect(flex-grid-column(0.5)), to(be(0 0 50%)));
- @include should(expect(flex-grid-column(50%)), to(be(0 0 50%)));
- }
-
- @include it('creates a fixed flex property from an x of y value') {
- @include should(expect(flex-grid-column(1 of 2)), to(be(0 0 50%)));
- }
-}
+@include report;
\ No newline at end of file
-@import 'util/selector';
+@import "true";
-@include describe('Text inputs') {
- @include it('creates a selector out of a list of text input types') {
- $actual: #{text-inputs(text password)};
- $expected: "[type='text'], [type='password']";
+@import '../../scss/util/selector';
- @debug $actual;
+@include test-module('Selector') {
+
+ @include test('Selector [function]') {
+ $test: #{text-inputs(text password)};
+ $expect: "[type='text'], [type='password']";
+
+ //@debug $test;
+
+ @include assert-equal($test, $expect,
+ 'Creates a selector out of a list of text input types');
+ }
- @include should(expect($actual), to(be($expected)));
- }
}
+
+@include report;
\ No newline at end of file
@include test-module('Units') {
// Strip Units
- @include test('Strip Units (Unitless) [function]') {
- @include assert-equal(strip-unit(20px), 20,
+ @include test('Strip Units [function]') {
+ $expect: 20;
+
+ @include assert-equal(strip-unit(20px), $expect,
'Strips the unit from a number');
- @include assert-equal(strip-unit(20), 20,
+ @include assert-equal(strip-unit(20), $expect,
'Returns the same number when given a unitless value');
}
// Convert To Rem
@include test('Convert To Rem [function]') {
- @include assert-equal(-zf-to-rem(32, 16), 2rem,
+ $expect: 2rem;
+
+ @include assert-equal(-zf-to-rem(32, 16), $expect,
'Converts a unit to the equivalent in rems');
- @include assert-equal(-zf-to-rem(3rem, 16), 3rem,
+ @include assert-equal(-zf-to-rem(2rem, 16), $expect,
'Keeps rem values the same');
}
@include test('Rem Calculator [function]') {
$test: rem-calc((8 16 32 64), 16);
$expect: 0.5rem 1rem 2rem 4rem;
+
@include assert-equal($test, $expect,
'Converts an arbitrary number of values into rem equivalents');
}
// Breakpoint to Em
@include test('Breakpoint To Em [function]') {
- @include assert-equal(-zf-bp-to-em(16), 1em,
+ $expect: 1em;
+
+ @include assert-equal(-zf-bp-to-em(16), $expect,
'Converts a unitless value to em');
- @include assert-equal(-zf-bp-to-em(16px), 1em,
+ @include assert-equal(-zf-bp-to-em(16px), $expect,
'Converts a pixel value to em');
- @include assert-equal(-zf-bp-to-em(1rem), 1em,
+ @include assert-equal(-zf-bp-to-em(1rem), $expect,
'Converts a rem value to em');
- @include assert-equal(-zf-bp-to-em(1em), 1em,
+ @include assert-equal(-zf-bp-to-em(1em), $expect,
'Converts an em value to em');
}
-@import 'util/value';
+@import "true";
-@include describe('Has Value') {
- @include it('returns false if the value is not falsey') {
+@import '../../scss/util/unit';
+@import '../../scss/util/value';
+
+@include test-module('Value') {
+
+ @include test('Value (Not Falsey) [function]') {
$boolean: has-value(true);
$number: has-value(1px);
$color: has-value(#000);
$list: has-value(1px solid black);
-
- @include should(expect($boolean), to(be(true)));
- @include should(expect($number), to(be(true)));
- @include should(expect($color), to(be(true)));
- @include should(expect($list), to(be(true)));
+ $description: 'Returns true if the value is not falsey';
+
+ @include assert-equal($boolean, true, $description);
+ @include assert-equal($number, true, $description);
+ @include assert-equal($color, true, $description);
+ @include assert-equal($list, true, $description);
}
- @include it('returns false if the value is falsey') {
+
+ @include test('Value (Falsey) [function]') {
$zero: has-value(0px);
$null: has-value(null);
$none: has-value(none);
$empty: has-value(());
+ $description: 'Returns false if the value is falsey';
- @include should(expect($zero), to(be(false)));
- @include should(expect($null), to(be(false)));
- @include should(expect($none), to(be(false)));
- @include should(expect($empty), to(be(false)));
+ @include assert-equal($zero, false, $description);
+ @include assert-equal($null, false, $description);
+ @include assert-equal($none, false, $description);
+ @include assert-equal($empty, false, $description);
}
-}
-@include describe('Get Side') {
- @include it('returns correct sides when given one side value') {
- $value: 1rem;
- $actual: (
- get-side($value, top),
- get-side($value, right),
- get-side($value, bottom),
- get-side($value, left),
+ @include test('Get Side [function]') {
+ $valueOne: 1rem;
+ $testOne: (
+ get-side($valueOne, top),
+ get-side($valueOne, right),
+ get-side($valueOne, bottom),
+ get-side($valueOne, left),
);
- $expected: (1rem, 1rem, 1rem, 1rem,);
+ $expectOne: (1rem, 1rem, 1rem, 1rem,);
- @include should(expect($actual), to(be($expected)));
- }
- @include it('returns correct sides when given two side values') {
- $value: 1rem 2rem;
- $actual: (
- get-side($value, top),
- get-side($value, right),
- get-side($value, bottom),
- get-side($value, left),
+ @include assert-equal($testOne, $expectOne,
+ 'Returns correct sides when given one side value');
+
+ $valueTwo: 1rem 2rem;
+ $testTwo: (
+ get-side($valueTwo, top),
+ get-side($valueTwo, right),
+ get-side($valueTwo, bottom),
+ get-side($valueTwo, left),
);
- $expected: (1rem, 2rem, 1rem, 2rem,);
+ $expectTwo: (1rem, 2rem, 1rem, 2rem,);
- @include should(expect($actual), to(be($expected)));
- }
- @include it('returns correct sides when given three side values') {
- $value: 1rem 2rem 3rem;
- $actual: (
- get-side($value, top),
- get-side($value, right),
- get-side($value, bottom),
- get-side($value, left),
+ @include assert-equal($testTwo, $expectTwo,
+ 'Returns correct sides when given two side values');
+
+ $valueThree: 1rem 2rem 3rem;
+ $testThree: (
+ get-side($valueThree, top),
+ get-side($valueThree, right),
+ get-side($valueThree, bottom),
+ get-side($valueThree, left),
);
- $expected: (1rem, 2rem, 3rem, 2rem,);
+ $expectThree: (1rem, 2rem, 3rem, 2rem,);
- @include should(expect($actual), to(be($expected)));
- }
- @include it('returns correct sides when given four side values') {
- $value: 1rem 2rem 3rem 4rem;
- $actual: (
- get-side($value, top),
- get-side($value, right),
- get-side($value, bottom),
- get-side($value, left),
+ @include assert-equal($testThree, $expectThree,
+ 'Returns correct sides when given three side values');
+
+ $valueFour: 1rem 2rem 3rem 4rem;
+ $testFour: (
+ get-side($valueFour, top),
+ get-side($valueFour, right),
+ get-side($valueFour, bottom),
+ get-side($valueFour, left),
);
- $expected: (1rem, 2rem, 3rem, 4rem,);
+ $expectFour: (1rem, 2rem, 3rem, 4rem,);
- @include should(expect($actual), to(be($expected)));
+ @include assert-equal($testFour, $expectFour,
+ 'Returns correct sides when given four side values');
}
-}
-@include describe('Get Border Value') {
- @include it('returns the right value of a border property') {
+ @include test('Get Border Value [function]') {
$value: 10px dashed green;
$width: get-border-value($value, width);
$style: get-border-value($value, style);
$color: get-border-value($value, color);
+ $description: 'Returns the right value of a border property';
+
+ @include assert-equal($width, 10px, $description);
+ @include assert-equal($style, dashed, $description);
+ @include assert-equal($color, green, $description);
- @include should(expect($width), to(be(10px)));
- @include should(expect($style), to(be(dashed)));
- @include should(expect($color), to(be(green)));
- }
- @include it('returns a default value if a property is missing') {
$defaultWidth: get-border-value(solid black, width);
$defaultStyle: get-border-value(10px black, style);
$defaultColor: get-border-value(10px solid, color);
+ $defaultDescription: 'Returns a default value if a property is missing';
- @include should(expect($defaultWidth), to(be(0)));
- @include should(expect($defaultStyle), to(be(solid)));
- @include should(expect($defaultColor), to(be(black)));
+ @include assert-equal($defaultWidth, 0, $defaultDescription);
+ @include assert-equal($defaultStyle, solid, $defaultDescription);
+ @include assert-equal($defaultColor, black, $defaultDescription);
}
+
+ // TODO: Add spec for pow()
}
-// TODO: Add spec for pow()
+@include report;
\ No newline at end of file
var sassTrue = require('sass-true');
// Test Files
+var breakpointFile = path.join(__dirname, '_breakpoint.scss');
+var colorFile = path.join(__dirname, '_color.scss');
+var selectorFile = path.join(__dirname, '_selector.scss');
var unitFile = path.join(__dirname, '_unit.scss');
+var valueFile = path.join(__dirname, '_value.scss');
+var componentsFile = path.join(__dirname, '_components.scss');
// Run Tests
-sassTrue.runSass({file: unitFile}, describe, it);
\ No newline at end of file
+sassTrue.runSass({file: breakpointFile}, describe, it);
+sassTrue.runSass({file: colorFile}, describe, it);
+sassTrue.runSass({file: selectorFile}, describe, it);
+sassTrue.runSass({file: unitFile}, describe, it);
+sassTrue.runSass({file: valueFile}, describe, it);
+sassTrue.runSass({file: componentsFile}, describe, it);
\ No newline at end of file
+++ /dev/null
-@import 'bootcamp';
-
-@include runner-start;
-
-@import 'global';
-
-@import
- 'breakpoint',
- 'color',
- 'selector',
- 'unit',
- 'value',
- 'components';
-
-@include runner-end;