Użyj Mock HTTP z kątomierzem i Jasmine

Question

Jak używać Mock HTTP z Jasmine i Protractor?

W moim test.spec.js, ogłosiłem próbę, ale ta sztuczka nie działa. Nie mam żadnego błędu. Moje api zawsze reaguje, a nie na drwiny.

Nigdy nie widzę "makiety modułu!" w mojej konsoli. Moja funkcja nie jest wykonywany:

browser.addMockModule('modName', function() { 

    browser.executeScript(function() {console.log('mockModule!')}); 

    angular.module('modName', []).value('foo', 'bar').run(function ($httpBackend) { 
    $httpBackend.whenPOST('http://api.webapp.net/app_dev.php/module/search?direction=asc&page=1').respond('repsond'); 

    browser.executeScript(function() {console.log('enter mockModule!')}); 
    }); 
}); 

W moich app.js nie mam "ngMock".

Dodałem w moim index.html:

node_modules/angular-mocks/angular-mocks.js 

uruchomić test z wiersza polecenia z 'łykiem kątomierz-local':

gulp.task('protractor-local', shell.task([ 
     'protractor protractor.conf.js --baseUrl="http://mywebapp.local.net"' 
])); 

Wszystkie testy są ok, ale nie udawanie.

test.spec.js

var loginPO = new(require('./models/login.model.js'))(); 

describe("hello", function() { 

    it("I click on the button-search button", function() { 

     loginPO.wait(10); 

     //browser.ignoreSynchronization = false; 

     browser.addMockModule('modName', function() { 

      browser.executeScript(function() {console.log('mockModule!')}); 

      angular.module('modName', []).value('foo', 'bar').run(function ($httpBackend) { 
       $httpBackend.whenPOST('http://api.webapp.net/app_dev.php/module/search?direction=asc&page=1').respond('repsond'); 

       browser.executeScript(function() {console.log('enter mockModule!')}); 
      }); 
     }); 

     //browser.getRegisteredMockModules(); 

     loginPO.clickButtonSearchButton(); 
     loginPO.wait(10); 
    }); 

    it("I am on the home page", function() { 
     loginPO.visit('#/'); 
    }); 

    ... 

}); 

Modele/login.model.js

'use strict'; 

var _ = require('lodash'); 

var LoginPageObject = function() { 

    var signInButton = element(by.id('signIn')); 

    _.mixin(this, require('./common/base.js').Base); 

    this.path = '#/'; 

    this.clickButtonSearchButton = function() { 
     return browser.driver.findElement(by.id('button-search')).click(); 
    }; 

    ... 

}; 

module.exports = LoginPageObject; 

wspólne/base.js

function visit(path, params) { 
    return browser.get(this.path + (params || '')); 
} 

function wait(params) { 
    params = params * 1000; 
    return browser.sleep(params); 
} 
... 

exports.Base = { 
    visit: visit, 
    wait: wait, 
    ... 
}; 

protractor.config.js

exports.config = { 
    directConnect: true, 

    seleniumServerJar: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.48.2.jar', 

    specs: [ 
    'jasmine/*.spec.js' 
    ], 

    getPageTimeout: 30000, 

    capabilities: { 
    'browserName': 'chrome', 
    version: '', 
    platform: 'ANY' 
    }, 

    framework: 'jasmine2' 

}; 

** karma.conf.js **

// Karma configuration 

