Add true-sass for scss unit test

5 files changed, 167 insertions, 0 deletions

diff --git a/package.json b/package.json
index 3fa04a5d53..b05210094f 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
     "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
+    "css-test": "node test-scss/index.js -v -r",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -143,6 +144,7 @@
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.5.0",
     "sass": "^1.44.0",
+    "sass-true": "^6.0.1",
     "shelljs": "^0.8.4",
     "stylelint": "^13.13.1",
     "stylelint-config-twbs-bootstrap": "^2.2.4",
diff --git a/test-scss/helpers.js b/test-scss/helpers.js
new file mode 100644
index 0000000000..8ef78ac64e
--- /dev/null
+++ b/test-scss/helpers.js
@@ -0,0 +1,56 @@
+/* eslint-env node */
+
+'use strict'
+
+const process = require('node:process')
+const BE_VERBOSE = process.argv.includes('-v')
+
+const colors = { // could use https://github.com/chalk/chalk
+  Reset: '\u001B[0m',
+  Red: '\u001B[31m',
+  Green: '\u001B[32m',
+  Yellow: '\u001B[33m',
+  Blue: '\u001B[34m',
+  Magenta: '\u001B[35m',
+  Cyan: '\u001B[36m'
+}
+
+const ErrorAssertion = function (module, test, assertionDetails) {
+  this.module = module
+  this.test = test
+  this.assertionDetails = assertionDetails
+}
+
+const print = (msg, indent = 0, color = null, force = false) => {
+  const indentSpaces = ' '.repeat(indent)
+  msg = indentSpaces + msg.replaceAll('\n', '\n' + indentSpaces)
+
+  if (!BE_VERBOSE && !force) {
+    return
+  }
+
+  if (color) {
+    // eslint-disable-next-line no-console
+    console.log(`${color}%s${colors.Reset}`, msg)
+    return
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(msg)
+}
+
+const printModule = (title, force = false) =>
+  print('* ' + title, 4, colors.Blue, force) // print module title (describe)
+const printTest = (title, force = false) =>
+  print('- ' + title, 6, colors.Cyan, force)// print test title (it)
+const printTestDetails = (title, force = false) =>
+  print('- ' + title, 8, null, force)// print test title (it)
+
+module.exports = {
+  colors,
+  ErrorAssertion,
+  print,
+  printModule,
+  printTest,
+  printTestDetails
+}
diff --git a/test-scss/index.js b/test-scss/index.js
new file mode 100644
index 0000000000..30bd336c14
--- /dev/null
+++ b/test-scss/index.js
@@ -0,0 +1,67 @@
+/* eslint-env node */
+
+'use strict'
+
+const path = require('path')
+const helpers = require('./helpers')
+const sassTrue = require('sass-true')
+const fs = require('fs')
+const { exec } = require('child_process')
+const process = require('node:process')
+let exitStatus = 0
+const BE_VERBOSE = process.argv.includes('-v')
+const DELETE_OUTPUT_FILE = process.argv.includes('-r')
+const errors = []
+const sassScript = 'sass --style expanded --quiet --no-source-map --no-error-css test-scss/index.spec.scss:test-scss/index.css'
+const sassFile = path.join(__dirname, 'index.css')
+
+const describeModule = function (module) {
+  helpers.printModule(module.module)
+  for (const submodule of module.modules || []) {
+    describeModule(submodule)
+  }
+
+  for (const test of module.tests || []) {
+    let countFailed = 0
+    helpers.printTest(test.test)
+    for (const assertion of test.assertions || []) {
+      if (!assertion.passed) {
+        exitStatus = 1
+        countFailed++
+        const assertionDetails = sassTrue.formatFailureMessage(assertion)
+        errors.push(new helpers.ErrorAssertion(module.module, test.test, assertionDetails))
+        helpers.printTestDetails(assertionDetails)
+      }
+    }
+
+    helpers.print(`Assertions: ${test.assertions.length}  -  Failed: ${countFailed}\n`, 8, helpers.colors.Magenta)
+    countFailed = 0
+  }
+}
+
+exec(sassScript, (error, stdout, stderr) => {
+  if (error) {
+    helpers.print(`error: ${error.message}`)
+    process.exit(1)
+  }
+
+  const modules = sassTrue.parse(fs.readFileSync(sassFile).toString())
+
+  for (const module of modules) {
+    describeModule(module)
+  }
+
+  if (!BE_VERBOSE) {
+    for (const error of errors) {
+      helpers.printModule(error.module, true)
+      helpers.printTest(error.test, true)
+      helpers.printTestDetails(error.assertionDetails, true)
+    }
+  }
+
+  if (DELETE_OUTPUT_FILE) {
+    fs.unlinkSync(sassFile)
+  }
+
+  process.exit(exitStatus)
+})
diff --git a/test-scss/index.spec.scss b/test-scss/index.spec.scss
new file mode 100644
index 0000000000..e4399fa034
--- /dev/null
+++ b/test-scss/index.spec.scss
@@ -0,0 +1,2 @@
+@import "tests/test";
+
diff --git a/test-scss/tests/test.scss b/test-scss/tests/test.scss
new file mode 100644
index 0000000000..31d451175a
--- /dev/null
+++ b/test-scss/tests/test.scss
@@ -0,0 +1,40 @@
+@use "sass:map";
+@import "../../node_modules/sass-true/sass/true";
+
+@import "../../scss/functions";
+@import "../../scss/variables";
+
+
+@include describe("Zip -function-") {
+  @include it("Zips multiple lists into a single multi-dimensional list") {
+    @include assert-equal(zip(a b c, 1 2 3), (a 1, b 2, c 3));
+  }
+
+  @include it("should check lists") {
+    @include assert-equal((4, 4), (4, 4));
+  }
+
+  @include it("another test") {
+    @include assert-equal(1, 3);
+    @include assert-equal(1, 4);
+    @include assert-equal(3, 3);
+  }
+}
+
+@include describe("A random test") {
+  @include it("another test2") {
+    $expected-theme-colors: (
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "danger": "",
+      "light": "",
+      "dark": "",
+      "custom": ""
+    );
+
+    @include assert-equal(map.keys($theme-colors), map.keys($expected-theme-colors), "should do something");
+  }
+}