mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
Add tests for utilities-map functions and mixins
Split the utilities-map helpers in their own file to make tests a little more isolated
This commit is contained in:
Romaric Pascal
parent
2560a59180
commit
dc93f6ad19
122
scss/mixins/_utilities-map.scss
Normal file
122
scss/mixins/_utilities-map.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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";
|
||||
|
||||
339
scss/tests/mixins/_utilities-map.test.scss
Normal file
339
scss/tests/mixins/_utilities-map.test.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user