@depack/context NPM

@depack/context

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

yarn add -E @depack/context

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>
/**/