title: Test IF in Subscribe using Karma and Jasmine
body: <p>I'm doing unit testing in Angular 6, but I'm having trouble testing this <code>IF</code> branch. I use it to observe how big the screen is, and so to decide how many columns I'll display. I'm struggling with how to test inside the subscribe that is in <code>ngOnInit()</code>. </p>
  
  <p>This </p>
  
  <pre><code> this.watcher = this.media.subscribe((change: MediaChange) =&gt;....
  </code></pre>
  
  <p>code coverage show that it does not go into the <code>if</code> and <code>else</code> of these services. This was the best I could do. The Media Change service keeps looking at which screen size, to decide how many columns it would display in the table</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  ngOnInit() {
          this.watcher = this.media.subscribe((change: MediaChange) =&gt; {
            this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
            this.changeMqAlias = change.mqAlias;
  
            if (this.changeMqAlias == this.changeSize.XS) {
  
              this.displayedColumns = ['job', 'name', 'totalValue'];
            } else {
              this.displayedColumns = ['internalId', 'DateOfPublication', 'alias', 'job', 'name', 'totalValue'];
            }
            return change.mqAlias;
          });
        }</code></pre>
  </div>
  </div>
  
  The File Test
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>it('should create', () =&gt; {
                  fixture.whenStable().then(() =&gt; {
                    
                    expect(component).toBeTruthy();
                  });
                });
  
                it('should create which 3 columns in mat table', () =&gt; {
                  fixture.whenStable().then(() =&gt; {
                    component.changeMqAlias = 'xs';
                    expect(component).toBeTruthy();
                  });
                });
               
              });</code></pre>
  </div>
  </div>
  </p>