unit-testing - 在一项 Angular Dart 测试中不能运行多个NgTestBed

Question

我在一个文件中有两种测试方法。但是，当我运行它们时，最后一个失败。

当我尝试在第一个answer.dispatchEvent(new MouseEvent('click'));执行之后在浏览器中调试测试时，第二行上的事件侦听器将无法激活，就好像它们无法侦听任何单击事件一样。我也尝试手动单击，并且行没有像第一行一样更改颜色(使用完全相同的代码)。

import 'dart:html';
import 'package:angular2/angular2.dart';
import 'package:angular_test/angular_test.dart';
import 'package:test/test.dart';

import '...multiple_choice_quiz_component.dart';

@AngularEntrypoint()
void main()
{
    tearDown(disposeAnyRunningTest);

    group('$MultipleChoiceQuizComponent', () {
        test('should add "incorrect" css class to incorrect answer', () async {
            NgTestBed bed = new NgTestBed<MultipleChoiceQuizComponent>();
            NgTestFixture fixture = await bed.create();
            Element answer = fixture.rootElement.querySelector('.quiz-choice:nth-child(2)');
            answer.dispatchEvent(new MouseEvent('click'));
            bool hasClass = answer.classes.contains('incorrect');
            expect(hasClass, true);
        });

        test('should add "correct" css class to correct answer', () async {
            NgTestBed bed = new NgTestBed<MultipleChoiceQuizComponent>();
            NgTestFixture fixture = await bed.create();
            Element answer = fixture.rootElement.querySelector('.quiz-choice:nth-child(3)');
            answer.dispatchEvent(new MouseEvent('click'));
            bool hasClass = answer.classes.contains('correct');
            expect(hasClass, true);
        });
    });

}

这是屏幕截图。



第一行是第一种测试方法。 answer.dispatchEvent(new MouseEvent('click'));正确执行并且颜色改变。

但是，在具有完全相同代码的第二行中，整个第二行都没有响应。就像我说的那样，第二行的事件侦听器几乎被禁用了。

实际上，如果我将这两种方法放在不同的 dart测试文件 中，则两个测试都将通过。

为什么我不能在一个文件中进行这两个测试？

Answer 1

似乎存在一个错误，其中disposeAnyRunningTest实际上没有执行我们想要的操作。

https://github.com/dart-lang/angular_test/issues/46

这就是为什么当您将测试用例放在单独的文件中时，它对您的行为有所不同的原因，但是当它们一起运行时不起作用。

如果由于某些原因未正确处理测试，则测试可能无法正常工作。

您正在测试的组件可能有一个错误，该错误不允许一次在页面上出现多个副本。您是否在可能使它们仅在单个实例中起作用的任何地方使用元素ID？

Fixture.rootElement可能有一个错误，导致该错误返回上一个测试中的元素，而不是新的元素。