From dc93f6ad19fa1b1771c86b5fbb3f7ce37a14207e Mon Sep 17 00:00:00 2001 From: Romaric Pascal Date: Fri, 17 Feb 2023 10:03:10 +0000 Subject: [PATCH] Add tests for utilities-map functions and mixins Split the utilities-map helpers in their own file to make tests a little more isolated --- scss/mixins/_utilities-map.scss | 122 ++++++++ scss/mixins/_utilities.scss | 124 +------- scss/tests/mixins/_utilities-map.test.scss | 339 +++++++++++++++++++++ 3 files changed, 462 insertions(+), 123 deletions(-) create mode 100644 scss/mixins/_utilities-map.scss create mode 100644 scss/tests/mixins/_utilities-map.test.scss diff --git a/scss/mixins/_utilities-map.scss b/scss/mixins/_utilities-map.scss new file mode 100644 index 0000000000..74f4d9c402 --- /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 25d613f24c..bb43fdd9c2 100644 --- 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 index 0000000000..aa0c3c1170 --- /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); + } + } +} -- 2.47.2