This slide focus on the good reasons for writing unit tests for testing ui.
Much like you're testing ui manually, you can have simple minimal code doing that for you.
12. Automating The Debug Process
1. Add some “watches”
2. Add some “truthy” watches
3. Refresh
4. Try some other input
5. Repeat the “clicks”, “enter”, “keys” in
input
6. Refresh...
19. A UI Test = expecting something to be
What do we check anyway?
1. I expect something to be with a value
2. I expect something to be visible on the
DOM
3. I expect that click will change the search
4. I expect that a right click will show a
context menu, with user permissions
visible
5. I expect “<grid model=”items”>” to
render a data table in the DOM
22. Jasmine.js
by Pivotal
it’s a Standalone
BDD framework
for testing JS code
available on
github
1. Suites - describe()
2. Specs - it()
3. Expectations - expect()
4. Matchers - .not/.toBe()
● Spies
● Stubs
● Async
● skip tests - xit, xdescribe
23. Jasmine Syntax - BDD Style
describe('Gandalf the Gray', function () {
it("should stop balrog passing the bridge", function() {});
it("should save the hobbits when in danger", function() {});
})
24. What Is Karma Test Runner
automate: running tests, ci (jenkins, teamcity..),
multiple browsers, by angularjs team
28. HTML - container rendered
it('should render a dropdown element', function () {
expect(element.hasClass('dropdown')).toBeTruthy();
});
<e-dropdown label="Preset"
items="presets"
on-select="onPresetChange(item)"
icon="tag"
></e-dropdown>
29. HTML - items rendered
it("should render items if given presets", function() {
expect(
element.find('ul li').length)
.toBe(
scope.presets.length
);
});
<e-dropdown label="Preset"
items="presets"
on-select="onPresetChange(item)"
icon="tag"
></e-dropdown>
30. HTML - Content is rendered
it("should render the label according to the 'label' attribute",
function() {
expect(
element.find('.dropdown-toggle').text().trim())
.toBe('Preset')
});
<e-dropdown label="Preset"
items="presets"
on-select="onPresetChange(item)"
icon="tag"
></e-dropdown>
31. Functionality - function called on clicked
it("should call a function when select has changed",function() {
spyOn(scope, 'onPresetChange');
element.isolateScope().handleClick(scope.presets[0]);
expect(scope.onPresetChange).toHaveBeenCalled();
});
<e-dropdown label="Preset"
items="presets"
on-select="onPresetChange(item)"
icon="tag"
></e-dropdown>
32. Functionality using Spy - click
it("should call a function with the selected item when select
has changed", function() {
spyOn(scope, 'onPresetChange');
element.isolateScope().handleClick(scope.presets[0]);
expect(scope.onPresetChange).toHaveBeenCalledWith(scope.presets
[0]);
});
<e-dropdown label="Preset"
items="presets"
on-select="onPresetChange(item)"
icon="tag"
></e-dropdown>
33. Showtime #2 - Testing Ajax
mocks and stubs using angularjs services
34. Preparing Mocks
var mockData = window.mocks[‘video.items.mock’];
var url = /.+search.*/
karma-json-fixtures-preprocessor
add to json paths to configuration of:
files: [ '../tests/mocks/**/*mock.json' ]
preprocessor: {
'../tests/mocks/**/*mock.json': ['json_fixtures']
}
35. Functionality using Spy and Fake
it("set the feed type when changed in YoutubeSearch and perform
search", function(){
httpBackend.whenGET(url).respond(mockData);
spyOn(scope, 'searchYoutube').and.returnValue('done')
spyOn(YoutubeSearchSrv, 'setType').and.callFake(function(){
return 'set';
});
rootScope.$broadcast('feed-type-changed', 'playlist');
scope.$digest();
expect(YoutubeSearchSrv.setType).toHaveBeenCalled();
expect(YoutubeSearchSrv.setType.calls.count()).toEqual(1);
expect(scope.searchYoutube).toHaveBeenCalled();
expect(scope.searchYoutube.calls.count()).toEqual(1);
})
37. Mocking Ajax Call
describe("Media Info :", function() {...})
it("should update the video's title when video has changed",
function() {
var video = mockMediaInfoItems.items[0];
httpBackend.whenGET(/.+videos.*/).respond(mockMediaInfo);
YoutubePlayerSettings.playVideoId(video);
scope.$apply();
expect(scope.vm.video.title).toEqual(video.snippet.title);
});
38. End to End Testing (E2E)
towards the rest of the world
39. What is E2E
tests few pieces together
regarding ui:
web ui = > rest of the world
40. E2E for JS
for angular.js
JS syntax
all browsers
for any js app
Gherkin syntax
all browsers
41. E2E with Pioneer.js
Feature: Simple Feature
Background:
Given I visit Echoes Player
Scenario: Entering Information
When I search for "alice in chains live"
Then I should see 50 results
42. PioneerJS “When” Example
this.When(/^I search for "([^"]*)"$/, function(value){
var MediaSearch = this.Widget.extend({
root: "#media-search",
setSearchQuery: function (val) {
return this.fill(val);
}
})
var search = new MediaSearch();
return this.driver.sleep(10000).then(function(){
search.sendKeys('', Driver.Key.ENTER).then(function(){
search.setSearchQuery(value);
return search.sendKeys(Driver.Key.ENTER);
});
});
});