@depack/context is The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.
yarn add -E @depack/context
The package is available by importing its default function:
import JSXContext from '@depack/context'
This instance of the test context provides the testing API for JSX components.
Transforms the string input into JSX VNode. The global variables and references can be passed in the context.
/* yarn example/ */
import JSXContext from '@depack/context'
const Container = ({ children }) => (<body>{
children
}</body>)
const context = new JSXContext()
const s = context.getVNode(
`
<Container>
<div id="id" className="Class" required>
<span>Example</span>
</div>
</Container>`,
{ Container },
)VNode {
nodeName: [Function: Container],
children:
[ VNode {
nodeName: 'div',
children:
[ VNode {
nodeName: 'span',
children: [ 'Example' ],
attributes: {},
key: undefined } ],
attributes:
{ id: 'id',
className: 'Class',
required: '' },
key: undefined } ],
attributes: {},
key: undefined }
Renders the JSX into the string.
import('preact').VNode VNode
RenderConfig: Rendering options.
| Name | Type | Description | Default |
|---|---|---|---|
| addDoctype | boolean | Adds the <!doctype html> at the beginning of the return string. |
false |
| shallow | boolean | If true, renders nested Components as HTML elements (<Foo a="b" />). |
false |
| xml | boolean | If true, uses self-closing tags for elements without children. |
false |
| pretty | boolean | If true, adds whitespace for readability. Pass a string to indicate the indentation character, e.g., \t. |
false |
| lineLength | number | The number of characters on one line above which the line should be split in the pretty mode. |
40 |
import JSXContext from '@depack/context'
const context = new JSXContext()
const s = context.render(
<div id="id" className="Class" required>
<span>Example</span>
</div>,
{ pretty: true })
console.log(s)<div id="id" class="Class" required>
<span>Example</span>
</div>
The test context is made for mask-testing of the applications. A mask test will have the setup script called test/mask/default.js that points to the result mask in its body.
import { makeTestSuite } from 'zoroaster'
import JSXContext from '@depack/context'
import render from '../../src'
export default makeTestSuite('test/result/index.html', {
/**
* @param {string} input
* @param {JSXContext} c
*/
getResults(input, { getVNode }) {
const test = getVNode(input)
const res = render(test)
return res
},
context: [JSXContext],
})The actual mappings of inputs to outputs are put in the mask test/result/index.html:
// returns the correct output
<div className="test">
<span>Hello</span> <a href="#">World</a>
</div>
/* expected */
<div class="test"><span>Hello</span> <a href="#">World</a></div>
/**/Each mask setup will pass its properties and point to other input files:
export const pretty = makeTestSuite('test/result/pretty.html', {
/**
* @param {string} input
* @param {JSXContext} c
*/
getResults(input, { getVNode }) {
const test = getVNode(input)
const res = render(test, { pretty: true })
return res
},
context: [JSXContext],
})For example, the pretty-printing adds the additional attribute and points to the results at test/result/pretty.html. The file extension just enables syntax highlighting in those files so it's easier on the eye.
// returns the correct output
<div className="test" required data-attr="render" data-test id="i500" style="display:block;" >
<span className="test" required data-attr="render" data-test id="i501" style="display:block;">
Hello World
</span>
<textarea>
Example Textarea That Has Large Input According To The Preact Logic. We must not new line this value.
</textarea>
</div>
/* expected */
<div class="test" required
data-attr="render" data-test id="i500"
style="display:block;">
<span class="test" required
data-attr="render" data-test id="i501"
style="display:block;">
Hello World
</span>
<textarea>Example Textarea That Has Large Input According To The Preact Logic. We must not new line this value.</textarea>
</div>
/**/
// prettifies dangerously set inner html
<small id="hi70984" class="form-text text-muted" dangerouslySetInnerHTML={{__html: 'Your name, your name, what is your name?'}}></small>
/* expected */
<small id="hi70984"
class="form-text text-muted">
Your name, your name, what is your name?
</small>
/**/
|
© Art Deco for Depack 2019 |
|
Tech Nation Visa Sucks |
|---|
