angular - Ng5 Karma Jasmine 测试呈现组件而不是结果页面

Question

假设我有一个非常简单的“创建”单元测试，ng cli 为您生成的类型:

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        HttpClientTestingModule,
        FormsModule,
        RouterTestingModule.withRoutes([{ path: 'home', redirectTo: '/' }])
      ],
      providers: [SomeService1, SomeService2, { provide: SomeService3, useValue: {} }],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

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

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

现在，当我像这样运行此测试时 ng test --browser=Chrome 而不是查看 Karma 结果页面，我正在查看我的组件。

我的 CLI 版本是 1.6.3，Karma 1.7.1，Angular 5.2.0，OS macOS。

更新 我的浏览器被捕获，karma 加载，测试运行但我看到的不是 karma 结果而是我的全屏组件，因为它的 css 覆盖了它们的结果。如果我在 DOM 中找到 div 并将其删除，我可以看到 Karma 结果。

我只是期待 Angular 删除那个节点。

Answer 1

我不太确定为什么组件的 DOM 编译在测试结束后仍然存在，但我注意到它只发生在最后一次运行的测试中。如果您可以添加另一个同样编译组件但不添加全屏组件的组件测试，那么前一个组件测试将被正确删除。因此，简单地添加更多测试可能是最简单的解决方案。

但如果这还不够，这里有两个可能的解决方案:

1。不要编译它

如果您的测试不涉及验证生成的 DOM，您可以通过直接使用该组件来简化测试的安排。

describe('MyComponent', () => {
  TestBed.configureTestingModule({
    // declarations: [MyComponent],
    imports: [
      HttpClientTestingModule,
      FormsModule,
      RouterTestingModule.withRoutes([{ path: 'home', redirectTo: '/' }]),
    ],
    // 1. Add the component as a provider.
    providers: [MyComponent, SomeService1, SomeService2, { provide: SomeService3, useValue: {} }],
    schemas: [NO_ERRORS_SCHEMA],
  });

  it('should do thing #1', () => {
    // 2. Test it like you would test a service.
    const comp = TestBed.get(MyComponent);
    expect(comp.value).toBe(false, 'off at first');
    comp.doThing1();
    expect(comp.value).toBe(true, 'on after click');
    comp.doThing1();
    expect(comp.value).toBe(false, 'off after second click');
  });

  it('should do thing #2', () => {
    const comp = TestBed.get(MyComponent);
    expect(comp.value2).toMatch(/is off/i, 'off at first');
    comp.doThing2();
    expect(comp.value2).toMatch(/is on/i, 'on after clicked');
  });
});

更多信息 here .

2。从 DOM 中移除它

如果您确实需要测试 DOM，我发现的唯一解决方法是在完成测试后显式删除 HTML 元素。

  afterEach(() => {
    if (fixture.nativeElement && 'remove' in fixture.nativeElement) {
      (fixture.nativeElement as HTMLElement).remove();
    }
  });