Angular тестирование с использованием primeng: NullInjectorError: StaticInjectorError (DynamicTestModule) [ButtonDirective -> ElementRef - PullRequest
Новая
       41

Angular тестирование с использованием primeng: NullInjectorError: StaticInjectorError (DynamicTestModule) [ButtonDirective -> ElementRef

0 голосов
/ 22 января 2020

Я пытаюсь протестировать мое приложение angular 8, используя primeng, но карма отображает следующую ошибку: 

NullInjectorError: StaticInjectorError(DynamicTestModule)[ButtonDirective -> ElementRef]: 

 StaticInjectorError(Platform: core)[ButtonDirective -> ElementRef]: 

      NullInjectorError: No provider for ElementRef!

Я думаю, что это причина компонента кнопки primeng, действительно на его github (primeng / src / app / components / button / button.ts) мы получили это: 

export class ButtonDirective implements AfterViewInit, OnDestroy {

    @Input() iconPos: 'left' | 'right' = 'left';

    @Input() cornerStyleClass: string = 'ui-corner-all';

    public _label: string;

    public _icon: string;

    public initialized: boolean;

    constructor(public el: ElementRef) {}

Я много чего пробовал, но ничего не получалось: '(

Я пробовал:

  • для насмешки Element Ref с помощью

    • {предоставить: ElementRef, useClass: MockElementRef},
    • {предоставить: ElementRef, useValue: MockElementRef },
  • для добавления angular в путь tsconfig. json
  • для добавления "build": {"preserveSymlinks": true} in angular. json

Вот мой app.component.spe c .ts: 

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";

// Import PrimeNG modules
import {
 /**
    PRIMENG IMPORTS
 **/
 ButtonModule
} from "primeng/primeng";

import { } from 'jasmine'
import { ElementRef } from '@angular/core';

export class MockElementRef extends ElementRef {
  constructor() { super(null); }
  // nativeElement = {};
}

describe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let elRef: ElementRef;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        /**
            LOTS OF MODULES
        **/
        ButtonModule,
      ],
      declarations: [        
        /**
            LOTS OF COMPONENTS
        **/
      ],
      providers: [
        /**
            LOTS OF SERVICES
        **/
        { provide: ElementRef, useClass: MockElementRef },
        // { provide: ElementRef, useValue: MockElementRef },
        { provide: APP_BASE_HREF, useValue: '/' },
        { provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true },
        { provide: HttpService, useFactory: httpClientCreator, deps: [HttpClient] }
      ]
    }).compileComponents();
    // elRef = TestBed.get(MockElementRef);
  }));

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

  it('should create', () => {
    const app = fixture.debugElement.componentInstance;    
    expect(app).toBeTruthy()
  });
});

Помогите мне, пожалуйста! (

* РЕДАКТИРОВАТЬ: *

app.module.ts: 

// Import PrimeNG modules
import {
  CalendarModule,
  CheckboxModule,
  ContextMenuModule,
  DialogModule,
  DropdownModule,
  GrowlModule,
  InputTextareaModule,
  PaginatorModule,
  PanelModule, SpinnerModule,
  TabViewModule, ToolbarModule, TooltipModule, KeyFilterModule, ButtonModule
} from "primeng/primeng";
import {TableModule} from "primeng/table";

    /**
       LOTS OF IMPORTS
    **/

// Enable production mode
enableProdMode();

@NgModule({
  imports: [
    /**
       LOTS OF MODULES
    **/
  ],
  declarations: [
    AppComponent,
    /**
       LOTS OF COMPONENTS
    **/
  ],
  bootstrap: [
    AppComponent
  ],
  providers: [
    /**
       LOTS OF SERVICES
    **/
    { provide: APP_BASE_HREF, useValue: '/' },
    { provide: HTTP_INTERCEPTORS, useClass: HttpClientInterceptor, multi: true },
    { provide: HttpService, useFactory: httpClientCreator, deps: [HttpClient] }
  ]
})

export class AppModule {
}

* РЕШЕНО: *

Путем добавления «preserveSymlinks»: true в angular. json в «тестовой» секунде раздел вместо "сборки" работал ... довольно глупо с моей стороны

1 Ответ

0 голосов
/ 22 января 2020

решено

Мой angular. json тестовый раздел (добавлено "preserveSymlinks": true): 

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/app/modules/dvy-report/dvy-crud/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/app/modules/dvy-report/dvy-crud/polyfills.ts",
            "tsConfig": "src/app/modules/dvy-report/dvy-crud/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.css",
              "src/sass/primeicons/primeicons.css",
              "src/sass/font-awesome/font-awesome.css",
              "src/sass/style.scss",
              "node_modules/primeng/resources/primeng.css",
              "src/app/modules/dvy-report/dvy-crud/app.component.css"
            ],
            "assets": [
              "src/favicon.ico"
            ],
            "preserveSymlinks": true
          }
}
...