@depack/context

1.1.2 • Public • Published

@depack/context

npm version

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

yarn add -E @depack/context

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

Copyright

Art Deco © Art Deco for Depack 2019 Tech Nation Visa Tech Nation Visa Sucks

Package Sidebar

Install

npm i @depack/context

Weekly Downloads

1

Version

1.1.2

License

MIT

Unpacked Size

12.3 kB

Total Files

9

Last publish

Collaborators

  • zvr