1 files changed, 393 insertions, 0 deletions
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
new file mode 100644
index 0000000..63fcae3
--- /dev/null
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -0,0 +1,393 @@
+$prefix: bs-;
+$enable-important-utilities: false;
+
+// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
+@import "../../mixins/utilities";
+
+@mixin test-generate-utility($params...) {
+  @include assert() {
+    @include output() {
+      @include generate-utility($params...);
+    }
+
+    @include expect() {
+      @content;
+    }
+  }
+}
+
+@include describe(generate-utility) {
+  @include it("generates a utility class for each value") {
+    @include test-generate-utility(
+      (
+        property: "padding",
+        values: (small: .5rem, large: 2rem)
+      )
+    ) {
+      .padding-small {
+        padding: .5rem;
+      }
+
+      .padding-large {
+        padding: 2rem;
+      }
+    }
+  }
+
+  @include describe("global $enable-important-utilities: true") {
+    @include it("sets !important") {
+      $enable-important-utilities: true !global;
+
+      @include test-generate-utility(
+        (
+          property: "padding",
+          values: (small: .5rem, large: 2rem)
+        )
+      ) {
+        .padding-small {
+          padding: .5rem !important;
+        }
+
+        .padding-large {
+          padding: 2rem !important;
+        }
+      }
+
+      $enable-important-utilities: false !global;
+    }
+  }
+
+  @include describe("$utility") {
+    @include describe("values") {
+      @include it("supports null keys") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: (null: 1rem, small: .5rem, large: 2rem)
+          ),
+        ) {
+          .padding {
+            padding: 1rem;
+          }
+
+          .padding-small {
+            padding: .5rem;
+          }
+
+          .padding-large {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("ignores null values") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: (small: null, large: 2rem)
+          )
+        ) {
+          .padding-large {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("supports lists") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          .padding-2rem {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("supports single values") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("class & property") {
+      @include it("adds each property to the declaration") {
+        @include test-generate-utility(
+          (
+            class: padding-x,
+            property: padding-inline-start padding-inline-end,
+            values: 1rem
+          )
+        ) {
+          .padding-x-1rem {
+            padding-inline-start: 1rem;
+            padding-inline-end: 1rem;
+          }
+        }
+      }
+
+      @include it("uses the first property as class name") {
+        @include test-generate-utility(
+          (
+            property: padding-inline-start padding-inline-end,
+            values: 1rem
+          )
+        ) {
+          .padding-inline-start-1rem {
+            padding-inline-start: 1rem;
+            padding-inline-end: 1rem;
+          }
+        }
+      }
+
+      @include it("supports a null class to create classes straight from the values") {
+        @include test-generate-utility(
+          (
+            property: visibility,
+            class: null,
+            values: (
+              visible: visible,
+              invisible: hidden,
+            )
+          )
+        ) {
+          .visible {
+            visibility: visible;
+          }
+
+          .invisible {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+
+    @include describe("state") {
+      @include it("Generates selectors for each states") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            state: hover focus,
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          .padding-1rem-hover:hover {
+            padding: 1rem;
+          }
+
+          .padding-1rem-focus:focus {
+            padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("css-var"){
+      @include it("sets a CSS variable instead of the property") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            css-variable-name: padding,
+            css-var: true,
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-2rem {
+            --bs-padding: 2rem;
+          }
+        }
+      }
+
+      @include it("defaults to class") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            class: padding,
+            css-var: true,
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-2rem {
+            --bs-padding: 2rem;
+          }
+        }
+      }
+    }
+
+    @include describe("local-vars") {
+      @include it("generates the listed variables") {
+        @include test-generate-utility(
+          (
+            property: color,
+            class: desaturated-color,
+            local-vars: (
+              color-opacity: 1,
+              color-saturation: .25
+            ),
+            values: (
+              blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
+            )
+          )
+        ) {
+          .desaturated-color-blue {
+            --bs-color-opacity: 1;
+            // Sass compilation will put a leading zero so we want to keep that one
+            // stylelint-disable-next-line stylistic/number-leading-zero
+            --bs-color-saturation: 0.25;
+            color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
+          }
+        }
+      }
+    }
+
+    @include describe("css-var & state") {
+      @include it("Generates a rule with for each state with a CSS variable") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            css-var: true,
+            css-variable-name: padding,
+            values: 1rem,
+            state: hover focus,
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-1rem-hover:hover {
+            --bs-padding: 1rem;
+          }
+
+          .padding-1rem-focus:focus {
+            --bs-padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("rtl") {
+      @include it("sets up RTLCSS for removal when false") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rtl: false
+          )
+        ) {
+          /* rtl:begin:remove */
+
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          /* rtl:end:remove */
+
+        }
+      }
+    }
+
+    @include describe("rfs") {
+      @include it("sets the fluid value when not inside media query") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rfs: true
+          )
+        ) {
+          .padding-1rem {
+            padding: rfs-fluid-value(1rem);
+          }
+        }
+      }
+
+      @include it("sets the value when inside the media query") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rfs: true
+          ),
+          $is-rfs-media-query: true
+        ) {
+          .padding-1rem {
+            padding: rfs-value(1rem);
+          }
+        }
+      }
+    }
+  }
+
+  @include describe("$infix") {
+    @include it("inserts the given infix") {
+      @include test-generate-utility(
+        (
+          property: "padding",
+          values: (null: 1rem, small: .5rem, large: 2rem)
+        ),
+        $infix: -sm
+      ) {
+        .padding-sm {
+          padding: 1rem;
+        }
+
+        .padding-sm-small {
+          padding: .5rem;
+        }
+
+        .padding-sm-large {
+          padding: 2rem;
+        }
+      }
+    }
+
+    @include it("strips leading - if class is null") {
+      @include test-generate-utility(
+        (
+          property: visibility,
+          class: null,
+          values: (
+            visible: visible,
+            invisible: hidden,
+          )
+        ),
+        -sm
+      ) {
+        .sm-visible {
+          visibility: visible;
+        }
+
+        .sm-invisible {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}