@depack/context


@depack/context is The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.

``sh
yarn add -E @depack/context
`

Table Of Contents

- Table Of Contents
- API
- class JSXContext
getVNode(input: string, context?: ): Preact.VNode
* render(vnode: VNode, opts?: RenderConfig, contexts?: {}): string
* RenderConfig
- Using In A Test
- Copyright

API

The package is available by importing its default function:

`js
import JSXContext from '@depack/context'
`

class JSXContext

This instance of the test context provides the testing API for JSX components.

$3

Transforms the string input into JSX VNode. The global variables and references can be passed in the context.

`jsx
/ yarn example/ /
import JSXContext from '@depack/context'

const Container = ({ children }) => ({
children
})

const context = new JSXContext()
const s = context.getVNode(


,
{ Container },
)
`
`js
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 }
`

$3

Renders the JSX into the string.

import('preact').VNode __VNode__

__RenderConfig__: Rendering options.

| Name | Type | Description | Default |
| ---------- | --------- | ----------------------------------------------------------------------------------------------------------------- | ------- |
| addDoctype | _boolean_ | Adds the at the beginning of the return string. | false |
| shallow | _boolean_ | If true, renders nested Components as HTML elements (). | 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 |

`jsx
import JSXContext from '@depack/context'

const context = new JSXContext()
const s = context.render(


,
{ pretty: true })
console.log(s)
`
`js

Example

`

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.

`js
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:

`html
// returns the correct output


/ expected /



/**/
`

Each mask setup will pass its properties and point to other input files:

`js
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.

`html
// returns the correct output


/ expected /


/**/

// prettifies dangerously set inner html

/ expected /
class="form-text text-muted">
Your name, your name, what is your name?

/**/
``

Copyright

	© Art Deco for Depack 2019		Tech Nation Visa Sucks