npm install @superflycss/task-testThe superflycss/task-test supports the visual testing of superflycss components and utilities in general and has the following features:
- Nunjucks templating
- Highlights content contained in Test-markup
- Generates a corresponding Test-render block that displays the markup contained in the Test-markup block
The task-test github project contains the example referred to here. First clone the project:
`` console`
git clone https://github.com/superflycss/task-test
Move to the root of the project and install dependencies.
` console`
cd task-test
npm i
Build the test src/test/html/index.html by running:` console`
npm run testsrc/test/html/index.html
The prebuilt contents are shown below. Once is built the markup contained in Test_markup will be highlighted, and a corresponding Test-render block will be generated after the Test_description block. Note that the tree structure of the test markup must match the structure shown.
` <div class="Grid_cell">1/2</div> <div class="Grid_cell">2/2</div> </div>html
Button
When the .Grid container holds 2 .Grid-cell instances.
{% for cell in ['1', '2'] %}
{{cell}}/2
{% endfor %}
Each grid cell occupies the same amount of space witin the grid container row.
``
Post the test build the content looks like this:html``
Button
When the .Grid container holds 2 .Grid-cell instances.
<div class="Grid">
<!-- Use Nunjucks to keep markup DRY -->
Each grid cell occupies the same amount of space witin the grid container row.
1/2
2/2
...