Functional Sass with Error Reporting and Unit Testing

Angular: The Full Gamut Edition

Charlie Greenman
September 17, 2020
3 min read

Unit Testing for CSS

Yes, within the Sass ecosystem there is the ability to unit test css styling. I would discuss how using Sass unit testing, combined with Sass error reporting, can add a military grade sturdiness to your application.


When to use Sass Error Reporting and Unit Testing

In any app, there are are core styles. A core style is defined as something which is intended (,but might not be yet) used by three, or more components, in two, or more pages.


Why specifically use a Sass Function, as opposed to a mixin?

With Sass functions, have the ability to report errors. For instance, let’s say we have a space function, used to determine padding and margin. We can have a pure function, which says, take in a number, and multiply it by the base space multiplier. For instance, if we input 1, then it outputs 2.

@function razroo-breakpoint($breakpoint) {
  $breakpoints: ('small': 400, 'medium': 720, 'large': 1024, 'extra-large': 1424);

  @if(map-get($breakpoints, $breakpoint)) {
    @return #{map-get($breakpoints, breakpoint))px;
  }
  @else {
    @error "Must contain one of the following strings#{$breakpoints}." 
  }
}

Using error reporting, we can specify a number be used. In addition, if the number provided is let’s say 1.2, that does not multiply to the proper space amount, then the compiler will complain, and specify the numbers that multiplier must equal. Which is self documenting. Wrapping it up, using functions we can implement:

  1. Type Checking
  2. Self Documenting(which is really type checking, but here it is through compiler only)
  3. No values other than these are used
  4. When a PR comes our way, specify only functions used for core functions, to make sure core styles remain the same.
// breakpoints to be used in conjuction with media queries across app
@function razroo-breakpoint($breakpoint) {
  $breakpoints: ('small': 400, 'medium': 720, 'large': 1024,
  'extra-large': 1424);
@if(map-get($breakpoints, $breakpoint)) {
    @return #{map-get($breakpoints, breakpoint)}px;
  }
  @else {
    @error "Must contain one of the following strings: #{$breakpoints}.";
  }
}

Completing the Functional Architecture — Adding Sass Unit Testing

A core Sass function, with incorrect functionality, obviously, can cause the entire app to work incorrectly. It is therefore, at the very least, to write sass unit tests for these functions.


Assessing the current Sass Unit Test Landscape

I’ve done a bit of research regarding Sass Unit Testing. I will admit, it is lackluster, even though admittedly, it is beneficial. The candidate, I felt most comfortable with, although I do my reservations, is Sass True.

To Install

npm install sass-true --save-dev

Set up a Sass Spec File

const path = require('path')
const sassTrue = require('sass-true')
const glob = require('glob')
describe('Sass', () => {
  // Find all of the Sass files that end in `*.spec.scss` in any directory in this project.
  // I use path.resolve because True requires absolute paths to compile test files.
  const sassTestFiles = glob.sync(path.resolve(__dirname, '**/*.spec.scss'))
// Run True on every file found with the describe and it methods provided
  sassTestFiles.forEach(file =>
    sassTrue.runSass({ file }, describe, it)
  )
})

Set up an npm script

"sass-test": "jasmine libs/scss.spec.ts",

Writing our First Sass True Unit Test

@import 'true';
$true-terminal-output: false;
@import './razroo-breakpoints';
@include describe('multiply() function') {
  @include it('Returns the result of multiplication') {
    @include assert-equal(
      razroo-breakpoint('small'),
      '400'
    );
  }
}

That’s it! This architecture can really go all the way. Some considerations before implementing:

  1. Creating a lib folder for functions and adopting a mono repo strategy.
  2. Adopting a Design Library, to work against core library sass functions.
  3. Carefully considering performance when using functions.
  4. Considering adopting functional styling conventions.

More articles similar to this

footer

Razroo is committed towards contributing to open source. Take the pledge towards open source by tweeting, #itaketherazroopledge to @_Razroo on twitter. One of our associates will get back to you and set you up with an open source project to work on.