Ant Design React 安装 1. 安装脚手架工具# antd-init 是一个用于演示 antd 如何使用的脚手架工具,真实项目建议使用 dva-cli. $ npm install antd-init -g 更多功能请参考 脚手架工具 和 开发工具文档. 除了官方提供的脚手架,您也可以使用社区提供的脚手架和范例: antd-admin reactSPA react-redux-antd by Justin-lu react-redux-antd by okoala react-an

前端测试,或者UI测试一直是业界一大难题.最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架. 像素级全站对比 曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题. 如图所示,所谓像素级站点对比,即利用截屏图像前后对比来找出,站点前后差异,从而发现问题. Q: 为什么需要这种测试呢? A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个比较好的测试方案. 目

写在前面: 随着互联网日新月异的发展,用户对于页面的美观度,流畅度以及各方面的体验有了更高的要求,我们的网页不再是简单的承载文字,图片等简单的信息传递给用户,我们需要的是更加美观的页面展示,更快的浏览速度,更加的丰富的用户交互效果.好的用户体验必要需要优秀的前端技术支撑,这使得我们的前端技术发生了翻天覆地的变化,前端的项目架构也越来越复杂,已经逐渐的演变成重量级的前端.从软件开发的角度来说项目技术的复杂度会带来开发,测试,交付流程等的复杂度的成倍提升,而我们知道测试是整个软件交付流程中非常重要的

转自: https://www.cnblogs.com/Wolfmanlq/p/8012847.html 作者:Ken Wang 出处:http://www.cnblogs.com/Wolfmanlq/ 前端测试框架Jest系列教程 -- 简介   系列教程:   1. 前端测试框架Jest系列教程 -- Matchers(匹配器)   2.前端测试框架Jest系列教程 -- Asynchronous(测试异步代码)   3.前端测试框架Jest系列教程 -- Mock Functions(模拟

前端测试工具一览 前端测试工具也和前端的框架一样纷繁复杂,其中常见的测试工具,大致可分为测试框架.断言库.测试覆盖率工具等几类.在正式开始本文之前,我们先来大致了解下它们: 测试框架 测试框架的作用是提供一些方便的语法来描述测试用例,以及对用例进行分组.测试框架可分为两种: TDD (测试驱动开发)和 BDD (行为驱动开发)常见的测试框架有 Jasmine, Mocha以及本文要介绍的 Jest. 断言库 断言库主要提供语义化方法,用于对参与测试的值做各种各样的判断.这些语义化方法会返回测试的

写在前面: 在JavaScript代码中,异步运行是很常见的.当你有异步运行的代码时,Jest需要知道它测试的代码何时完成,然后才能继续进行另一个测试.Jest提供了几种方法来处理这个问题. 测试异步代码的三种实现方式: 方法一:回调函数 这是非常常见的通用处理方式,比如你有一个fetchData(callback)的function用来获取数据,并且在获取完成的时候调用callback 函数,你想测试返回的数据是“peanut butter” ,默认情况下当fetchData执行完成的时候Je

写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看. 常用的匹配方式: 第一种:相等匹配,这是我们最常用的匹配规则 test('two plus two is four', () => { expect(2 + 2).toBe(4); }); 在这段代码中 expact(2 + 2) 将返回我们期望的结果,通常情况下我们只需要调用expect就可以,括号中的

写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来说我只关心我测试的方法的内部逻辑,我并不关注与当前class本身依赖的实现,所以我们通常会Mock掉依赖接口的返回,因为我们的测试重点在于特定的方法,所以在Jest中同样提供了Mock的功能,本节主要介绍Jest的Mock Function的功能. Jest中的Mock Function Mock

写在前面: Jest中定义了很多全局性的Function供我们使用,我们不必再去引用别的包来去实现类似的功能,下面将列举Jest中实现的全局函数. Jest Global Functions afterAll(fn, timeout) 从字面意思就可以理解到它是在所有测试运行完之后才会执行的,如果你的测试中包含promise,则将会等待promise被验证之后被执行. 你还可以提供一个timeout的参数(以毫秒为单位),用于指定在终止前等待的时间.注意:默认的超时是5秒. 如果您想要清理一些跨

前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Functional tests),复杂大型应用可能会有整合测试(Integration tests). 其中: 单元测试:关注应用中每个零部件的正常运转,防止后续修改影响之前的组件. 功能测试:确保其整体表现符合预期,关注能否让用户正常使用. 整合测试:确保单独运行正常的零部件整合到一起之后依然能正常运行. 详细

