sham-ui-test-helpers

Install

yarn add sham-ui-test-helpers --dev

API

Table of Contents

• renderer
  • Parameters
  • Examples
• Component
• DI
• RenderResult
  • Properties
• ToJSON
• RenderResultSnapshot
  • Properties
• compile
  • Parameters
  • Examples
• compileAsSFC
  • Parameters
  • Examples

renderer

Render component with options

Parameters

• componentClass Class<Component> Component class for rendering
• componentOptions Object Options (optional, default {})
• context Object Extra root context parameters (optional, default {})

Examples

import Label from './Label.sht';
import renderer from 'sham-ui-test-helpers';

it( 'renders correctly', () => {
    const meta = renderer( Label );

    expect( meta.ctx.ID ).toEqual( 'component' );
    expect( meta.ctx.container.innerHTML ).toEqual( 'Foo' );
} );

import Label from './Label.sht';
import renderer from 'sham-ui-test-helpers';

it( 'snapshot correctly', () => {
    const meta = renderer( Label );

    expect( meta.toJSON() ).toMatchSnapshot()
} );

Returns RenderResult

Component

• **See: https://github.com/sham-ui/sham-ui#component **

sham-ui component

DI

• **See: https://github.com/sham-ui/sham-ui#DI **

sham-ui di container

RenderResult

Result of renderer

Type: Object

Properties

• component Component Rendered component instance
• DI DI Container, used for render
• ctx Object Context of rendered component
• toJSON ToJSON Dump to JSON for jest's snapshot testing

ToJSON

Function for dump render result (using for jest-snapshots)

Type: Function

Returns RenderResultSnapshot

RenderResultSnapshot

Type: Object

Properties

• html string Rendered html
• Options Object Component options

compile

Compile component. Can call with mapping object

Parameters

• arg (string | Object)

Examples

import renderer, { compile } from 'sham-ui-test-helpers';
it( 'inline', () => {
  const meta = renderer(
      compile`
          <main>
              <div>
                  {{title}}
              </div>
              <div>
                  {{content}}
              </div>
          </main>

      `,
      {
          title: 'title from options',
          content: 'content from options'
      }
  );
  expect( meta.toJSON() ).toMatchSnapshot();
  expect( meta.component ).toBeInstanceOf( Component );
  meta.component.update( {
      title: 'new title',
      content: 'new content'
  } );
  expect( meta.toJSON() ).toMatchSnapshot();
} );

import renderer, { compile } from 'sham-ui-test-helpers';
it( 'inline with mappings', () => {
  const meta = renderer(
      compile( {
          TitleComponent: compile`<h1>{{text}}</h1>`
      } )`
          <TitleComponent text={{title}}/>

          <main>
              <div>
                  {{title}}
              </div>
              <div>
                  {{content}}
              </div>
          </main>

      `,
      {
          title: 'title from options',
          content: 'content from options'
      }
  );
  expect( meta.toJSON() ).toMatchSnapshot();
  expect( meta.component ).toBeInstanceOf( Component );
  meta.component.update( {
      title: 'new title',
      content: 'new content'
  } );
  expect( meta.toJSON() ).toMatchSnapshot();
} );

Returns (Component | Function)

compileAsSFC

Compile as single file component (SFС). Also can call with mapping object

Parameters

• arg (string | Object)

Examples

import renderer, { compileAsSFC } from 'sham-ui-test-helpers';
it( 'sfc', () => {
  const meta = renderer(
      compileAsSFC`
          <template>
              <div>
                  {{title}}
              </div>
              <div>
                  {{content}}
              </div>
          </template>

          <script>
              function dummy( options ) {
                  const title = ref();
                  const content = ref();
                  options( {
                      [ title ]: 'Default title',
                      [ content ]: 'Default content'
                  } )
              }
              export default( Template, dummy );
          </script>
      `,
      {
          title: 'title from options',
          content: 'content from options'
      }
  );
  expect( meta.toJSON() ).toMatchSnapshot();
  expect( meta.component ).toBeInstanceOf( Component );
  meta.component.update( {
      title: 'new title',
      content: 'new content'
  } );
  expect( meta.toJSON() ).toMatchSnapshot();
} );

import renderer, { compileAsSFC } from 'sham-ui-test-helpers';
it( 'sfc with mappings', () => {
  const meta = renderer(
      compileAsSFC( {
          Header: compile`<header>{{text}}</header>`
      } )`
          <template>
              <Header text={{title}}/>

              <div>
                  {{title}}
              </div>
              <div>
                  {{content}}
              </div>
          </template>

          <script>
              function dummy( options ) {
                  const title = ref();
                  const content = ref();
                  options( {
                      [ title ]: 'Default title',
                      [ content ]: 'Default content'
                  } )
              }
              export default( Template, dummy );
          </script>
      `,
      {
          title: 'title from sfc options',
          content: 'content from sfc options'
      }
  );
  expect( meta.toJSON() ).toMatchSnapshot();
  expect( meta.component ).toBeInstanceOf( Component );
  meta.component.update( {
      title: 'new sfc title',
      content: 'new sfc content'
  } );
  expect( meta.toJSON() ).toMatchSnapshot();
} );

Returns (Component | Function)