如何使用 jasmine 测试 ngOnInit 中的 settimeout 函数答案

【问题标题】：How to test the settimeout function inside the ngOnInit using jasmine如何使用 jasmine 测试 ngOnInit 中的 settimeout 函数
【发布时间】：2020-09-30 16:21:22
【问题描述】：

我需要为内部有 setTimeout() 调用的 ngOnInit 函数编写一个测试，但我找不到我应该怎么做我是 jasmine 测试用例的新手，请帮助

app.component.ts：

ngOnInit(): void {
     if(sessionStorage.getItem("login") === "loggedIN"){
      this.isNav = true;
      this.isUserLogged = false;
      this.loginservice.isLoggedIn = true;
      setTimeout(()=>{
        const isHidden = this.eleRef.nativeElement.querySelector(".header-nav-items");
        isHidden.removeAttribute("hidden");
        this.eleRef.nativeElement.querySelector(".]navigation").classList.remove("theme-black");
        this.eleRef.nativeElement.querySelector(".horizontal-right").classList.remove("profile");
        this.eleRef.nativeElement.querySelector(".horizontal-right").classList.remove("theme-black");
      },500);
     
     }

    }

app.component.spec.ts ：

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
      declarations: [ AppComponent ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

我还能在这里写。

【问题讨论】：

添加角度标签
我认为更好的方法是取消 setTimeout 函数并将其中的代码移动到 AfterViewInit 生命周期钩子
@OwenKelvin，我尝试使用 AfterViewInit，但它只能通过添加它正在工作的 settimeout 来工作，或者可以通过使用 afterviewinit 发布代码来显示一种方法，谢谢

标签： javascript angular typescript karma-jasmine

【解决方案1】：

考虑代码

const isHidden = this.eleRef.nativeElement.querySelector(".header-nav-items");
isHidden.removeAttribute("hidden");
this.eleRef.nativeElement.querySelector(".]navigation").classList.remove("theme-black");
this.eleRef.nativeElement.querySelector(".horizontal-right").classList.remove("profile");
this.eleRef.nativeElement.querySelector(".horizontal-right").classList.remove("theme-black");

这段代码只是简单地切换类，因此我们可以利用类绑定来实现这一点。类似[class.theme-black]='isLoggedIn'

在 TS 文件中，我们将继续使用

ngOnInit(): void {
  if(sessionStorage.getItem("login") === "loggedIN") {
    this.isNav = true;
    this.isUserLogged = false;
    this.loginservice.isLoggedIn = true;
  }
}

我们可以进一步改进上面的代码来

ngOnInit(): void {
  this.isNav = sessionStorage.getItem("login") === "loggedIN";
  this.isUserLogged = !this.isNav;
  this.loginservice.isLoggedIn = this.isNav;
}

在您的 HTML 中

  <div class='header-nav-items' *ngIf='!isNav'></div>
  <div class='navigation' [class.theme-black]='!isNav'></div>
  <div class='horizontal-right'[class.profile]='!isNav' [class.theme-black]='!isNav'></div>

上面可能没有回答测试 setTimeout 函数的问题，但它是实现上述测试的更好方法

【讨论】：