Question

我有一个自定义过滤器管道，可以很好地过滤我表中的数据，但是当我在这个管道上运行测试时，测试都会失败。我收到错误＆＃34; TypeError：无法读取属性＆＃39; file＆＃39; null。＆＃34; File是我在transform中作为参数传入的数据属性。怎么让这个管道通过我的测试？

table.component.spec

import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { FiltersPipe } from "./filter.pipe";

import { DataTableComponent } from "./data-table.component";

describe("DataTableComponent", () => {
  let component: DataTableComponent;
  let fixture: ComponentFixture<DataTableComponent>;
  let filter: FiltersPipe;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        imports: [FormsModule],
        declarations: [DataTableComponent, FiltersPipe]
      }).compileComponents();

      filter = new FiltersPipe();
    })
  );

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

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

  it("filter pipe should be instanciated", () => {
    expect(FiltersPipe).toBeDefined();
  });

  it("filter pipe should return items if no field is given", () => {
    let items = [];
    items.push({ id: 1, file: "xxxx.zip" });

    let filtered = filter.transform(items, null, "file");
    expect(filtered).toEqual(items);
  });

  it("filter pipe should filter", () => {
    let items = [];

    items.push({ id: 1, file: "xxxx.zip" });
    items.push({ id: 2, file: "xxxx.zip" });
    items.push({ id: 2, file: "xxxx.zip" });
    items.push({ id: 3, file: "xxxx.zip" });

    let filtered = filter.transform(items, 2, "id");

    expect(filtered.length).toBe(2);
  });
});

filter.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filters",
  pure: false
})
export class FiltersPipe implements PipeTransform {
  transform(data: any, fields: any, selectedInput: any): any {
    if (!data) return;

    return data.filter(row => {
      if (
        row[selectedInput] !== null &&
        row[selectedInput] &&
        fields[selectedInput]
      ) {
        return row[selectedInput]
          .toString()
          .toLowerCase()
          .includes(fields[selectedInput].toString().toLowerCase());
      }
      return true;
    });

  }
}

Answer 1

filter.pipe.ts（相关部分）

你的管道变换方法有签名transform(data: any, fields: any, selectedInput: any)，在某些时候调用：

if (row[selectedInput] !== null && row[selectedInput] && fields[selectedInput])

和

.includes(fields[selectedInput].toString().toLowerCase());

第三个测试用例

在第三个测试用例中，您可以按如下方式调用transform方法：

filter.transform(items, null, "file")

因此，fields[selectedInput]为null["file"]会导致错误。您需要确保在致电fields之前fields[selectedInput]未定义。

第四个测试用例

filter.transform(items, 2, "id");

然后在你的管道中transform： fields[selectedInput].toString()变为2["id"].toString()，即undefined.toString()。 =＆GT;错误，因为您无法在undefined上调用方法。

我不确定，你想用管道实现什么目标，但我认为你把你的逻辑混淆了一下。我假设您要检查item items，item[field] === selectedInput（或startsWith等）的每个<form method="POST" enctype="multipart/form-data" action="/"> <table> <tr><td>File to upload:</td><td><input type="file" name="file" /></td></tr> <tr><td></td><td><input type="submit" value="Upload" /></td></tr> </table> <input type="hidden" name="appID" value="uploadForm" /> <input type="hidden" name="description" value="example of description" /> </form>。

定制过滤管失败的Karma / Jasmine测试

1 个答案:

filter.pipe.ts（相关部分）

第三个测试用例

第四个测试用例