CODEWITHSUNDEEP
angularkarma-jasmineangular-testangular15
Sun
Sun

Reputation: 4718

Unit test breakpointobserver in Angular V15

I have the following component class in angular (v15):

export class MyComponent implements OnInit {

  mobileMode: boolean = false;

  constructor(private breakPointObserver: BreakpointObserver) {
  }

  ngOnInit() {
    this.breakPointObserver.observe([Breakpoints.XSmall])
      .subscribe((state: BreakpointState) => {
        this.mobileMode = state.matches;
      });
  }

}

I'm trying and failing to write a unit test to test that mobileMode is set to true when the screen size is extra small. This is my test:

  it('should set mobileMode to true when screen is extra small', () => {
    spyOnProperty(window, 'innerWidth').and.returnValue(500);

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

    fixture.detectChanges();

    expect(component.mobileMode).toBeTrue();

  });

My test result is just: Expected false to be true

How I can test this?

I'm also tried outerWidth.

I'm on Version 15 of Angular/ Angular CLI and node 18.12

Upvotes: 1

Views: 735

Answers (1)

Sébi11
Sébi11

Reputation: 66

I finally decided to implement a spy for the BreakpointObserver and test my service. Here is the test configuration:

  let service: ResponsiveLayoutService;
  let breakpointObserver: BreakpointObserver;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [BreakpointObserver],
    });
    service = TestBed.inject(ResponsiveLayoutService);
    breakpointObserver = TestBed.inject(BreakpointObserver);
  });

And then the test itself:

it(`should return true with ${Breakpoints.HandsetPortrait} breakpoint`, async () => {
  spyOn(breakpointObserver, 'observe')
    .withArgs(Breakpoints.HandsetPortrait)
    .and.returnValue(of({ matches: true, breakpoints: { [Breakpoints.HandsetPortrait]: true } }));

  await expectAsync(firstValueFrom(service.isPhonePortrait())).toBeResolvedTo(true);
});

Upvotes: 1

Related Questions