Angular/Jasmine - 在 ng-if 中测试 HTML 元素答案

【问题标题】：Angular/Jasmine - Test HTML element inside ng-ifAngular/Jasmine - 在 ng-if 中测试 HTML 元素
【发布时间】：2017-07-21 11:04:30
【问题描述】：

我想测试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？

【问题讨论】：

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

【解决方案1】：

你可以稍微改变你的测试；首先更改原始绑定以包含 joineryTypes：

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

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

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

那么你应该能够到达 ng-if 块内部。

【讨论】：