title: How to mock window.screen.width in Angular Unit Test with Jasmine
body: <p>I have a BreakpointService, which tells me - depending on the screen width - in which SidebarMode (closed - minified - open) I should display my Sidebar. </p>
  
  <p>This is the main part of the service:</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(private breakpointObserver: BreakpointObserver) {
      this.closed$ = this.breakpointObserver.observe(['(min-width: 1024px)']).pipe(
        filter((state: BreakpointState) =&gt; !state.matches),
        mapTo(SidebarMode.Closed)
      );
  
      this.opened$ = this.breakpointObserver.observe(['(min-width: 1366px)']).pipe(
        filter((state: BreakpointState) =&gt; state.matches),
        mapTo(SidebarMode.Open)
      );
  
      const minifiedStart$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(['(min-width: 1024px)']).pipe(map(state =&gt; state.matches));
  
      const minifiedEnd$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(['(max-width: 1366px)']).pipe(map(state =&gt; state.matches));
  
      this.minified$ = minifiedStart$.pipe(
        flatMap(start =&gt; minifiedEnd$.pipe(map(end =&gt; start &amp;&amp; end))),
        distinctUntilChanged(),
        filter(val =&gt; val === true),
        mapTo(SidebarMode.Minified)
      );
  
      this.observer$ = merge(this.closed$, this.minified$, this.opened$);
    }
  </code></pre>
  
  <p>with this line I can subscribe to the events:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.breakpointService.observe().subscribe();
  </code></pre>
  
  <p>Now, I would like to test the different modes within a unit test, but I don't know </p>
  
  <p><strong>how to mock the window.screen.width property within a test</strong> </p>
  
  <p>I tried several things, but nothing worked out for me.</p>
  
  <p>This is my test-setup so far: </p>
  
  <pre class="lang-js prettyprint-override"><code>describe('observe()', () =&gt; {
      function resize(width: number): void {
        // did not work
        // window.resizeTo(width, window.innerHeight);
        // (&lt;any&gt;window).screen = { width: 700 };
        // spyOn(window, 'screen').and.returnValue(...)
      }
  
      let currentMode;
      beforeAll(() =&gt; {
        service.observe().subscribe(mode =&gt; (currentMode = mode));
      });
  
      it('should return Observable&lt;SidebarMode&gt;', async () =&gt; {
        resize(1000);
  
        expect(Object.values(SidebarMode).includes(SidebarMode[currentMode])).toBeTruthy();
      });
  
      xit('should return SidebarMode.Closed', async () =&gt; {
        resize(600);
  
        expect(currentMode).toBe(SidebarMode.Closed);
      });
  
      xit('should return SidebarMode.Minified', async () =&gt; {
        resize(1200);
  
        expect(currentMode).toBe(SidebarMode.Minified);
      });
  
      xit('should return SidebarMode.Open', async () =&gt; {
        resize(2000);
  
        expect(currentMode).toBe(SidebarMode.Open);
      });
    });
  </code></pre>