SCSS testing of the utilities API (#36029)

* Set up CSS testing using sass-true and mocha

Use mocha to handle the heavy lifting of finding tests and running them.
Mocha is made to look directly for SCSS files which are compiled
thanks to Node's require.extensions mechanism.

* Add CSS tests to workflow

* Add tests for the generate-utility mixin

* Add tests for utilities generation

* Fix linting issues

* Fix test contents

Don't know why the whole utilities.test.scss ended up copied in the api.test.scss

* Remove unnecessary entry in package.json

* Move to Jasmine for running the tests

* Move running of CSS tests before CSS build

* Update linting set up

Add exceptions for test files in stylelint

* Remove irrelevant option for sass-true

* Fix linting issues after rebase

* Add color mode tests

* Fix linter

Co-authored-by: Mark Otto <[email protected]>

1 files changed, 75 insertions, 0 deletions

diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
new file mode 100644
index 000000000..9e84441d2
--- /dev/null
+++ b/scss/tests/utilities/_api.test.scss
@@ -0,0 +1,75 @@
+@import "../../functions";
+@import "../../variables";
+@import "../../maps";
+@import "../../mixins";
+
+$utilities: ();
+
+@include describe("utilities/api") {
+  @include it("generates utilities for each breakpoints") {
+    $utilities: (
+      margin: (
+        property: margin,
+        values: auto
+      ),
+      padding: (
+        property: padding,
+        responsive: true,
+        values: 1rem
+      ),
+      font-size: (
+        property: font-size,
+        values: (large: 1.25rem),
+        print: true
+      )
+    ) !global;
+
+    $grid-breakpoints: (
+      xs: 0,
+      sm: 576px,
+      md: 768px
+    );
+
+
+    @include assert() {
+      @include output() {
+        @import "../../utilities/api";
+      }
+
+      @include expect() {
+        // margin is not set to responsive
+        .margin-auto {
+          margin: auto !important;
+        }
+
+        // padding is, though
+        .padding-1rem {
+          padding: 1rem !important;
+        }
+
+        .font-size-large {
+          font-size: 1.25rem !important;
+        }
+
+        @media (min-width: 576px) {
+          .padding-sm-1rem {
+            padding: 1rem !important;
+          }
+        }
+
+        @media (min-width: 768px) {
+          .padding-md-1rem {
+            padding: 1rem !important;
+          }
+        }
+
+        @media print {
+          .font-size-print-large {
+            font-size: 1.25rem !important;
+          }
+        }
+      }
+
+    }
+  }
+}