Skip to content
The Test Context To Render JSX Into Strings For Mask Testing With Zoroaster.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.documentary/section-breaks add render Feb 17, 2019
.vscode
build c110 Feb 17, 2019
documentary evaluate context Feb 17, 2019
example up render + pretty doc Feb 17, 2019
src evaluate context Feb 17, 2019
test
types initialise package Feb 17, 2019
.alamoderc.json initialise package Feb 17, 2019
.eslintignore
.eslintrc add doc Feb 17, 2019
.gitignore initialise package Feb 17, 2019
CHANGELOG.md
LICENSE initialise package Feb 17, 2019
README.md up render + pretty doc Feb 17, 2019
package.json v1.1.2 Mar 6, 2019
yarn.lock test booleans + up zoroaster Mar 6, 2019

README.md

@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

You can’t perform that action at this time.