### Install Dependencies with Yarn Source: https://github.com/oddbird/true/blob/main/CONTRIBUTING.md Installs the necessary project dependencies using the Yarn package manager. This is the first step to setting up the development environment. ```bash yarn ``` -------------------------------- ### Install Dart Sass Source: https://github.com/oddbird/true/blob/main/README.md Installs Dart Sass, a requirement for the True testing tool. Ensure Dart Sass version 1.45.0 or higher is installed. ```bash npm install --save-dev sass-embedded # or `sass` ``` -------------------------------- ### Install Sass True and Sass Source: https://context7.com/oddbird/true/llms.txt Installs the sass-true library and a Sass compiler (Dart Sass or Sass Embedded) as development dependencies using npm. ```bash npm install --save-dev sass-true npm install --save-dev sass-embedded # or `sass` ``` -------------------------------- ### Install sass-true via npm Source: https://github.com/oddbird/true/blob/main/README.md Installs the sass-true package as a development dependency using npm. This is the first step in setting up True for Sass testing. ```bash npm install --save-dev sass-true ``` -------------------------------- ### Install JS test runner dependencies Source: https://github.com/oddbird/true/blob/main/README.md Installs necessary npm packages for integrating True with a JavaScript test runner. This includes sass-true and Dart Sass if not already installed. ```bash npm install --save-dev sass-true npm install --save-dev sass-embedded # or `sass` (if not already installed) ``` -------------------------------- ### Configure Custom Importers for Sass True Source: https://github.com/oddbird/true/blob/main/README.md Provide custom importers to `sassTrue.runSass()` to handle specific import syntaxes, such as tilde notation for module resolution. This example sets up an importer to resolve modules from `node_modules`. ```javascript import path from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const importers = [ { findFileUrl(url) { if (!url.startsWith('~')) { return null; } return new URL( pathToFileURL(path.resolve('node_modules', url.substring(1))), ); }, }, ]; const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile, { importers }); ``` -------------------------------- ### Integrate Sass True with Custom Test Runners Source: https://github.com/oddbird/true/blob/main/README.md Adapt `sassTrue.runSass()` to work with any test runner that provides `describe` and `it` functions (or their equivalents). This example demonstrates integration with a hypothetical 'my-test-runner'. ```javascript // Example with custom test runner import { suite, test } from 'my-test-runner'; sassTrue.runSass( { describe: suite, it: test }, path.join(__dirname, 'test.scss'), ); ``` -------------------------------- ### Run Tests with Yarn Source: https://github.com/oddbird/true/blob/main/CONTRIBUTING.md Executes the test suite using Jest and True. This command ensures that all tests are passing before committing. ```bash yarn test ``` -------------------------------- ### Import Sass True in Sass Files Source: https://context7.com/oddbird/true/llms.txt Demonstrates various methods to import the sass-true library into Sass test files, including using the Node.js package importer, JavaScript test runner integration, explicit paths, and the legacy @import syntax. ```scss // With Node.js package importer (Dart Sass >= 1.71) @use 'pkg:sass-true' as *; // With JavaScript test runner integration @use 'true' as *; // Without package importer (explicit path) @use '../node_modules/sass-true' as *; // Legacy @import syntax @import '../node_modules/sass-true/sass/true'; ``` -------------------------------- ### Build Sass Tests with Yarn Source: https://github.com/oddbird/true/blob/main/CONTRIBUTING.md Compiles Sass test files. This command is used to prepare Sass-specific tests for execution. ```bash yarn build:sass ``` -------------------------------- ### Custom Importers Configuration with runSass() Source: https://context7.com/oddbird/true/llms.txt Explains how to configure custom importers with `runSass()` to handle non-standard import paths, such as tilde notation (`~`). This allows for more flexible module resolution in Sass tests, enabling imports from `node_modules` or other custom locations. ```javascript // test/sass.test.js import path from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); // Custom importer for tilde (~) notation const importers = [ { findFileUrl(url) { if (!url.startsWith('~')) { return null; } return new URL( pathToFileURL(path.resolve('node_modules', url.substring(1))) ); }, }, ]; const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile, { importers }); ``` -------------------------------- ### assert() with output() and expect() Source: https://context7.com/oddbird/true/llms.txt Tests the CSS output of mixins by comparing the actual generated CSS against an expected CSS block. This is crucial for ensuring mixins produce the correct styles. ```APIDOC ## assert() with output() and expect() ### Description Tests CSS output from mixins by comparing actual output against expected CSS. Requires the three mixins to work together. ### Method `assert { @include output { ... } @include expect { ... } }` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as *; // Mixin to test @mixin button-styles($size: medium) { display: inline-block; @if $size == small { padding: 4px 8px; font-size: 12px; } @else if $size == large { padding: 12px 24px; font-size: 18px; } @else { padding: 8px 16px; font-size: 14px; } } @include describe('button-styles mixin') { @include it('Outputs medium button styles by default') { @include assert { @include output { @include button-styles; } @include expect { display: inline-block; padding: 8px 16px; font-size: 14px; } } } @include it('Outputs large button styles') { @include assert('Large size parameter works') { @include output { @include button-styles(large); } @include expect { display: inline-block; padding: 12px 24px; font-size: 18px; } } } } ``` ### Response #### Success Response (200) No direct response, assertion passes if the output CSS exactly matches the expect CSS. #### Response Example None ``` -------------------------------- ### Group Sass Tests with describe() and test-module() Source: https://context7.com/oddbird/true/llms.txt Illustrates how to group related Sass tests using the `describe()` or `test-module()` functions. These functions help organize tests hierarchically and can be nested. ```scss @use 'sass:list'; @use 'pkg:sass-true' as *; @include describe('list.zip [function]') { @include it('Zips two lists together') { @include assert-equal( list.zip(a b c, 1 2 3), (a 1, b 2, c 3) ); } @include it('Zips three lists together') { @include assert-equal( list.zip(1px 1px 3px, solid dashed solid, red green blue), (1px solid red, 1px dashed green, 3px solid blue) ); } } // Alternative syntax using test-module @include test-module('math utilities') { @include test('double() returns input multiplied by 2') { @include assert-equal(double(5), 10); } } ``` -------------------------------- ### Assert Sass Value Equality with assert-equal() Source: https://context7.com/oddbird/true/llms.txt Demonstrates the use of `assert-equal()` to verify if two Sass values are identical. This assertion is used within test cases to compare numbers, colors, lists, and can include an optional description. ```scss @use 'sass:color'; @use 'sass:list'; @use 'pkg:sass-true' as *; @include describe('assert-equal examples') { @include it('Compares numbers') { @include assert-equal(10 + 5, 15); @include assert-equal(2em * 3, 6em); } @include it('Compares colors') { @include assert-equal(color.mix(white, black), gray); } @include it('Compares lists') { @include assert-equal(list.append(1 2, 3), 1 2 3); } @include it('Includes optional description') { @include assert-equal( 1 + 1, 2, 'Basic arithmetic should work' ); } } ``` -------------------------------- ### Watch Mode Configuration for Sass Tests Source: https://context7.com/oddbird/true/llms.txt Provides configurations for test runners to enable watch mode, allowing them to automatically detect changes in Sass files and re-run tests. This enhances the development workflow by providing instant feedback on code modifications. ```javascript // vitest.config.js import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { forceRerunTriggers: ['**/*.scss'], } }); // jest.config.js module.exports = { moduleFileExtensions: ['js', 'json', 'scss'], }; ``` -------------------------------- ### Define Sass Test Cases with it() and test() Source: https://context7.com/oddbird/true/llms.txt Shows how to define individual Sass test cases using `it()` or `test()`. These functions contain assertions and should be placed within `describe()` or `test-module()` blocks for proper organization. ```scss @use 'sass:math'; @use 'pkg:sass-true' as *; @include describe('Math operations') { @include it('Division works correctly') { @include assert-equal(math.div(10, 2), 5); @include assert-equal(math.div(100, 4), 25); } @include it('Rounding works as expected') { @include assert-equal(math.round(4.5), 5); @include assert-equal(math.floor(4.9), 4); @include assert-equal(math.ceil(4.1), 5); } } // Alternative syntax @include test('String concatenation') { @include assert-equal('hello' + ' world', 'hello world'); } ``` -------------------------------- ### Run Linter with Yarn Source: https://github.com/oddbird/true/blob/main/CONTRIBUTING.md Triggers the linter to check for code style and potential errors. This is a standalone command to verify code quality. ```bash yarn lint ``` -------------------------------- ### Test Sass values with assert-equal Source: https://github.com/oddbird/true/blob/main/README.md Demonstrates how to test Sass functions and variables using the `assert-equal` mixin within a `describe` and `it` block. This asserts that the output of a Sass function matches the expected value. ```scss @include describe('Zip [function]') { @include it('Zips multiple lists into a single multi-dimensional list') { // Assert the expected results @include assert-equal(zip(a b c, 1 2 3), (a 1, b 2, c 3)); } } ``` -------------------------------- ### Legacy Sass import of True Source: https://github.com/oddbird/true/blob/main/README.md Imports the True Sass testing library using the legacy `@import` syntax. This is for older projects that have not yet migrated to the `@use` rule. ```scss // Path may vary @import '../node_modules/sass-true/sass/true'; // Variable is named $true-terminal-output ``` -------------------------------- ### Test Sass values with test-module and test Source: https://github.com/oddbird/true/blob/main/README.md An alternative syntax for testing Sass values using `test-module` and `test` mixins. This provides a more structured way to group and define individual tests. ```scss @include test-module('Zip [function]') { @include test('Zips multiple lists into a single multi-dimensional list') { // Assert the expected results @include assert-equal(zip(a b c, 1 2 3), (a 1, b 2, c 3)); } } ``` -------------------------------- ### Assert Sass Value Inequality with assert-unequal() Source: https://context7.com/oddbird/true/llms.txt Shows how to use `assert-unequal()` to check if two Sass values are different. This is useful for testing scenarios where inequality is expected, such as comparing different data types or units. ```scss @use 'pkg:sass-true' as *; @include describe('assert-unequal examples') { @include it('Strings and numbers are different types') { @include assert-unequal(1em, '1em'); } @include it('Different units are unequal') { @include assert-unequal(100px, 100%); } @include it('Lists with different delimiters are unequal') { @include assert-unequal((a b c), (a, b, c)); } } ``` -------------------------------- ### Commit Changes with Yarn Source: https://github.com/oddbird/true/blob/main/CONTRIBUTING.md Performs linting and testing before committing changes. This command ensures code quality and test coverage before submitting. ```bash yarn commit ``` -------------------------------- ### Test CSS output with assert, output, and expect Source: https://github.com/oddbird/true/blob/main/README.md Tests the CSS output generated by Sass mixins. It uses an `assert` mixin containing `output` and `expect` blocks to compare the actual generated CSS with the desired CSS. ```scss // Test CSS output from mixins @include it('Outputs a font size and line height based on keyword') { @include assert { @include output { @include font-size('large'); } @include expect { font-size: 2rem; line-height: 3rem; } } } ``` -------------------------------- ### Display True test summary report Source: https://github.com/oddbird/true/blob/main/README.md Includes a summary report of the Sass tests. This can be displayed in the terminal output or as CSS output, providing a concise overview of test results. ```scss @include report; ``` -------------------------------- ### Sass Unit Testing with Oddbird True Source: https://context7.com/oddbird/true/llms.txt This snippet demonstrates a complete Sass unit test file using the Oddbird True library. It includes tests for Sass functions (`double`, `clamp-value`) and mixins (`visually-hidden`), utilizing various assertion methods like `assert-equal`, `assert`, `output`, and `contains`. The tests are structured using `describe` and `it` blocks, and the report is generated with `report`. ```scss // test/utilities.test.scss @use 'sass:math'; @use 'sass:color'; @use 'pkg:sass-true' as * with ( $terminal-output: false ); // Functions to test @function double($n) { @return $n * 2; } @function clamp-value($value, $min, $max) { @return math.max($min, math.min($value, $max)); } // Mixins to test @mixin visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } // Test suites @include describe('double() function') { @include it('Doubles positive numbers') { @include assert-equal(double(5), 10); @include assert-equal(double(100), 200); } @include it('Doubles negative numbers') { @include assert-equal(double(-3), -6); } @include it('Handles zero') { @include assert-equal(double(0), 0); } } @include describe('clamp-value() function') { @include it('Returns value when within range') { @include assert-equal(clamp-value(50, 0, 100), 50); } @include it('Returns min when value is too low') { @include assert-equal(clamp-value(-10, 0, 100), 0); } @include it('Returns max when value is too high') { @include assert-equal(clamp-value(150, 0, 100), 100); } } @include describe('visually-hidden mixin') { @include it('Outputs all required properties') { @include assert { @include output { @include visually-hidden; } @include expect { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } } } @include it('Contains position absolute') { @include assert { @include output { @include visually-hidden; } @include contains { position: absolute; } } } } // Output test report @include report; ``` -------------------------------- ### report() Source: https://context7.com/oddbird/true/llms.txt Outputs a summary of test results. This mixin should be placed at the end of your test file to provide an overview of the test execution. It can optionally send output to the terminal and control whether compilation fails on errors. ```APIDOC ## report() ### Description Outputs a summary of test results to CSS and optionally to the terminal. Place at the end of your test file. ### Method `report()` or `report($fail-on-error: true)` or `report($terminal: false)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as * with ( $terminal-output: true ); @include describe('My tests') { @include it('First test') { @include assert-equal(1 + 1, 2); } @include it('Second test') { @include assert-true(true); } } // Output summary at end of tests @include report; // With fail-on-error to stop compilation on failures @include report($fail-on-error: true); // Override terminal output setting @include report($terminal: false); ``` ### Response #### Success Response (200) Outputs a test summary. The exact format depends on the configuration (e.g., terminal output, CSS comments). #### Response Example ``` // SassTrue test summary: 2 passed, 0 failed ``` ``` -------------------------------- ### Enable Watch Mode for Sass Files Source: https://github.com/oddbird/true/blob/main/README.md Configure Vitest or Jest to detect changes in Sass files during watch mode. ```APIDOC ## Enable Watch Mode for Sass Files By default, `vitest --watch` and `jest --watch` don't detect Sass file changes. ### Vitest Solution Add Sass files to `forceRerunTriggers` in `vitest.config.js`: ```javascript // vitest.config.js const { defineConfig } = require('vitest/config'); module.exports = defineConfig({ test: { forceRerunTriggers: ['**/*.scss'], }, }); ``` See [Vitest documentation](https://vitest.dev/config/forcereruntriggers.html#forcereruntriggers) for details. ### Jest Solution Add `"scss"` to `moduleFileExtensions` in `jest.config.js`: ```javascript // jest.config.js module.exports = { moduleFileExtensions: ['js', 'json', 'scss'], }; ``` See [Jest documentation](https://jestjs.io/docs/configuration#modulefileextensions-arraystring) for details. ``` -------------------------------- ### runSass() API Source: https://github.com/oddbird/true/blob/main/README.md The core API for running Sass tests with Sass True. This function takes configuration, Sass source, and optional Sass options. ```APIDOC ## `runSass()` API This API compiles and runs Sass tests. ### Method `sassTrue.runSass(testRunnerConfig, sassPathOrSource, sassOptions)` ### Parameters #### `testRunnerConfig` (object, required) Configuration object for the test runner. - **`describe`** (function) - Required - Your test runner's `describe` function. - **`it`** (function) - Required - Your test runner's `it` function. - **`sass`** (string or object) - Optional - Sass implementation name (`'sass'` or `'sass-embedded'`) or instance. Auto-detected if not provided. - **`sourceType`** (`'string'` or `'path'`) - Optional - Set to `'string'` to compile inline Sass source instead of file path (default: `'path'`). - **`contextLines`** (number) - Optional - Number of CSS context lines to show in parse errors (default: `10`). #### `sassPathOrSource` (`'string'` or `'path'`, required) - File path to Sass test file, or - Inline Sass source code (if `sourceType: 'string'`). #### `sassOptions` (object, optional) Standard [Sass compile options](https://sass-lang.com/documentation/js-api/interfaces/Options) (`importers`, `loadPaths`, `style`, etc.). **Default modifications by True:** - `loadPaths`: True's sass directory is automatically added (allowing `@use 'true';`). - `importers`: [Node.js package importer][pkg-importer] added if `importers` is not defined and Dart Sass ≥ v1.71 (allowing `@use 'pkg:sass-true' as *;`). **Warning:** Must use `style: 'expanded'` (default). `style: 'compressed'` is not supported. ### Request Example (Multiple Test Files) ```javascript sassTrue.runSass({ describe, it }, path.join(__dirname, 'functions.test.scss')); sassTrue.runSass({ describe, it }, path.join(__dirname, 'mixins.test.scss')); ``` ### Request Example (Other Test Runners) ```javascript // Example with custom test runner import { suite, test } from 'my-test-runner'; sassTrue.runSass( { describe: suite, it: test }, path.join(__dirname, 'test.scss'), ); ``` ### Request Example (Custom Importers) ```javascript import path from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const importers = [ { findFileUrl(url) { if (!url.startsWith('~')) { return null; } return new URL( pathToFileURL(path.resolve('node_modules', url.substring(1))), ); }, }, ]; const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile, { importers }); ``` ``` -------------------------------- ### Run Sass Tests with runSass API Source: https://github.com/oddbird/true/blob/main/README.md The `sassTrue.runSass()` function executes Sass tests. It requires a test runner configuration object (with `describe` and `it` functions), the Sass file path or source, and optional Sass compilation options. ```javascript sassTrue.runSass(testRunnerConfig, sassPathOrSource, sassOptions); ``` -------------------------------- ### Configure Sass True Terminal Output Source: https://context7.com/oddbird/true/llms.txt Shows how to configure the $terminal-output variable in Sass True. Set to `true` for standalone compilation or `false` when using JavaScript test runners that handle their own reporting. ```scss // Standalone Sass compilation - enable terminal output @use 'pkg:sass-true' as * with ( $terminal-output: true ); // With JavaScript test runner - disable terminal output @use 'pkg:sass-true' as * with ( $terminal-output: false ); ``` -------------------------------- ### Run Multiple Sass Test Files Source: https://github.com/oddbird/true/blob/main/README.md Execute multiple Sass test files by calling `sassTrue.runSass()` for each file. This is useful for organizing tests into different categories or modules. ```javascript sassTrue.runSass({ describe, it }, path.join(__dirname, 'functions.test.scss')); sassTrue.runSass({ describe, it }, path.join(__dirname, 'mixins.test.scss')); ``` -------------------------------- ### Import True in Sass without package importer Source: https://github.com/oddbird/true/blob/main/README.md Imports the True Sass testing library directly from its location within the node_modules directory. This method is used when a package importer is not available or configured. ```scss // Path may vary based on your project structure @use '../node_modules/sass-true' as *; ``` -------------------------------- ### JavaScript Test Runner Integration with runSass() Source: https://context7.com/oddbird/true/llms.txt Shows how to integrate Sass True tests into JavaScript test runners like Mocha, Jest, or Vitest using the `runSass()` function. This enables automated testing and provides enhanced reporting capabilities for Sass code. It supports compiling Sass files, using custom Sass options, specifying the Sass implementation, and compiling inline Sass strings. ```javascript // test/sass.test.js import path from 'node:path'; import { fileURLToPath } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); // Basic usage - compile a Sass test file const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile); // With custom Sass options sassTrue.runSass( { describe, it }, path.join(__dirname, 'test.scss'), { loadPaths: ['node_modules', 'src/sass'] } ); // Specify Sass implementation sassTrue.runSass( { describe, it, sass: 'sass-embedded' }, path.join(__dirname, 'test.scss') ); // Compile inline Sass string instead of file sassTrue.runSass( { describe, it, sourceType: 'string' }, ` @use 'true' as *; @include describe('Inline test') { @include it('Works with strings') { @include assert-equal(1 + 1, 2); } } ` ); // Multiple test files sassTrue.runSass({ describe, it }, path.join(__dirname, 'functions.test.scss')); sassTrue.runSass({ describe, it }, path.join(__dirname, 'mixins.test.scss')); ``` -------------------------------- ### Import True in Sass with Node.js package importer Source: https://github.com/oddbird/true/blob/main/README.md Imports the True Sass testing library using the Node.js package importer. This allows using True's functions and mixins within your Sass test files. ```scss @use 'pkg:sass-true' as *; ``` -------------------------------- ### Generate Test Reports with report() in Sass Source: https://context7.com/oddbird/true/llms.txt Outputs a summary of test results to the console and/or CSS output. The `report()` function should be placed at the end of your test file. It can be configured to output to the terminal and optionally stop compilation on failures. ```scss @use 'pkg:sass-true' as * with ( $terminal-output: true ); @include describe('My tests') { @include it('First test') { @include assert-equal(1 + 1, 2); } @include it('Second test') { @include assert-true(true); } } // Output summary at end of tests @include report; // With fail-on-error to stop compilation on failures @include report($fail-on-error: true); // Override terminal output setting @include report($terminal: false); ``` -------------------------------- ### assert-false() / is-falsy() Source: https://context7.com/oddbird/true/llms.txt Asserts that a given value is falsey. This mixin is used to check for conditions that should evaluate to false, including null, false, empty lists, and empty strings. ```APIDOC ## assert-false() / is-falsy() ### Description Asserts that a value is falsey. Includes null, false, empty lists, and empty strings. ### Method `assert-false(value)` or `is-falsy(value)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as *; @include describe('Falsiness tests') { @include it('null is falsey') { @include assert-false(null); } @include it('false is falsey') { @include assert-false(false); } @include it('Empty strings are falsey') { @include assert-false(''); } @include it('Empty lists are falsey') { @include assert-false(()); } } ``` ### Response #### Success Response (200) No direct response, assertion passes if the value is falsey. #### Response Example None ``` -------------------------------- ### JavaScript shim to run Sass tests Source: https://github.com/oddbird/true/blob/main/README.md A JavaScript file that uses `sass-true` to execute Sass test files. This shim is essential for integrating Sass tests into JavaScript test runners like Mocha, Jest, or Vitest. ```javascript import path from 'node:path'; import { fileURLToPath } from 'node:url'; import sassTrue from 'sass-true'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const sassFile = path.join(__dirname, 'test.scss'); sassTrue.runSass({ describe, it }, sassFile); ``` -------------------------------- ### Enable Sass Watch Mode in Jest Source: https://github.com/oddbird/true/blob/main/README.md Configure Jest to recognize Sass files by adding 'scss' to the `moduleFileExtensions` array in `jest.config.js`. This allows Jest to process Sass files during watch mode. ```javascript // jest.config.js module.exports = { moduleFileExtensions: ['js', 'json', 'scss'], }; ``` -------------------------------- ### Import True in Sass with JavaScript test runner Source: https://github.com/oddbird/true/blob/main/README.md Imports the True Sass testing library for use with a JavaScript test runner. This import path is typically used when integrating True into frameworks like Mocha or Jest. ```scss @use 'true' as *; ``` -------------------------------- ### Assert Falsiness with assert-false() and is-falsy() in Sass Source: https://context7.com/oddbird/true/llms.txt Asserts that a given value is falsey. This function is used to test conditions where null, false, empty lists, and empty strings are expected to evaluate to false. It helps ensure that specific values are correctly interpreted as false. ```scss @use 'pkg:sass-true' as *; @include describe('Falsiness tests') { @include it('null is falsey') { @include assert-false(null); } @include it('false is falsey') { @include assert-false(false); } @include it('Empty strings are falsey') { @include assert-false(''); } @include it('Empty lists are falsey') { @include assert-false(()); } } ``` -------------------------------- ### contains() Source: https://context7.com/oddbird/true/llms.txt Asserts that the generated CSS output contains a specified subset of CSS rules. This is useful when you only need to verify certain properties without matching the entire output. ```APIDOC ## contains() ### Description Asserts that the output CSS contains the expected CSS subset. Useful for testing partial output without matching everything. ### Method `assert { @include output { ... } @include contains { ... } }` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as *; @mixin card($shadow: true) { display: flex; flex-direction: column; padding: 16px; border-radius: 8px; @if $shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } } @include describe('card mixin') { @include it('Contains flex layout properties') { @include assert { @include output { @include card; } @include contains { display: flex; flex-direction: column; } } } @include it('Can check multiple CSS blocks') { @include assert { @include output { @include card; } @include contains { padding: 16px; } @include contains { border-radius: 8px; } } } } ``` ### Response #### Success Response (200) No direct response, assertion passes if the output CSS contains all specified subsets. #### Response Example None ``` -------------------------------- ### Sass error() Function for Catchable Errors Source: https://context7.com/oddbird/true/llms.txt Demonstrates the use of the `error()` function in Sass for handling errors within functions. When `$catch-errors` is enabled, it returns the error message as a string, allowing for programmatic error checking. This is useful for validating inputs and preventing unexpected behavior. ```scss @use 'sass:meta'; @use 'pkg:sass-true' as *; $catch-errors: true; @function safe-divide($a, $b) { @if meta.type-of($a) != 'number' or meta.type-of($b) != 'number' { @return error( $message: 'Both arguments must be numbers', $source: 'safe-divide()', $catch: true ); } @if $b == 0 { @return error( $message: 'Cannot divide by zero', $source: 'safe-divide()' ); } @return $a / $b; } @include describe('safe-divide function') { @include it('Returns error string for invalid input') { @include assert-equal( safe-divide('hello', 5), 'ERROR [safe-divide()]: Both arguments must be numbers' ); } @include it('Returns error string for division by zero') { @include assert-equal( safe-divide(10, 0), 'ERROR [safe-divide()]: Cannot divide by zero' ); } } ``` -------------------------------- ### assert-true() / is-truthy() Source: https://context7.com/oddbird/true/llms.txt Asserts that a given value is truthy. This mixin is useful for verifying conditions where a non-empty value is expected. Empty lists and strings are considered falsey. ```APIDOC ## assert-true() / is-truthy() ### Description Asserts that a value is truthy. Empty lists and strings are considered falsey. ### Method `assert-true(value)` or `is-truthy(value)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as *; @include describe('Truthiness tests') { @include it('Non-empty strings are truthy') { @include assert-true('Hello World'); } @include it('Non-zero numbers are truthy') { @include assert-true(42); @include assert-true(-1); } @include it('Non-empty lists are truthy') { @include assert-true((a, b, c)); } @include it('Colors are truthy') { @include assert-true(red); } } ``` ### Response #### Success Response (200) No direct response, assertion passes if the value is truthy. #### Response Example None ``` -------------------------------- ### Sass error() Mixin for Catchable Errors Source: https://context7.com/oddbird/true/llms.txt Illustrates the `error()` mixin in Sass for handling errors within mixins. When `$catch-errors` is active, it outputs errors as CSS comments, providing feedback during development without breaking the CSS output. This is beneficial for validating mixin arguments. ```scss @use 'sass:meta'; @use 'pkg:sass-true' as *; @mixin set-width($value) { @if meta.type-of($value) != 'number' { @include error( $message: '$value must be a number', $source: 'set-width()', $catch: true ); } @else { width: $value; } } @include describe('set-width mixin') { @include it('Outputs width for valid input') { @include assert { @include output { @include set-width(100px); } @include expect { width: 100px; } } } @include it('Outputs error comment for invalid input') { @include assert { @include output { @include set-width('invalid'); } @include contains-string('ERROR [set-width()]:'); } } } ``` -------------------------------- ### contains-string() Source: https://context7.com/oddbird/true/llms.txt Asserts that the generated CSS output contains a specific substring. This is helpful for verifying the presence of particular functions, values, or keywords within the compiled CSS. ```APIDOC ## contains-string() ### Description Asserts that the output CSS contains a specific substring. Useful for partial string matching. ### Method `assert { @include output { ... } @include contains-string('substring') }` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```scss @use 'pkg:sass-true' as *; @mixin responsive-font($min, $max) { font-size: clamp(#{$min}, 2vw + 1rem, #{$max}); } @include describe('responsive-font mixin') { @include it('Contains clamp function') { @include assert { @include output { @include responsive-font(14px, 24px); } @include contains-string('clamp('); } } @include it('Contains multiple expected substrings') { @include assert { @include output { @include responsive-font(1rem, 2rem); } @include contains-string('1rem'); @include contains-string('2rem'); @include contains-string('2vw'); } } } ``` ### Response #### Success Response (200) No direct response, assertion passes if the output CSS contains the specified substring. #### Response Example None ``` -------------------------------- ### Check CSS Subset with contains() in Sass Source: https://context7.com/oddbird/true/llms.txt Asserts that the generated CSS output contains a specific subset of CSS properties and values. This is useful for testing partial output without needing to match the entire CSS block, allowing for more flexible testing of mixin behavior. ```scss @use 'pkg:sass-true' as *; @mixin card($shadow: true) { display: flex; flex-direction: column; padding: 16px; border-radius: 8px; @if $shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } } @include describe('card mixin') { @include it('Contains flex layout properties') { @include assert { @include output { @include card; } @include contains { display: flex; flex-direction: column; } } } @include it('Can check multiple CSS blocks') { @include assert { @include output { @include card; } @include contains { padding: 16px; } @include contains { border-radius: 8px; } } } } ``` -------------------------------- ### Enable Sass Watch Mode in Vitest Source: https://github.com/oddbird/true/blob/main/README.md Configure Vitest to watch Sass files for changes by adding them to the `forceRerunTriggers` option in `vitest.config.js`. This ensures that tests are re-run when Sass files are modified. ```javascript // vitest.config.js module.exports = defineConfig({ test: { forceRerunTriggers: ['**/*.scss'], }, }); ``` -------------------------------- ### Assert Truthiness with assert-true() and is-truthy() in Sass Source: https://context7.com/oddbird/true/llms.txt Asserts that a given value is truthy. This function is useful for verifying conditions where non-empty strings, non-zero numbers, non-empty lists, and colors are expected to evaluate to true. Empty lists and strings are considered falsey. ```scss @use 'pkg:sass-true' as *; @include describe('Truthiness tests') { @include it('Non-empty strings are truthy') { @include assert-true('Hello World'); } @include it('Non-zero numbers are truthy') { @include assert-true(42); @include assert-true(-1); } @include it('Non-empty lists are truthy') { @include assert-true((a, b, c)); } @include it('Colors are truthy') { @include assert-true(red); } } ``` -------------------------------- ### Verify Substring Presence with contains-string() in Sass Source: https://context7.com/oddbird/true/llms.txt Asserts that the generated CSS output contains a specific substring. This function is valuable for testing parts of a string within the CSS, such as checking for the presence of CSS functions like `clamp()` or specific values. ```scss @use 'pkg:sass-true' as *; @mixin responsive-font($min, $max) { font-size: clamp(#{$min}, 2vw + 1rem, #{$max}); } @include describe('responsive-font mixin') { @include it('Contains clamp function') { @include assert { @include output { @include responsive-font(14px, 24px); } @include contains-string('clamp('); } } @include it('Contains multiple expected substrings') { @include assert { @include output { @include responsive-font(1rem, 2rem); } @include contains-string('1rem'); @include contains-string('2rem'); @include contains-string('2vw'); } } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.