module.exports = function(config) { 

    var configuration = { 

     basePath: './', 

     frameworks: [ 
      'jasmine-jquery', 
      'jasmine', 
      'jasmine-matchers' 
     ], 

     files: [ 
      ... 
      'assets/libs/angularjs/angular.min.js', 
      'node_modules/angular-mocks/angular-mocks.js', 
      ... 
      'assets/libs/angularjs/sweetalert.min.js', 
      'assets/libs/angularjs/ui-bootstrap-tpls.min.js', 
      'app/app.js', 
      'app/*/*.js', 
      'app/*/*/*.js', 
      'app/*/*/*/*.js', 
      { 
       pattern: 'app/*/*/*/*/*.json', 
       included: false 
      } 
     ], 

     exclude: [], 

     preprocessors: { 
      'app/**/!(*.test).js': ['coverage'] 
     }, 

     coverageReporter: { 
      type: 'text', 
      dir: 'coverage/' 
     }, 

     reporters: ['spec'], 

     port: 8080, 

     colors: true, 

     logLevel: config.LOG_INFO, 

     autoWatch: false, 

     browsers: ['PhantomJS'], 

     singleRun: true, 

     customLaunchers: { 
      'PhantomJS_custom': { 
       base: 'PhantomJS', 
        options: { 
         windowName: 'my-window', 
         settings: { 
         webSecurityEnabled: false 
        } 
       }, 
       flags: ['--load-images=true'], 
       debug: true 
      } 
     }, 

     phantomjsLauncher: { 
      exitOnResourceError: true 
     } 
    }; 

    config.set(configuration); 
}; 

package.json

{ 
    "name": "webapp", 
    "version": "1.0.0", 
    "description": "webapp", 
    "dependencies": { 
    "angular-mocks": "^1.4.5", 
    "chromedriver": "^2.19.0", 
    "gulp-protractor": "^1.0.0", 
    "gulp-shell": "^0.5.0", 
    ... 
    "protractor": "^2.5.1", 
    "selenium-server": "^2.48.2", 
    "selenium-standalone": "^4.7.0", 
    "selenium-webdriver": "^2.48.0", 
    } 
} 

Answer 1

miałem również ten sam problem, i postanowiłem to stworzenie modułu otoki ze wszystkimi mocks

angular.module('mockBackend', ['myAppModule', 'ngMockE2E']).run(function ($httpBackend) { 
    $httpBackend.when('GET', /user/).respond(200, {login: 'user_test'}); 
    }); 

i zmienić dyrektywę data-NG-app w pliku indeksu do modułu mockBackend

<html data-ng-app='mockBackend'> 

Możesz skonfigurować zadanie gulp/grunt, aby dołączyć ten moduł i zmienić aplikację danych przed uruchomieniem testów.

W tym linkiem można zobaczyć pełną przykład: http://blog.xebia.com/angularjs-e2e-testing-using-ngmocke2e/

Answer 2

Pierwszą rzeczą, którą są mieszanie testowanie E2E i testowanie jednostki jaśminowej. Do testowania E2E za pomocą kątomierza.

Upewnij się, że umieściłeś ścieżkę pliku testowego w konfiguracji karmy dla testowania jednostki jaśminowej.

Upewnij Selenium webdriver-manager jest uptodate

np

Snippet html dla strony logowania.

<div class="form-group" 
      ng-class=" {'has-error' :!loginForm.userEmail.$pristine && loginForm.userEmail.$invalid}" > 
      <label for="email">Enter Email</label> 
      <input type="email" name="userEmail" class="form-control" required placeholder="Enter Email" ng-model="objUser.userEmail">   
      <div ng-show="loginForm.userEmail.$touched || loginForm.$submitted"> 
       <span ng-show="loginForm.userEmail.$error.required">Please enter valid email</span> 
       <span ng-show="loginForm.userEmail.$error.email">Please enter valid email</span> 
      </div> 
     </div> 

kątomierz js dla tego html

describe("check user creation form integration", function() { 

    var ptor,userEmail,userPassword; 
    beforeEach(function(){ 
     ptor = protractor.ExpectedConditions; 
     userEmail  = element(by.model("objUser.userEmail")); 
    }); 

    it("\n\n1 . check login functionality",function(){ 

     browser.get("/#/"); 
     userEmail.sendKeys("*^*"); 
     expect(userEmail.getAttribute("class")).toContain('ng-invalid'); 
     userEmail.clear(); 
     browser.sleep(2000); 
     userEmail.sendKeys("HJJHJH"); 
     expect(userEmail.getAttribute("class")).toContain('ng-valid'); 
    }) 
}); 

kątomierz config

Dodaj następujący linii

exports.config = { 
    baseUrl: 'http://localhost:3000/' 
}; 

port będzie zmiana jak na swój config.