@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:
importJSXContextfrom'@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/ */importJSXContextfrom'@depack/context'constContainer=({ children })=>(<body>{children}</body>)constcontext=newJSXContext()consts=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').VNodeVNode
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 \t. | false |
| lineLength | number | The number of characters on one line above which the line should be split in the pretty mode. | 40 |
importJSXContextfrom'@depack/context'constcontext=newJSXContext()consts=context.render(<divid="id"className="Class"required><span>Example</span></div>,{pretty: true})console.log(s)<divid="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'importJSXContextfrom'@depack/context'importrenderfrom'../../src'exportdefaultmakeTestSuite('test/result/index.html',{/** * @param {string} input * @param {JSXContext} c */getResults(input,{ getVNode }){consttest=getVNode(input)constres=render(test)returnres},context: [JSXContext],})The actual mappings of inputs to outputs are put in the mask test/result/index.html:
// returns the correct output
<divclassName="test"><span>Hello</span><ahref="#">World</a></div>
/* expected */
<divclass="test"><span>Hello</span><ahref="#">World</a></div>
/**/Each mask setup will pass its properties and point to other input files:
exportconstpretty=makeTestSuite('test/result/pretty.html',{/** * @param {string} input * @param {JSXContext} c */getResults(input,{ getVNode }){consttest=getVNode(input)constres=render(test,{pretty: true})returnres},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
<divclassName="test" requireddata-attr="render" data-testid="i500" style="display:block;" ><spanclassName="test" requireddata-attr="render" data-testid="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 */
<divclass="test" requireddata-attr="render" data-testid="i500"
style="display:block;"><spanclass="test" requireddata-attr="render" data-testid="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
<smallid="hi70984" class="form-text text-muted" dangerouslySetInnerHTML={{__html: 'Your name, your name, what is your name?'}}></small>
/* expected */
<smallid="hi70984"
class="form-text text-muted">
Your name, your name, what is your name?
</small>
/**/
 | © Art Deco for Depack 2019 |  | Tech Nation Visa Sucks |
|---|
