From 462d670c83493c486df6b31e597109d583f514b6 Mon Sep 17 00:00:00 2001 From: colin-marshall Date: Tue, 12 Jan 2016 12:45:41 -0700 Subject: [PATCH] Converted tests for remaining functions --- test/sass/_breakpoint.scss | 193 +++++++++++++++++++------------------ test/sass/_color.scss | 49 ++++++---- test/sass/_components.scss | 84 ++++++++-------- test/sass/_selector.scss | 23 +++-- test/sass/_unit.scss | 25 +++-- test/sass/_value.scss | 139 +++++++++++++------------- test/sass/test_sass.js | 12 ++- test/sass/tests.scss | 15 --- 8 files changed, 281 insertions(+), 259 deletions(-) delete mode 100755 test/sass/tests.scss diff --git a/test/sass/_breakpoint.scss b/test/sass/_breakpoint.scss index f858b4c5d..27a06de56 100755 --- a/test/sass/_breakpoint.scss +++ b/test/sass/_breakpoint.scss @@ -1,137 +1,140 @@ -@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 diff --git a/test/sass/_color.scss b/test/sass/_color.scss index 1b984f8e8..a9143cbcd 100755 --- a/test/sass/_color.scss +++ b/test/sass/_color.scss @@ -1,40 +1,49 @@ -@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 diff --git a/test/sass/_components.scss b/test/sass/_components.scss index 4df9a886e..583bb570f 100644 --- a/test/sass/_components.scss +++ b/test/sass/_components.scss @@ -1,49 +1,43 @@ -@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 diff --git a/test/sass/_selector.scss b/test/sass/_selector.scss index 5bc9bfd6d..2726cac48 100755 --- a/test/sass/_selector.scss +++ b/test/sass/_selector.scss @@ -1,12 +1,19 @@ -@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 diff --git a/test/sass/_unit.scss b/test/sass/_unit.scss index c7205fb30..49713453a 100755 --- a/test/sass/_unit.scss +++ b/test/sass/_unit.scss @@ -5,18 +5,22 @@ @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'); } @@ -24,19 +28,22 @@ @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'); } diff --git a/test/sass/_value.scss b/test/sass/_value.scss index cd69a608e..19fcb2aeb 100755 --- a/test/sass/_value.scss +++ b/test/sass/_value.scss @@ -1,101 +1,108 @@ -@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 diff --git a/test/sass/test_sass.js b/test/sass/test_sass.js index 0d186eadd..38d0e5d9e 100644 --- a/test/sass/test_sass.js +++ b/test/sass/test_sass.js @@ -2,7 +2,17 @@ var path = require('path'); 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 diff --git a/test/sass/tests.scss b/test/sass/tests.scss deleted file mode 100755 index 4c10d8a33..000000000 --- a/test/sass/tests.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import 'bootcamp'; - -@include runner-start; - -@import 'global'; - -@import - 'breakpoint', - 'color', - 'selector', - 'unit', - 'value', - 'components'; - -@include runner-end; -- 2.47.2