0

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

Sun
  • 4,458
  • 14
  • 66
  • 108
  • According to code you are trying to test the library (CDK) itself. Take a look at how they did it [here](https://github.com/angular/components/blob/main/src/cdk/layout/breakpoints-observer.spec.ts) – robert Jan 22 '23 at 19:01
  • I'm trying to test if "my" input value is set as expected. I fail to see how I'm testing the library. Yes, I want to use the library to help but I'm testing my value. – Sun Jan 22 '23 at 20:56
  • Also check the recommended usage of the `@Input` decorator [here](https://docs.angular.lat/guide/inputs-outputs). – robert Jan 22 '23 at 21:04
  • I've removed the input – Sun Jan 22 '23 at 21:09

0 Answers0