javascript - 如何在 Angular 6 中使用 Jasmine 通过 ngIf router.url 检查来检查元素是否可见

Question

我有一个 div，仅当当前路由是特定页面时才显示它，否则所有其他时间都将其隐藏，我正在尝试为此编写 Jasmine 单元测试。

HTML 标记:

<div class="header" *ngIf="router.url ='/home'">

Jasmine 单元测试:

describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let el: DebugElement;

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
        fixture.detectChanges();
    });

    it('should display div when on the home page', () => {
        expect(el.query(By.css('.header')).nativeElement.style.visibility).toBe(true);
    });

    it('should hide div when not on home page', () => {
        expect(el.query(By.css('.header')).nativeElement.style.visibility).toBe(false);
    });
});

注意:应用加载路线时的第一页将是/home。

谢谢!

Answer 1

在每次测试时重写您的路由器 URL 值。因为它是只读属性，请考虑使用 Object.defineProperty :

it('should display div when on the home page', () => {
  Object.defineProperty(component.router, 'url', { writable: true, value: '/home'});
  expect(el.query(By.css('.header')).nativeElement.style.visibility).toBe(true);
});

it('should hide div when not on home page', () => {
  Object.defineProperty(component.router, 'url', { writable: true, value: '/not-home'});
  expect(el.query(By.css('.header')).nativeElement.style.visibility).toBe(false);
});