angular - בדיקה עם Karma - לא ניתן לקשר ל-'routerLink' משום שזה אינו מאפיין ידוע של

אני חדש בבדיקות עם Karma/Jasmine באפליקציה שלי ב-Angular 6 ויכול להיעזר בעזרה עם אחד הכשלים הנפוצים ביותר שלי.

זו השימוש והקונפיגורציה של 'RouterLink' בתבנית שלי. אין לי שגיאה במהלך הרצת האפליקציה, אבל בעת הרצת הבדיקות, אני מקבל את השגיאה:

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

אני לא מצליח להגדיר את קובץ ה-spec שלי נכון. יש לך רעיונות איך אני יכול לתקן את ההגדרות שלי כדי לתקן את השגיאה הזו כשאני מריץ את הבדיקות שלי? אני לא בטוח אם זו בעיה בקובץ app.module שלי, ברכיב שלי, או בקובץ הבדיקה שלי.

import { NavigationComponent } from '../navigation/navigation.component';
import { EditMonitoringPointComponent } from './edit-monitoring-point.component';
import { FormsModule, NgModel } from '@angular/forms';
import { RouterLink, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule],
      declarations: [ EditMonitoringPointComponent, NavigationComponent],
      providers: [ RouterModule, RouterLink],
      // directives: [ROUTER_DIRECTIVES]

    })
    .compileComponents();
  }));

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

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

זוהי השורה ב-HTML שהמערכת תופסת:

<a [routerLink]="['/sites', current_mp.siteId]" ><i class='fa fa-ban'></i> Cancel</a>

הרכיב שלי נראה כך:

import { ActivatedRoute, ParamMap, Router, RouterModule, RouterLink } from '@angular/router';
import { SiteService } from '../../services/site.service'
import { MonitoringPointService } from '../../services/monitoring-point.service'
import { AuthService } from '../../services/auth.service'
import { DeviceService } from '../../services/device.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-edit-monitoring-point',
  templateUrl: './edit-monitoring-point.component.html',
  styleUrls: ['./edit-monitoring-point.component.css']
})

export class EditMonitoringPointComponent implements OnInit {
//declare variables
}

constructor(private router: Router, private monitoringPointService: MonitoringPointService, public dialog: MatDialog, private deviceService: DeviceService, public siteService: SiteService, private route: ActivatedRoute, private SiteService: SiteService, private authService: AuthService) { }

ngOnInit() {
...
}

app.module.ts

import { NgModule } from '@angular/core';
import { 
RouterModule}  from '@angular/router';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents],
  imports: [
    RouterModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,],
  providers: [
      {provide: HTTP_INTERCEPTORS,
      useClass: UnauthorizedResponseInterceptor,
      multi: true}]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

Thank you so much!

תשובה #1

אתה צריך להוסיף את RouterTestingModule ליבוא שלך בקובץ הספק שלך. זה אמור לאפשר ל-Angular לזהות את ההוראת routerLink שלך. בנוסף, נקה את מערך הספקים.

אנא עיינו במדריך הזה למידע נוסף: https://codecraft.tv/courses/angular/unit-testing/routing/

גם אם אינך מעוניין ב"בדיקה" של הניתוב בתוך הרכיב, אתה יכול פשוט להוסיף NO_ERROR_SCHEMA למתודת configureTestingModule שלך.

schemas: [NO_ERRORS_SCHEMA]

תשובה #2

לכל מי שנתקל בשאלה הזו כפי שאני נתקלתי: בעוד ש-RouterTestingModule עדיין עובד, מאז עדכון אחרון של Angular הוא מסומן כמיושן. הפתרון החדש נראה כזה:

לרכיבים שאינם עצמאיים, הוסף את 'RouterModule.forRoot([])' לייבואים שלך בקובץ הספציפיקציה, כלומר

await TestBed.configureTestingModule({
      imports: [RouterModule.forRoot([])],
      declarations: [MyNewNonStandaloneComponent]
})
.compileComponents();

או עבור רכיבים עצמאיים, הוסף את 'provideRouter([])' כספק בקובץ המפרט, כלומר

await TestBed.configureTestingModule({
      providers: [provideRouter([])],
      declarations: [MyNewStandaloneComponent]      
})
.compileComponents();