Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

SGCE 2015 Conference

Eduardo Figarola

July 01, 2015
Tweet

More Decks by Eduardo Figarola

Other Decks in Programming

Transcript

  1. Enlighten your software Pruebas de integración web con Protractor +

    Angular + Rails Eduardo Figarola Mota @diabulux
  2. 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
  3. 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’ } };
  4. 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'); }); });
  5. … 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 }); });
  6. It it('the test description goes here', function() { // specific

    code related to the test // 1 expectation per test });
  7. 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 });
  8. 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 });
  9. 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 });
  10. 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 });
  11. Matchers: toContain() it('compares using toContain() matcher', function() { var array

    = ['foo', 'bar', 'baz']; expect(array).toContain('bar'); // true expect(array).toContain('hello'); // false });
  12. beforeEach() var fillInForm = function() { // some code };

    beforeEach(function() { fillInForm(); });
  13. afterEach() var resetForm = function() { // some code };

    beforeEach(function() { resetForm(); });
  14. 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'); }); });
  15. // 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('[email protected]'); doSearchBtn.click(); expect(nameElement.getText()).toEqual('John Snow'); }); }); });
  16. // 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('[email protected]'); doSearchBtn.click(); expect(jobElement.getText()).toEqual('Lord Commander'); }); }); });
  17. // 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;
  18. // 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('[email protected]'); page.doSearchBtn.click(); expect(page.nameElement.getText()).toEqual('John Snow'); }); it('shows an element with the job', function() { page.searchInput.sendKeys('[email protected]'); page.doSearchBtn.click(); expect(page.jobElement.getText()).toEqual('Lord Commander'); }); }); });
  19. // 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('[email protected]'); 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'); }); }); });
  20. // 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; }); }; });
  21. // 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 }; });
  22. // 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('[email protected]'); 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'); }); }); });
  23. La base de datos de prueba, necesita tener los datos

    que vas a consumir con Angular.js
  24. // 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: '[email protected]' }; $httpBackend.when('GET', '/users') .respond(200, response); $httpBackend.whenGET(/.*/).passThrough(); }); }); }; };
  25. // user_search.page.js var UserSearchPage = function() { ... this.removeUsersMock =

    function() { browser.removeMockModule('httpBackendMock'); }; }; module.exports = UserSearchPage;
  26. // 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() { ... }); });
  27. // user_search.spec.js describe('Users search', function() { ... describe('when the user

    does exist', function() { beforeEach(function() { page.searchInput.sendKeys('[email protected]'); 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'); }); }); });