Backbone models represent the core method of storing states within our application. When we create a view, we base it on the data contained in the underlying models. When we respond to user interaction, we store the results of this interaction in a model, and so correctly setting and getting values from our models is a fundamental feature of our application. In production applications, these models are generally created, or hydrated from JSON data that is retrieved from a REST endpoint. It is therefore important to test that our models can be created correctly, and that getting or setting values on our model works as intended.

When we construct a Backbone model, we use a POJO within the constructor to assign values to each of the models properties. Hence, when faced with the following interface:

interface IClickableItem { 
    DisplayName: string; 
    Id: number; 
} 

We construct a new instance of our ItemModel class, as follows:

itemModel = new ItemModel({Id : 1, DisplayName : 'testDisplay'});

Remember that internally, Backbone stores these POJO values as attributes on the class instance itself, which leads us to some boilerplate code when writing a TypeScript version of a Backbone.Model, as follows:

class ItemModel extends Backbone.Model implements IClickableItem { 
    get DisplayName(): string  
        { return this.get('DisplayName'); } 
    set DisplayName(value: string)  
        { this.set('DisplayName', value); } 
    get Id(): number { return this.get('Id'); } 
    set Id(value: number) { this.set('Id', value); } 
    constructor(input: IClickableItem) { 
        super(); 
     this.set(input); 
    } 
} 

Each property in our interface (in this case, IClickableItem ) must define a pair of get and set functions, and use Backbone's this.get or this.set functions to store these properties correctly. As we are writing code to get this done, we need to write unit tests to ensure that this works correctly.

Our initial set of unit tests are as follows:

describe('ItemModel tests', () => { 
    let itemModel : ItemModel; 
    beforeEach( () => { 
        itemModel = new ItemModel( 
            {Id : 10, DisplayName : 'testDisplayName'} 
        ); 
    }); 
    it('should assign an Id property', () => { 
        expect(itemModel.Id).toBe(10); 
    }); 
    it('should assign a DisplayName property', () => { 
        expect(itemModel.DisplayName).toBe('testDisplayName'); 
    }); 
}); 

Here, we are defining a variable to hold an instance of our ItemModel, named itemModel. Note that its definition is outside of the beforeAll function, and so it is available to each of our unit tests. Our beforeEach function initializes an instance of the ItemModel class, with default values, for each of our tests to reuse.

The first test, named 'should assign an Id property', is checking that the Id property returns the same value as was used in the constructor, which in this case is 10. Likewise, we have another test for the DisplayName property, and can check that its value is, in fact, 'testDisplayName'.

We can now extend these tests to verify that the set functions work correctly, as follows:

it('should set an Id property', () => { 
    itemModel.Id = -10; 
    expect(itemModel.Id).toBe(-10); 
}); 
it('should set a DisplayName property', () => { 
    itemModel.DisplayName = 'updatedDisplayName'; 
    expect(itemModel.DisplayName).toBe('updatedDisplayName'); 
}); 

As an added set of tests, we can even bypass the set and get functions, and verify that the underlying Backbone functions also set the properties correctly, as follows:

it('should update the Id property when calling calling set', () => { 
    itemModel.set('Id', 99); 
    expect(itemModel.Id).toBe(99); 
}); 
it('should update the DisplayName property when calling set', () => { 
    itemModel.set('DisplayName', 'setDisplayName'); 
    expect(itemModel.DisplayName).toBe('setDisplayName'); 
}); 

Here, we are testing that the internal set and get Backbone functions accomplish exactly the same thing as using the TypeScript property getter and setter syntax.