流/事件有管道时单元测试失败(takeUntil(Destroy))

基础概念

在软件开发中，流（Streams）和事件（Events）是常见的数据处理方式，特别是在响应式编程和前端框架（如RxJS）中。管道（Pipes）是一种将数据从一个源传输到另一个处理步骤的机制。takeUntil 是 RxJS 中的一个操作符，用于在某个事件发生时停止接收数据流。

类型

冷流（Cold Streams）：每次订阅时都会从头开始产生数据。
热流（Hot Streams）：无论是否有订阅者，数据都会持续产生。

应用场景

用户界面事件处理：如点击、滚动等事件。
数据流处理：如网络请求、传感器数据等。
定时任务：如定时轮询、延时操作等。

问题描述

在进行单元测试时，使用 takeUntil(Destroy) 操作符可能导致测试失败。这通常是因为在测试环境中，Destroy 事件没有被正确触发或模拟。

原因

事件未触发：在测试环境中，Destroy 事件可能没有被正确触发。
模拟问题：测试代码可能没有正确模拟 Destroy 事件。
异步问题：测试代码可能没有正确处理异步操作。

解决方法

1. 确保 `Destroy` 事件被正确触发

在测试环境中，确保 Destroy 事件被正确触发。可以使用 jest 或其他测试框架来模拟事件。

import { of } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

describe('takeUntil test', () => {
  it('should stop taking values when destroy event is emitted', () => {
    const destroy$ = new Subject();
    const source$ = of(1, 2, 3).pipe(takeUntil(destroy$));

    let values = [];
    const subscription = source$.subscribe({
      next: (value) => values.push(value),
      complete: () => expect(values).toEqual([1, 2, 3]),
    });

    destroy$.next();
    destroy$.complete();

    expect(subscription.closed).toBe(true);
  });
});

2. 使用 `jest` 模拟 `Destroy` 事件

import { of } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

describe('takeUntil test', () => {
  it('should stop taking values when destroy event is emitted', () => {
    const destroy$ = new Subject();
    const source$ = of(1, 2, 3).pipe(takeUntil(destroy$));

    let values = [];
    const subscription = source$.subscribe({
      next: (value) => values.push(value),
      complete: () => expect(values).toEqual([1, 2, 3]),
    });

    jest.spyOn(destroy$, 'next').mockImplementation(() => {
      destroy$.next();
      destroy$.complete();
    });

    expect(subscription.closed).toBe(true);
  });
});

3. 处理异步操作

确保测试代码正确处理异步操作，可以使用 async 和 await。

import { of } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

describe('takeUntil test', () => {
  it('should stop taking values when destroy event is emitted', async () => {
    const destroy$ = new Subject();
    const source$ = of(1, 2, 3).pipe(takeUntil(destroy$));

    let values = [];
    const subscription = source$.subscribe({
      next: (value) => values.push(value),
      complete: () => expect(values).toEqual([1, 2, 3]),
    });

    destroy$.next();
    destroy$.complete();

    await new Promise((resolve) => setTimeout(resolve, 100));

    expect(subscription.closed).toBe(true);
  });
});

参考链接

通过以上方法，可以确保在单元测试中正确处理 takeUntil(Destroy) 操作符，避免测试失败的问题。

页面内容是否对你有帮助？

有帮助

没帮助

流/事件有管道时单元测试失败(takeUntil(Destroy))

、、、、

Angular: 9.1.13；RxJS: 6.6.3；Karma: 4.3.0；jasmine-core: 2.6.2 我们有一个组件，它具有处理流和事件的服务。当通过调用this._destroy.next()来销毁流/事件时，每个这样的组件方法都会取消订阅。在ngOnDestroy钩子中，subject被声明为private _destroy = new Subject()。在我们运行单元测试之前，一切似乎都很好。

浏览 26提问于2021-05-11得票数 0

1回答

用RXJS combineLatest和pipe takeUntil防止泄漏

