Add tests for utilities-map functions and mixins

Split the utilities-map helpers in their own file to make tests a little more isolated

diff --git a/scss/mixins/_utilities-map.scss b/scss/mixins/_utilities-map.scss
new file mode 100644 (file)
index 0000000..74f4d9c
--- /dev/null
+++ b/scss/mixins/_utilities-map.scss
@@ -0,0 +1,122 @@
+//
+// Helper functions and mixins for manipulating the utilities map
+//
+
+// Gets the map of options for a given utility
+@function utilities-get-options($utility-name) {
+  @return map-get($utilities, $utility-name);
+}
+
+// Gets the value of a specific option for a given utility
+@function utilities-get-option($utility-name, $option-name) {
+  $options: utilities-get-options($utility-name);
+
+  @if ($options) {
+    @return map-get(
+      $options,
+      $option-name
+    );
+  }
+
+  @return null;
+}
+
+// Returns a map of the values for the utility
+@function utilities-get-values($utility-name) {
+  $values: utilities-get-option($utility-name, values);
+
+  @if (type-of($values) != map) {
+    @return map-from($values);
+  }
+
+  @return $values;
+}
+
+@function map-from($list-or-string) {
+  $map: ();
+
+  @each $item in $list-or-string {
+    $map: map-merge(
+      $map,
+      ($item: $item)
+    );
+  }
+
+  @return $map;
+}
+
+// Gets a specific value for the given utility
+@function utilities-get-value($utility-name, $value-name) {
+  $values: utilities-get-values($utility-name);
+
+  @return map-get(
+    $values,
+    $value-name
+  );
+}
+
+// Set options for a given utility, merged with the existing ones by default.
+// To completely replace the existing options, set the 3rd `$merge` parameter to false
+@mixin utilities-set-options($utility-name, $options, $merge: true) {
+  @if ($merge) {
+    $existing-options: utilities-get-options($utility-name);
+
+    // Allow the mixin to create a new utility when setting an unknown utility name
+    $options: if(
+      $existing-options,
+      map-merge(
+        utilities-get-options($utility-name),
+        $options
+      ),
+      $options
+    );
+  }
+
+  $utilities: map-merge(
+    $utilities,
+    ($utility-name: $options)
+  ) !global; // !global ensures we modify the global $utilities map
+}
+
+// Set a specific option to a new value for the given utility
+@mixin utilities-set-option($utility-name, $option-name, $value) {
+  @include utilities-set-options($utility-name, ($option-name: $value));
+}
+
+// Add new values to a given utility
+//
+// If you want to completely reconfigure the values use `utilities-set-option` to provide a new map for the `values` option
+@mixin utilities-add-values($utility-name, $values) {
+  $existing-values: utilities-get-values($utility-name);
+
+  @include utilities-set-option(
+    $utility-name,
+    values,
+    map-merge(
+      $existing-values,
+      $values
+    )
+  );
+}
+
+// Remove specific values from a given utility
+@mixin utilities-remove-values($utility-name, $value-names...) {
+  $values: utilities-get-values($utility-name);
+
+  $updated-values: map-remove($values, $value-names...);
+
+  @include utilities-set-option($utility-name, values, $updated-values);
+}
+
+// Add a new utility to the utilities map
+@mixin utilities-add($utility-name, $utility) {
+  $utilities: map-merge(
+    $utilities,
+    ($utility-name: $utility)
+  ) !global;
+}
+
+// Remove a utility from the utilities map
+@mixin utilities-remove($utility-names...) {
+  $utilities: map-remove($utilities, $utility-names...) !global;
+}

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 25d613f24c3ddb93ad85507009fdac2150de05e4..bb43fdd9c26cca44b4ddf0b1ecfcd00d54fb2027 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -96,126 +96,4 @@
   }
 }
 
