When working with forms in our applications, there are generally two things that we need to test. The first is the population of values in a form, and the second is retrieving these values once the user has submitted the form. Remember that in large applications, a user will generally either enter new data into a form (to create something), or the user might be modifying existing data through a form (to update something). This is why we need to test setting the initial values of a form. Our test is as follows:

it("should find form-group input with value", () => { 
    let formGroup = renderedHtml.find('.form-group'); 
    let input = formGroup.find('input'); 
    expect(input.length).toBeGreaterThan(0, 
        'could not find form-group label'); 
    expect(input.attr('value')).toContain('testName'); 
}); 

Here, we have a simple test that is finding the form-group element in the DOM using a CSS selector, and storing the HTML into a variable named formGroup. We are then finding the input element within this form, and checking the attribute named value to ensure that it has been created with the correct default value. Once we are satisfied that the form input has been populated correctly, we can write a test that enters something into the input field, and submits the form as follows:

it("should enter text into input and submit the form", () => { 
    let formGroup = renderedHtml.find('.form-group'); 
    let input = formGroup.find('input'); 
    expect(input.length).toBeGreaterThan(0, 
        'could not find form-group label'); 
    // simulate input into the control 
    input.val('test'); 
    // find and click on the submit button 
    let submit = renderedHtml.find('#submit-button-button'); 
    expect(submit.length).toBe(1, 'could not find submit button'); 
    submit.click(); 
    // check that the submitClicked function was called 
    expect(submitSpy).toHaveBeenCalled(); 
    // check that the property was updated. 
    expect(itemCollectionView.inputNameValue).toBe('test'); 
}); 

Here, our test starts by finding the form-group element using a CSS selector as we have done before. We then find the input element within this HTML, and call the val function to set the value of the input element. This call, that is input.val('test'), is what is simulating user input into the form element. Once we have set the value of the input element successfully, we then search for the Submit button by id, and click it. The act of clicking on the Submit button will call the submitClicked function of our ItemCollectionView class, which will then be able to interrogate each form field and extract the values that the user has entered. Note that we are then checking the value of the inputNameValue property of our view to ensure that it has been updated correctly. We will need a slight modification to our ItemCollectionView class to set this property as follows:

inputNameValue: string | undefined; 
 
submitClick() { 
    let name = this.$el.find('#inputName'); 
    if (name.length > 0) { 
        this.inputNameValue = <string | undefined>name.val(); 
    } else { 
        this.inputNameValue = undefined; 
    } 
} 

Here, we have added an internal property named inputNameValue to our ItemCollectionView class that will store the value that is entered by our user. Note that we have defined this field as being of type string or undefined. The submitClick function has also been updated slightly in order to store the value of the input element into this variable.

Our Backbone test suite is now complete.