Angular - 如何从单元测试中将指令中的属性设置为false？

Question

我已经对指令进行了单元测试：

it('should not give a height if isActive is set to false', () => {

  debugElement = fixture.debugElement.query(By.directive(WindowHeightDirective)).nativeElement;

  directive.isActive = false;

  fixture.detectChanges();

  const spy = spyOn(directive, 'setHeight');

  window.dispatchEvent(new Event('resize'));

  expect(spy).toHaveBeenCalled();
  expect(debugElement.style.height).toBe(null);
});

它应该简单地将directive的属性设置为false，这反过来取消指令的主机元素上的高度设置。

但是，这似乎不起作用。当我在指令中记录isActive时，它从未设置为false。

我使用@ViewChild(MyDirective) myDirective: MyDirective通过测试组件使用unit-test.component.html来获取指令实例。这给了我预期的指令实例。

为什么这不起作用呢？

修改

<div windowHeight></div> ：

unit-test.component.ts

@Component({ selector: 'unit-test-component', templateUrl: './unit-test.component.html' }) export class UnitTestComponent implements OnInit { @ViewChild(WindowHeightDirective) windowHeight: WindowHeightDirective; constructor() {} ngOnInit() {} } ：

window-height.directive.spec.ts

describe('WindowHeightDirective', () => { let component: UnitTestComponent; let directive: WindowHeightDirective; let fixture: ComponentFixture<UnitTestComponent>; let debugElement: HTMLDivElement; beforeEach(() => { TestBed.configureTestingModule({ declarations: [ UnitTestComponent, WindowHeightDirective ], schemas: [NO_ERRORS_SCHEMA], providers: [ {provide: ComponentFixtureAutoDetect, useValue: true} ] }); fixture = TestBed.createComponent(UnitTestComponent); component = fixture.componentInstance; directive = component.windowHeight; }); it('should not give a height if isActive is set to false', () => { debugElement = fixture.debugElement.query(By.directive(WindowHeightDirective)).nativeElement; // Doesn't set it to false :( directive.isActive = false; fixture.detectChanges(); const spy = spyOn(directive, 'setHeight'); window.dispatchEvent(new Event('resize')); expect(spy).toHaveBeenCalled(); expect(debugElement.style.height).toBe(null); }); ... more tests ... }); ：

window-height.directive.ts

@Directive({ selector: '[windowHeight]' }) export class WindowHeightDirective implements OnInit { @Input() isActive = true; @Input() offset = 0; @HostBinding('style.height.px') height: number; @HostListener('window:resize', ['$event']) setHeight() { console.log(this.isActive) this.height = this.isActive ? (window.innerHeight - this.offset) : undefined; } constructor() {} ngOnInit() { this.setHeight(); } } ：

<script type="application/javascript">
        function findAltitude() {
            var lat  = document.getElementById('lat').value;
            var lon  = document.getElementById('lon').value;

            var url = "https://maps.googleapis.com/maps/api/elevation/json?locations=11,11&key=<API_KEY>";

            var json, data;

            $.ajax({
                  dataType: "json",
                  url: url,
                  data: data,
                  success: function(data) {
                       alert(data.results.elevation);
                    }
                });
        }

  </script>