Angular 1 / Jasmine-測試元素是否存在於ng-if中

Question

我想測試ng-if內是否存在輸入，如果沒有ng-if則測試可以順利通過，但不能通過ng-if進行測試，這是正常的，因為ng-if從DOM中刪除了元素。

在我的模板中，我有：

  <div ng-if="$ctrl.shouldShowAir">
    <input class="form-control" type="text">
  </div>

在我的組件中

  shouldShow() {
    this.shouldShowAir = (this.parkingType.labelKey === 'parking_type.air')
  }

單元測試

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

let scope
let rootScope
let compile
let htmlElement
let ctrl

fdescribe('projectExteriorParking', () => {
  beforeEach(() => {
    angular.mock.module('ProjectExteriorParkingModule')
    angular.mock.module('ui.select')
  })

  beforeEach(inject((_$compile_, _$rootScope_) => {
    rootScope = _$rootScope_
    compile = _$compile_
    scope = rootScope.$new()
    scope.parking = {}
    htmlElement = compile(`<project-exterior-parking parking="project.realEstateProjectProduct.parkings"></project-exterior-parking>`)(scope)
    rootScope.$digest()
  }))

  beforeEach(inject(($componentController) => {
    let bindings = {
      parking: {},
      projectReferences: {}
    }
    ctrl = $componentController('projectExteriorParkingModule', null, bindings)
  }))

  it('should contain two input', () => {
    const inputItems = htmlElement.get(0).querySelectorAll('input')
    expect(inputItems.length).toBe(2)
  })
})

我如何模擬變量shouldShowAir為true

Answer 1

您應該編寫兩個測試並進行模擬

this.parkingType.labelKey

在第一次測試中為false，並測試輸入是否為空。 然后將其模擬為false並測試要定義的輸入。

或者，您只編寫一個測試，將labelKey模擬為true並運行現有測試“應包含兩個輸入”