What can be the reason for the error with render2 dependency injection?

Question

I get the error below, for angular attribute testing when runningng test.

No captured browser, open http://localhost:9876/
03 01 2021 19:23:43.285:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
03 01 2021 19:23:43.286:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
03 01 2021 19:23:43.289:INFO [launcher]: Starting browser Chrome
ERROR in src/app/directives/highlight.directive.spec.ts:8:23 - error TS2554: Expected 2 arguments, but got 0.
8     const directive = new HighlightDirective();
                        ~~~~~~~~~~~~~~~~~~~~~~~~
src/app/directives/highlight.directive.ts:8:15
8   constructor(private renderer: Renderer2,
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~
An argument for 'renderer' was not provided.
03 01 2021 19:23:48.538:INFO [Chrome 87.0.4280.88 (Linux x86_64)]: Connected on socket Me54exbEfYncHxGgAAAA with id 64136440
Chrome 87.0.4280.88 (Linux x86_64): Executed 0 of 0 SUCCESS (0.032 secs / 0 secs)
TOTAL: 0 SUCCESS
TOTAL: 0 SUCCESS

highlight.directive.ts

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

    @Directive({
      selector: '[appHighlight]'
    })
    export class HighlightDirective {

      constructor(private renderer: Renderer2,
                  private el: ElementRef) { }

      // tslint:disable-next-line: typedef
      @HostListener('mouseenter') onMouseEnter()  {
        this.renderer.addClass(this.el.nativeElement, 'hightlight');
      }
      // tslint:disable-next-line: typedef
      @HostListener('mouseleave') onMouseLeave()  {
        this.renderer.removeClass(this.el.nativeElement, 'hightlight');
      }

    }

highlight.directive.spec.ts


/* tslint:disable:no-unused-variable */

    import { TestBed, async } from '@angular/core/testing';
    import { HighlightDirective } from './highlight.directive';

    describe('Directive: Highlight', () => {
      it('should create an instance', () => {
        const directive = new HighlightDirective();
        expect(directive).toBeTruthy();
      });
    });

I'm using,

Angular@10.2.2
Angular-cli@10.2.0.

After ng test, the karma opens a chrome browser window which turns out to be completely blank.

What can be the issue ?

The error message is very clear. The constructor on the `HighlightDirective` class expects 2 parameters. Mock and pass those values. — R. Richards, Jan 03 '21 at 15:51
Don't mock it. Use an actual test with Angular support, which tests a component with a template using your directive, triggers your mouse events, and checks that the CSS class is added/removed. — Oleksii Pavlenko, Jan 03 '21 at 16:42
@OleksiiPavlenko , can you help lil bit with idea of how to write the logic ? The highlight.directive.test is as shown above, can you tell what are the changes I have to do ? — iCantFindaGoodUsername, Jan 03 '21 at 17:33

score 1 · Answer 1 · answered Jan 03 '21 at 18:59

Try it

let rendererMock = jasmine.createSpyObj('rendererMock', ['selectRootElement',
    'createElement',
    'createViewRoot',
    'createText',
    'setElementProperty',
    'setElementAttribute',
    'setText',
    'setBindingDebugInfo',
    'createTemplateAnchor',
    'projectNodes',
    'attachViewAfter',
    'detachView',
    'destroyView',
    'listen',
    'listenGlobal',
    'setElementClass',
    'setElementStyle',
    'invokeElementMethod',
    'animate']);

let rootRendererMock =  {
    renderComponent: () => {
        return rendererMock;
    }
};

TestBed.configureTestingModule({
        declarations: [MainComponent],
        schemas: [NO_ERRORS_SCHEMA],
        providers: [
            { provide: RootRenderer, useValue: rootRendererMock }
        ]
    });

What can be the reason for the error with render2 dependency injection?

1 Answers1