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('[email protected]')

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('[email protected]');
    form.blurEmailField();
    

More examples

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