-
-//
-// Helper functions and mixins for manipulating the utilities map
-//
-
-// Gets the map of options for a given utility
-@function utilities-get-options($utility-name) {
-  @return map-get($utilities, $utility-name);
-}
-
-// Gets the value of a specific option for a given utility
-@function utilities-get-option($utility-name, $option-name) {
-  $options: utilities-get-options($utility-name);
-
-  @if ($options) {
-    @return map-get(
-      $options,
-      $option-name
-    );
-  }
-
-  @return null;
-}
-
-// Returns a map of the values for the utility
-@function utilities-get-values($utility-name) {
-  $values: utilities-get-option($utility-name, values);
-
-  @if (type-of($values) != map) {
-    @return map-from($values);
-  }
-
-  @return $values;
-}
-
-@function map-from($list-or-string) {
-  $map: ();
-
-  @each $item in $list-or-string {
-    $map: map-merge(
-      $map,
-      ($item: $item)
-    );
-  }
-
-  @return $map;
-}
-
-// Gets a specific value for the given utility
-@function utilities-get-value($utility-name, $value-name) {
-  $values: utilities-get-values($utility-name);
-
-  @return map-get(
-    $values,
-    $value-name
-  );
-}
-
-// Set options for a given utility, merged with the existing ones by default.
-// To completely replace the existing options, set the 3rd `$merge` parameter to false
-@mixin utilities-set-options($utility-name, $options, $merge: true) {
-  @if ($merge) {
-    $existing-options: utilities-get-options($utility-name);
-
-    // Allow the mixin to create a new utility when setting an unknown utility name
-    $options: if(
-      $existing-options,
-      map-merge(
-        utilities-get-options($utility-name),
-        $options
-      ),
-      $options
-    );
-  }
-
-  $utilities: map-merge(
-    $utilities,
-    ($utility-name: $options)
-  ) !global; // !global ensures we modify the global $utilities map
-}
-
-// Set a specific option to a new value for the given utility
-@mixin utilities-set-option($utility-name, $option-name, $value) {
-  @include utilities-set-options($utility-name, ($option-name: $value));
-}
-
-// Add new values to a given utility
-//
-// If you want to completely reconfigure the values use `utilities-set-option` to provide a new map for the `values` option
-@mixin utilities-add-values($utility-name, $values) {
-  $existing-values: utilities-get-values($utility-name);
-
-  @include utilities-set-option(
-    $utility-name,
-    values,
-    map-merge(
-      $existing-values,
-      $values
-    )
-  );
-}
-
-// Remove specific values from a given utility
-@mixin utilities-remove-values($utility-name, $value-names...) {
-  $values: utilities-get-values($utility-name);
-
-  $updated-values: map-remove($values, $value-names...);
-
-  @include utilities-set-option($utility-name, values, $updated-values);
-}
-
-// Add a new utility to the utilities map
-@mixin utilities-add($utility-name, $utility) {
-  $utilities: map-merge(
-    $utilities,
-    ($utility-name: $utility)
-  ) !global;
-}
-
-// Remove a utility from the utilities map
-@mixin utilities-remove($utility-names...) {
-  $utilities: map-remove($utilities, $utility-names...) !global;
-}
+@import "./utilities-map";

