Dojo 如何测试 widget

测试

dojo/framework/src/testing/README.md

commit 84e254725f41d60f624ab5ad38fe82e15b6348a2

用于测试和断言 Dojo 部件期望的虚拟 DOM 和行为的简单 API。

  • 测试

    • Features

    • harness

      • API
      • Custom Comparators
    • selectors

    • harness.expect

      • harness.expectPartial

        • harness.trigger
        • harness.getRender
    • Assertion Templates

Features

  • 简单、熟悉和少量的 API
  • 重点测试 Dojo 虚拟 DOM 结构
  • 默认不需要 DOM
  • 全面支持函数式编程和 tsx 声明

harness

当使用 @dojo/framework/testing 时，harness 是最重要的 API，主要用于设置每一个测试并提供一个执行虚拟 DOM 断言和交互的上下文。目的在于当更新 properties 或 children 和失效部件时，镜像部件的核心行为，并且不需要任何特殊或自定义逻辑。

API

harness(renderFunction: () => WNode, customComparators?: CustomComparator[]): Harness;
  • renderFunction: 返回被测部件 WNode 的函数
  • customComparators: 一组自定义比较器的描述符。每个描述符提供一个比较器函数，用于比较通过 selector 和 property 定位的 properties

harness 函数返回的 Harness 对象提供了与被测部件交互的精简 API：

Harness

  • expect: 对被测部件完整的渲染结果执行断言
  • expectPartial: 对被测部件的一部分渲染结果执行断言
  • trigger: 用于在被测部件的节点上触发函数
  • getRender: 根据提供的索引返回对应的渲染器

使用 @dojo/framework/widget-core 中的 w() 函数设置一个待测试的部件简单且眼熟：

class MyWidget extends WidgetBase<{ foo: string }> {protected render() {const { foo } = this.properties;return v('div', { foo }, this.children);}
}const h = harness(() => w(MyWidget, { foo: 'bar' }, ['child']));

如下所示，harness 函数也支持 tsx 语法。README 文档中其余示例使用编程式的 w() API，在 unit tests 中可查看更多 tsx 示例。

const h = harness(() => <MyWidget foo="bar">child</MyWidget>);

renderFunction 是延迟执行的，所以可在断言之间包含额外的逻辑来操作部件的 properties 和 children。

let foo = 'bar';const h = harness(() => {return w(MyWidget, { foo }, [ 'child' ]));
};h.expect(/** assertion that includes bar **/);
// update the property that is passed to the widget
foo = 'foo';
h.expect(/** assertion that includes foo **/)

Custom Comparators

在某些情况下，我们在测试期间无法得知属性的确切值，所以需要使用自定义比较描述符。

描述符中有一个定位要检查的虚拟节点的 selector，一个应用自定义比较的属性名和一个接收实际值并返回一个 boolean 类型断言结果的比较器函数。

const compareId = {selector: '*', // all nodesproperty: 'id',comparator: (value: any) => typeof value === 'string' // checks the property value is a string
};const h = harness(() => w(MyWidget, {}), [compareId]);

对于所有的断言，返回的 harness API 将只对 id 属性使用 comparator 进行测试，而不是标准的相等测试。

selectors

harness API 支持 CSS style 选择器概念，来定位要断言和操作的虚拟 DOM 中的节点。查看 支持的选择器的完整列表 以了解更多信息。

除了标准 API 之外还提供：

  • 支持将定位节点 key 属性简写为 @ 符号
  • 当使用标准的 . 来定位样式类时，使用 classes 属性而不是 class 属性

harness.expect

测试中最常见的需求是断言部件的 render 函数的输出结构。expect 接收一个返回被测部件期望的渲染结果的函数作为参数。

API

expect(expectedRenderFunction: () => DNode | DNode[], actualRenderFunction?: () => DNode | DNode[]);
  • expectedRenderFunction: 返回查询节点期望的 DNode 结构的函数
  • actualRenderFunction: 一个可选函数，返回被断言的实际 DNode 结构
h.expect(() =>v('div', { key: 'foo' }, [w(Widget, { key: 'child-widget' }), 'text node', v('span', { classes: ['class'] })])
);

expect 也可以接收第二个可选参数，返回要断言的渲染结果的函数。

h.expect(() => v('div', { key: 'foo' }), () => v('div', { key: 'foo' }));

如果实际的渲染输出和期望的渲染输出不同，就会抛出一个异常，并使用结构化的可视方法，用 (A) （实际值）和 (E) （期望值）指出所有不同点。