写在前面 在编写测试时,我们通常需要检查值是否满足某些条件,Jest中提供的expect允许你访问很多“Matchers”,这些“匹配器”允许您验证不同的东西. Expect 可以验证什么 Jest中提供了如下的验证方法: expect(value) expect.extend(matchers) expect.anything() expect.any(constructor) expect.arrayContaining(array) expect.assertions(number) ex

写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来说我只关心我测试的方法的内部逻辑,我并不关注与当前class本身依赖的实现,所以我们通常会Mock掉依赖接口的返回,因为我们的测试重点在于特定的方法,所以在Jest中同样提供了Mock的功能,本节主要介绍Jest的Mock Function的功能. Jest中的Mock Function Mock

Web前端测试维度: 功能性:功能准确性.兼容性 易用性:易学性.易理解性.易操作性.吸引性 可靠性:成熟性.容错性.稳定性.可恢复性.安全性 可移植性:适应性.易安装性.兼容性 可维护性:易分析性.易测试性 效率:时间特性.资源利用性 调优点: 1. 减少http请求的数量 2. 用好浏览器缓存机制 3. 利用GZIP压缩机制:只针对文本类资源有效 4. 把CSS文件放在HTML的开头 5. 把JavaScript文件放到HTML的结尾 6. 避免CSS表达式 7. 减少DNS查找:把域名解析

Cypress 是一个E2E的前端自动化测试框架,同样是基于BDD的思想设计的,话不多说,上demo https://github.com/Spillage/cypress-demo PS, 还有一个用于API测试和单元测试皆可的 mocha, 有些前端开发同学会觉得jest更好用些,二者而有所长,暂不比较,先上demo. https://github.com/Spillage/api-endpoint-test/

puppeteer puppeteer 是一个通过DevTools 协议提供高级API 来控制 chrome,chromium 的 NODE库; puppeteer默认运行在 headless 模式, 也可配置后运行在全模式(non-headless). puppeteer可以做什么 大部分在浏览器里手动执行的动作都可以通过puppeteer实现! 这里有几个列子来让你开始. 生成页面截图和PDF. 爬取单页面应用生成提前渲染的内容(例如 SSR). 自动提交表单, UI测试, 键盘输入等. 创

1.不论你是一个前端工程师还是一个后端工程师相信这款工具都会使你的开发更加简便. 2.在此我推荐的一款软件工具是 postman . 在这里我对 postman 做一个简单的介绍: ①它能够模拟表单发送 http 请求. ②测试你写的后台接口是否有效. ③省去写前台界面验证接口的时间. (小声bb由于用的时间不是很长我还没完全玩明白,只体会到了以上三点好处) 3.postman 下载地址 https://www.getpostman.com/products 4.下载完安装即可.安装完成后界面如

首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angular ---------------------以上均是全局安装------------------------------ 4.yo angular 5.npm install 6.bower install 7.grunt serve   全局安装即在打开命令行时执行,   4567在你想搭建项目

最近的项目在使用AngulaJs,对JS代码的测试问题就摆在了面前.通过对比我们选择了 Karma  + jasmine ,使用 Jasmine做单元测试 ,Karma 自动化完成,当然了如果使用 Karma  + jasmine 前提是必须安装 Nodejs. 安装好 Nodejs ,使用 npm 安装好必要的包,写了一个测试用例,测试通过,很好很强大. 没有 Nodejs 环境可以使用 Jasmine 做单元测试吗?当然可以,我们可以到 官网下一个示例看一看,比较简单.今天先讲一下如果直接使

与后台联调页面,经常会验证数据正确性,这时候就需要会点SQL语句,以下是常用的SQL: 单表查询 select * from table 条件查询 select * from table where fieid='33214047251857409' LIKE 查询 "%" 可用于定义通配符(模式中缺少的部分),这句SQL是模糊查询值的前端带有'33214047251'. select * from table where fieid LIKE '33214047251%' NOT 查

webpack等工具操作 自动创建package.json文件:npm init 如何根据package.json来自动安装包:npm install npm具体安装某个组件:npm install name -g 如何手动更新npm中指定的插件版本号:修改package.json中依赖包版本,执行npm install --force 清理npm:npm cache clean --force 设置npm代理地址:npm config set registry http://registry.

Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令,并且通过node这个“仓库”,我们以后可以通过命令行工具安装其他很多的东西如angular-cli等.这里的指令意思是“通过node 全局安装vue-cli”,安装的时间会比较长,耐心等待下~ PS:下载太慢的话可以把npm换成国内镜像: npm config set registry https: