首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在单元测试Angular时,Async方法总是返回true

在Angular中,我们经常需要进行异步操作的单元测试,例如异步的HTTP请求或者定时器的回调函数。为了处理这些异步操作,Angular提供了一个名为async的辅助函数。

async函数是一个特殊的函数,它可以将普通的函数转换为返回一个Promise的函数。在单元测试中,我们可以使用async函数来处理异步操作,并且可以使用await关键字来等待异步操作的结果。

然而,无论异步操作的结果是什么,async函数总是会返回一个Promise对象,并且这个Promise对象的状态总是为resolved(已解决)。因此,无论异步操作是否成功,async函数总是返回true。

这是因为async函数的返回值是一个Promise对象,而Promise对象的状态只有两种:resolved(已解决)和rejected(已拒绝)。在async函数中,无论异步操作成功还是失败,都会被视为已解决的状态,因此async函数总是返回true。

在单元测试中,我们可以通过断言来验证异步操作的结果是否符合预期。例如,我们可以使用expect函数来断言异步操作返回的结果是否为true。

以下是一个示例代码:

代码语言:txt
复制
it('should return true', async () => {
  const result = await asyncFunction();
  expect(result).toBe(true);
});

在上面的示例中,asyncFunction是一个异步函数,我们使用await关键字等待它的结果,并使用expect函数来断言结果是否为true。

总结起来,无论异步操作的结果如何,async函数总是返回true。在单元测试中,我们可以使用async函数和断言来验证异步操作的结果是否符合预期。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 之 单元测试

it方法中的几个函数 写单元测试,it里经常会有几个常见的方法async(),fakeAsync(),tick(),jasmine.done()方法等。...ComponentFixture.whenStable方法返回它自己的承诺,它getQuote 承诺完成被解析。...compileComponents方法返回承诺,可以用来它完成时候,执行更多额外任务。...---- 自己遇到的坑儿 下面都是自己实际的编写单元测试,真实遇到的问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?...---- 多次调用同一个异步方法 相信大家对这段单元测试的代码很熟悉,这里就是模拟多次调用同一个方法返回不同的值。 这里是同步方法的模拟返回数据,那么异步方法同样可以。

