• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
小码哥-倩倩
博客园    首页    新随笔    联系   管理    订阅  订阅
[置顶] 小程序生成二维码进入指定页面
摘要: 方法一: 利用草料生成二维码,连接:https://cli.im/weapp 直接就可以进入页面。 方法二: 参考官网:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getU 阅读全文
posted @ 2020-05-29 10:56 小码哥-倩倩 阅读(1501) 评论(0) 推荐(0)
[置顶] (十一)Jest 中的 mock timer
摘要: 平时开发中我们经常用到定时器setInterval 或者setTimeout ,现在我们就写一个定时器的测试用例代码如下: // demo.js export const lazy = (fn)=> { setTimeout(() => { fn(); }, 3000); } // demo.tes 阅读全文
posted @ 2020-05-12 10:18 小码哥-倩倩 阅读(1770) 评论(0) 推荐(0)
[置顶] (十)snapshot快照测试
摘要: 1、快照测试 项目中经常有一些配置文件。比如 export const generateConfig = ()=>{ return { server :'http://localhost', port:'8080', domain:'localhost' } } 对应它的测试用例可以这样写 snap 阅读全文
posted @ 2020-05-09 12:00 小码哥-倩倩 阅读(1426) 评论(0) 推荐(0)
[置顶] (九)mock深入学习
摘要: 1、前端如果测试接口请求返回值的时,可以请求服务器吗? 我们可以试着举个例子: 新建一个mocktest.js文件 import axios from 'axios' export const fetchData=()=>{ return axios.get('/').then(res=>res.d 阅读全文
posted @ 2020-05-09 10:49 小码哥-倩倩 阅读(441) 评论(0) 推荐(0)
[置顶] (八)Jest测试的mock函数
摘要: 一、为什么需要引入mock? 最常见的回调函数就是ajax请求,返回数据后执行成功或失败的回调。在Node 环境下,有一个npm 包request, 它可以发送异步请求,返回数据后调用回调函数进行处理,npm i request --save, 安装一下,然后func.js 修改如下 const r 阅读全文
posted @ 2020-05-08 15:57 小码哥-倩倩 阅读(3179) 评论(0) 推荐(0)
[置顶] (七)Jest钩子函数作用域
摘要: 一 、钩子函数的作用域 (1)、describe下都可以拥有自己的钩子函数,使用的钩子函数对自己的子describe的测试用例也适用。 (2)、每个子describe也可以设置自己需要的钩子函数,使用的钩子函数对自己的测试用例适用。 (3)、说明钩子函数是有作用域的,而且在describe的范围内, 阅读全文
posted @ 2020-05-06 18:23 小码哥-倩倩 阅读(311) 评论(0) 推荐(0)
[置顶] (六)Jest中钩子函数
摘要: 在jest中,如果测试用例中需要使用到某个对象 或 在执行测试代码的某个时刻需要做一些必要的处理,直接在测试文件中写基础代码是不推荐的,可以使用jest的钩子函数。 钩子函数概念:在代码执行的某个时刻,会自动运行的一个函数。 首先我们举例:新建counter.js文件,代码如下: export de 阅读全文
posted @ 2020-05-06 16:14 小码哥-倩倩 阅读(372) 评论(0) 推荐(0)
[置顶] (五)Jest测试异步代码
摘要: 方法一:回调函数 这是非常常见的通用处理方式,比如你有一个fetchData(callback)的function用来获取数据,并且在获取完成的时候调用callback 函数,你想测试返回的数据是“peanut butter” ,默认情况下当fetchData执行完成的时候Jest的测试就完成了,这 阅读全文
posted @ 2020-05-05 13:01 小码哥-倩倩 阅读(1082) 评论(0) 推荐(0)
[置顶] (四)Jest匹配器
摘要: 学习jest匹配器之前先要修改配置文件,打开package.json文件: "scripts": { "test": "jest --watchAll", "coverage": "jest --coverage" }, 让Jest监听所有测试(test.js)文件的变化,如果有变化就自动跑测试用例 阅读全文
posted @ 2020-04-29 08:59 小码哥-倩倩 阅读(378) 评论(0) 推荐(0)
[置顶] (三)Jest简单配置
摘要: 与webpack 类似,当不做配置的时候,运行webpack 命令也可以进行打包,它会遵循webpack 默认的配置进行打包操作。 Jest 不做配置的时候,也是遵循它默认的配置进行打包。 那么现在,我们自己来配置jest。 项目目录下,使用命令 npx jest --init执行之后自动生成jes 阅读全文
posted @ 2020-04-28 11:42 小码哥-倩倩 阅读(909) 评论(0) 推荐(0)
[置顶] (二)Jest测试案例
摘要: 第一步:新建一个文件夹,做好新建项目的准备工作 第二步:安装jest npm install --save-dev jest 第三步:初始化项目,使用 npm init 执行后生成package.json配置文件 第四步:正式开始编写我们的第一个简单的测试案例。新建一个math.js。开始添加一个简 阅读全文
posted @ 2020-04-27 18:13 小码哥-倩倩 阅读(800) 评论(0) 推荐(0)
[置顶] (一)Jest测试入门
摘要: Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。 Jest的官网地址:https://jest 阅读全文
posted @ 2020-04-27 17:34 小码哥-倩倩 阅读(991) 评论(0) 推荐(0)
2020年6月10日
优化用户体验
摘要: 1、监听路由执行对应事件 watch: { '$route':'getPath' }, methods: { getPath(){ console.log(this.$route.path); } } 2、vue中的watch监听 1>、监听 ‘单个值’ data() { return { text 阅读全文
posted @ 2020-06-10 15:48 小码哥-倩倩 阅读(232) 评论(0) 推荐(0)
2020年5月21日
(十三)Jest配置文件介绍
摘要: jest --init命令在根目录创建 jest.config.js文件。具体代码如下: module.exports = { preset: '@vue/cli-plugin-unit-jest', moduleFileExtensions: [ "js", "json", "jsx", "ts" 阅读全文
posted @ 2020-05-21 21:10 小码哥-倩倩 阅读(2361) 评论(0) 推荐(0)
2020年5月20日
(十二)Jest在Vue项目使用
摘要: 首先我们新建一个项目,之前没有使用过vue的,我们首先需要安装node.js和vue 首先:先从nodejs.org中下载nodejs 下载完成之后点击安装,直接下一步就好,安装完成之后,打开控制命令行程序(CMD),检查是否正常! 然后使用淘宝NPM 镜像 大家都知道国内直接使用npm 的官方镜像 阅读全文
posted @ 2020-05-20 15:15 小码哥-倩倩 阅读(965) 评论(0) 推荐(0)
2020年4月16日
使用jasmine来对js进行单元测试
摘要: 使用jasmine来对js进行单元测试 互联网的快速发展,给web开发人员带来了前所未有的挑战。对于前端开发,前端开发er所需要编写的js早已不是那些寥寥几行的视觉效果代码。代码量的大增,多人协同,人员素质悬殊不齐,这都需要一个标准,来对代码的规范性进行控制。Jasmine作为一个前端团队使用的测试 阅读全文
posted @ 2020-04-16 10:19 小码哥-倩倩 阅读(395) 评论(0) 推荐(0)
2019年2月16日
element导航菜单控制当前菜单样式
摘要: 直接使用Element的导航菜单组件,参考官方文档:http://element-cn.eleme.io/#/zh-CN/component/menu 问题1:设置当前的导航样式,直接使用自带属性控制就可以。 阅读全文
posted @ 2019-02-16 11:16 小码哥-倩倩 阅读(5676) 评论(0) 推荐(0)
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3