cirrus-ui
Version:
A lightweight UI framework written in SCSS
870 lines (846 loc) • 30.2 kB
Plain Text
// _mixins.scss unit tests
@use '../test_base' as *;
@use '../../src/internal/size';
// TODO: Move some tests to _exported.spec.scss
/******************
* screen-above() *
******************/
@include describe('screen-above()') {
@include it('should return screen-above 640px given $xs') {
@include assert {
@include output {
.test {
@include size.screen-above($xs) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 640px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-above 768px given $sm') {
@include assert {
@include output {
.test {
@include size.screen-above($sm) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 768px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-above 1024px given $md') {
@include assert {
@include output {
.test {
@include size.screen-above($md) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 1024px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-above 1280px given $lg') {
@include assert {
@include output {
.test {
@include size.screen-above($lg) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 1280px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-above 1536px given $xl') {
@include assert {
@include output {
.test {
@include size.screen-above($xl) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 1536px) {
.test {
color: #fff;
}
}
}
}
}
}
/********************
* screen-between() *
********************/
@include describe('screen-between()') {
@include it('should return screen-above 768px and screen-below 1279px given $sm and $lg') {
@include assert {
@include output {
.test {
@include size.screen-between($sm, $lg) {
color: #fff;
}
}
}
@include expect {
@media screen and (min-width: 768px) and (max-width: 1279px) {
.test {
color: #fff;
}
}
}
}
}
}
/******************
* screen-below() *
******************/
@include describe('screen-below()') {
@include it('should return screen-below 639px given $xs') {
@include assert {
@include output {
.test {
@include size.screen-below($xs) {
color: #fff;
}
}
}
@include expect {
@media screen and (max-width: 639px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-below 767px given $sm') {
@include assert {
@include output {
.test {
@include size.screen-below($sm) {
color: #fff;
}
}
}
@include expect {
@media screen and (max-width: 767px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-below 1023px given $md') {
@include assert {
@include output {
.test {
@include size.screen-below($md) {
color: #fff;
}
}
}
@include expect {
@media screen and (max-width: 1023px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-below 1279px given $lg') {
@include assert {
@include output {
.test {
@include size.screen-below($lg) {
color: #fff;
}
}
}
@include expect {
@media screen and (max-width: 1279px) {
.test {
color: #fff;
}
}
}
}
}
@include it('should return screen-below 1535px given $xl') {
@include assert {
@include output {
.test {
@include size.screen-below($xl) {
color: #fff;
}
}
}
@include expect {
@media screen and (max-width: 1535px) {
.test {
color: #fff;
}
}
}
}
}
}
/***********************************
* generate-classes-for-viewport() *
***********************************/
$generate-classes-for-viewport-classes: row, row-reverse, column, column-reverse;
$generate-classes-for-viewport-property: 'flex-direction';
$generate-classes-for-viewport-prefix: 'u#{delimitize('flex')}';
@include describe('generate-classes-for-viewport()') {
@include it('should return classes without viewport variants') {
@include assert {
@include output {
@include size.generate-classes-for-viewport(
$generate-classes-for-viewport-classes,
$generate-classes-for-viewport-property,
$generate-classes-for-viewport-prefix,
false
);
}
@include expect {
.u-flex-row {
flex-direction: row ;
}
.u-flex-row-reverse {
flex-direction: row-reverse ;
}
.u-flex-column {
flex-direction: column ;
}
.u-flex-column-reverse {
flex-direction: column-reverse ;
}
}
}
}
@include it('should return classes with viewport variants') {
@include assert {
@include output {
@include size.generate-classes-for-viewport(
$generate-classes-for-viewport-classes,
$generate-classes-for-viewport-property,
$generate-classes-for-viewport-prefix,
$generate-viewports: 'true'
);
}
@include expect {
.u-flex-row {
flex-direction: row ;
}
.u-flex-row-reverse {
flex-direction: row-reverse ;
}
.u-flex-column {
flex-direction: column ;
}
.u-flex-column-reverse {
flex-direction: column-reverse ;
}
@media screen and (min-width: 640px) {
.u-flex-row-sm {
flex-direction: row ;
}
}
@media screen and (min-width: 640px) {
.u-flex-row-reverse-sm {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 640px) {
.u-flex-column-sm {
flex-direction: column ;
}
}
@media screen and (min-width: 640px) {
.u-flex-column-reverse-sm {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 768px) {
.u-flex-row-md {
flex-direction: row ;
}
}
@media screen and (min-width: 768px) {
.u-flex-row-reverse-md {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 768px) {
.u-flex-column-md {
flex-direction: column ;
}
}
@media screen and (min-width: 768px) {
.u-flex-column-reverse-md {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 1024px) {
.u-flex-row-lg {
flex-direction: row ;
}
}
@media screen and (min-width: 1024px) {
.u-flex-row-reverse-lg {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 1024px) {
.u-flex-column-lg {
flex-direction: column ;
}
}
@media screen and (min-width: 1024px) {
.u-flex-column-reverse-lg {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 1280px) {
.u-flex-row-xl {
flex-direction: row ;
}
}
@media screen and (min-width: 1280px) {
.u-flex-row-reverse-xl {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 1280px) {
.u-flex-column-xl {
flex-direction: column ;
}
}
@media screen and (min-width: 1280px) {
.u-flex-column-reverse-xl {
flex-direction: column-reverse ;
}
}
}
}
}
@include it('should return classes with viewport variants with a custom prefix') {
@include assert {
@include output {
@include size.generate-classes-for-viewport(
$generate-classes-for-viewport-classes,
$generate-classes-for-viewport-property,
'flex-',
$generate-viewports: 'true'
);
}
@include expect {
.flex-row {
flex-direction: row ;
}
.flex-row-reverse {
flex-direction: row-reverse ;
}
.flex-column {
flex-direction: column ;
}
.flex-column-reverse {
flex-direction: column-reverse ;
}
@media screen and (min-width: 640px) {
.flex-row-sm {
flex-direction: row ;
}
}
@media screen and (min-width: 640px) {
.flex-row-reverse-sm {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 640px) {
.flex-column-sm {
flex-direction: column ;
}
}
@media screen and (min-width: 640px) {
.flex-column-reverse-sm {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 768px) {
.flex-row-md {
flex-direction: row ;
}
}
@media screen and (min-width: 768px) {
.flex-row-reverse-md {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 768px) {
.flex-column-md {
flex-direction: column ;
}
}
@media screen and (min-width: 768px) {
.flex-column-reverse-md {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 1024px) {
.flex-row-lg {
flex-direction: row ;
}
}
@media screen and (min-width: 1024px) {
.flex-row-reverse-lg {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 1024px) {
.flex-column-lg {
flex-direction: column ;
}
}
@media screen and (min-width: 1024px) {
.flex-column-reverse-lg {
flex-direction: column-reverse ;
}
}
@media screen and (min-width: 1280px) {
.flex-row-xl {
flex-direction: row ;
}
}
@media screen and (min-width: 1280px) {
.flex-row-reverse-xl {
flex-direction: row-reverse ;
}
}
@media screen and (min-width: 1280px) {
.flex-column-xl {
flex-direction: column ;
}
}
@media screen and (min-width: 1280px) {
.flex-column-reverse-xl {
flex-direction: column-reverse ;
}
}
}
}
}
@include it(
'should return classes with viewport variants without important! if $include-important is set to false'
) {
@include assert {
@include output {
@include size.generate-classes-for-viewport(
$generate-classes-for-viewport-classes,
$generate-classes-for-viewport-property,
$generate-classes-for-viewport-prefix,
$generate-viewports: 'true',
$include-important: 'false'
);
}
@include expect {
.u-flex-row {
flex-direction: row;
}
.u-flex-row-reverse {
flex-direction: row-reverse;
}
.u-flex-column {
flex-direction: column;
}
.u-flex-column-reverse {
flex-direction: column-reverse;
}
@media screen and (min-width: 640px) {
.u-flex-row-sm {
flex-direction: row;
}
}
@media screen and (min-width: 640px) {
.u-flex-row-reverse-sm {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 640px) {
.u-flex-column-sm {
flex-direction: column;
}
}
@media screen and (min-width: 640px) {
.u-flex-column-reverse-sm {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 768px) {
.u-flex-row-md {
flex-direction: row;
}
}
@media screen and (min-width: 768px) {
.u-flex-row-reverse-md {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 768px) {
.u-flex-column-md {
flex-direction: column;
}
}
@media screen and (min-width: 768px) {
.u-flex-column-reverse-md {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 1024px) {
.u-flex-row-lg {
flex-direction: row;
}
}
@media screen and (min-width: 1024px) {
.u-flex-row-reverse-lg {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 1024px) {
.u-flex-column-lg {
flex-direction: column;
}
}
@media screen and (min-width: 1024px) {
.u-flex-column-reverse-lg {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 1280px) {
.u-flex-row-xl {
flex-direction: row;
}
}
@media screen and (min-width: 1280px) {
.u-flex-row-reverse-xl {
flex-direction: row-reverse;
}
}
@media screen and (min-width: 1280px) {
.u-flex-column-xl {
flex-direction: column;
}
}
@media screen and (min-width: 1280px) {
.u-flex-column-reverse-xl {
flex-direction: column-reverse;
}
}
}
}
}
}
/********************************************
* generate-classes-for-viewport-with-map() *
********************************************/
$generate-classes-for-viewport-with-map-classes: (
'0': 0,
'10': 0.1,
);
$generate-classes-for-viewport-with-map-property: 'opacity';
$generate-classes-for-viewport-with-map-prefix: 'u#{delimitize('opacity')}';
@include describe('generate-classes-for-viewport-with-map()') {
@include it('should return classes without viewport variants') {
@include assert {
@include output {
@include size.generate-classes-for-viewport-with-map(
$generate-classes-for-viewport-with-map-classes,
$generate-classes-for-viewport-with-map-property,
$generate-classes-for-viewport-with-map-prefix,
'false'
);
}
@include expect {
.u-opacity-0 {
opacity: 0 ;
}
.u-opacity-10 {
opacity: 0.1 ;
}
}
}
}
@include it('should return classes with viewport variants') {
@include assert {
@include output {
@include size.generate-classes-for-viewport-with-map(
$generate-classes-for-viewport-with-map-classes,
$generate-classes-for-viewport-with-map-property,
$generate-classes-for-viewport-with-map-prefix,
'true'
);
}
@include expect {
.u-opacity-0 {
opacity: 0 ;
}
.u-opacity-10 {
opacity: 0.1 ;
}
@media screen and (min-width: 640px) {
.u-opacity-0-sm {
opacity: 0 ;
}
}
@media screen and (min-width: 640px) {
.u-opacity-10-sm {
opacity: 0.1 ;
}
}
@media screen and (min-width: 768px) {
.u-opacity-0-md {
opacity: 0 ;
}
}
@media screen and (min-width: 768px) {
.u-opacity-10-md {
opacity: 0.1 ;
}
}
@media screen and (min-width: 1024px) {
.u-opacity-0-lg {
opacity: 0 ;
}
}
@media screen and (min-width: 1024px) {
.u-opacity-10-lg {
opacity: 0.1 ;
}
}
@media screen and (min-width: 1280px) {
.u-opacity-0-xl {
opacity: 0 ;
}
}
@media screen and (min-width: 1280px) {
.u-opacity-10-xl {
opacity: 0.1 ;
}
}
}
}
}
@include it('should return classes with viewport variants with a custom prefix') {
@include assert {
@include output {
@include size.generate-classes-for-viewport-with-map(
$generate-classes-for-viewport-with-map-classes,
$generate-classes-for-viewport-with-map-property,
'opacity-',
'true'
);
}
@include expect {
.opacity-0 {
opacity: 0 ;
}
.opacity-10 {
opacity: 0.1 ;
}
@media screen and (min-width: 640px) {
.opacity-0-sm {
opacity: 0 ;
}
}
@media screen and (min-width: 640px) {
.opacity-10-sm {
opacity: 0.1 ;
}
}
@media screen and (min-width: 768px) {
.opacity-0-md {
opacity: 0 ;
}
}
@media screen and (min-width: 768px) {
.opacity-10-md {
opacity: 0.1 ;
}
}
@media screen and (min-width: 1024px) {
.opacity-0-lg {
opacity: 0 ;
}
}
@media screen and (min-width: 1024px) {
.opacity-10-lg {
opacity: 0.1 ;
}
}
@media screen and (min-width: 1280px) {
.opacity-0-xl {
opacity: 0 ;
}
}
@media screen and (min-width: 1280px) {
.opacity-10-xl {
opacity: 0.1 ;
}
}
}
}
}
@include it(
'should return classes with viewport variants without important! if $include-important is set to false'
) {
@include assert {
@include output {
@include size.generate-classes-for-viewport-with-map(
$generate-classes-for-viewport-with-map-classes,
$generate-classes-for-viewport-with-map-property,
$generate-classes-for-viewport-with-map-prefix,
'true',
'false'
);
}
@include expect {
.u-opacity-0 {
opacity: 0;
}
.u-opacity-10 {
opacity: 0.1;
}
@media screen and (min-width: 640px) {
.u-opacity-0-sm {
opacity: 0;
}
}
@media screen and (min-width: 640px) {
.u-opacity-10-sm {
opacity: 0.1;
}
}
@media screen and (min-width: 768px) {
.u-opacity-0-md {
opacity: 0;
}
}
@media screen and (min-width: 768px) {
.u-opacity-10-md {
opacity: 0.1;
}
}
@media screen and (min-width: 1024px) {
.u-opacity-0-lg {
opacity: 0;
}
}
@media screen and (min-width: 1024px) {
.u-opacity-10-lg {
opacity: 0.1;
}
}
@media screen and (min-width: 1280px) {
.u-opacity-0-xl {
opacity: 0;
}
}
@media screen and (min-width: 1280px) {
.u-opacity-10-xl {
opacity: 0.1;
}
}
}
}
}
}
/**********************************
* generate-styles-with-viewports() *
**********************************/
@include describe('generate-styles-with-viewports()') {
@include it('should return CSS suffixed with viewports given a valid CSS block') {
@include assert {
@include output {
@include size.generate-styles-with-viewports('true') using ($viewport) {
$suffix: if($viewport != '', '-#{$viewport}', '');
.outer#{$suffix} {
background: #222;
.inner#{$suffix} {
color: #fff;
}
}
}
}
@include expect {
.outer {
background: #222;
}
.outer .inner {
color: #fff;
}
@media screen and (min-width: 640px) {
.outer-sm {
background: #222;
}
.outer-sm .inner-sm {
color: #fff;
}
}
@media screen and (min-width: 768px) {
.outer-md {
background: #222;
}
.outer-md .inner-md {
color: #fff;
}
}
@media screen and (min-width: 1024px) {
.outer-lg {
background: #222;
}
.outer-lg .inner-lg {
color: #fff;
}
}
@media screen and (min-width: 1280px) {
.outer-xl {
background: #222;
}
.outer-xl .inner-xl {
color: #fff;
}
}
}
}
}
}