{"id":1613,"date":"2014-12-29T14:58:48","date_gmt":"2014-12-29T12:58:48","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1613"},"modified":"2014-12-29T14:58:48","modified_gmt":"2014-12-29T12:58:48","slug":"avoid-test-code-duplication-in-jasmine-tests","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/avoid-test-code-duplication-in-jasmine-tests\/","title":{"rendered":"Avoid test code duplication in Jasmine tests"},"content":{"rendered":"

Test code has to be treated like production code. Obviously we cannot charge the customer for it, it’s something that helps us developers to make sure we keep our codebase healthy, which ultimately is the responsibility we have towards our customers. Thus we need to apply the same best practices principles as we do for our production code, where, code duplication is evil.<\/p>\n

Let’s quickly take a look at some Angular code and the corresponding Jasmine test. I have the following Angular Provider which holds some functionality for handling the application menu.
\n 
\n <\/p>\n

function menuProvider(){\r\n\r\n    \/\/ expose the provider contract\r\n    this.addMenuEntry = addMenuEntry;\r\n    ...\r\n\r\n    \/\/ expose the service contract\r\n    this.$get = function(){\r\n        var service = {\r\n            addMenuEntry: addMenuEntry\r\n            ...\r\n        }\r\n        return service;\r\n    };\r\n\r\n    \/\/\/\/\/\/\/\/\/\/\/\r\n\r\n    function addMenuEntry(newEntry){\r\n        ...\r\n    }\r\n}<\/pre>\n
It’s not really important, but to understand the context, in Angular you have “Providers” and “Services”. The main difference is their availability during the application lifecycle (i.e. the config vs run phase). So basically if you want to have them available during both phases, you’d do something similar as I did above, namely to expose the exact same contract (or part of it) as a provider and as a service.<\/p>\n
Obviously, I’d like to test the availability and correct functioning of this exposed contract on both, the provider and the service class. This leads to duplicated tests<\/strong>. Let’s see this on the example of this excerpt from a Jasmine test.<\/p>\n
describe('The Menu's', function(){\r\n\r\n    describe('provider interface', function(){\r\n        var provider;\r\n\r\n        beforeEach(function(){\r\n            provider = \/* Angular code to inject the provider *\/;\r\n        });\r\n\r\n        it('should allow to add new menu entries', function(){\r\n            provider.addMenuEntry({\r\n                title: 'Menu title',\r\n                url: 'www.google.com'\r\n            });\r\n\r\n            \/* assertion code here *\/\r\n        });\r\n\r\n    });\r\n\r\n    describe('service interface', function(){\r\n        var service;\r\n\r\n        beforeEach(function(){\r\n            service = \/* Angular code to inject the service *\/\r\n        });\r\n\r\n        it('should allow to add new menu entries', function(){\r\n            service.addMenuEntry({\r\n                title: 'Menu title',\r\n                url: 'www.google.com'\r\n            });\r\n\r\n            \/* assertion code here *\/\r\n        });\r\n\r\n    });\r\n});<\/pre>\n
Refactoring duplications<\/h2>\n
Guess you clearly see the duplication. On the Pivotallabs site there’s a blog post “DRYing up Jasmine Specs with Shared Behavior<\/a>” which describes the possibility to factor out your describe<\/code> statement into a separate function:<\/p>\n
function sharedTests(someParams){\r\n    describe(function(){\r\n        ...\r\n    });\r\n}<\/pre>\n
You can then use that function simply by invoking it within your test code:<\/p>\n
describe('My functionality', function(){\r\n    ...\r\n    sharedTests(...);\r\n})<\/pre>\n
This works like charm, with one exception<\/strong>. Usually factoring out is useful to be able to parameterize the describe<\/code>, in my case to use the same tests, the first time passing in a provider<\/code> instance and then the service<\/code> one. Like..<\/p>\n
describe('The Menu's', function(){\r\n\r\n    describe('provider interface', function(){\r\n        var provider;\r\n\r\n        beforeEach(function(){\r\n            provider = \/* Angular code to inject the provider *\/;\r\n        });\r\n\r\n        \/\/ this is the line of interest!\r\n        executeSharedTests(provider);\r\n    });\r\n\r\n    describe('service interface', function(){\r\n        var service;\r\n\r\n        beforeEach(function(){\r\n            service = \/* Angular code to inject the service *\/\r\n        });\r\n\r\n        \/\/ this is the line of interest!\r\n        executeSharedTests(service);\r\n    });\r\n\r\n    function executeSharedTests(instance){\r\n        ...\r\n    }\r\n});<\/pre>\n
This doesn’t work<\/strong>, for the simple reason that the beforeEach<\/code> is executed after the executeSharedTests(...)<\/code> is being invoked, thus passing in undefined<\/code>.<\/p>\n
To solve this problem<\/strong> you can pass in a constructor function which creates the object lazily when the test is effectively executed.<\/p>\n
describe('The Menu's', function(){\r\n\r\n    describe('service interface', function(){\r\n\r\n        function createInstance(){\r\n            return \/* Angular code to inject the service *\/\r\n        }\r\n\r\n        executedSharedTests(createInstance);\r\n    });\r\n\r\n    executedSharedTests(createInstanceFn){\r\n        describe('when adding a new menu entry', function(){\r\n            var subjectUnderTest;\r\n\r\n            beforeEach(function(){\r\n                \/\/create an instance by invoking the constructor function\r\n                subjectUnderTest = createInstanceFn();\r\n            });\r\n\r\n            it('should allow to add new menu entries', function(){\r\n                ...\r\n            });\r\n        });\r\n    }\r\n});<\/pre>\n
Conclusion<\/h2>\n
So, the whole refactored code now looks like this:<\/p>\n
describe('The Menu's', function(){\r\n\r\n    describe('provider interface', function(){\r\n        var provider;\r\n\r\n        beforeEach(function(){\r\n            provider = \/* Angular code to inject the provider *\/;\r\n        });\r\n\r\n        \/\/ this is the line of interest!\r\n        executeSharedTests(provider);\r\n    });\r\n\r\n    describe('provider interface', function(){\r\n        function createInstance(){\r\n            return \/* Angular code to inject the provider *\/\r\n        }\r\n\r\n        executeSharedTests(createInstance);\r\n    });\r\n\r\n    describe('service interface', function(){\r\n        function createInstance(){\r\n            return \/* Angular code to inject the service *\/\r\n        }\r\n\r\n        executeSharedTests(createInstance);\r\n    });\r\n\r\n    executedSharedTests(createInstanceFn){\r\n        describe('when adding a new menu entry', function(){\r\n            var subjectUnderTest;\r\n\r\n            beforeEach(function(){\r\n                \/\/create an instance by invoking the constructor function\r\n                subjectUnderTest = createInstanceFn();\r\n            });\r\n\r\n            it('should allow to add new menu entries', function(){\r\n                subjectUnderTest.addMenuEntry({\r\n                    title: 'Menu title',\r\n                    url: 'www.google.com'\r\n                });\r\n\r\n                \/* assertion code here *\/\r\n            });\r\n        });\r\n    }\r\n});<\/pre>\n
Related articles<\/h2>\n