javascript - Fel: NG0302: Pipelinen 'sort' kunde inte hittas i komponenten 'CustomPipeComponent'

Jag stöter på detta fel när jag testar med Jasmine. Jag har skapat ett anpassat pipe som sorterar listan enligt den valda parametern.

Jag har importerat allt enligt min kunskap. Dessutom körs koden korrekt utan några problem. Ändå stöter jag på detta problem när jag använder Jasmine.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.component';
import { CustpipeComponent } from './custpipe/custpipe.component';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.component';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

custom-pipe.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-pipe',
  templateUrl: './custom-pipe.component.html',
  styleUrls: ['./custom-pipe.component.css']
})
export class CustomPipeComponent implements OnInit {
  sortoption: string = '';
  productsList: any = [
    { productName: 'Samsung J7', price: 18000 },
    { productName: 'Apple iPhone 6S', price: 60000 },
    { productName: 'Lenovo K5 Note', price: 10000 },
    { productName: 'Nokia 6', price: 15000 },
    { productName: 'Vivo V5 Plus', price: 26000 },
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

custom-pipe.component.html

<h2>Sorting Products list using custom pipe</h2>
Sort the list based on
<select [(ngModel)]="sortoption">
  <option value="prodName">Product Name</option>
  <option value="price">Price</option>
</select>
<br /><br />
<table border="1">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let products of productsList | sort: sortoption " >
      <td>{{ products.productName }}</td>
      <td>{{ products.price }}</td>
    </tr>
  </tbody>
</table>

sort.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {
  transform(value: any[], args?: any): any[] {
    if (args === 'prodName') {
      return value.sort((a: any, b: any) => {
        if (a.productName < b.productName) {
          return -1;
        } else if (a.productName > b.productName) {
          return 1;
        } else {
          return 0;
        }
      });
    } else if (args === 'price') {
      return value.sort((a: any, b: any) => {
        if (a.price < b.price) {
          return -1;
        } else if (a.price > b.price) {
          return 1;
        } else {
          return 0;
        }
      });
    }
    return value;
  }
}

customer-pipe.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent ]
    })
    .compileComponents();
  });

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

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

sort.pipe.spec.ts

import { SortPipe } from './sort.pipe';

describe('SortPipe', () => {
  it('create an instance', () => {
    const pipe = new SortPipe();
    expect(pipe).toBeTruthy();
  });
});

Svar #1

Du behöver lägga till SortPipe i deklarationerna av TestingModule

describe('CustomPipeComponent', () => {
  ...

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ] // <-- here
    })
    .compileComponents();
  });

  ...
});

Skål

Svar #2

ÅTGÄRD: Gör följande ändringar:

1. I app.module.ts lägg till SortPipe i declarations (Om det inte finns).
2. I customer-pipe.component.spec.ts lägg till SortPipe i declarations (om det inte redan finns) och lägg även till i providers om du får ett fel som NullInjectorError: R3InjectorError(DynamicTestModule)[PipeName -> PipeName]: NullInjectorError: No provider for PipeName!.

Som ges nedan

app.module.ts

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.component';
import { CustpipeComponent } from './custpipe/custpipe.component';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.component';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,               // Already present
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [], 
  bootstrap: [AppComponent]
})
export class AppModule { }

customer-pipe.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ], // SortPipe added here
      providers: [] // Optional, based on error
    })
    .compileComponents();
  });

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

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