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

Question

我想测试 ng-if 中的 input 是否存在，没有 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 ？

Answer 1

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

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

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

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

然后你应该能够到达 ng-if block 的内部。