@stylable/core-test-kit
@stylable/core-test-kit
is a collection of utilities aimed at making testing Stylable core behavior and functionality easier.
What's in this test-kit?
Matchers
An assortment of Chai
matchers used by Stylable.
flat-match
- flattens and matches passed argumentsresults
- test Stylable transpiled style rules output
Diagnostics tooling
A collection of tools used for testing Stylable diagnostics messages (warnings and errors).
expectWarnings
- processes a Stylable input and checks for diagnostics during processingexpectWarningsFromTransform
- checks for diagnostics after a full transformationshouldReportNoDiagnostics
- helper to check no diagnostics were reported
Testing infrastructure
Used for setting up Stylable instances (processor
/transformer
) and their infrastructure:
generateInfra
- create Stylable basic in memory infrastructure (resolver
, requireModule
, fileProcessor
)generateStylableResult
- genetare transformation results from in memory configurationgenerateStylableRoot
- helper over generateStylableResult
that returns the outputAst
generateStylableExports
- helper over generateStylableResult
that returns the exports
mapping
testInlineExpects
utility
Exposes testInlineExpects
for testing transformed stylesheets that include inline expectation comments. These are the most common type of core tests and the recommended way of testing the core functionality.
Supported checks:
Rule checking (place just before rule) supporting multi-line declarations and multiple @checks
statements
Terminilogy
LABEL: <string>
- label for the test expectationOFFEST: <number>
- offest for the tested rule after the @check
SELECTOR: <string>
- output selectorDECL: <string>
- declaration nameVALUE: <string>
- declaration value
Full options:
Basic - @check SELECTOR
header::before {}
With declarations - @check SELECTOR {DECL1: VALUE1; DECL2: VALUE2;}
This will check full match and order.
.my-mixin {
color: red;
}
.container {
-st-mixin: my-mixin;
}
Target generated rules (mixin) - @check[OFFEST] SELECTOR
.my-mixin {
color: blue;
}
.container {
-st-mixin: my-mixin;
}
Support atrule params (anything between the @atrule and body or semicolon):
@media value(smallScreen) {}
Example
Here we are generating a Stylable AST which lncludes the /* @check SELECTOR */
comment to test the root class selector target.
The testInlineExpects
function performs that actual assertions to perform the test.
it('...', ()=>{
const root = generateStylableRoot({
entry: `/style.st.css`,
files: {
'/style.st.css': {
namespace: 'ns',
content: `
/* @check .ns__root */
.root {}
`
},
});
testInlineExpects(root, 1);
})
Match rules
Exposes two utility functions (matchRuleAndDeclaration
and matchAllRulesAndDeclarations
) used for testing Stylable generated AST representing CSS rules and declarations.
License
Copyright (c) 2019 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.