Unit testing framework for Sass code with JavaScript test runner integration
—
Testing Sass function outputs, variable values, and return types with comprehensive equality and truthiness checking. These assertions test Sass values during compilation.
Tests whether two Sass values are equal using Sass's built-in equality comparison.
/**
* Assert that two values are equal
* @param $assert - The actual value to test
* @param $expected - The expected value to match against
* @param $description - Optional description of the assertion (generates default if null)
* @param $inspect - Whether to compare inspected (string) values instead of Sass values
*/
@mixin assert-equal($assert, $expected, $description: null, $inspect: false);
/**
* Alias for assert-equal
* @param $assert - The actual value to test
* @param $expected - The expected value to match against
* @param $description - Optional description of the assertion
* @param $inspect - Whether to compare inspected values
*/
@mixin is-equal($assert, $expected, $description: null, $inspect: false);Usage Examples:
@use 'pkg:sass-true' as *;
@use 'sass:math';
@include test('Math operations work correctly') {
// Test numbers
@include assert-equal(math.div(10, 2), 5);
// Test strings
@include assert-equal('hello' + ' world', 'hello world');
// Test lists
@include assert-equal((1, 2, 3), (1, 2, 3));
// Test maps
@include assert-equal((a: 1, b: 2), (a: 1, b: 2));
// Test colors
@include assert-equal(red, #ff0000);
// Test with custom description
@include assert-equal(
my-function(10px),
0.625rem,
'Converts pixels to rem correctly'
);
// Test inspected values (compare as strings)
@include assert-equal(
10px + 5px,
20px,
'CSS calc is not evaluated in Sass',
$inspect: true
);
}Tests whether two Sass values are not equal.
/**
* Assert that two values are not equal
* @param $assert - The actual value to test
* @param $expected - The value that should not match
* @param $description - Optional description of the assertion
* @param $inspect - Whether to compare inspected values
*/
@mixin assert-unequal($assert, $expected, $description: null, $inspect: false);
/**
* Alias for assert-unequal
* @param $assert - The actual value to test
* @param $expected - The value that should not match
* @param $description - Optional description of the assertion
* @param $inspect - Whether to compare inspected values
*/
@mixin not-equal($assert, $expected, $description: null, $inspect: false);Usage Examples:
@use 'pkg:sass-true' as *;
@include test('Values are different') {
// Test different types
@include assert-unequal(1, '1', 'Number and string are different');
// Test different values
@include assert-unequal(red, blue);
// Test similar but different lists
@include assert-unequal((1, 2, 3), (1, 2, 4));
// Test with inspected values
@include assert-unequal(
10px,
'10px',
'Number and string representations differ',
$inspect: true
);
}Tests whether a value is truthy according to Sass semantics, with enhanced truthiness that considers empty lists and strings as falsy.
/**
* Assert that a value is truthy (enhanced truthiness: empty lists/strings are falsy)
* @param $assert - The value to test for truthiness
* @param $description - Optional description of the assertion
*/
@mixin assert-true($assert, $description: null);
/**
* Alias for assert-true
* @param $assert - The value to test for truthiness
* @param $description - Optional description of the assertion
*/
@mixin is-truthy($assert, $description: null);Usage Examples:
@use 'pkg:sass-true' as *;
@include test('Truthy values') {
// Numbers (except 0)
@include assert-true(1);
@include assert-true(0.1);
@include assert-true(-1);
// Non-empty strings
@include assert-true('hello');
@include assert-true('0'); // String '0' is truthy
// Non-empty lists
@include assert-true((1, 2, 3));
@include assert-true((a,)); // Single-item list
// Maps
@include assert-true((a: 1));
// Colors
@include assert-true(red);
@include assert-true(transparent); // Even transparent is truthy
// Boolean true
@include assert-true(true);
// Custom description
@include assert-true(
get-config('enabled'),
'Configuration should be enabled'
);
}Tests whether a value is falsy, including enhanced falsiness for empty lists and strings.
/**
* Assert that a value is falsy (enhanced falsiness: empty lists/strings are falsy)
* @param $assert - The value to test for falsiness
* @param $description - Optional description of the assertion
*/
@mixin assert-false($assert, $description: null);
/**
* Alias for assert-false
* @param $assert - The value to test for falsiness
* @param $description - Optional description of the assertion
*/
@mixin is-falsy($assert, $description: null);Usage Examples:
@use 'pkg:sass-true' as *;
@include test('Falsy values') {
// Boolean false
@include assert-false(false);
// Null
@include assert-false(null);
// Empty string (enhanced falsiness)
@include assert-false('');
// Empty list (enhanced falsiness)
@include assert-false(());
// Zero (standard Sass truthiness - zero is truthy in Sass)
// Note: 0 is actually truthy in Sass, so this would fail:
// @include assert-false(0); // This assertion would fail!
// Custom description
@include assert-false(
get-optional-config('theme'),
'Optional theme should not be set'
);
}@use 'pkg:sass-true' as *;
@include test('Complex data structure testing') {
$config: (
theme: (
primary: #007bff,
secondary: #6c757d,
sizes: (small: 0.875rem, large: 1.25rem)
),
breakpoints: (mobile: 768px, desktop: 1024px)
);
// Test nested map access
@include assert-equal(
map-get(map-get($config, 'theme'), 'primary'),
#007bff
);
// Test entire sub-maps
@include assert-equal(
map-get($config, 'breakpoints'),
(mobile: 768px, desktop: 1024px)
);
}@use 'pkg:sass-true' as *;
@include test('Function error handling') {
// Test that a function returns an error
@include assert-equal(
divide-by-zero(10, 0),
'ERROR [divide()]: Cannot divide by zero',
'Should return error message for division by zero'
);
// Test error message format
@include assert-true(
str-index(invalid-color('not-a-color'), 'ERROR') == 1,
'Error messages should start with ERROR'
);
}The $inspect parameter converts values to their string representations, useful for testing CSS output:
@use 'pkg:sass-true' as *;
@include test('CSS value inspection') {
// Without inspect - compares Sass values
@include assert-equal(10px + 5px, 15px); // Passes
// With inspect - compares string representations
@include assert-equal(
10px + 5px,
'15px',
'Should match string representation',
$inspect: true
); // Passes
// Inspect mode for complex values
@include assert-equal(
(margin: 1rem, padding: 0.5rem),
'(margin: 1rem, padding: 0.5rem)',
'Should match map string representation',
$inspect: true
);
}Sass True supports testing all Sass data types:
1, 10px, 1.5rem, 50%'hello', "world", unquoted identifiersred, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)true, falsenull(1, 2, 3), 1 2 3, nested lists(a: 1, b: 2), nested mapsInstall with Tessl CLI
npx tessl i tessl/npm-sass-true