Angular 1/ui-select/Jasmine - 測試元素是否存在於ng中 - 如果

我想測試ng-if中沒有ng的輸入是否存在 - 如果測試完全通過但不與ng-if通過。Angular 1/ui-select/Jasmine - 測試元素是否存在於ng中 - 如果

在我的模板，我有：

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

的doShowAir是一個功能doShow()內的變量在以前的UI選選擇的選擇，當它應該是true

<ui-select ng-model="$ctrl.parking.parkingType" 
      on-select="$ctrl.doShow()"> 
    <ui-select-match> 
     <span>{{ $select.selected.label }}</span> 
    </ui-select-match> 
    <ui-select-choices repeat="item in $ctrl.projectReferences.parkingType | filter: { label: $select.search }"> 
     <span ng-bind-html="item.label"></span> 
    </ui-select-choices> 
    </ui-select>

功能：

doShow() { 
    this.doShowAir = (this.parkingType.labelKey === 'parking_type.air') 
    }

而uni t檢驗：

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是真實的，還是模擬的用戶界面，選擇因爲我沒有訪問doShow()函數調用函數的選擇on-select="$ctrl.doShow()"。或者你如何「手動」除了輸入添加到測試和編譯它<project-exterior-parking parking="project.realEstateProjectProduct.parkings"></project-exterior-parking>

來源

2017-07-27 Mouad Ennaciri

1.什麼是你想用做方法的值：'CTRL = $ componentController（「projectExteriorParkingModule」，空，綁定）'在第二個' beforeEach'塊？這是試圖讓上面的編譯組件的控制器？你可以用'htmlElement.controller（'projectExteriorParking'）'獲得元素控制器 – kidroca

爲了得到一個編譯單元的控制器調用ctrl = htmlElement.controller('directive|component name')

在你的情況ctrl = htmlElement.controller('projectExteriorParking')

directive|component是當您向組件或指令註冊時提供的字符串angular.module

瞭解如何從編譯的htmlElement獲取控制器，現在可以調用ctrl.doShow()和$rootScope.$apply()，然後斷言元素呈現你在測試的方式做

有一對夫婦在你的代碼的其他東西： ng-model="$ctrl.parking.parkingType"

doShow() { 
    // ngModel is this.parking.parkingType 
    // is there this.parkingType or is this a mistake? 
    this.doShowAir = (this.parkingType.labelKey === 'parking_type.air') 
}

傳遞給$範圍編譯缺少要求綁定：

beforeEach(inject((_$compile_, _$rootScope_) => { 
    rootScope = _$rootScope_ 
    compile = _$compile_ 
    scope = rootScope.$new() 
    scope.parking = {} 
    // The compiled element has `parking` bound to `project.realEstate...` yet you don't have it on scope 
// you should assign some mock data as `scope.project = { realEstateProjectProduct }` 
    htmlElement = compile(`<project-exterior-parking parking="project.realEstateProjectProduct.parkings"></project-exterior-parking>`)(scope) 
    rootScope.$digest()

}））

你應該通過一些模擬數據或者設置ctrl.parkingType爲您預期將ctrl.doShow()設置ctrl.doShowAir爲true

來源

2017-08-02 01:16:50 kidroca

Angular 1/ui-select/Jasmine - 測試元素是否存在於ng中 - 如果

回答

相關問題