title: How to write unit test for structural directive prefixed with an asterisk * in Angular
body: <p>I'm creating Angular examples project and also adding unit tests for it. Started adding examples with directives and after adding structural directive with simple creation test other directive tests started to fail with message which isn't clear enought what has to be fixed:</p>
  
  <pre><code>`Failed: Template parse errors:
  Property binding appSimpleStructural not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        &lt;/p&gt;
        &lt;div *ngIf="4 === index"&gt;
          [ERROR -&gt;]&lt;div *appSimpleStructural="!isOnlyOdd"&gt;
            &lt;li
              *ngFor="let even of evenNumbers"
  "): ng:///DynamicTestModule/DirectivesComponent.html@17:8`
  </code></pre>
  
  <p><strong>directives.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div *ngIf="4 === index"&gt;
          &lt;div *appSimpleStructural="!isOnlyOdd"&gt;
            &lt;li
              *ngFor="let even of evenNumbers"
              [ngStyle]="{backgroundColor: even % 2 !== 0 ? 'yellow' : 'transparent'}"&gt;
              {{ even }}
            &lt;/li&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  </code></pre>
  
  <p><strong>directives.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    @NgModule({
        declarations: [
          ...
          SimpleStructuralDirective
      ],
      imports: [
          CommonModule,
        ],
      exports: [
          ....
          SimpleStructuralDirective,
        ]
      ....
  
  </code></pre>
  
  <p><strong>simple-structural.directive.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>
      @Directive({
        selector: '[appSimpleStructural]'
      })
      export class SimpleStructuralDirective {
        @Input() set appSimpleStructural(condition: boolean) {
          if (!condition) {
            this.vcRef.clear();
          } else {
            this.vcRef.createEmbeddedView(this.templateRef);
          }
        }
  
        constructor(
          private templateRef: TemplateRef&lt;any&gt;,
          private vcRef: ViewContainerRef,
        ) { }
      }
  
  </code></pre>
  
  <p><strong>simple-structural.directive.spec.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    describe('SimpleStructuralDirective', () =&gt; {
        let templateRef: jasmine.SpyObj&lt;TemplateRef&lt;any&gt;&gt;;
        let vcRef: jasmine.SpyObj&lt;ViewContainerRef&gt;;
  
        let component: DirectivesComponent;
        let fixture: ComponentFixture&lt;DirectivesComponent&gt;;
  
        beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
            declarations: [
              DirectivesComponent,
              SimpleStructuralDirective,
            ],
            schemas: [ NO_ERRORS_SCHEMA ]
          })
          .compileComponents();
  
          fixture = TestBed.createComponent(DirectivesComponent);
          component = fixture.componentInstance;
        }));
  
        it('should create an instance', () =&gt; {
          const directive = new SimpleStructuralDirective(
            templateRef,
            vcRef
          );
  
          fixture.detectChanges();
  
          expect(directive)
            .toBeTruthy();
        });
      });
  
  </code></pre>
  
  <p>full code available at: <strong><code>https://github.com/dirdakas/ng-playground</code></strong></p>
  
  <p>expected to have 0 failing tests, but after adding structural directive other directive tests started to fail.</p>