Angular / Jasmine - 测试ng-if中的HTML元素

时间:2017-07-21 11:04:30

标签: javascript angularjs unit-testing jasmine karma-jasmine

我想测试input内是否存在ng-if,而ng-if测试完全没有通过,但ng-if没有,这是正常的ng-if从DOM中删除元素。

以下是ng-if

<div ng-ig="$ctrl.model.joineryTypes">
  <input type="" name="">
</div>

测试

import angular from 'angular'
import 'angular-mocks'

let scope
let rootScope
let compile
let htmlElement
let ctrl

fdescribe('roomsCommonForm', () => {
  beforeEach(() => {
    angular.mock.module('roomsCommonModule')
  })

  beforeEach(inject((_$compile_, _$rootScope_) => {
    rootScope = _$rootScope_
    compile = _$compile_
    scope = rootScope.$new()
    htmlElement = compile(`<rooms-common-form></rooms-common-form>`)(scope)
    rootScope.$digest()
  }))

  beforeEach(inject(($componentController) => {
    let bindings = {
      model: {}
    }
    ctrl = $componentController('roomsCommonForm', null, bindings)
  }))

  it('should contain one input', () => {
    const inputItem = htmlElement.get(0).querySelectorAll('input')
    expect(inputItem.length).toBe(1)
  })
})

我如何模拟该对象$ctrl.model.joineryTypes

1 个答案:

答案 0 :(得分:1)

您可以稍微改变您的测试;首先更改原始绑定以包含joineryTypes:

let bindings = {
  model: {
    joineryTypes: false
  }
};

所以现在它是假的,你只需要在另一个测试中改变它:

it('should look inside the ng-if', () => {
  ctrl.model.joineryTypes = true;
});

然后你应该能够进入ng-if块。