Is it possible to mock an Attribute Directive in Angular?

Question

I have the following directive that is applied to input tags. When running a jasmine spec on the host component I want it to ignore (mock) this directive since it has a dependency on jquery that I am not interested in testing.

I have tried to create a MockDirective class but have not been successful. Anyone know how achieve this?

@Directive({
    selector: '[skinColorPicker]'
})
export class ColorPickerDirective implements OnInit {

    @Input('skinColorPicker') initialColor;

    @Output() colorSelected: EventEmitter<string> = new EventEmitter<string>();

    constructor(private el: ElementRef) {}

    ngOnInit() {

       // legacy jQuery blah blah
    }
}

inside the host:

<input skinColorPicker="'#555'" (colorSelected)="onPageBackgroundColorSelected($event)" 
 />

the spec:

describe('PrintSidebarComponent', () => {
  let component: PrintSidebarComponent;
  let fixture: ComponentFixture<PrintSidebarComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
          PrintSidebarComponent,
          MockDirective({ selector: '[skinColorPicker]' }) // does not work
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PrintSidebarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

export function MockDirective(options: Component): Component {
    let metadata: Directive = {
        selector: options.selector,
        inputs: options.inputs,
        outputs: options.outputs
    };
    return Directive(metadata)(class _ { });
}

Can't bind to 'skinColorPicker' since it isn't a known property of 'input'.

I saw this overrideDirective method but have not been able to find a decent example of it.

One Solution Turned out to be a missing mock declaration for the @Input('skinColorPicker') property:

MockDirective({selector: '[skinColorPicker]', inputs: ['skinColorPicker']})

I still think seeing an example with the built in Testbed.overrideDirective function would be better.

Plunkr

Answer 1

The MockDirective does work, but it was misconfigured.

export function MockDirective(options: Component): Directive {
    const metadata: Directive = {
        selector: options.selector,
        inputs: options.inputs,
        outputs: options.outputs
    };
    return Directive(metadata)(class _ { });
}

Turned out to be a missing mock declaration for the @Input('skinColorPicker') property:

TestBed.configureTestingModule({
  declarations: [
      PrintSidebarComponent,
      MockDirective({ 
        selector: '[skinColorPicker]', 
        inputs: ['skinColorPicker'] }) // does work
  ]
})

Answer 2

My solution is identical to @jenson-button-event's solution, with some minor changes so it compiles in TypeScript.

export function MockDirective(options: Component): Directive {
  const metadata: Directive = {
    selector: options.selector,
    inputs: options.inputs,
    outputs: options.outputs
  };
  return <any>Directive(metadata)(class _ {}); // <----- add <any>
}

TestBed.configureTestingModule({
  declarations: [
      PrintSidebarComponent,
      MockDirective({ 
        selector: '[skinColorPicker]', 
        inputs: []  // <--- empty, unless the directive has inputs
      })
  ]
})