1 回答

TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊
選擇器選擇它匹配的第一個(gè)元素,所以你的選擇器匹配這個(gè)元素:
<div class="map-menu-item" (click)="toggleLayer('amsterdam')" [state]="[true]" menuItemToggle>
<span>
<fa-icon [icon]="faVideo" size="sm" class="pr-2"></fa-icon>CityHeat
</span>
</div>
單擊處理程序調(diào)用的位置toggleLayer。
將您的 HTML 更改為更具體:
<div class="d-flex flex-column justify-content-start map-menu somethingMoreSpecific">
<span class="map-menu-header">Layer</span>
<div class="map-menu-item" (click)="toggleStyle('light', 'v10')" [state]="[true]" menuItemToggle>
<span>
<fa-icon [icon]="faAdjust" size="sm" flip="horizontal" class="pr-2"></fa-icon>Light
</span>
</div>
<div class="map-menu-item" (click)="toggleStyle('outdoors', 'v11')" [state]="[true]" menuItemToggle>
<span>
<fa-icon [icon]="faMountain" size="sm" class="pr-2"></fa-icon>Outdoors
</span>
</div>
<div class="map-menu-item" (click)="toggleStyle('satellite', 'v9')" [state]="[true]" menuItemToggle>
<span>
<fa-icon [icon]="faSatellite" size="sm" class="pr-2"></fa-icon>Satellite
</span>
</div>
</div>
fit('Should mapbox style when user click on icon', () => {
spyOn(component, 'toggleStyle').and.callThrough();
fixture.debugElement.query(By.css('.somethingMoreSpecific .map-menu-item')).nativeElement.click(); // change the selector to select the correct div
fixture.detectChanges();
expect(component.toggleStyle).toHaveBeenCalled();
});
添加回答
舉報(bào)