当我模拟后端时视图不加载

Question

我正在尝试测试用户界面的一个特定元素。为此，我需要向后端发出特定请求以使用预定义的数据进行响应，但所有其他请求都应通过。这是我的做法（咖啡更易读）：

describe 'select2 combobox widget', ()->
  httpBackendMock = () ->
     angular.module 'httpBackendMock', ['ngMockE2E', 'fmAppApp']
        .run ($httpBackend)->
            dummyCategories = [
               {id: 1, name: 'foo', icon: '', user_id: 5},
               {id: 2, name: 'bar', icon: '', user_id: 5},
               {id: 3, name: 'baz', icon: '', user_id: 5},
               {id: 4, name: 'quax', icon: '', user_id: 5}
            ]

            $httpBackend.whenGET '/api/categories'
                .respond ()->
                    [200, dummyCategories]
            $httpBackend.whenGET /.*/
                .passThrough()
            $httpBackend.whenGET /^\/views\//
                .passThrough()
            $httpBackend.whenGET /^\/scripts\/.*/
                .passThrough()
            $httpBackend.whenGET /^\/scripts\//
                .passThrough()
            $httpBackend.whenGET /^\/bower_components\//
                .passThrough()
            $httpBackend.whenGET(/\.html$/).passThrough()

  browser
     .addMockModule 'httpBackendMock', httpBackendMock

所以基本上我在这里所做的就是在我的应用程序模块 fmAppApp 和 angular ngMockE2E 之上创建新模块，然后告诉 Protractor。

为了完整起见，我将在此 describe 块中显示一个简单的语句：

it 'should allow user to type in anything', ()->
    browser.get 'http://localhost:9000/#/'
    element By.model 'category.selected'
        .click()
    input = element By.css '.ui-select-search'
    input.sendKeys 'newtestcategory'
    expect input.getAttribute('value')
        .toBe 'newtestcategory'

当我运行 grunt protractor 时，它会打开浏览器，导航到指定的 url (http://localhost:9000/#/)，然后我看到空白页和规范失败并出现此错误： NoSuchElementError: No element found using locator: by.model("category.selected")

不幸的是，由于显而易见的原因，我无法打开 firebug 并查看出了什么问题，所以我只有这条消息。我想我可以以某种方式从浏览器控制台重定向日志记录，看看这里的邪恶根源是什么，但我不知道怎么做。也许有人也遇到过并且知道它可能是什么？ 更新： 我按照 Cétia 下面的建议做了，我在日志中收到了这条消息：

message: 'http://localhost:9000/bower_components/angular/angular.js 11607:24 Error: Unexpected request: POST /api/login

现在为什么呢？我应该在 passThrough() 中添加 'api/login' 吗？

Answer 1

为确保您的模拟已加载，您可以在里面添加 console.log，然后在量角器测试中添加：

browser.manage().logs().get('browser').then(function(browserLog) {
    console.log('log: ' + require('util').inspect(browserLog));
});

为了在您的量角器控制台中输出浏览器日志（在您的browser.get 之后）。

Answer 2

看来我没有提供足够的信息。我遗漏了一些我认为与不想让你不知所措的代码无关的代码，但事实证明这是一个绊脚石。

browser.get 'http://localhost:9000/#/'
element By.model 'email'
  .sendKeys 'dima@mail'
element By.model 'password'
  .sendKeys '123456'
element By.cssContainingText 'form[name=login] button', 'Войти'
  .click()

这段代码负责用户登录，我在这里需要它，因为未经授权的用户不允许看到我想测试的视图。 我以为我确保 所有 请求都通过了，但我当然忘记了我的登录请求是一个 POST 请求。因此，只需添加

即可解决问题

$httpBackend.whenPOST /.*/
      .passThrough()