断言的错误输出示例:

v("div", {"classes": ["root",
(A)     "other"
(E)     "another"],"onclick": "function"
}, [v("span", {"classes": "span","id": "random-id","key": "label","onclick": "function","style": "width: 100px"}, ["hello 0"])w(ChildWidget, {"id": "random-id","key": "widget"})w("registry-item", {"id": true,"key": "registry"})
])

harness.expectPartial

expectPartial 根据 selector 断言部件的部分渲染输出。

API

expectPartial(selector: string, expectedRenderFunction: () => DNode | DNode[]);
  • selector: 用于查找目标节点的选择器
  • expectedRenderFunction: 返回查询节点期望的 DNode 结构的函数
  • actualRenderFunction: 一个可选函数，返回被断言的实际 DNode 结构

示例:

h.expectPartial('@child-widget', () => w(Widget, { key: 'child-widget' }));

harness.trigger

harness.trigger() 在 selector 定位的节点上调用 name 指定的函数。

interface FunctionalSelector {(node: VNode | WNode): undefined | Function;
}trigger(selector: string, functionSelector: string | FunctionalSelector, ...args: any[]): any;
  • selector: 用于查找目标节点的选择器
  • functionSelector: 要么是从节点的属性中找到的被调用的函数名，或者是从节点的属性中返回一个函数的函数选择器
  • args: 为定位到的函数传入的参数

如果有返回结果，则返回的是被触发函数的结果。

用法示例:

// calls the `onclick` function on the first node with a key of `foo`
h.trigger('@foo', 'onclick');
// calls the `customFunction` function on the first node with a key of `bar` with an argument of `100`
// and receives the result of the triggered function
const result = h.trigger('@bar', 'customFunction', 100);

functionalSelector 返回部件属性中的函数。函数也会被触发，与使用普通字符串 functionSelector 的方式相同。

用法示例：

假定有如下 VDOM 树结构，

v(Toolbar, {key: 'toolbar',buttons: [{icon: 'save',onClick: () => this._onSave()},{icon: 'cancel',onClick: () => this._onCancel()}]
});

并且你想触发 save 按钮的 onClick 函数。

h.trigger('@buttons', (renderResult: DNode<Toolbar>) => {return renderResult.properties.buttons[0].onClick;
});

harness.getRender

harness.getRender() 返回索引指定的渲染器，如果没有提供索引则返回最后一个渲染器。

getRender(index?: number);
  • index: 要返回的渲染器的索引

用法示例:

// Returns the result of the last render
const render = h.getRender();
// Returns the result of the render for the index provided
h.getRender(1);

Assertion Templates

断言模板（assertion template）允许你构建一个传入 h.expect() 的期望渲染函数。断言模板背后的思想来自经常要断言整个渲染输出，并需要修改断言的某些部分。

要使用断言模板，首先需要导入模块：

import assertionTemplate from '@dojo/framework/testing/assertionTemplate';

然后，在你的测试中，你可以编写一个基本断言，它是部件的默认渲染状态：

假定有以下部件：

class NumberWidget extends WidgetBase<{ num?: number }> {protected render() {const { num } = this.properties;const message = num === undefined ? 'no number passed' : `the number ${num}`;return v('div', [v('span', [message])]);}
}

基本断言如下所示：

const baseAssertion = assertionTemplate(() => {return v('div', [v('span', { '~key': 'message' }, [ 'no number passed' ]);]);
});

在测试中这样写：

it('should render no number passed when no number is passed as a property', () => {const h = harness(() => w(NumberWidget, {}));h.expect(baseAssertion);
});

现在我们看看，为 NumberWidget 部件传入 num 属性后，如何测试数据结果：

it('should render the number when a number is passed as a property', () => {const numberAssertion = baseAssertion.setChildren('~message', ['the number 5']);const h = harness(() => w(NumberWidget, { num: 5 }));h.expect(numberAssertion);
});

这里，我们使用 baseAssertion 的 setChildren() api，然后我们使用特殊的 ~ 选择器来定位 key 值为 ~message 的节点。~key 属性（使用 tsx 的模板中是 assertion-key）是断言模板的一个特殊属性，在断言时会被删除，因此在匹配渲染结构时不会显示出来。此功能允许你修饰断言模板，以便能简单的选择节点，而不需要扩展实际的部件渲染函数。一旦我们获取到 message 节点，我们就可以将其子节点设置为期望的 the number 5，然后在 h.expect 中使用生成的模板。需要注意的是，断言模板在设置值时总是返回一个新的断言模板，这可以确保你不会意外修改现有模板（可能导致其他测试失败），并允许你基于新模板，增量逐层构建出新的模板。

