我在使用Jasmine进行测试时遇到了这个错误。我已经创建了一个自定义管道,它根据选定的参数对列表进行排序。
我已经根据我的知识导入了所有的东西。而且,代码正在正确执行,没有任何问题。然而,我在使用Jasmine时面临这个问题。
应用程序模块.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 { }
自定义管道.组件.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 {
}
}
自定义管道.组件.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>
排序.管道.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;
}
}
客户管道组件规范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();
});
});
分类管道规格ts
import { SortPipe } from './sort.pipe';
describe('SortPipe', () => {
it('create an instance', () => {
const pipe = new SortPipe();
expect(pipe).toBeTruthy();
});
});
2条答案
按热度按时间goqiplq21#
**修复:**执行以下更改:
1.在
app.module.ts
中,将SortPipe
添加到declarations
中(如果不存在)。1.在
customer-pipe.component.spec.ts
中,将SortPipe
添加到declarations
中(如果不存在),如果出现类似NullInjectorError: R3InjectorError(DynamicTestModule)[PipeName -> PipeName]: NullInjectorError: No provider for PipeName!
的错误,则还添加providers
。如下所示
应用程序模块.ts
customer-pipe.component.spec.ts
a2mppw5e2#
您需要在
TestingModule
的声明中添加SortPipe
干杯