fluent-wrapper

Extends the ReactWrapper you get when you mount/shallow a component with Enzyme with a set of functions that let you find/click/change/etc elements in a fluent way.

Currently supported events:

• find
• click
• change
• focus
• blur
• and all the events provided by enzyme's simulate

Why fluent-wrapper?

• maintainability: keep all the selectors in a single place, the specs, so you don't mix this mapping with the test logic.

  const specs = [{
      name:'mainForm', 
      selector:'form.main',
      children:[
          {name:'email', selector:'input[name="email"]'}
      ]},
  ]

• make your tests fluent

  ui.findMainForm().changeEmail('new@value.com')

Get started

npm install -D fluent-wrapper

import fluentWrapper from 'fluent-wrapper'

    //example of a spec
    const specs = [{name:'randomElement', selector:'p']; 
    
    //pass mounted component and specs to fluentWrapper
    const wrapper = fluentWrapper(mount(<YourComponent whatever={true} />, specs);
    
    //find your element
    const myElement = wrapper.findRandomElement(); // ReactWrapper 
    

API

Properties of a spec.

Property	Mandatory	Type	Description
name	yes	string	unique name you want the element to have. See here how name is used in generated functions.
selector	yes	css selector or React element	It's the same selector you would pass to enzyme
events	no	list of strings	All the events you want to simulate. I.e. events=['click', 'blur'] for confirmButton will generate clickConfirmButton and blurConfirmButton. You can pass any event supported by enzyme's simulate.
children	no	array of specs	You can nest fluent functions, see Example 3.
click (will be deprecated)	no (default=false)	boolean	If enabled it generates the click event (i.e. wrapper.clickConfirmButton())
change (will be deprecated)	no (default=false)	boolean	If enabled generates the change function (i.e. wrapper.changeEmailInput(arg)). You can pass whatever you would pass to enzyme's simulate('change') function.

Spec name conversion

The name is converted to a camel case name and composed with the generated function. See examples below:

Spec name	Generated functions
mybutton	findMybutton, clickMybutton, etc.
Mybutton	findMybutton, clickMybutton, etc.
my button	findMybutton, clickMybutton, etc.
my Button	findMyButton, clickMyButton, etc.
my-button	findMyButton, clickMyButton, etc.

Example1: simple find

    import fluentWrapper from 'fluent-wrapper'
    import {mount} from 'enzyme'
    import MyComponent from '../MyComponent'
    import AnotherComponent from '../AnotherComponent'
    
    const specs = [{name: 'confirmButton',selector:'button'}, {name: 'another', selector: AnotherComponent}]
    
    const wrapper = fluentWrapper(mount(<MyComponent />), specs) 
    
    // The wrapper you get from "mount" has now been extended!
    
    wrapper.findConfirmButton() //returns confirm button's react wrapper
    wrapper.findAnotherComponent() //returns AnotherComponent's react wrapper

Example 2: click

    import fluentWrapper from 'fluent-wrapper'
    import {mount} from 'enzyme'
    import MyComponent from '../MyComponent'
    
    const specs = [{name: 'confirmButton',selector:'button', events:['click']}]
    
    const wrapper = fluentWrapper(mount(<MyComponent />), specs) 
    
    // The wrapper you get from "mount" has now been extended!
    
    wrapper.clickConfirmButton() //generated function will return the button

Example 3: element with children

    import fluentWrapper from 'fluent-wrapper'
    import {mount} from 'enzyme'
    import MyComponent from '../MyComponent'
    
    const specs = [{
        name: 'myForm',
        selector:'form', 
        children:[{name: 'emailField', selector:'[name="email"]'}]
    }]
    
    const wrapper = fluentWrapper(mount(<MyComponent />), specs) 
    
    const foundField = wrapper.findMyForm().findEmailField();

    //NOTE: findEmailField is avaiable only on the return value of findMyForm()
    

Example 4: change

    import fluentWrapper from 'fluent-wrapper'
    import {mount} from 'enzyme'
    import MyComponent from '../MyComponent'
    
    const specs = [{name: 'username',selector:'input[name="user"]', events:['change']}]
    
    const wrapper = fluentWrapper(mount(<MyComponent />), specs) 
    
    // The wrapper you get from "mount" has now been extended!
    
    wrapper.changeUsername({target:{value:'elisa'}}) 

Example 5: multiple events and child elements

    import fluentWrapper from 'fluent-wrapper';
    import {mount} from 'enzyme';
    import MyComponent from '../MyComponent'
    
    const specs = [{
        name: 'myForm',
        selector:'form', 
        events: ['focus'],
        children:[{
            name: 'emailField', 
            selector:'[name="email"]', 
            events['change','blur','focus']
        }],
    }]
    
    const wrapper = fluentWrapper(mount(<MyComponent />), specs) 
    
    wrapper.focusMyForm();
    const form = wrapper.findMyForm();
    form.focusEmailField();
    form.changeEmailField('me@giulioambrogi.com');
    form.blurEmailField();
    

More examples

If you want to see more examples have a look at the test folder