Pruebas de Integración web con Protractor + Angular.js + Rails

SGCE 2015 Conference

Transcript

1. Enlighten your software Pruebas de integración web con Protractor + Angular + Rails Eduardo Figarola Mota @diabulux
2. Crowd Interactive
3. Contenido • Angular.js • Ruby on Rails • Protractor • Pruebas • Setup • Diferentes tipos de integración • 2 maneras de ejecutar las pruebas • Jasmine • Métodos de Protractor • Ejemplo básico • Refactorización de pruebas • Manejo de datos • Aceleración de pruebas
7. ¿Pruebas?
8. Pruebas de Integración
9. Pruebas E2E
10. ¿Son similares ambos tipos de prueba?
11. ¡Comencemos!
12. Instalando Protractor npm install -g protractor
13. Otra manera: npm init
14. package.json { … "devDependencies": { "protractor": "2.1.0" } }
15. … npm install
16. Tip: /node_modules
17. Configuración // protractor.conf.js exports.config = { baseUrl: 'http://localhost:3000', directConnect: true, specs: [‘test/js/e2e/**/*.spec.js’], suites: { suiteName: ‘path/to/suite/*.spec.js’ } };
18. Listo, tenemos todo configurado. protractor o ./node_modules/protractor/bin/protractor
19. protractor --suite=nombreSuite
20. … alias e2e=./node_modules/protractor/bin/protractor e2e
21. Ruby on Rails & Angular.js
22. … Rails Angular.js API Navegador
23. … Rails Angular.js API Navegador
24. … Rails Angular.js Navegador
25. Las 2 maneras de ejecutar las pruebas.
26. Rails Angular.js API Protractor (Navegador) Aplicación Rápida ejecución con mayor tendencia a falsos positivos.
27. Rails Angular.js API Protractor (Navegador) Aplicación Llamadas API Lenta ejecución con menor tendencia a falsos positivos.
28. Escribiendo las pruebas
29. Anatomía de una prueba en Protractor. // your_feature_spec.js describe('Web application homepage', function() { it('has a correct title', function() { browser.get('/'); var title = browser.getTitle(); expect(title).toEqual('Awesome web app'); }); });
31. Describe describe('The feature to be tested', function() { // The actual tests. });
32. … describe('My amazing web form', function() { describe('when the user is not logged in', function() { // specific tests for the scenario }); describe('when the user is logged in', function() { // specific tests for the scenario }); });
33. It it('the test description goes here', function() { // specific code related to the test // 1 expectation per test });
34. Expect var something = 'Some value'; expect(something).toEqual('Some value');
35. Matchers: toBe() it('compares using toBe() matcher', function() { var foo = 'foo'; var bar = foo; expect(foo).toBe(bar); //true expect(foo).not.toBe(bar); // false });
36. Matchers: toEqual() it('compares using toEqual() matcher', function() { var foo = { bar: 'baz' }; var baz = { bar: 'baz' }; expect(foo).toEqual(baz); // true expect(foo).toBe(baz); // false });
37. Matchers: toMatch() it('compares using toMatch() matcher', function() { var foo = 'The string to be compared'; var baz = 'compared'; var bar = 'hola'; expect(foo).toMatch(baz); // true expect(foo).toMatch(/string/); // true expect(foo).toMatch(bar); // false });
38. Matchers: boolean it('compares using boolean matchers', function() { var foo = 0; var bar = 1; var baz = null; expect(foo).toBeFalsy(); // true expect(bar).toBeTruthy(); // true expect(baz).toBeNull(); // true });
39. Matchers: toContain() it('compares using toContain() matcher', function() { var array = ['foo', 'bar', 'baz']; expect(array).toContain('bar'); // true expect(array).toContain('hello'); // false });
40. Más Matchers • toBeLessThan() • toBeGreaterThan() • toBeCloseTo() • toThrow() • toThrowError()
41. Configuración • beforeEach() • afterEach()
42. beforeEach() var fillInForm = function() { // some code }; beforeEach(function() { fillInForm(); });
43. afterEach() var resetForm = function() { // some code }; beforeEach(function() { resetForm(); });
44. Retomando el camino... // your_feature_spec.js describe('Web application homepage', function() { it('has a correct title', function() { browser.get('/'); var title = browser.getTitle(); expect(title).toEqual('Awesome web app'); }); });
45. Herramientas proporcionadas por Protractor. • browser (object) • element (function) • by (object)
46. browser browser.get('/url-to-load'); browser.refresh(); browser.isElementPresent();
47. element & by element(by.css('button.btn-success')); element(by.id('confirmation-message')); element(by.model('user.first_name')); element(by.binding('telephone')); element.all(by.repeater('user in users'));
48. by.css <button class="btn-success">Enviar</button> element(by.css('button.btn-success'));
49. by.id <div id="confirmation-message"> <div>...</div> </div> element(by.id('confirmation-message'));
50. by.model <input type="text" name=“username" ng-model="user.first_name" /> element(by.model('user.first_name'));
51. by.binding <p>{{telephone}}</p> element(by.binding('telephone'));
52. by.repeater <tr ng-repeat="user in users"> <td>...</td> </tr> element.all(by.repeater('user in users'));
53. Acciones
54. … • click() • sendKeys() • clear() • getAttribute() • getText()
55. // user_search.spec.js describe('Users search', function() { beforeEach(function() { browser.get('/search'); }); describe('when the user does exist', function() { it('shows an element with the full name', function() { var searchInput = element(by.model('user.email')); var doSearchBtn = element(by.css('.btn-success')); var nameElement = element(by.binding('user.name')); searchInput.sendKeys('john@snow.com'); doSearchBtn.click(); expect(nameElement.getText()).toEqual('John Snow'); }); }); });
56. // user_search.spec.js describe('Users search', function() { beforeEach(function() { browser.get('/search'); }); describe('when the user does exist', function() { ... it('shows an element with the job', function() { var searchInput = element(by.model('user.email')); var doSearchBtn = element(by.css('.btn-success')); var jobElement = element(by.binding('user.job')); searchInput.sendKeys('john@snow.com'); doSearchBtn.click(); expect(jobElement.getText()).toEqual('Lord Commander'); }); }); });
57. DRY Don’t Repeat Yourself
58. Page Objects
59. // user_search.page.js var UserSearchPage = function() { this.searchInput = element(by.model('user.email')); this.doSearchBtn = element(by.css('.btn-success')); this.nameElement = element(by.binding('user.name')); this.jobElement = element(by.binding('user.job')); this.get = function() { browser.get('/search'); }; }; module.exports = UserSearchPage;
60. // user_search.spec.js describe('Users search', function() { var UserSearchPage = require('./user_search.page'); var page = new UserSearchPage(); beforeEach(function() { page.get(); }); describe('when the user does exist', function() { it('shows an element with the full name', function() { page.searchInput.sendKeys('john@snow.com'); page.doSearchBtn.click(); expect(page.nameElement.getText()).toEqual('John Snow'); }); it('shows an element with the job', function() { page.searchInput.sendKeys('john@snow.com'); page.doSearchBtn.click(); expect(page.jobElement.getText()).toEqual('Lord Commander'); }); }); });
61. // user_search.spec.js describe('Users search', function() { var UserSearchPage = require('./user_search.page'); var page = new UserSearchPage(); beforeEach(function() { page.get(); }); describe('when the user does exist', function() { beforeEach(function() { page.searchInput.sendKeys('john@snow.com'); page.doSearchBtn.click(); }); it('shows an element with the full name', function() { expect(page.nameElement.getText()).toEqual('John Snow'); }); it('shows an element with the job', function() { expect(page.jobElement.getText()).toEqual('Lord Commander'); }); }); });
62. ¿Qué estamos probando?
63. // user_search_controller.js var App = angular.module('AwesomeApp'); App.controller('UserSearchController', function($scope, search) { $scope.user = { email: null }; $scope.searchUser = function() { search.byEmail($scope.user.email).success(function(user) { $scope.user = user; }); }; });
64. // search_service.js var App = angular.module('AwesomeApp'); App.factory('search', function($http) { var searchByEmail = function(email) { var params = { params: { email: email } }; return $http.get('/users', params); }; return { byEmail: searchByEmail }; });
65. // user_search.spec.js describe('Users search', function() { var UserSearchPage = require('./user_search.page'); var page = new UserSearchPage(); beforeEach(function() { page.get(); }); describe('when the user does exist', function() { beforeEach(function() { page.searchInput.sendKeys('john@snow.com'); page.doSearchBtn.click(); }); it('shows an element with the full name', function() { expect(page.nameElement.getText()).toEqual('John Snow'); }); it('shows an element with the job', function() { expect(page.jobElement.getText()).toEqual('Lord Commander'); }); }); });
66. La aplicación de Rails necesita estar ejecutándose.
67. rails server -e test
68. La base de datos de prueba, necesita tener los datos que vas a consumir con Angular.js
69. Mediante un Rake Task rake prepare_db_for_protractor && protractor
70. Correr las pruebas de Rails primero. rake rspec && protractor rake test && protractor
71. Eliminar la dependencia de la base de datos
72. Acelerar Protractor en general
73. Mockeando las llamadas a la API
74. application.html.erb <% if Rails.env.test? %> <%= javascript_include_tag 'angular-mocks' %> <% end %> <%= javascript_include_tag 'application' %>
75. // user_search.page.js var UserSearchPage = function() { ... this.addUsersMock = function() { browser.addMockModule('httpBackendMock', function() { angular.module('httpBackendMock', ['ngMockE2E']) .run(function($httpBackend) { var response = { name: 'John Snow', job: 'Lord Commander', email: 'john@snow.com' }; $httpBackend.when('GET', '/users') .respond(200, response); $httpBackend.whenGET(/.*/).passThrough(); }); }); }; };
76. // user_search.page.js var UserSearchPage = function() { ... this.removeUsersMock = function() { browser.removeMockModule('httpBackendMock'); }; }; module.exports = UserSearchPage;
77. Es hora de eliminar las llamadas a la API
78. // user_search.spec.js describe('Users search', function() { var UserSearchPage = require('./user_search.page'); var page = new UserSearchPage(); beforeEach(function() { page.addUsersMock(); page.get(); }); afterEach(function() { page.removeUsersMock(); }); describe('when the user does exist', function() { ... }); });
79. // user_search.spec.js describe('Users search', function() { ... describe('when the user does exist', function() { beforeEach(function() { page.searchInput.sendKeys('john@snow.com'); page.doSearchBtn.click(); }); it('shows an element with the full name', function() { expect(page.nameElement.getText()).toEqual('John Snow'); }); it('shows an element with the job', function() { expect(page.jobElement.getText()).toEqual('Lord Commander'); }); }); });
80. Enlighten your software ¿Preguntas? eduardofigarola@gmail.com | @diabulux