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

如何在Ember中测试返回PromiseArray的计算属性

在Ember中测试返回PromiseArray的计算属性,可以按照以下步骤进行:

  1. 创建一个测试文件,命名为your-test-file.js,并导入所需的测试工具和模块:
代码语言:txt
复制
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { Promise } from 'rsvp';
  1. 在测试文件中,使用module函数定义一个测试模块,并在其中使用setupRenderingTest函数进行设置:
代码语言:txt
复制
module('Integration | Component | your-component', function(hooks) {
  setupRenderingTest(hooks);
});
  1. 在测试模块中,使用test函数定义一个具体的测试用例,并在其中编写测试代码:
代码语言:txt
复制
test('should return PromiseArray from computed property', async function(assert) {
  assert.expect(1);

  // 模拟异步操作返回PromiseArray
  const promiseArray = Promise.resolve(['item1', 'item2']);
  this.set('promiseArray', promiseArray);

  await render(hbs`
    {{#each this.promiseArray as |item|}}
      <div>{{item}}</div>
    {{/each}}
  `);

  assert.equal(this.element.querySelectorAll('div').length, 2, 'Should render 2 items');
});

在上述代码中,我们首先使用Promise.resolve创建一个解析为包含两个元素的PromiseArray。然后,使用this.set将其设置为组件的属性promiseArray。接下来,使用render函数渲染一个包含{{#each}}块的模板,用于遍历promiseArray中的每个元素,并将其渲染为<div>元素。最后,使用assert断言验证渲染结果是否符合预期。

  1. 运行测试,可以使用以下命令:
代码语言:txt
复制
ember test --filter="your-test-file.js"

这将运行指定的测试文件并输出测试结果。

请注意,上述代码示例中使用了一些常见的测试工具和模块,如qunitember-qunit@ember/test-helpers。此外,还使用了Promise模块来创建一个解析为PromiseArray的异步操作。根据具体的项目配置和需求,可能需要进行适当的调整和修改。

希望以上信息对您有所帮助!如果您需要更多帮助,请随时提问。

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

相关·内容

ES2020这些新功能令人期待

可选链接 就我个人而言,我认为这是ES2020最令人期待功能之一,这个功能使你可以安全地访问对象深层嵌套属性,而不必检查每个属性是否存在。那么,Talk is cheap....console.log(user.address.prop102.po); //Error 如上所示,在访问属性前,你必须检查所访问层级属性是否存在,以防止出现Cannot read property...而随着嵌套级别的增加,你手动检查属性数量也将随之增加。这意味着一旦我们漏过一项,将会在程序引发undefined或null对象错误,导致应用出现问题。...下面是我如何在空值合并出现前实现它代码。...它返回一个包含所有匹配正则表达式结果及分组捕获组迭代器。这个方法添加到了 String 原型里。 globalThis globalThis是对全局对象引用,与环境无关。

90920

JavaScript框架比较:AngularJS vs ReactJS vs EmberJS

JavaScript框架,Angular.js,Ember.js或React.js,给你代码带来结构,并保持其有序化,从而使您你app更灵活,更具可扩展性,并更容易开发。 ?...将React集成到传统MVC框架,Rails需要一些配置。...Ember.js不是为应用程序各种路由提供详细配置,而是喜欢遵循命名约定并自动生成结果代码,仅在不遵守约定情况下指定配置。 客户端渲染和结构到可扩展web应用程序超出视图层。 URL支持。...Ember对象模型实现膨胀Ember整体大小并在调试时调用堆栈。 最有见地和最重框架。 对于小项目而言过大。 测试用例似乎模糊/不完整。...比较Angularjs Vs Reactjs Vs Emberjs功能 特性 AngularJS ReactJS Ember.js 动态UI绑定 允许在纯对象或甚至属性级别使用UI绑定。

12.7K60
  • 10 个超有用 JavaScript 技巧

    JavaScript 只有六个虚值,它们是: undefined null NaN 0 "" (空字符串) false 滤除这些虚值最简单方法是使用以下函数。...1[0,10,4,9,123,54,1].sort((a,b) => a-b); 2>>> [0, 1, 4, 9, 10, 54, 123] 这里提供了一个将数字数组两个元素与 sort 方法进行比较函数...---- 使用别名进行解构 解构赋值语法是一种 JavaScript 表达式,可以将数组值或对象值或属性分配给变量。解构赋值能让我们用更简短语法进行多个变量赋值。...it as otherNumber 7const { number: otherNumber } = object; 8console.log(otherNumber); //10 ---- 获取数组最后一项...reason: Error: Something went wrong ...} 16//] 即使某些 promise 被拒绝,Promise.allSettled 也会从你所有的 promise 返回结果

    79120

    Ember.js和Vue.js对比,哪个框架更优秀?

    在单页架构,如果用户需要共享应用子页面链接,那么框架应该具有基于URL路由不同功能能力。 更严格模板选项有助于实现双向绑定。 不应与任何第三方库产生冲突。 应该很容易测试框架内代码。...您可以返回并轻松检查错误。除了测试组件外,您还可以返回并检查所有状态。就任何开发人员而言,这是另一个重要功能。 Vue.js也有非常详细文档。它有助于为你快速上手开发应用程序。...易于任何新开发者使用 您可以返回检查并更正错误。 您可以检查所有现有状态。 详细文档有助于快速构建网页或应用程序。 Ember.js Ember.js是MVVM模型框架。它是开源软件。...这样则将避免为每个工作重复计算,以免浪费大量时间。 因为Promise无处不在,所以你可以以简单方式编写代码和模块,使用 Ember 任何 API。 同时Ember也有一个很不错上手指南。...Ember.js是一个完全加载前端框架。 框架稳定,因为所有组件都具有相同功能和属性。 具有明确定义限制,可防止您使应用程序复杂化 Handlebar使你可以轻松阅读和理解模板。

    2.8K20

    2016 年 7 个顶级 JavaScript 框架

    具备了快速开发步伐,容易代码集成,以及做好了单元测试准备AngulatJS当然可以成为你下一个项目的选择。...然而,与AngularJS相比,ReactJS在测试简单性和组件结构方面略显不足。此外,这并不使得ReactJS逊于AngularJS。...5.EmberJS 一些令人惊讶框架,Ember.js,允许你轻松地以更快速度开发web应用程序。 Ember.js因为很多原因成为了许多开发人员首选。...其中有一个原因是Ember.js路由允许你停止阻塞web。使用Ember,你可以获得URL和具备由你创建每个路径默认后退按钮,并且API易于使用。...本质 选择正确JavaScript框架从来不是取决于特定框架可以提供功能数量。重点在于框架实际功能,以及你如何在自己开发项目中使用该功能。

    4.3K10

    渐进式 JavaScript 框架 Vue.js,精华都在这了

    Vue主要特性如下: ● 可扩展数据绑定 ● 将普通 JS 对象作为 model ● 简洁明了 API ● 组件化 UI 构建 ● 配合别的库使用 ? 对比其他框架 ?...Ember Vue 在普通 JavaScript 对象上建立响应,提供自动化计算属性。在 Ember 需要将所有东西放在 Ember 对象内,并且手工为计算属性声明依赖。...在性能上,Vue 比 Ember 具有优势,即使是 Ember 2.x 最新 Glimmer 引擎。Vue 能够自动批量更新,而 Ember 在关键性能场景时需要手动管理。...总而言之,vue 比市面上其他框架功能更完善,性能更高效。 ? Vue实例 ? ? 属性与方法 ● 每个 Vue 实例都会代理其 data 对象所有属性 ? ● vue实例上实例属性要通过实例....$实例属性名获取 ● 在vue实例里面用this,this指向是vue实例 ● 实例上有一个$watch方法可以监听data属性里面的数据变化,data一变会自动触发监听事件执行 实例生命周期 下面是实例生命周期示意图

    1.2K10

    微信跳一跳可以用 Python 刷分;macOS 再曝重大安全漏洞,或许已存在 15 年

    (详情:https://github.com/grpc/grpc/archive/v1.8.3.zip) 2、JavaScript MVC 框架 Ember.js v2.18.0 发布 Ember.js...v2.18.0 发布,Ember.js 是一个用于创建 web 应用 JavaScript MVC 框架,采用基于字符串 Handlebars 模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化...内核 4.14.10 仍在测试。...Siguza 指出,他发现 Bug 会影响所有版本 macOS ,并可能导致内核任意读/写漏洞。他还表示该漏洞至少2002年就存在了。...Linus 说,“4.15-RC6 内核 prepatch 已经发布了测试。如果不是最终 x86 PTI,也会在 diffstat 显示出来。大约有一半 rc6 是在 x86 工作。

    1.5K100

    一些前端框架比较(下)——Ember.js 和 React

    属性绑定是另一个和 Backbone.js 比强化了地方,依然遵照 CoC 原则,如果属性以 Binding 结尾,绑定属性就自动创建,而计算属性则(方法输出和某些属性之间依赖关系)使用 property...事件方面使用 observes 方法并传入属性名来建立监听,其实和 Backbone.js 是差不多。...HTML 属性); 比如基于字符串模板(对比 Angular 基于整棵 DOM 树上绑定属性实现)有诸多优势:预编译,不需要遍历整棵 DOM 树; 比如在服务器上渲染应用的话,Ember.js 不需要启动整个浏览器环境...当然有一些 Flux 特性它没有采纳,比如 “dispatcher”,因为有了纯函数式 reduce 方法来计算状态;再比如 Redux 是私自默认你只会使用不可变对象,而不会擅自改变其中状态。...; Ember.js 说太幼稚,世界是你们,世界是他们,但世界早晚是 Ember.js

    2.3K20

    前端框架之争丨除了Vue、Angular和React还有谁与之争锋

    调用执行一些工作,并将控制权返回给客户端。 框架体现抽象设计,内置更多行为,开发者通过子类化或插入自己类将行为插入到框架不同位置使用,框架则调用这些点代码。 1. React ?...Vue核心卖点是从头开始设计,可逐步采用,即Vue可增强常规网页功能或构件完善单页应用,同时Anugular可基于HTML可将属性绑定到基础数据模型,提供单个文件组件。...SvelteKit处于公开测试阶段,社区正在不断发展壮大。尽管Svelte目前年幼,但开发者应该注意关注。 5. Ember.js 最后介绍Ember,自前端框架问世就已经存在。...Ember与Angular类似在应用程序开发采用更多包含电池方法,并提供构建现代前端JavaScript应用程序所需一切。遵循六个星期发布周期且稳定性极好。...从相关工具讲,相关工具众多,从Ember CLI到Ember Inspector,还有许多可用第三方库。

    1.5K30

    前端框架这么多,该何去何从?|洞见

    ---- 那么在项目实施,我们一般会关注哪些方面呢?...接下来,我们将从组件复用、测试和学习曲线这三个主要方面对Angular4,Ember.js,Vue.js和React这四个当前最流行框架来做更深入分析,提供更具体参考。 1....双向绑定在表单交互多场景更便捷,单向绑定在管理跟踪记录组件状态时更高效。...React在组件状态或属性变化后,也是基于virtual DOM视图更新。 Angular4在引起状态变化时刻,框架自动触发脏检查,也可以手动执行脏检查,直接操作HTML DOM更新视图。...Angular4和Ember概念多,有官方推荐实践,要完全掌握难度大,优势是实现起来更规范。 3. 学习曲线 在技术选型过程,保证项目按时交付,控制风险,团队能力建设提升,都是需要考虑因素。

    1.3K40

    2022 年十大 JavaScript 框架

    它将 HTML 扩展到应用程序,解释数据绑定属性。在 TypeScript 编写,Angular 实现了可选和核心功能,你可以将其作为一组 TypeScript 库导入到应用程序。...使 Angular 流行一些特性包括高性能、MVC 架构、双向数据绑定、无代码框架、跨平台、Angular CLI、测试、动画、可访问性、模板、IDE 和代码分割。...Ember.js Ember.js 是一个使用组件服务模式开源、高效 JavaScript 框架。它提供了构建富 UI(这些 UI 可以在任何设备上轻松工作)所需一切。...使 Ember.js 成为开发人员重要选择一些关键特性是:Ember CLI、路由、Ember 日期组件,Ember 监测和一些服务。...译者简介: 冬雨,小小技术宅一枚,从事研发过程改进及质量改进方面的工作,关注编程、软件工程、敏捷、DevOps、云计算等领域,非常乐意将国外新鲜 IT 资讯和深度技术文章翻译分享给大家,已翻译出版《深入敏捷测试

    2.8K20

    10个基于webJavaScript最优秀应用程序库和框架

    例如,新闻站点必须不断刷新它们内容,因此不可能每隔几秒钟重新配置设置以支持这些更改。数据驱动文档,或D3。库独特之处在于它把数据放在首位。下面的截屏显示了在D3可以找到许多数据演示一些。...单击visual index一个条目,您将看到一个详细页面,在这个页面您可以看到数据表示完整视图(如下所示),以及用于创建表示底层代码和数据: ?...QUnit 许多库提供测试功能有很多不足之处。即使您使用脚本,手动测试复杂应用程序也会很麻烦,而且需要花费大量时间——如果它能找到所有的错误的话。...幸运是,该软件附带了大量教程,本文所示,这将使有经验开发人员更容易快速地开始工作。 ? 2. Ember.js 一个自称为“有抱负web开发人员框架”框架确实有些严肃。...类似地,Jest是一个“零配置”JavaScript测试解决方案,旨在使用React进行开箱即用测试

    2.2K20

    10个最受欢迎 JavaScript 框架,以及它们主要特征和功能

    有超过五十万个网站 google.com、youtube.com 等正在使用 Angular。...这意味着基于 Node.js 服务器永远不会等待 API 返回数据。服务器在调用它之后移动到下一个 API,并且事件通知机制帮助服务器从先前 API 调用获得响应。...Ember Ember是一个开源 JavaScript Web 框架,它允许开发人员通过将最佳实践合并到框架来构建可伸缩单页面 Web 应用。...Ember 模板:Ember 模板内置于 Ember UI ,这些模板使用 Handlebars 模板语言编写。 Handlebars 以其使用双花括号命名,它可以使开发人员写更少代码。...可扩展 HTML:Aurelia 可扩展 HTML 编译器允许你创建自定义 HTML 元素,可以向现有元素添加自定义属性并控制模板生成,所有这些都完全支持动态加载、数据绑定和高性能批量渲染。

    3.8K10

    一篇文章搞懂TypeScript

    比 any 更安全,比如声明了一个对象为 unkonw 要读取属性或调用方法时需要先进行具体类型判断或用 as 进行类型断言,收窄类型后才能读取void:没有任何返回函数,声明一个 void 类型变量没有什么用...,应该定义具体属性类型或通过 interface 接口定义类型,才能进行属性读取、赋值操作。...其他常用类型、DOM类型其他类型:除了上面提到一些类型,还有 Function、Date、RegExp、Error、PromiseArray和Tuple类型:Tuple元组类型和数组类型类似,不过元组表示一个已知元素数量和元素类型数组...,返回是联合类型(跟我们用 Object.keys 获取对象所有属性键类似,只不过 Object.keys 返回是所有键名数组)。...ts 获取一个变量申明类型infer推断占位,当某个类型不确定时,就可以暂时表示为 xxinterface、type、对象属性多个中符号interface 和 type 多个可以用分号、逗号,

    10800

    2015.5 技术雷达 | 语言和框架篇

    我们也推荐评估一些其他类似的框架,在这一版雷达我们提出 Ember.js,它在 ThoughtWorks 内部也逐渐变得流行。...Ember 被人称道是,它对于惯例胜于配置非常固执己见,并且有着响应迅速核心开发团队,其性能不错并且有一套基于 ember-cli 构建工具。...Flight.js 对测试支持很少,并且容易卷入事件漩涡。 继承与组合,我们喜欢组合,与之类似,我们非常喜欢 Flight.js 用混入方式处理行为。...经过一些我们在真实世界经验,Swift(developer.apple.com/swift)仍然表现出非常好前景。有些问题,过长编译时间,已经得到了解决。...然而,持续语言变化会导致额外开发工作,并使得构建你自己老版本软件非常繁琐。测试和重构也依然痛苦。总之,虽然如此,在为苹果生态圈开发新项目的时候你还是应该考虑使用 Swift。

    915100

    2023 年web开发人员必须知道 JavaScript 开发工具

    它还有助于执行同时编辑(对多个选定区域进行相同交互式更改)以及快速导航到文件, 其特点 支持自动化 可以处理多个项目 命令行编辑器 好用功能,“转到符号”和“转到定义” 改进窗格管理 Frameworks...其特点 Two-way data binding 双向数据绑定 单元测试 集成 CLI 简单模板语法 代码拆分 React React 是 Facebook 为用户界面开发 JavaScript 库...其特点 超高测试覆盖率 基于路由和中间件 高性能 HTTP 帮助程序(重定向、缓存等) 支持多种引擎 Ember Netflix、LinkedIn 和 Nordstrom 等网站使用 Ember,这是一个高效...它为每个版本提供了丰富文档,并使用带有类、生成器和装饰器现代 JavaScript。对于后端应用程序来说,它更加灵活。 它提供与 Ember 集成 CLI,以提高生产力。...为了提高渲染速度,它提供了一个 Glimmer 渲染引擎,这是 Ember 最重要功能。 其特点 跨多个来源访问数据 高性能 路由和双向数据绑定 三级测试

    24110
    领券