Skip to content

Latest commit

 

History

History
99 lines (84 loc) · 4.03 KB

README.md

File metadata and controls

99 lines (84 loc) · 4.03 KB
Raw

Composable Form Tests

Exposes functions that test your React components to ensure they correctly implement the Composable Form Spec. Assumes a Jest test environment and requires a peer dev dependency of enzyme.

Installation

$ npm i --save-dev composable-form-tests jest-cli babel-jest enzyme

How to Test an "Input" Component

In your input tests file, which will be run by Jest:

import React from 'react';
import { mount } from 'enzyme';
import { testInput } from 'composable-form-tests';
import MyInputComponent from './MyInputComponent';

testInput({
  component: MyInputComponent,
  mount,
  ...<other options>
});

testInput Options

component REQUIRED. The component class that you are testing, which you intend to conform to the Composable Form "Input" Specification
defaultValue REQUIRED. The value that your component has when neither the user nor the containing Form passes in a value prop
exampleValueOne REQUIRED. A value that would make sense for your input. Must be different from the defaultValue and from exampleValueTwo
exampleValueTwo REQUIRED. A value that would make sense for your input. Must be different from exampleValueTwo.
mount REQUIRED. The mount function imported from enzyme package
options OPTIONAL. If your input takes options, the options array.
props OPTIONAL. A props object that should be used as props on the input for all tests
simulateChanging OPTIONAL. If your input ever calls onChanging, use this function to simulate one user action that will cause it to happen.
simulateChanged REQUIRED. Use this function to simulate one user action that will cause onChange to be called.
simulateSubmit OPTIONAL. If your input ever calls onSubmit, use this function to simulate one user action that will cause it to happen.
testGetValue OPTIONAL. Default is false. Set to true to add a test for the getValue() instance function
testIsDirty OPTIONAL. Default is false. Set to true to add a test for the isDirty() instance function
testResetValue OPTIONAL. Default is false. Set to true to add a test for the resetValue() instance function
testSetValue OPTIONAL. Default is false. Set to true to add a test for the setValue() instance function

Basic Input Example

import React from 'react';
import { mount } from 'enzyme';
import { testInput } from 'composable-form-tests';
import Input from './Input';

testInput({
  component: Input,
  defaultValue: null,
  exampleValueOne: 'ONE',
  exampleValueTwo: 'TWO',
  mount,
  simulateChanging(wrapper, value) {
    // Refer to Enzyme documentation
    wrapper.find('input').simulate('change', { target: { value } });
  },
  simulateChanged(wrapper, value) {
    // Refer to Enzyme documentation
    wrapper.find('input').simulate('blur', { target: { value } });
  },
  simulateSubmit(wrapper) {
    // Refer to Enzyme documentation
    wrapper.find('input').simulate('keypress', { which: 13 });
  },
});

Select Input Example

import React from 'react';
import { mount } from 'enzyme';
import { testInput } from 'composable-form-tests';
import SelectInput from './SelectInput';

testInput({
  component: SelectInput,
  defaultValue: null,
  exampleValueOne: 'a',
  exampleValueTwo: 'b',
  mount,
  options: [
    { label: 'A', value: 'a' },
    { label: 'B', value: 'b' },
    { label: 'C', value: 'c' },
  ],
  simulateChanged(wrapper, value) {
    // Refer to Enzyme documentation
    wrapper.find('select').simulate('change', { target: { value } });
  },
});