Жасмин тест угловой компонент с частной собственностью - PullRequest
Новая
       4

Жасмин тест угловой компонент с частной собственностью

0 голосов
/ 23 января 2019

У меня есть этот код.Я экономлю myData в ngOnInit.Когда я проверяю myMethod одним нажатием кнопки, this.myData имеет значение undefined в myMethod. 

@Component({
   templateUrl: ''
})

export class MyComponent implements OnInit {
   myData: MyClass;
   constructor() {}
   ngOnInit() {
      this.myData = // some code
   }

   myMethod() {
    this.myData is undefined here
   }
}

Мой файл спецификаций: 

describe('MyComponent', () => {

 // set up stubs 
 beforeEach(async(() => {
 TestBed.configureTestingModule({
  declarations: [  MyComponent ],
  providers:    [
  ],
  imports: [
   FormContainer
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents();

  fixture = TestBed.createComponent(MyComponent);
  comp = fixture.debugElement.componentInstance;
 }));

  it('should call myMethod', fakeAsync(() => {
    element.querySelectorAll('button')[0].click();
    fixture.detectChanges();
    fixture.whenStable().then(async() => {
      fixture.detectChanges();
    });
  }));
});

1 Ответ

0 голосов
/ 23 января 2019

Это потому, что вы запрашиваете кнопку до того, как она появится.Просто переместите fixture.detectChanges() до element.querySelectorAll(), и оно должно работать.См. Angular Docs , чтобы узнать, почему. 

it('should call myMethod', fakeAsync(() => {
    spyOn(comp, 'myMethod').and.callThrough();
    fixture.detectChanges(); // <--- Move to here from below ...
    element.querySelectorAll('button')[0].click();
    // fixture.detectChanges();  <-- Move this ...
    expect(comp.myMethod).toHaveBeenCalled();
    // fixture.whenStable().then(async(() => {
    //   fixture.detectChanges();
    // }));
}));

Работает StackBlitz .Проверьте консоль, как я изменил myMethod() следующим образом: 

myMethod() {
  console.log(this.myData); // is no longer undefined here
}

Надеюсь, это поможет.

Обновление

Я изменил StackBlitz, чтобы сделать это болееЧисто.Вот новые тесты в StackBlitz: 

it('comp.myData should be undefined if element.query is first', () => {
    element.querySelectorAll('button')[0].click();
    expect(comp.myData).toBeUndefined(); // <-- Note this is UNDEFINED at this point
    fixture.detectChanges(); // <--- This is in the wrong place ...
});

it('comp.myData should be defined if fixture.detectChanges() is first', () => {
    fixture.detectChanges(); // <--- Now this is in the before the query.
    element.querySelectorAll('button')[0].click();
    expect(comp.myData).toEqual({data: 'test'}); // <-- Note this is now defined
});

Если вы загляните в файл console.log, вы увидите следующее: 

Console was cleared
undefined

{data: "test"}

Первый неопределенный из первого теста,когда fixture.detectChanges() находится не в том месте.Второй {data: "test"} взят из второго теста, где он теперь определен.

Надеюсь, это поможет.

...