断言模板具有以下 API：

setChildren(selector: string, children: DNode[], type?: 'prepend' | 'replace' | 'append'): AssertionTemplateResult;
setProperty(selector: string, property: string, value: any): AssertionTemplateResult;
getChildren(selector: string): DNode[];
getProperty(selector: string, property: string): any;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/252396.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python中将四元数转换为旋转矩阵

python中将四元数转换为旋转矩阵

在制作bundlefusion时,想测试TUM数据集,并且将groundtruth写入到数据集中,TUM中给定的groundtruth中的旋转是使用四元数表示的,而bundlefusion中需要SE3的形式,所以我需要首先将四元数转换为旋转矩阵,然后再将其与平移向量合并在一起,因为我之前关于生成bundlefusion数据集写了…
阅读更多...
js -- 时间转年月日

js -- 时间转年月日

/*** 时间转年月日* param sdate 开始的时间* param edate 结束的时间* returns {*}*/function day2ymrStr2(sdate, edate) {var day2ymrStr "";var date1 new Date(edate);var date2 new Date(sdate);var y 0, m 0, d 0;var y1 date1.getFullYear();var m1 …
阅读更多...
iOS sha1加密算法

iOS sha1加密算法

最近在项目中使用到了网络请求签名认证的方法&#xff0c;于是在网上找关于OC sha1加密的方法&#xff0c;很快找到了一个大众使用的封装好的方法&#xff0c;以下代码便是 首先需要添加头文件 #import<CommonCrypto/CommonDigest.h> 然后直接使用下面的方法就可以了 //s…
阅读更多...
Linux开发5款实用工具推荐

Linux开发5款实用工具推荐

今天安利给大家5款实用的Linux开发工具&#xff0c;希望对大家工作效率的提升有所帮助。容器放眼于现实&#xff0c;现在已经是容器的时代了。容器既及其容易部署&#xff0c;又可以方便地构建开发环境。如果你针对的是特定的平台的开发&#xff0c;将开发流程所需要的各种工具…
阅读更多...
TUM数据集制作BundleFusion数据集

TUM数据集制作BundleFusion数据集

BundleFusion的数据集中,在生成.sens文件之前,包括彩色图,深度图和一个位姿文件,并且这个pose文件中的位姿态是有变化的,所以我怀疑,推测,在这个pose文件中可以写入groundtruth的位姿,然后在重建的时候就按照传入的位姿进行计算.为了测试一下效果,我从TUM数据集开始入手,这个数…
阅读更多...
Linq查询datatable的记录集合

Linq查询datatable的记录集合

通过linq查询datatable数据集合满足条件的数据集 1.首先定义查询字段的变量&#xff0c;比方深度 string strDepth查询深度的值&#xff1b; var dataRows from datarow in dataTable(须要查询的datatable数据集).AsEnumerable() where …
阅读更多...
Java 概述和编程基础

Java 概述和编程基础

First of all&#xff0c;Java概述&#xff1a; 类是Java程序设计的基石和基本单元&#xff1b; main()方法是程序的入口&#xff0c;它是共有的、静态的&#xff0c;参数String[] args表示一个字符串数组可以传入该程序&#xff0c;用来传递外部数据以初始化程序。　　 计算机…
阅读更多...
19、Fragment

19、Fragment

一、Fragment 1.1、fragment介绍 fragment的出现是为了同时适应手机和平板&#xff0c;可以将其看做Activity的组成部分&#xff0c;甚至Activity界面完全由不同的Fragment组成&#xff0c;它拥有自己的生命 周期和接收、处理用户的事件&#xff0c;更为重要的是&#xff0c;可…
阅读更多...
喜好：

喜好：

不喜欢吃&#xff1a;一瓣瓣的蘑菇、海带、豆腐皮、 不喜欢喝&#xff1a;鱼汤&#xff1b; 不喜欢吃&#xff1a;山楂片、法式小面包&#xff08;软软的&#xff09;、果冻、 不喜欢喝&#xff1a;对饮料无感、不喜欢脉动、可乐雪碧等少量还行、 喜欢&#xff1a;啃骨头、排骨…
阅读更多...
将TUM数据集制作成BundleFusion数据集

将TUM数据集制作成BundleFusion数据集

在上一篇文章中,我写到了如何将TUM数据生成BundleFusion所需要的数据集,生成的数据集如下图中所示.并且是将每一组数据的groundtruth.txt中的位姿数据写如到这里的pose文件中,作为每一帧图像的先验位姿. 今天我便将生成的数据集转换为了.sens格式,然后运行bundlefusion算法,第…
阅读更多...
每一次突破都是一种进步

每一次突破都是一种进步

一直以来&#xff0c;我接触一门新技术&#xff0c;都是先看开发文档&#xff0c;了解了这个技术是做什么的&#xff0c;能做什么。但是不知道怎么起步&#xff0c;也不敢贸然动手。我的解决办法是看视频&#xff0c;看别人怎么使用&#xff0c;跟着别人做&#xff0c;然后听别…
阅读更多...
mysql盲注学习-1

mysql盲注学习-1

mysql: 1.left() //left()函数 left(a,b)从左侧截取a,的b位 2.mid() //mid()函数 参数 描述 column_name 必需。要提取字符的字段。 start 必需。规定开始位置&#xff08;起始值是 1&#xff09;。 length 可选。要返回的字符数。如果省略&#xff0c;则 MID() 函数…
阅读更多...
二分学习笔记

二分学习笔记

写在前面 二分是一种常用且非常精妙的算法&#xff0c;常常是我们解决问题的突破口。二分的基本用途是在单调序列或单调函数中做查找。因此当问题的答案具有单调性时&#xff0c;就可以通过二分把求解转化为判定。进一步地&#xff0c;我们还可以通过三分法解决单调函数的极值以…
阅读更多...
解析.sens数据集

解析.sens数据集

python脚本在下面网址中https://github.com/ScanNet/ScanNet/tree/master/SensReader/python 一定要使用python2运行此脚本. 使用指令如下 python reader.py --filename /media/yunlei/YL/DATASETS/ICL_DATABASE/lr_kt1/living_room_traj1n_frei_png.sens --output_path /me…
阅读更多...
ConcurrentHashMap 解读

ConcurrentHashMap 解读

初始化&#xff1a; 问题&#xff1a;如何当且仅只有一个线程初始化table 1 private final Node<K,V>[] initTable() {2 Node<K,V>[] tab; int sc;3 while ((tab table) null || tab.length 0) {4 if ((sc sizeCtl) < 0)5 …
阅读更多...
XML Schema 基本结构

XML Schema 基本结构

<?xml version1.0?> <Schema name"cangchuSchema" metamodelVersion"4.0"><PhysicalSchema><Table name"highway_toll"><Key><Column name"uid"/></Key></Table><Table name&qu…
阅读更多...
关于系统自带 .NET Framework 版本的说明

关于系统自带 .NET Framework 版本的说明

系统自带版本&#xff1a; Windows XP (SP3) .NET Framework 1.1Windows 7 (SP1) .NET Framework 3.5.1Windows 8.1 .NET Framework 4.5.1Windows 10 (1507) .NET Framework 4.6Windows 10 (1511) .NET Framework 4.6.1Windows 10 (1607) .NET Framework 4.6.2Windows 10 (1703…
阅读更多...
BundleFusion那些事儿

BundleFusion那些事儿

背景&#xff1a;前面几篇博客中写了很多关于BundleFusion的东西&#xff0c;主要包括bundlefusion的论文阅读笔记&#xff0c;.sens数据集的生成等&#xff0c;经过最近几天的工作&#xff0c;我对bundlefusion又有了新的技术积累&#xff0c;在这里整理一下&#xff0c;也算是…
阅读更多...
问题：图片怎么保存到数据库， 以及怎么把图片从数据库中取出来使用？（已解决）...

问题：图片怎么保存到数据库， 以及怎么把图片从数据库中取出来使用？（已解决）...

简单&#xff0c;不保存图片到数据库&#xff0c;而是图片的路径。 也就是说&#xff0c;先把图片下载到服务器的指定目录下&#xff0c;然后&#xff0c;在把相对的路径保存到数据库中。 如果下次获取图片&#xff0c;就访问数据库&#xff0c;获取图片路径&#xff0c;然后根…
阅读更多...
Oracle Study之--Oracle 11gR2通过RMAN克隆数据库

Oracle Study之--Oracle 11gR2通过RMAN克隆数据库

Oracle Study之--Oracle 11gR2通过RMAN克隆数据库Purpose of Database Duplication A duplicate database is useful for a variety of purposes, most of which involve testing. You can perform the following tasks in a duplicate database: Test backup and recovery pro…
阅读更多...
最新文章

Copyright @ 2022~2023