2

我正在一个角度应用程序中测试 Ngrx 商店效果。作为副作用，我的一个效果有一个使用材质 MatDialog 组件弹出的模态。

我想要做的是运行一个测试，其中效果由一个动作启动，这会触发垫子对话框的出现。然后我想测试单击是/否，然后继续检查结果操作（或缺少操作）。

我们正在使用 rxjs-marbles 来测试我们的商店。

RxJs 似乎并没有大量的示例，但我收集到我需要使用 TestScheduler 来处理这种类型的场景。不过，我不确定它是如何工作的。我正在做很多研究，但没有取得很大进展。

基本上，作为大理石，它看起来像这样：

-a-b-c

其中a是初始操作，b是用户在对话框中的点击，c是结果（c是可选的，如果用户点击“否”，则不会有结果操作。

我不是要求任何人编写我的代码，只是为我指明正确的方向。我即将开始阅读 TestScheduler 的源代码以更好地理解它，因为我什至不确定在这种情况下是否应该使用它。

基本上，如何编写这样的测试，其中有可观察的流与使用弹珠的模拟用户输入相结合？

4

1 回答 1

3

所以我意识到我做错了。这是一个单元测试，而不是 e2e 测试，所以我不需要测试 UI 的特定功能。因此，我提出了以下测试：

it('should show a dialog, and do nothing if the user does not confirm',
      () => {
        const dialogRef = jasmine.createSpyObj('dialogRef', {
          afterClosed: of(false),
        });
        const action = new AppActions.PromptUserAction();
        matDialog.open.and.returnValue(dialogRef);

        actions = hot('a', { a: action });
        const expected = cold('', {});

        expect(effects.promptUserAction$).toBeObservable(expected);
        expect(matDialog.open).toHaveBeenCalled();
        expect(dialogRef.afterClosed).toHaveBeenCalled();
      });

解释：

  • 创建一个 dialogRef ，它将由模拟的 MatDialog 服务返回（在 beforeEach Angular TestBed 设置中完成，通过提供如下所示的间谍对象创建：

    {
  provide: MatDialog,
  useValue: jasmine.createSpyObj(
    'MatDialog',
    ['open'],
  ),
},

  • 这会存根 open 方法，您会注意到 open 调用是对 returnValue dialogRef 进行的，然后我们可以将其用作间谍来返回我们想要的 observable。很简单，真的。

其余的测试很简单。希望这对某人有所帮助 - 您不一定需要模拟点击，因为它隐含在流程中！

于 2018-05-30T19:23:13.200 回答