在使用Rxjs时，对于takeUntil运算符在使用pipe时与combineLatest的行为有一些混淆。是否有必要将takeUntil添加到每个可以观察到的内部，包括管道takeUntilimport {takeUntil} from_store.pipe(select(stateOfLocation), takeUntil</e

浏览 0提问于2019-03-03得票数 2

回答已采纳

1回答

角JS 1.5 -在两个组件中使用可观测的RXJS

、

子组件的工作方式是，当用户想要在模板中搜索公司数据库时，companySrch组件被加载在' company‘或'employee’中。当用户在搜索结果中选择记录时，记录通过注册的RXJS广播，如下所示： companySrch.outputcompanySrch.navService.nav.navExt = false;然后，如果用户在employee或company模板中，则通过模板对RXJS事件</e

浏览 2提问于2016-03-18得票数 2

回答已采纳

3回答

Angular RxJS Observable:订阅takeUntil与取消订阅

、、、

有几种方法可以取消订阅角度组件上的可观测数据(通过使用ngOnDestroy)。下面哪个选项应该是首选的，为什么(例如，技术原因、性能等)？选项1: takeUntil@Component({ templateUrl: ".flightService: FlightService) {} this.flightService .

浏览 2提问于2019-10-17得票数 19

回答已采纳

3回答

订阅包含TakeUntil的管道失败

、、

将我的数据流送到Grafana的每一个逻辑都能工作，而完整的管道也能工作。您提供了一个期望流的无效对象。您可以提供一个可观察的、许诺的、数组的或可迭代的。这个问题仅在引入takeUntil时</

浏览 4提问于2019-10-21得票数 0

回答已采纳

3回答

角NGXS中的取消订阅

、、、

我对NGXS的角度很陌生，我读过这样的文章:当您使用异步管道时，您不需要取消订阅。不过，我也是从queryParams订阅的，也是订阅dispatches操作的。我是否需要取消订阅这两个代码下面？

浏览 0提问于2019-05-16得票数 4

回答已采纳

2回答

角分量中的RxJS订阅

、、、

我认为我的用法是不正确的，因为我有新的订阅与页面的每一个互动。而且，据我所知，它们需要在构造函数中声明。这个页面的思想是有一个输入表单，用户可以输入查询并检查单选按钮来选择搜索内容：“tv”或“types”。当有搜索结果时，会出现一个按钮来展开结果。但现在我有了另一个误解:如何将2个数组可观测值转换为一个数组？我已经在谷歌上搜索过，但我找不到解决问题的方法:我有函数来加载更多的电影--它必须扩展distinctMovies$的数组，它看起来就像一个数字数组( is )，但是我不能连接两个

浏览 4提问于2021-10-28得票数 1

回答已采纳

2回答

订阅被多次调用对话框在状态突变后使用Ngrx角打开两次。

、、、

尝试在loadingComplete = new (False)中使用takeUntil(loadingComplete)，但与我的逻辑不兼容。因为至少应该在作业状态之后调用此订阅一次，所以"COMPLETED".Tried使用采取( 1 )，因为我正在轮询获取进度状态，在第一次订阅之后，不能在使用“取1”时获取该订阅状态。car-history');} this.uploadStore.dispatch(stopPolling({})); t

浏览 4提问于2020-01-21得票数 1

2回答

当阶段不稳定时停止管道

我有一个使用工作流插件创建的Jenkins构建管道。在开始时，管道在码头容器内运行一个gulp构建，然后使用下面的代码存档测试结果 step([$class: 'JUnitResultArchiver', testResults: 'build/test-results当单元测试没有通过时，Jenkins知道构建是不稳定的，并将其标记为黄色。然而，它仍在继续，随后的步骤正在酝酿之中。当单元测试失败时</e

浏览 0提问于2016-01-21得票数 9

回答已采纳

2回答

如何避免角9中复杂RxJS管道的内存泄漏？

、、、

在我的角+ RxJS应用程序中，我有一个有点复杂的管道结构：getAll(url): Observable<any[]> { // parse result }正如您所看到的，我从远程数据服务、代理服务、助手服务和组件构建了一个管道问题是:如果我想把一个take(1) RxJS操作符放到我的管道

浏览 3提问于2020-05-31得票数 4

回答已采纳

2回答

事件上的RxJs重复链

、、

我有一些冷的RxJ，可以观察到，当某个事件单击$发出时，我希望刷新并再次从服务器获取数据。pipe( folder => http.getFolderFiles(folder), takeUntil(this.destroy$)我应该使用什么操作符而不是假想的REPEAT_ON运算符？(undefined))).pipe( param => http.getFol

浏览 0提问于2018-10-15得票数 1

回答已采纳

4回答

确保派生组件中的super.onDestroy()

、、

我有一堆具有非常相似的生命周期逻辑的组件，所以我创建了基本组件，它实现了OnDestroy。(let s of subscriptions) s.unsubscribe();}是否有什么方法(打字本)来确保警告？可能是一个单元测试，它将在扩展ngOnDestroy的所有组件上测试BaseComponent。编辑i的结论是，上面的订阅数组的Ba

浏览 2提问于2019-03-04得票数 8

2回答

RxJs:为什么我与shareReplay的流在与takeUnitl操作符一起完成时，在新订阅上发出最后一个值？

我想要构建一个函数，它缓存流最后发出的值，并在触发触发器事件时重新执行流的创建。switchMap(source$), shareReplay(1));这已经很好了，唯一的问题是当我像这样使用它的时候 takeUntil(this.destroy$.asObservable()) () => of(Math.round(Math.random() * 1_000

浏览 6提问于2022-07-13得票数 2

5回答

棱角服务被摧毁，但是为什么订阅仍然从可观察到的？

、

使用角，我有一个服务是在一个组件中提供的。该服务具有可观测性，并且该组件被订阅到此可观测项。我原以为我不需要取消订阅/可观察的订阅，因为应该用组件销毁服务，从而也可以观察到服务。或者当提供服务的组件被销毁时，服务实际上没有被销毁吗？

浏览 6提问于2019-12-12得票数 4

回答已采纳

2回答

为什么观察者没有倾倒到控制台？

、、、

我有一个组件，它监听HTML按钮中的单击事件，并从它的父级获取一个可以观察到的事件。当单击按钮时，它需要检查可观察到的状态，检查是否为false，并发出一个事件。fromEvent, Observable, Subject } from "rxjs";

浏览 3提问于2022-07-14得票数 1

1回答

AngularJS -在茉莉花指令单元测试中，我如何触发element.on("$destroy")事件？

、、

我必须在一个指令中向元素对象添加一个$destroy事件侦听器，这是我在这个答案中找到的。在我的指令测试中注入/模仿之后，我创建了这样的元素，如. return this.element;试图编写单元测试，同时破坏作用域。元素破坏事件不是trigge

浏览 5提问于2019-12-03得票数 0

回答已采纳

2回答

在Angular rxjs中订阅

、、、、

我有： this.service.functionName.pipe( distinctUntilChanged

浏览 9提问于2021-11-05得票数 0

2回答

如何确保Jest在"unhandledRejection“上失败？

、、

我们的单元测试在连续交付管道中的容器中运行。/* jest.config.js */ setupFiles: ['<rootDir>/

浏览 36提问于2018-06-30得票数 12

回答已采纳

2回答

不订阅可观察到的内部服务？

、、、、

在查看代码示例时，我经常看到服务内部的可观察性不被取消订阅的情况。

浏览 2提问于2018-08-10得票数 4

回答已采纳

2回答

在执行角函数之前，如何等待最后一次击键？

、、、、

我有以下意见： <input type="text" placeholder="Search for new results" (input)="constructNewGrid($event)" (

浏览 3提问于2020-10-30得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

流/事件有管道时单元测试失败(takeUntil(Destroy))

基础概念

相关优势

类型

应用场景

问题描述

原因

解决方法

1. 确保 Destroy 事件被正确触发

2. 使用 jest 模拟 Destroy 事件

3. 处理异步操作

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. 确保 `Destroy` 事件被正确触发

2. 使用 `jest` 模拟 `Destroy` 事件