Test(web): Introduce SASS unit tests

packages/web/package.json

@@ -66,12 +66,15 @@
     "@types/jest": "29.5.6",
     "autoprefixer": "10.4.16",
     "clean-css-cli": "5.6.2",
+    "glob": "10.3.10",
     "jest-environment-jsdom": "29.7.0",
+    "jest-environment-node-single-context": "29.1.0",
     "postcss": "8.4.31",
     "postcss-cli": "10.1.0",
     "resize-observer-polyfill": "1.5.1",
     "rollup": "3.29.4",
     "sass": "1.69.4",
+    "sass-true": "7.0.0",
     "shx": "0.3.4",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",

packages/web/src/scss/tools/__tests__/_accessibility.test.scss

@@ -0,0 +1,82 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../accessibility';
+
+@include true.describe('hide-text mixin') {
+    @include true.it('outputs styles to visually hide text') {
+        @include true.assert {
+            @include true.output {
+                .text-hidden {
+                    @include accessibility.hide-text();
+                }
+            }
+
+            @include true.expect {
+                .text-hidden {
+                    position: absolute;
+                    width: 1px;
+                    height: 1px;
+                    padding: 0;
+                    margin: -1px;
+                    overflow: hidden;
+                    clip: rect(0, 0, 0, 0);
+                    white-space: nowrap;
+                    border: 0;
+                }
+            }
+        }
+    }
+}
+
+@include true.describe('min-tap-target mixin') {
+    @include true.it('outputs styles for default centered tap target') {
+        @include true.assert {
+            @include true.output {
+                .tap-target-centered {
+                    @include accessibility.min-tap-target(40px);
+                }
+            }
+
+            @include true.expect {
+                .tap-target-centered {
+                    position: relative;
+                }
+
+                // stylelint-disable order/properties-order -- Disabling rule due to conditional rendering affecting property order
+                .tap-target-centered::before {
+                    content: '';
+                    position: absolute;
+                    width: 40px;
+                    height: 40px;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+                // stylelint-enable order/properties-order
+            }
+        }
+    }
+
+    @include true.it('outputs styles for non-centered tap target') {
+        @include true.assert {
+            @include true.output {
+                .tap-target-non-centered {
+                    @include accessibility.min-tap-target(40px, false);
+                }
+            }
+
+            @include true.expect {
+                .tap-target-non-centered {
+                    position: relative;
+                }
+
+                .tap-target-non-centered::before {
+                    content: '';
+                    position: absolute;
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+        }
+    }
+}

packages/web/src/scss/tools/__tests__/_breakpoint.test.scss

@@ -0,0 +1,83 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../breakpoint';
+
+@include true.describe('up mixin from breakpoint') {
+    @include true.it('outputs media query for provided breakpoint value') {
+        @include true.assert {
+            @include true.output {
+                @include breakpoint.up(600px) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+
+            @include true.expect {
+                @media (min-width: 600px) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+        }
+    }
+
+    @include true.it('outputs styles directly without media query for 0 value') {
+        @include true.assert {
+            @include true.output {
+                @include breakpoint.up(0) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+
+            @include true.expect {
+                .selector {
+                    color: #bada55;
+                }
+            }
+        }
+    }
+}
+
+@include true.describe('down mixin from breakpoint') {
+    @include true.it('outputs media query for provided breakpoint value') {
+        @include true.assert {
+            @include true.output {
+                @include breakpoint.down(600px) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+
+            @include true.expect {
+                @media (max-width: 599px) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+        }
+    }
+
+    @include true.it('outputs styles directly without media query for 0 value') {
+        @include true.assert {
+            @include true.output {
+                @include breakpoint.down(0) {
+                    .selector {
+                        color: #bada55;
+                    }
+                }
+            }
+
+            @include true.expect {
+                .selector {
+                    color: #bada55;
+                }
+            }
+        }
+    }
+}

packages/web/src/scss/tools/__tests__/_links.test.scss

@@ -0,0 +1,45 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../links';
+
+@include true.describe('stretch mixin') {
+    @include true.it('outputs default styles for ::before pseudo-element') {
+        @include true.assert {
+            @include true.output {
+                .test {
+                    @include links.stretch();
+                }
+            }
+
+            @include true.expect {
+                .test::before {
+                    content: '';
+                    position: absolute;
+                    z-index: 0;
+                    display: block;
+                    inset: 0;
+                }
+            }
+        }
+    }
+
+    @include true.it('outputs styles for provided pseudo-element') {
+        @include true.assert {
+            @include true.output {
+                .test {
+                    @include links.stretch('after');
+                }
+            }
+
+            @include true.expect {
+                .test::after {
+                    content: '';
+                    position: absolute;
+                    z-index: 0;
+                    display: block;
+                    inset: 0;
+                }
+            }
+        }
+    }
+}

packages/web/src/scss/tools/__tests__/_list.test.scss

@@ -0,0 +1,13 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../list';
+
+@include true.describe('to-string function from list.scss') {
+    @include true.it('converts a list to a string with the specified separator') {
+        @include true.assert-equal(list.to-string((1, 2, 3), '-'), '1-2-3');
+
+        @include true.assert-equal(list.to-string(('a', 'b', 'c'), '_'), 'a_b_c');
+
+        @include true.assert-equal(list.to-string(('apple', 'banana', 'cherry')), 'apple banana cherry');
+    }
+}

packages/web/src/scss/tools/__tests__/_reset.test.scss

@@ -0,0 +1,33 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../../settings/cursors';
+@use '../reset';
+
+@include true.describe('button mixin from reset.scss') {
+    @include true.it('applies reset styles for a button') {
+        @include true.assert {
+            @include true.output {
+                .btn-test {
+                    @include reset.button();
+                }
+            }
+
+            @include true.expect {
+                .btn-test {
+                    appearance: none;
+                    display: inline-flex;
+                    flex: none;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 0;
+                    font: inherit;
+                    border: none;
+                    border-radius: 0;
+                    background: none;
+                    box-shadow: none;
+                    cursor: cursors.$button-links;
+                }
+            }
+        }
+    }
+}

packages/web/src/scss/tools/__tests__/_string.test.scss

@@ -0,0 +1,35 @@
+// stylelint-disable scss/at-mixin-argumentless-call-parentheses -- We need to allow this to make sass-true work
+@use 'true';
+@use '../string';
+
+@include true.describe('convert-kebab-case-to-camel-case function') {
+    @include true.it('converts kebab-case to camelCase') {
+        @include true.assert-equal(string.convert-kebab-case-to-camel-case('top-left'), 'topLeft');
+
+        @include true.assert-equal(
+            string.convert-kebab-case-to-camel-case('my-long-variable-name'),
+            'myLongVariableName'
+        );
+    }
+}
+
+@include true.describe('convert-pascal-case-to-kebab-case function') {
+    @include true.it('converts PascalCase to kebab-case') {
+        @include true.assert-equal(string.convert-pascal-case-to-kebab-case('TopLeft'), 'top-left');
+
+        @include true.assert-equal(
+            string.convert-pascal-case-to-kebab-case('MyLongVariableName'),
+            'my-long-variable-name'
+        );
+    }
+}
+
+@include true.describe('replace function') {
+    @include true.it('replaces all occurrences of a substring with another string') {
+        @include true.assert-equal(string.replace('top-left', '-', ''), 'topleft');
+
+        @include true.assert-equal(string.replace('some-other-text', 'e', 'a'), 'soma-othar-taxt');
+
+        @include true.assert-equal(string.replace('no-replacement-here', 'z', 'y'), 'no-replacement-here');
+    }
+}

packages/web/tests/scss.test.ts

@@ -0,0 +1,13 @@
+/**
+ * @jest-environment node
+ */
+
+import { resolve } from 'path';
+import { runSass } from 'sass-true';
+import { sync } from 'glob';
+
+describe('Sass', () => {
+  const sassTestFiles = sync(resolve(process.cwd(), 'src/**/*.test.scss'));
+
+  sassTestFiles.forEach((file) => runSass({ describe, it }, file));
+});