在前端开发过程中,我们经常需要测试图片是否相似,而 unexpected-resemble
可以帮助我们更轻松地实现图片比较和测试。
1. 安装 unexpected-resemble
我们可以通过 npm 包管理工具安装 unexpected-resemble
,命令如下:
npm install --save-dev unexpected-resemble
2. 使用 unexpected-resemble
引入 unexpected-resemble
在使用 unexpected-resemble
之前,我们需要在测试文件中引入该模块。
const expect = require('unexpected'); const unexpectedResemble = require('unexpected-resemble');
API
unexpected-resemble
API 提供了以下函数:
toResemble
toNotResemble
promiseToResemble
promiseNotToResemble
其中, toResemble
和 promiseToResemble
用于比较两张图片是否相似;toNotResemble
和 promiseNotToResemble
用于比较两张图片是否不相似。
示例代码
下面是一个使用 unexpected-resemble
的示例代码,以 Jest
测试框架为例。
-- -------------------- ---- ------- ----- ------ - ---------------------- ----- ------------------ - ------------------------------- ----- -------- - ---------------------- ------------------------------- ------------------ -- -- - -------------- ----- -- -- - ----- ------ - --------------------------------- ----- ------ - --------------------------------- ----- ---- - ----- ------------------------- ----------------------------------- - ------------- --- - -- ------------------------------------------------------- --- --------------- ----- -- -- - ----- ------ - --------------------------------- ----- ------ - --------------------------------- ----- ---- - ----- ---------------------------- ----------------------------------- - ------------- --- - -- --------------------------------------------------- --- ---
代码解释如下:
use
函数中添加了unexpectedResemble
插件,用于支持图片比较。- 在测试过程中,我们分别测试了两张图片是否相似和不相似。
resemble
函数用于获取图片数据,通过compareTo
函数比较两张图片之间的不同。promiseToResemble
和promiseNotToResemble
函数用于进行异步测试,返回比较结果。- 最后我们用
expect
函数进行断言,判断比较结果是否符合测试要求。
3. 总结
通过以上使用示例,我们可以看到,unexpected-resemble
包可以轻松地帮助我们实现图片的比较和测试,是一个非常有用的工具包。使用时,需要搭配其他图片处理工具一起使用,如 resemblejs
等。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/78339