diff --git a/scss/tests/mixins/_utilities-map.test.scss b/scss/tests/mixins/_utilities-map.test.scss
new file mode 100644 (file)
index 0000000..aa0c3c1
--- /dev/null
+++ b/scss/tests/mixins/_utilities-map.test.scss
@@ -0,0 +1,339 @@
+@mixin before {
+  $utilities: (
+    "flex": (
+      responsive: true,
+      property: flex,
+      values: (fill: 1 1 auto)
+    ),
+    "align": (
+      property: vertical-align,
+      class: align,
+      values:  baseline top
+    ),
+    "margin": (
+      property: margin,
+      class: margin,
+      values: auto
+    )
+  ) !global;
+}
+
+@import "../../mixins/utilities-map";
+
+@include describe("utilities") {
+
+  @include describe("utilities-get-options") {
+
+    @include it("Returns the options for the given utility") {
+      @include before ();
+      @include assert-equal(
+        utilities-get-options("flex"),
+        (
+          responsive: true,
+          property: flex,
+          values: (fill: 1 1 auto)
+        ));
+    }
+
+    @include it("Return null if the utility does not exist") {
+      @include before ();
+      @include assert-equal(
+        utilities-get-options("non-existing"),
+        null
+      );
+    }
+  }
+
+  @include describe("utilities-get-option") {
+    @include it("Returns the option for the given utility") {
+      @include before ();
+      @include assert-equal(
+        utilities-get-option(flex, responsive),
+        true
+      );
+    }
+
+    @include it("Returns null if the option is not present") {
+      @include before ();
+      @include assert-equal(
+        utilities-get-option(flex, non-existing),
+        null
+      );
+    }
+
+    @include it("Returns null if the utility is not present") {
+      @include before ();
+      @include assert-equal(
+        utilities-get-option(non-existing, responsive),
+        null
+      );
+    }
+  }
+
+  @include describe("utilities-get-value") {
+    @include describe("utilities with map of values") {
+      @include it("Returns the value for the given utility") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(flex, fill),
+          1 1 auto
+        );
+      }
+
+      @include it("Returns null if the value does not exist for the utility") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(flex, non-existing),
+          null
+        );
+      }
+    }
+
+    @include describe("utilities with list of values") {
+      @include it("Returns the value if it is in the list") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(align, top),
+          top
+        );
+      }
+
+      @include it("Returns null if the value is not in the list") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(align, non-existing),
+          null
+        );
+      }
+    }
+
+    @include describe("utilities with single value") {
+      @include it("Returns the value if it is the one set") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(margin, auto),
+          auto
+        );
+      }
+
+      @include it("Returns null if it is not the value set") {
+        @include before ();
+        @include assert-equal(
+          utilities-get-value(margin, non-existing),
+          null
+        );
+      }
+    }
+  }
+
+  @include describe("utilities-set-options") {
+    @include it("Merges the options with the existing ones") {
+      @include before ();
+
+      @include utilities-set-options(flex, (
+        responsive: false,
+        rtl: true
+      ));
+
+      @include assert-equal(utilities-get-option(flex, responsive), false, "responsive");
+      @include assert-equal(utilities-get-option(flex, rtl), true, "rtl");
+    }
+
+    @include it("Creates the options if none exist") {
+
+      @include assert-equal(utilities-get-option(unknown, responsive), null);
+
+      @include utilities-set-options(unknown, (
+        responsive: true
+      ));
+
+      @include assert-equal(utilities-get-option(unknown, responsive), true);
+    }
+
+    @include describe("$merge: false") {
+      @include it("Completely replaces the options") {
+        @include utilities-set-options(flex, (
+          values: auto none
+        ), $merge: false);
+
+        @include assert-equal(utilities-get-options(flex), (
+          values: auto none
+        ));
+      }
+    }
+  }
+
+  @include describe("utilities-set-option") {
+    @include it("sets a specific option for the utility") {
+      @include before ();
+
+      @include utilities-set-option(flex, responsive, false);
+
+      @include assert-equal(utilities-get-option(flex, responsive), false);
+    }
+  }
+
+  @include describe("utilities-add-values") {
+    @include describe("utilities with map of values") {
+      @include it("Merges a new map values with the old ones") {
+
+        @include before ();
+
+        @include utilities-add-values(flex, (
+          auto: auto,
+          none: none
+        ));
+
+        @include assert-equal(utilities-get-option(flex, values), (
+          fill: 1 1 auto,
+          auto: auto,
+          none: none
+        ));
+      }
+    }
+    @include describe("utilities with list values") {
+      @include it("Creates a map and merges the new values") {
+        @include before ();
+
+        @include utilities-add-values(align, (
+          middle: middle
+        ));
+
+        @include assert-equal(utilities-get-option(align, values), (
+          baseline: baseline,
+          top: top,
+          middle: middle
+        ));
+      }
+    }
+    @include describe("utilities with single value") {
+      @include it("Creates a map and merges the new values") {
+        @include before ();
+
+        @include utilities-add-values(margin, (
+          5pct: 5%
+        ));
+
+        @include assert-equal(utilities-get-option(margin, values), (
+          auto: auto,
+          5pct: 5%
+        ));
+      }
+    }
+  }
+
+  @include describe("utilities-remove-values") {
+    @include describe("utilities with map of values") {
+      @include it("removes the value with the given key") {
+        @include before ();
+
+        @include utilities-remove-values(flex, fill);
+
+        @include assert-equal(utilities-get-option(flex, values),());
+      }
+    }
+    @include describe("utilities with list of values") {
+      @include it("removes the value and creates a map") {
+        @include before ();
+
+        @include utilities-remove-values(align, top);
+
+        @include assert-equal(
+          utilities-get-option(align, values),
+          (
+            baseline: baseline
+          )
+        );
+      }
+    }
+    @include describe("utilities with single value") {
+      @include it("removes the value and creates a map") {
+        @include before ();
+
+        @include utilities-remove-values(margin, auto);
+
+        @include assert-equal(
+          utilities-get-option(margin, values),
+          ()
+        );
+      }
+    }
+    @include describe("$values...") {
+      @include it("allows to remove multiple values") {
+        @include before ();
+
+        @include utilities-remove-values(align, baseline, top);
+
+        @include assert-equal(utilities-get-option(align, values),());
+      }
+
+      @include it("ignores unknown values") {
+        @include before ();
+
+        @include utilities-remove-values(flex, unknown, fill, non-existing);
+
+        @include assert-equal(utilities-get-option(flex, values), ());
+      }
+    }
+  }
+
+  @include describe("utilities-add") {
+    @include it("adds the utility") {
+      @include before ();
+
+      @include utilities-add(z-index, (
+        class: z,
+        property: z-index,
+        values: (-1, 0, 1, 2, 3)
+      ));
+
+      @include assert-equal(utilities-get-options(z-index), (
+        class: z,
+        property: z-index,
+        values: (-1, 0, 1, 2, 3)
+      ));
+    }
+
+    @include it("overrides an existing utility") {
+      @include before ();
+
+      @include utilities-add("flex", (
+        class: flex,
+        values: auto none
+      ));
+
+      @include assert-equal(utilities-get-options(flex), (
+        class: flex,
+        values: auto none
+      ));
+    }
+  }
+
+  @include describe("utilities-remove") {
+
+    @include it("removes a single utility") {
+      @include before ();
+
+      @include utilities-remove(align);
+
+      @include assert-equal(utilities-get-options(align), null);
+    }
+
+    @include it("removes a multiple utility") {
+      @include before ();
+
+      @include utilities-remove(align, margin);
+
+      @include assert-equal(utilities-get-options(align), null);
+      @include assert-equal(utilities-get-options(margin), null);
+    }
+
+    @include it("ignores non existing utilities") {
+      @include before ();
+
+      @include utilities-remove(unknown, flex, non-existing);
+
+      @include assert-equal(utilities-get-options(flex), null);
+    }
+  }
+}