160 lines
5.1 KiB
SCSS
160 lines
5.1 KiB
SCSS
|
@import "true";
|
||
|
|
||
|
@import '../../scss/util/unit';
|
||
|
@import '../../scss/util/breakpoint';
|
||
|
|
||
|
@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 test('Breakpoint (Rem/Px to Em) [function]') {
|
||
|
$expect: '(min-width: 1em)';
|
||
|
|
||
|
@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 test('Breakpoint (Only Range) [function]') {
|
||
|
$test: breakpoint(medium only);
|
||
|
$expect: '(min-width: 40em) and (max-width: 63.99875em)';
|
||
|
|
||
|
$test-lowest: breakpoint(small only);
|
||
|
$expect-lowest: '(max-width: 39.99875em)';
|
||
|
|
||
|
$test-highest: breakpoint(xxlarge only);
|
||
|
$expect-highest: '(min-width: 90em)';
|
||
|
|
||
|
@include assert-equal($test, $expect,
|
||
|
'Creates a min/max-width range out of a named breakpoint');
|
||
|
|
||
|
@include assert-equal($test-lowest, $expect-lowest,
|
||
|
'Creates a max-width range if the breakpoint is the lowest');
|
||
|
|
||
|
@include assert-equal($test-highest, $expect-highest,
|
||
|
'Creates a min-width range if the breakpoint is the highest');
|
||
|
}
|
||
|
|
||
|
@include test('Breakpoint (Named Down Range) [function]') {
|
||
|
$test: breakpoint(medium down);
|
||
|
$expect: '(max-width: 63.99875em)';
|
||
|
|
||
|
@include assert-equal($test, $expect,
|
||
|
'Creates a down range out of a medium breakpoint');
|
||
|
|
||
|
$test-lowest: breakpoint(small down);
|
||
|
$expect-lowest: '(max-width: 39.99875em)';
|
||
|
|
||
|
@include assert-equal($test-lowest, $expect-lowest,
|
||
|
'Creates a down range out of a small breakpoint');
|
||
|
|
||
|
$test-highest: breakpoint(xxlarge down);
|
||
|
$expect-highest: '';
|
||
|
|
||
|
@include assert-equal($test-highest, $expect-highest,
|
||
|
'Skips media query creation for xxlarge down');
|
||
|
}
|
||
|
|
||
|
@include test('Breakpoint (Value Down Range) [function]') {
|
||
|
$expect: '(max-width: 1em)';
|
||
|
|
||
|
@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 test('Breakpoint (Empty String) [function]') {
|
||
|
$expect: '';
|
||
|
|
||
|
@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 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 test('Breakpoint (Unknown Value) [function]') {
|
||
|
@include assert-equal(breakpoint(xxxxlarge), '', 'Returns an empty string for non-existant media queries');
|
||
|
}
|
||
|
|
||
|
@include test('Map Serialize [function]') {
|
||
|
$input: (
|
||
|
small: 1em,
|
||
|
medium: 2em,
|
||
|
large: 3em,
|
||
|
);
|
||
|
$test: -zf-bp-serialize($input);
|
||
|
$expect: 'small=1em&medium=2em&large=3em';
|
||
|
|
||
|
@include assert-equal($test, $expect,
|
||
|
'Converts a Sass map into a string');
|
||
|
}
|
||
|
|
||
|
@include test('Map Next [function]') {
|
||
|
$input: (
|
||
|
one: 'One',
|
||
|
two: 'Two',
|
||
|
three: 'Three',
|
||
|
);
|
||
|
$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 test('Get Breakpoint Value [function]') {
|
||
|
$config: (
|
||
|
small: 0,
|
||
|
large: 1,
|
||
|
);
|
||
|
$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');
|
||
|
}
|
||
|
}
|