Angular 测试方法调用未设置变量

Question

I am trying to learn Jasmine, and I am not sure if I am doing this correctly. When I run this test case, on the line expect(component.roleModal.visible).toBeTrue(); I get an error saying Expected false to be true .

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      providers: [HttpClient, HttpHandler],
      declarations: [ManageRolesComponent, RoleModalComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

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

  it('should open the add modal', () => {
    spyOn(component, 'onOpenAdd').and.callThrough();
    expect(component.roleModal.visible).toBeTrue();
    expect(component.roleModal.state).toBe(ModalRoleState.Add);
  });
});

The function onOpenAdd() is pretty simple:

  public onOpenAdd() {
    this.roleModal.state = ModalRoleState.Add;
    this.roleModal.open();
  }

Same with open() :

  public open() {
    this.visible = true;
  }

When the test executes it fails why is this? Am I doing this correctly? I am setting the value visible explicitly to true so why is the test false?

Answer 1

to make your test work:

delete change detection from beforeEach

beforeEach(() => {
 fixture = TestBed.createComponent(ManageRolesComponent);
 component = fixture.componentInstance;
 // fixture.detectChanges(); delete this
});

and place your change detection call just after your spy

it('should open the add modal', () => {
 spyOn(component, 'onOpenAdd').and.callThrough();
 fixture.detectChanges();
 expect(component.roleModal.visible).toBeTrue();
 expect(component.roleModal.state).toBe(ModalRoleState.Add);
});