title: How to mock a directive, testing Angular 6 component with Jasmine and Karma
body: <p>I'm trying to test a component. This component is dependents on a directive that called Megazord. I need some syntax help on how to use a mock directive.</p>
  
  <p>Example of using services as mock:</p>
  
  <pre><code>TestBed.configureTestingModule({
    declarations: [..., MegazordCanvasDirective],
    providers: [
      {provide: UserService},
      {provide: HttpClient, useClass: HttpClientMock}, // Mock
      {provide: Router, useClass: RouterMock}, // Mock
    ]
  }).compileComponents();
  </code></pre>
  
  <p>This is my TestBed Config:</p>
  
  <pre><code>beforeEach(async(() =&gt; {
  
  TestBed.configureTestingModule({
    declarations: [..., MegazordCanvasDirective],
    ...
  }).compileComponents();
  </code></pre>
  
  <p>The test:</p>
  
  <pre><code>it('should select level3', () =&gt; {
      const level3Mocks = createMockLevel3();
      component.onSelectLevel3(level3Mocks[0]);
      // expect(component.selectedLevel3).toBe(level3Mocks[0]);
      // expect(component.mode).toBe('tagging');
    });
  </code></pre>
  
  <p>The directive dependency:</p>
  
  <pre><code>@ViewChild(MegazordCanvasDirective) public megazord;
  </code></pre>
  
  <p>The method:</p>
  
  <pre><code>public onSelectLevel3(level3: Level3): void {
      this.mode = 'tagging';
      this.updateMegazord(); // This one is using Megazord Directive.
      this.manager.clearSearchResults();
      this.onSelectLevel1(level3.level1.id);
      this.onSelectLevel2(level3.level1, level3.level2);
      this.selectedLevel3 = level3;
    }
  </code></pre>
  
  <p>updateMegazord method:</p>
  
  <pre><code>private updateMegazord(): void {
      this.megazord.api.toggleCanMask(this.mode === 'masking');
      this.megazord.api.toggleCanTag(this.mode === 'tagging');
    }
  </code></pre>
  
  <p>The Error:</p>
  
  <p><a href="https://i.stack.imgur.com/69W29.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69W29.png" alt="enter image description here"></a></p>