5.5K20
  • AngularDart4.0 英雄之旅-教程-06服务 顶

    使用单独的服务可使组件保持精简并专注于支持视图,并使用模拟服务对组件进行单元测试变得容易。 因为数据服务总是异步的,所以您将使用数据服务的基于Future的版本来完成页面。...现在,导入Hero和mockHeroes,并从getHeroes()方法返回模拟英雄:lib/src/hero_service.dart import 'package:angular/angular.dart...现在Angular知道创建一个新的AppComponent要提供一个HeroService实例。 依赖注入页面阅读更多关于依赖注入的内容。...每个接口都有一个方法。 当组件实现该方法Angular会在适当的时候调用它。 “Lifecycle Hooks”页面中详细了解生命周期挂钩。...你正在模拟一个超快,零延迟的服务器的行为,通过返回一个模拟英雄立即可用的Future。 将方法标记为async会自动将返回类型设置为Future。

    2.9K10

    Angular HttpClient 拦截器

    之前的 Angular 6 HttpClient 快速入门 文章中,我们已经简单介绍了 Http 拦截器。本文将会进一步分析一下 Http 拦截器。拦截器提供了一种用于拦截、修改请求和响应的机制。...next:HttpHandler 对象,该对象有一个 handle() 方法,该方法返回一个 Observable 对象。...CachingInterceptor 实现缓存拦截器之前,我们先来定义一个 Cache 接口: import { HttpRequest, HttpResponse } from '@angular/...Testing 为了方便演示 AuthInterceptor 拦截器的单元测试,首先我们先来定义一个 UserService 类: import { Injectable } from "@angular...这里只是简单介绍了如何为 AuthInterceptor 拦截器写单元测试,对于单元测试的同学,建议阅读官方或其他的学习资料。

    2.6K20

    Angular10配置webpack打包 「详细教程」

    当工作空间文件结构到位,可以命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用(除非你创建其它应用之后更改了默认值)。...test.ts 单元测试的主入口点,带有一些 Angular 特有的配置。你通常不需要编辑这个文件。...name: 该属性值的数据类型可以是 布尔值 或者 函数(返回值为字符串),其中布尔值得为 true,此时,分离文件后生成的文件名将基于 cacheGroups 和 automaticNameDelimiter...为true,如果当前要提取的模块,已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。 enforce选项:true/false。...仅允许您添加一些块(例如,仅单元测试块) chunksSortMode {String、Function} auto 允许控制将块包含到HTML中之前应如何对其进行排序。

    5K20

    TW洞见〡为什么你的Angular代码很难测试?

    我在过去一段比较长的时候里都在项目上使用Angular感受到Angular带来的便利的同时,也饱受了Angular测试的折磨,因为我一直觉得Angular单元测试很难写,跟JUnit+Mockito...比起来,Angular代码的单元测试真是感觉写起来不得心应手,更别说用TDD的方式来驱动开发。...我一直思考为什么Angular社区说Angular的测试性很高,但是项目上实现用起来却是另一番境地。...而版本二就简单多了,只定义了一个Model值isValid来标识当前的邮箱地址是否合法, validate()方法会在每次失焦之后自动执行,要为它添加单元测试,则只需要调用一下它的validate()方法...(因为单元测试环境中这个服务根本不存在),但是如果我们将这个服务包装成一个angularservice,那么就可以测试中轻易地将它替换成一个mock对象,然后验证这个mock对象上的方法被调用了就可以了

    1.5K30

    AngularDart 4.0 高级-HTTP 客户端 顶

    当用户单击按钮, 单击处理程序传递输入值到addHero()方法. 单击处理程序清空输入框. 按钮下面是错误消息区域....当组件的构造器很简单,组件更容易测试和调试,而所有真正的工作(如调用远程服务器)都是由单独的方法处理的。...英雄列表组件中的方法, getHeroes() 和addHero(), 指定当异步方法调用成功或失败采取的操作....获取数据 之前的示例中,应用通过返回服务中的模拟英雄来伪造与服务器的交互: import 'dart:async'; import 'package:angular/angular.dart';...web 应用程序中使用XMLHttpRequests (通常使用助手API, 例如 BrowserClient)进行服务器通信是一种常见的方法,但此方法并不总是合适.

    9.7K10

    AngularDart 4.0 高级-管道 顶

    管道类实现了PipeTransform接口的transform方法,该方法接受一个输入值,后跟一个可选参数并返回转换后的值。 对于传递给管道的每个参数,transform方法都会有一个额外的参数。...lib/src/hero_async_message_component.dart import 'dart:async'; import 'package:angular/angular.dart'...纯函数处理输入并返回值,但没有可检测到的副作用。 给定相同的输入,他们应该总是返回相同的输出。 本页前面讨论的管道是用纯函数实现的。 内置的DatePipe是一个纯函数实现的纯管道。...总是要实现一个纯函数的纯管道。 否则,你会看到很多关于表达式被检查后改变的控制台错误。 下一步 管道是封装和共享常见显示值转换的好方法。...当Angular每秒钟多次调用这些管道方法,即使是中等大小的列表,用户体验也会严重降级。 filter和orderBy经常被滥用在Angular 1应用程序中,导致投诉Angular本身很慢。

    6.4K20

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    id : int.parse(id); 英雄和HTTP 目前的HeroService实现中,返回一个用模拟英雄解决的Future。...然后使用_extractData辅助方法来解码响应主体。 响应JSON有一个单一的数据属性,它拥有主叫方想要的英雄列表。 所以你抓住这个列表并把它作为已解决的Future值返回。...你仍然从这两种方法返回一个未来。 您不必更新任何调用它们的组件。 现在是时候添加创建和删除英雄的能力了。 更新英雄的细节 尝试英雄详情视图中编辑英雄的名字。...HeroService类中实现create()方法。...当用户搜索框中输入一个名字,你会对这个名字过滤的英雄进行重复的HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务器的Web API。

    11K30

    angular4实战(4)ngrx

    initialState, action: load.Actions) { switch (action.type) { case load.SHOW_LOADING: { return true...但自己本地没有把这段代码跑成功,未报错,但不起作用,就用做简单的方法来实现reducer的汇总。...(前提是元数据中设置了changeDetection: ChangeDetectionStrategy.OnPush) 在此设置基础下,想要启动策略,就需要返回新的对象和数组。...高中英语水平翻译一下:async这个管道,会返回订阅的Observe ,promise对象的最新的值,当观察者发现值有改变,就会触发组件的检查策略,并且组件销毁也会自动的去取消订阅避免内存泄漏。...本例中,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法监听到控制loading值的改变,也就无法更新视图了。

    1.1K30

    Angular路由实现原理

    设定了一个路由数组,有一个方法locationHandler,根据hash,通过路由数组,找到对应页面的内容。监听hashchange事件,当hash改变触发。并且页面打开也同样触发一次。<!...在前端定义带有 hash 的链接总是安全的,因为它不会触发页面的重载。服务端不需要额外配置。实现起来更加简单。...https://github.com/angular/angular/tree/main/packages/router我们直接在router目录下搜索路由跳转的方法navigate。...之前做过一个前端获取ip的需求,封装的getUserIP方法入参是一个回调函数,我回调函数里调用navigate调用失败,后面也是通过设置ngZone.run()来解决的,这下原理终于搞清楚了,原来是执行上下文的问题...图片后面实际处理路由请求,还会对路由进行合并,路由守卫校验,设置活动路由等操作。这些都是angular提供的进阶的路由能力。基本的路由功能的实现看起来还是非常简单清晰的。

    79610

    基于 Angular 的微前端理念与实践

    你可以直接使用自己选择的任意框架来实现,比如 Angular、React 或 Vuejs。 但是,事实并非总是如此。...应用更易于测试:我们必须为大型的应用编写成千上万的单元测试,并且需要一直运行。这会拖慢我们的部署过程。实现微前端之后,每个应用都有数量更少的单元测试,并且可以独立运行自己的单元测试。...按照特性 这是最常见的方法,因为我们可以很容易地划分应用的功能。...使用 Angular 的微前端项目实例 有了这些基础知识之后,我们 single-spa 框架的协助下构建一个 Angular 项目的样例,我希望构建一个简单的应用以便于演示。...我们第 10 行导入了这三个应用,并以适当的名称和位置注册了这些应用。由于我们页面加载加载了所有的应用程序,所以没有定义任何特定的上下文路径。 <!

    87920

    Angular 1 vs. Angular 2 深度比较

    相对于递归性扫描对像的变化,这份机制会创建一个方法,这个方法将在 Angular 启动去检查这个绑定是否已经改变。...Angular 1 的多重依赖注入机制 Angular 1 中, 我们可以使用在多重地方使用不同的方法进行注入: 链接方法中通过位置注入 直接定义中通过名字注入 controller方法中通过名字...与 React Native 一样,Angular 2 支持: 一次学习,到处书写。 这意味着创建原生应用时可以重用你创建 web 应用时学习的知识。尽管总是有些区别。...目标:为服务器端渲染提供支持 支持服务器端的渲染对于搜索引擎的优化和用户感知体验来说是非常重要的;一个比较大型的Angular 1 的应用中,即使使用了预先定义的缓存模块,我们可以清楚地看到当应用开始启动...Angular 2 最初版本发布临近这会变得更加清晰,但是现在路由可能是一个主要的可行迁移办法。

    2.8K100

    ES7和ES8新特性介绍

    ES6,要检查是否存在值,你需要做一些判断,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是当匹配的元素为0位置时候,该数组包含元素,...React') } ES7中,使用includes代码格式如下: let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes...ES5中,ECMAScript中没有单个方法来简化两个对象之间的正确拷贝。开发者要使用Object.assign()来拷贝对象, Object.assign()分配属性只有copy和定义新的属性。...共享内存与原子操作 当内存被共享,多个线程可以并发读、写内存中相同的数据。原子操作可以确保那些被读、写的值都是可预期的,即新的事务是旧的事务结束之后启动的,旧的事务结束之前并不会被中断。...Atomic 对象类似于 Math 对象,拥有许多静态方法,所以我们不能把它当做构造函数。

    5.5K60

    ES7、ES8新特性

    ES6,要检查是否存在值,你需要做一些判断,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是当匹配的元素为0位置时候,该数组包含元素,...React') } ES7中,使用includes代码格式如下: let arr = ['react', 'angular', 'vue'] // Correct if (arr.includes...ES5中,ECMAScript中没有单个方法来简化两个对象之间的正确拷贝。开发者要使用Object.assign()来拷贝对象, Object.assign()分配属性只有copy和定义新的属性。...共享内存与原子操作 当内存被共享,多个线程可以并发读、写内存中相同的数据。原子操作可以确保那些被读、写的值都是可预期的,即新的事务是旧的事务结束之后启动的,旧的事务结束之前并不会被中断。...Atomic 对象类似于 Math 对象,拥有许多静态方法,所以我们不能把它当做构造函数。

    3.5K50

    Spring 异步调用,一行代码实现!舒服,不接受任何反驳~

    返回结果分成两种情况: 执行成功,调用 AsyncResult#forValue(V value) 静态方法返回成功的 ListenableFuture 对象。...方法返回 false; // 如果任务已经启动,执行 cancel(true) 方法将以中断执行此任务线程的方式来试图停止任务,如果停止成功,返回 true ; // 当任务已经启动,...所以,我们调用 #addCallback(...) 接口方法来添加回调,必然直接使用回调处理执行的结果。...看源码这个事儿,总是柳暗花明又一村。...3.2 ListenableFutureTask 我们调用使用 @Async 注解的方法,如果方法返回的类型是 ListenableFuture 的情况下,实际方法返回的是 ListenableFutureTask

    5.8K30

    【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    开发中Rxjs几乎默认是和Angular技术栈绑定在一起的,笔者最近正在使用ionic3进行开发,本篇将对基本使用方法进行演示。...}) }); module.exports = router; 组件中调用上面定义的方法: sendGet(){ this.heroService.getHeroes().subscribe...使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 尽管看起来Http请求的返回结果是一个可观测对象,但是它却没有map方法,当需要对http请求返回的可观测对象进行操作,可以使用pipe操作符来实现...Observable的方法),这样第一次被订阅,网络请求被发出并进行了缓存,之后再有其他订阅者加入时,就会得到之前缓存的数据,运算符的名称已经很清晰了,【share-共享】,【replay-重播】,...Angular中提供了一种叫做异步管道的模板语法,可以直接在*ngFor的微语法中使用可观测对象: <li *ngFor="let contact of contacts | <em>async</em>"

    6.7K20

    那些年错过的React组件单元测试(上)

    ):每个测试用例执行之前需要执行的方法 afterEach():每个测试用例执行完后执行的方法 这里,我以项目中的一个基础 demo 来演示一下具体使用: Counter.js export default...).toEqual({ success: true }) done() }) }) 上面的代码中,我们给test函数传入了done参数,fetchData的回调函数中调用了...这里用.catch来捕获promise返回的reject,当promise返回reject,才会执行expect语句。...项目中,一个模块的方法内常常会去调用另外一个模块的方法单元测试中,我们可能并不需要关心内部调用的方法的执行过程和结果,只想知道它是否被正确调用即可,甚至会指定该函数的返回值。...我们测试中也主要是用到了mock函数提供的以下三种特性: 捕获函数调用情况 设置函数返回值 改变函数的内部实现 下面,我将分别介绍这三种方法以及他们实际测试中的应用。

    5K20
    领券