项目要将 angular 从 1.5升级到 5,ui-grid 在 5 中并不支持,所以为了替换 ui-grid ,来学习了 ag-grid 。
在使用ag-grid的时候有通过单元格的值设置不同行颜色,然后百度了网上的方法,汇总了一下,具体效果图如下:
距离 Extensions Data Grid 重构已经过去了两个多月,因工作忙碌而迟迟没有介绍 Extensions Data Grid 的细节。这几天又重构了一下官网示例,目前的 API 文档放在了 gitbook 上,暂时还没有和官网整合,国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。说点题外话,开发一款插件最大的难度不在于功能的实现,而在于如何去设计插件。
AG Grid目前提供两个版本地产品,分别是AG Grid Community和AG Grid Enterprise,AG Grid Community是免费和开源的,AG Grid Enterprise 提供专门的支持和更多企业风格的功能。AG Grid 免费提供其他网格工具的收费功能,而AG Grid Enterprise 提供了更多强大地功能。
六个月前,我们将独立 API从开发人员预览中升级,从而在 Angular 的简单性和开发人员体验方面达到了一个重要的里程碑。今天,我们很高兴地宣布,我们将继续 Angular Momentum,推出自 Angular 首次推出以来最大的版本;在反应性、服务器端渲染和工具方面取得巨大飞跃。所有这一切都伴随着跨功能请求的数十项生活质量改进,在 GitHub 上获得了 2,500 多个赞!
地址:https://github.com/matfish2/vue-tables-2
Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2正在不断成长、改进,同时也在获得新的功能。
系列常规操作,没兴趣的可以跳过这篇水文. 写过Angular 2+的小伙伴会有一种天然的熟悉感. 因为Nest基本就是同一个思想模式搞得~~
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
1. 在 TDD 做完 Tasking 列完实例化数据之后,完全没有 UT 基础不知道该怎么写单元测试?
在2020的今天,构建一个 web 应用对于我们来说,并非什么难事。因为有很多足够多优秀的的前端框架(比如 React,Vue 和 Angular);以及一些易用且强大的UI库(比如 Ant Design)为我们保驾护航,极大地缩短了应用构建的周期。
作为一个以 文档丰富 而广为人知的前端开发框架, Vue.js 的官方文档中分别在《教程-工具-单元测试》、《Cookbook-Vue组件的单元测试》里对 Vue 组件的单元测试方法做出了介绍,并提供了官方的单元测试实用工具库 Vue Test Utils;甚至在状态管理工具 Vuex 的文档里也不忘留出《测试》一章。
维基百科对于单元测试的定义:是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。
分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免费开源 ( MIT license )! 商业支持 更多特性请到官网查看 英文官网地址 中文官网地址 点击导航栏 ->手册->安装 安装教程地址
在互联网时代软件从开发到上线,后续迭代更新,已经形成了一套近乎标准的流程,其中最重要的流程就是持续集成(Continuous integration,简称CI)。"持续"的核心思想在于:在事先难以完全了解完整正确的需求时,干脆把大项目分割成小块完成,并加快交付的速度和频率,使其尽早在下个环节得到验证,若发现问题能够尽早返工。
Jest 是 Facebook 开源的一款 JS 单元测试框架,它也是 React 目前使用的单元测试框架,目前vue官方也把它当作为单元测试框架官方推荐 。 目前除了 Facebook 外,Twitter、Airbnb 也在使用 Jest。Jest 除了基本的断言和 Mock 功能外,还有快照测试、实时监控模式、覆盖度报告等实用功能。 同时 Jest 几乎不需要做任何配置便可使用。
谈任何东西都一定要有个上下文。你的论述不能是「因为单元测试有这些好处,所以我们要做单元测试」,而应该是「不做单元测试我们会遇到什么问题」,这样才能回答「为什么要写单元测试」的问题。那么我们谈论单元测试的上下文是什么呢?不做单元测试我们会遇到什么问题呢?上图为一个产品从 idea 分析、设计、开发、测试到交付并获取市场反馈的过程。
2.2 在 Vue 应用的单元测试中,对 Vuex store 该如何测试?如何测试与 Vue 组件之间的交互?
接着上篇的内容, 这篇文章会详细的介绍在 Glow 我们如何写单元测试, 以及在 React Native 中各个模块单元测试的详细实现方式。
琨玮,携程高级前端开发工程师,从事React Native/Web前端的开发及维护工作,喜欢研究新技术。
Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。
如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。 选择的方法 在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择变得更容易 框架本身的问题: 是否成熟?谁在背后支持呢? 具备的功能? 采用什么架构和模式? 生态系统是否丰富
顾翔老师开发的bugreport2script开源了,希望大家多提建议。文件在https://github.com/xianggu625/bug2testscript,
前端开发的一个特点是更多的会涉及用户界面,当开发规模达到一定程度时,几乎注定了其复杂度会成倍的增长。
Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库,它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。
最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程中有好多问题,百度几乎搜索不到,无奈本人英文太差,却又不得不去看英文文档。然后,想要写篇文章,记录下其中遇到的一些问题以及解决问题的方法,当然,现在还有不少问题没有解决,等到解决了之后再来更新...orz。
最近公司想要从mocha+karma的前端单元测试方式转换到Jest,然后任务就分配给我了,好吧,在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了,写这篇文章的初衷是因为在配置Jest的过程中有好多问题,百度几乎搜索不到,无奈本人英文太差,却又不得不去看英文文档。然后,想要写篇文章,记录下其中遇到的一些问题以及解决问题的方法,当然,现在还有不少问题没有解决,等到解决了之后再来更新…orz。
绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。
在上一篇文章当中我们介绍了单元测试的意义,以及为何选择 Facebook 的 Jest 作为我们的测试框架。现在就让我们一起来学习如何编写最基础的单元测试。
对于早期的前端 SPA 项目,Backbone.js + Require.js 是一种常见的技术组合,分别提供了基础的 MVC 框架和模块化能力。
| 导语 本文主要介绍在前端工程化的一些探索和实践,结合移动端的基础库重构和UI组件库开发这两个项目详细介绍工程化方案 。
单元测试的技术方案很多,不同工具之间有互相协同,也存在功能重合,给我们搭配测试方案带来不小的困难,而且随着 ES6, TypeScript 的出现,单元测试又增加了很多其他步骤,完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握,了解完整的前端测试技术方案。前端单元测试的领域也很多,这里主要讲对于前端组件如何进行单元测试,最后会主要介绍下对于 React 组件的一些测试方法总结。
随着业务的不断扩展,团队的项目越来越多,面对日益复杂的业务场景和代码逻辑,我们发现在前端工程化方面团队还停留在非常原始的阶段。现有的解决方案已经无法满足各种复杂的场景,我们每天都在疲于应付很多重复的工作,为此我们基于移动端基础库重构和UI组件库的建设这两个项目对团队的项目构建流程进行了详细的分析和梳理,并制定了一套适用于团队的工程化方案。
从使用 Vue 写出第一个 Hello world 到现在已经有近两年时间了,期间利用业余时间折腾了一套组件 we-vue,起初是出于实践学到的新知识,更多的是玩的意思,不过后来维护的过程中渐渐积累了一些经验,并开始享受这种过程。 在 we-vue 更新到 v2.0 的时候,开始全面地编写单元测试。起先使用 karma + mocha + chrome-headless 这种组合完成的行级覆盖率达到 96% 的测试。但最近,我又放弃了这种组合,转而使用 Jest。在这连番的折腾中,入过不少坑(当然,很多时
前端一年,人间三年,技术迭代之快,一般人还真的很难跟上。前端开发者似乎一直摆脱不了’兼容性‘、’跨平台‘、碎片化的这些话题。
最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好。后面会在学习过程中更新前面的那篇文章,加入后续遇到的问题以及解决问题的方法,持续的做一个记录。
在技术术语中测试意味着检查我们的代码是否符合某些预期。例如:给定一些输入,一个名为“transformer”的函数应返回预期的输出。
2.1 在 Vue 应用的单元测试中,对不同 UI 组件的单元测试有何不同?颗粒度该细到什么样的程度?
Vue-Cli 推荐两种测试分别是:端到端的测试(E2E) 和 单元测试(Unit Test) 一、端到端(E2E): 端(消费端)到端(产品端)的测试(E2E (End-to-End)), 它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是黑箱,只有UI会暴露给用户 二、单元测试(Unit Test): 测试驱动开发(TDD: Test-Driven Development), 单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。 Vue中的单元测试中有( Jest +Karma+ Mocha(Chai) ) Karma: Karma是一 个基于Node.js的JavaScript测试执行过程管理工具( Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题, karma提供了手段让你的代码自动在多个浏览器( chrome,firefox ,ie等)环境下运行。 如果你的代码只会运行在node端,那么你不需要用karma。 Mocha mocha(摩卡)是一个测试框架,在vue-cli中配合。mocha本身不带断言卡,所以必须先引入断言库,Chai断言库实现单元测试。 Mocha的常用命令和用法不算太多,而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌 握。 断言库 所谓“断言” ,就是判断源码的实际执行结果与预期结果是否-致,如果不一致就抛出一个错误。下面这句断言的意思是,调用add(1, 1) ,结果应该等于2. 复制代码
2019 年前端测试依然是一个炙手可热的话题。笔者在今年 5 月份参加 Vueconf 的时候,Vue 单元测试的主题演讲者曾向现场的参与者发出提问,有多少团队引入了单元测试,意外的是只有寥寥数人举起了手。尽管,那个时候笔者的团队也还没有引入前端测试,但是考虑到测试的必要性,且团队正在着手一个新项目,所以回去之后在这个新项目全量地接入了前端测试。
作者 | kinkahuang 链接 | http://imweb.io/topic/592aab6eff03ef1a4ef15c51 最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意味着不再有bug或者修改。那这时候问题来了,有些修改, 我们会以为很简单,从而放松警惕,偷懒也罢,没有精力也罢,简单验证之后便匆匆发布了。此时,有可能不经意的改动对其它功能造成了影响,bug复bug, bug何其多
本文出自于掘金的子弈[1],原文链接 从零开始配置 TypeScript 项目[2]。
最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意味着不再有bug或者修改。那这时候问题来了,有些修改, 我们会以为很简单,从而放松警惕,偷懒也罢,没有精力也罢,简单验证之后便匆匆发布了。此时,有可能不经意的改动对其它功能造成了影响,bug复bug, bug何其多呀。
最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意味着不再有bug或者修改。那这时候问题来
在日常的功能开发中,我们的代码测试都依赖于自己或者QA进行测试。这些操作不仅费时费力,而且还依赖开发者自身的驱动。在开发一些第三方依赖的库时,我们也没有办法给第三方提供完整的代码质量报告。
Jest 是 Facebook 推出的一种 Unit Testing 工具,当然还有很多其他类似的单元测试库,比如 mocha ava 等等
在日常的开发工作中,我们通常使用 git 来管理代码,当我们对代码进行某项改动后,都可以通过 git commit 来对代码进行提交。
最近我们正在使用 React Native 来重写 Growth 应用,GitHub 地址:growth-ng 。作为一个『咨询师』,我要再一次地切换技术栈,从混合应用开发转向 React Native。 重写 Growth 项目,由于业务内容繁多,也因此变成了一个庞大的工程。为了减少开发的时候,不断也开现一些错误,因此花了一段时间来探索:APP 端的持续部署。因此在这一篇文章里, 我们将介绍基于下面的几个框架来搭建持续集成: React Native 与持续集成服务器 Travis CI 的使用 单元测试
领取专属 10元无门槛券
手把手带您无忧上云