Merge pull request #49 from felix-berlin/unit-tests

Unit tests

.github/workflows/release.yml

@@ -1,8 +1,11 @@
 name: Release
 on:
-  push:
+  workflow_run:
+    workflows: [Unit tests]
+    types: [completed]
     branches:
       - master
+
 jobs:
   release:
     name: Release

.stylelintignore

@@ -0,0 +1 @@
+tests/**/*.css

mixins/_basic.scss

@@ -2,13 +2,13 @@
 @use '../functions/numbers' as numb;
 
 /// Styles for selected elements
-/// @param {Color} $bg-color [$black] Background-color
-/// @param {Color} $color [$white] Text-color
+/// @param {Color} $bg-color Background-color
+/// @param {Color} $color Text-color
 /// @param {String} $selector [*] Selector
 /// @group Basic
 /// @author Felix Scholze
 /// @since v1.0.0
-@mixin select-style($bg-color: #000, $color: #fff, $selector: '*') {
+@mixin select-style($bg-color, $color, $selector: '*') {
 	@if meta.type-of($bg-color) != color {
 		@error '❌  ===> #{$bg-color} is not a color';
 	}
@@ -19,6 +19,7 @@
 		&::selection {
 			background: $bg-color;
 			color: $color;
+			@content;
 		}
 	}
 }
@@ -34,7 +35,8 @@
 			content: '';
 			display: block;
 			height: $offset;
-			margin-top: number-invert($offset);
+			margin-top: numb.number-invert($offset);
+			@content;
 		}
 	}
 }

tests/breakpoint.spec.scss

@@ -1,6 +1,18 @@
 @use 'true';
 @use '../mixins' as mx;
 
+// Breakpoint Map
+$breakpoints-px: (
+	'xxs': 375px,
+	'xs': 568px,
+	'sm': 768px,
+	'md': 1024px,
+	'lg': 1260px,
+	'xlg': 1440px,
+	'fhd': 1920px,
+	'uhd': 2560px,
+) !default;
+
 @include true.describe('breakpoint()') {
 	@include true.it('should return a css media query in min-width') {
 		@include true.assert {
@@ -20,6 +32,7 @@
 			}
 		}
 	}
+
 	@include true.it('should return a css media query in max-width') {
 		@include true.assert {
 			@include true.output {
@@ -38,4 +51,23 @@
 			}
 		}
 	}
+
+	@include true.it('should return a css media query in max-width using own breakpoint map in px') {
+		@include true.assert {
+			@include true.output {
+				@include mx.breakpoint('md', 'max', $breakpoints-px) {
+					.test {
+						padding: 12px;
+					}
+				}
+			}
+			@include true.expect {
+				@media (max-width: 1023px) {
+					.test {
+						padding: 12px;
+					}
+				}
+			}
+		}
+	}
 }

tests/px-to-rem.spec.scss

@@ -1,7 +1,7 @@
 @use 'true';
 @use '../functions' as fn;
 
-@include true.describe('px-to-ren()') {
+@include true.describe('px-to-rem()') {
 	@include true.it('should return the value in rem') {
 		@include true.assert-equal(
 			fn.px-to-rem(16), 1rem

tests/select-style.spec.scss

@@ -0,0 +1,18 @@
+@use 'true';
+@use '../mixins' as mx;
+
+@include true.describe('select-style()') {
+	@include true.it('should return a select style for specified selector') {
+		@include true.assert {
+			@include true.output {
+				@include mx.select-style(red, blue);
+			}
+			@include true.expect {
+				*::selection {
+					background: red;
+					color: blue;
+				}
+			}
+		}
+	}
+}

tests/strip-unit.spec.scss

@@ -0,0 +1,10 @@
+@use 'true';
+@use '../functions' as fn;
+
+@include true.describe('strip-unit()') {
+	@include true.it('should return the value without unit') {
+		@include true.assert-equal(
+			fn.strip-unit(33rem), 33,
+		);
+	}
+}

tests/target-anchor-offset.spec.scss

@@ -0,0 +1,22 @@
+@use 'true';
+@use '../mixins' as mx;
+
+@include true.describe('target-anchor-offset()') {
+	@include true.it('should return a offset for target anchor') {
+		@include true.assert {
+			@include true.output {
+				@include mx.target-anchor-offset(150px);
+			}
+			@include true.expect {
+				:target {
+					&::before {
+						content: '';
+						display: block;
+						height: 150px;
+						margin-top: -150px;
+					}
+				}
+			}
+		}
+	}
+}