title: Angular unit testing - change component variable inside the test
body: <p>I want to test the functionality of a button, but that element is not visible on the page because it's under an <code>*ngIf</code>. I would like to set the variable from <code>*ngIf</code> to be truthy in order to be able to display the data. I tried doing it with:</p>
  
  <pre><code>beforeEach(() =&gt; {
      fixture = TestBed.createComponent(HeaderComponent);
      component = fixture.componentInstance;
      component.currentUser = {firstName: 'xxx'} as User; // Changing currentUser so it won't be undefined anymore 
      fixture.detectChanges();
    });
  </code></pre>
  
  <p>but still doesn't work. Here is my component:</p>
  
  <pre><code>&lt;div class="menu-button-container"&gt;
      &lt;div class="menu-button" [ngClass]="{'menu-open': isMenuOpen}" (click)="toggleMenu()" *ngIf="currentUser"&gt;
          &lt;div class="line-menu-button line-menu-button__top"&gt;&lt;/div&gt;
          &lt;div class="line-menu-button line-menu-button__middle"&gt;&lt;/div&gt;
          &lt;div class="line-menu-button line-menu-button__bottom"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the test I try to run:</p>
  
  <pre><code>it('should open the menu when the button menu is clicked', () =&gt; {
      const fixture = TestBed.createComponent(HeaderComponent);
      fixture.detectChanges();
      const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
      expect(menuDebugElement).toBeTruthy();
    });
  </code></pre>
  
  <p>this always fails. If I define the <code>*ngIf</code> rule as <code>*ngIf="currentUser"</code>, the test is working. How can I do this variable change from the test? Please advise! Thanks!</p>