@depack/context
v1.1.2
Published
The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.
Downloads
29
Maintainers
zvrReadme
@depack/context
@depack/context is The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.
yarn add -E @depack/contextTable Of Contents
API
The package is available by importing its default function:
import JSXContext from '@depack/context'class JSXContext
This instance of the test context provides the testing API for JSX components.
getVNode( input: string, context?: *,): Preact.VNode
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 }render( vnode: VNode, opts?: RenderConfig, contexts?: {},): string
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>Using In A Test
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>
/**/