文档章节

ant design 测试的发展历程

-鹏
 -鹏
发布于 2017/08/06 18:32
字数 917
阅读 663
收藏 0

0.x - 2.4.3

0.x 的时候,大约两年前,也就是2015年,项目处于初始阶段,测试的组件相对比较少。只有这几个。

使用的测试也是react 内置的测试 "框架"-react-addons-test-utils   和 jest 框架

测试大概是这样的:

jest.dontMock('../components/button/button');

import React from 'react';
import TestUtils from 'react-addons-test-utils';
const Button = require('../components/button/button');

describe('Button', function() {
  let button;
  let buttonNode;

  beforeEach(() => {
    button = TestUtils.renderIntoDocument(
      <Button>Follow</Button>
    );
    buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
  });

  it('should set the type to button by default', () => {
    expect(buttonNode.type).toBe('button');
  });

  it('should set the default className to button', () => {
    expect(buttonNode.className).toBe('ant-btn');
  });

  it('should has a whitespace in two Chinese charactor', () => {
    button = TestUtils.renderIntoDocument(
      <Button>按钮</Button>
    );
    buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button');
    expect(buttonNode.textContent).toBe('按 钮');
  });
});

                        代码片段1.1

 

可以看出测试的还是比较简单而且覆盖率很低。这种测试一直持续到2.5.0

 

2.5.0 - 2.5.2

时间到了九个月前,也就说2016年底的时候,项目的测试方案有了比较大的改动,单从目录结构上来看变化就非常大了。

一方面项目为了解决打包的时候出现文件丢失, 兼容问题等情况,做了一些处理,代码类似:

describe('antd dist files', function() {
  const distFilesExisted = fs.existsSync(path.join(process.cwd(), 'dist', 'antd.js'));
  if (!distFilesExisted) {
    it('empty test case placeholder', () => {});
    return;
  }

  const antd = require('../dist/antd');

  // https://github.com/ant-design/ant-design/issues/1638
  // https://github.com/ant-design/ant-design/issues/1968
  it('should has modules in antd', () => {
    expect('Affix' in antd).toBeTruthy();
    expect('Alert' in antd).toBeTruthy();
    ...
  });

  // https://github.com/ant-design/ant-design/issues/1970
  // https://github.com/ant-design/ant-design/issues/1804
  it('should be compatible in IE8', () => {
    const antdJsContent = fs.readFileSync(path.join(process.cwd(), 'dist', 'antd.js'));
    expect(
      antdJsContent.toString()
       .indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }')
    ).toBe(-1);
  })
});

                代码片段  2.1

 

同时项目引用了一个enzyme-to-json的库,该库功能提供类似 jest 的 snapshots 功能,同时利用了enzyme强大的shadow render 。以及 setState, find 能力。其实它们的文档就是测试用例。 也就说它们会将文档的sample 作为运行结果结果作为screenshot存起来,期望每次修改代码不影响sample代码运行,这样就算测试通过。 可以说是一次 break change

import glob from 'glob'
import { render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import MockDate from 'mockdate';

export default function demoTest(component, options = {}) {
  const files = glob.sync(`./components/${component}/demo/*.md`);

  files.forEach(file => {
    let testMethod = options.skip === true ? test.skip : test;
     if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
       testMethod = test.skip;
     }
    testMethod(`renders ${file} correctly`, () => {
      MockDate.set(new Date('2016-11-22').getTime() + new Date().getTimezoneOffset() * 60 * 1000);
      const demo = require('../.' + file);
      const wrapper = render(demo);
      expect(renderToJson(wrapper)).toMatchSnapshot();
      MockDate.reset();
    });
  });
}

               代码片段2.2

那么他们的根据demo的文档(markdown文件)render组件是怎么做到的呢?

其实他们在项目中webpack引用了 antd-tools (一个专门为antd 设计的库),这个库中有一个文件是专门为jest做预处理的, 叫demoPreprocessor.js

摘取部分代码:

function getCode(tree) {
  let code;
  const find = (node) => {
    if (code) return;
    if (!JsonML.isElement(node)) return;
    if (JsonML.getTagName(node) !== 'pre') {
      JsonML.getChildren(node).forEach(find);
      return;
    }
    code = JsonML.getChildren(
      JsonML.getChildren(node)[0] || ''
    )[0] || '';
  };
  find(tree);
  return code;
}

2.5.3 - 至今

八个月前, 2017年年初。项目主要贡献者 benjycui 写了一个工具库代替了上述的代码片段2.1,这个库的名字是dekko,同时项目开发者认为,测试用例应该放在组件之中,因此精简到了下图所示:

 

__snapshots__ 引用 组件中的测试用例。 组件测试用例又更具组件文档的sample  生成 screenshots,然后每次生成,每次对比,如果一致则通过,反之则不通过。

exports[`antd dist files exports modules correctly 1`] = `
Array [
  "Affix",
  "Anchor",
  "AutoComplete",
  "Alert",
  "BackTop",
  "Badge",
  "Breadcrumb",
  "Button",
  "Calendar",
  "Card",
  "Collapse",
  "Carousel",
  "Cascader",
  "Checkbox",
  "Col",
  "DatePicker",
  "Dropdown",
  "Form",
  "Icon",
  "Input",
  "InputNumber",
  "LocaleProvider",
  "message",
  "Menu",
  "Modal",
  "notification",
  "Pagination",
  "Popconfirm",
  "Popover",
  "Progress",
  "Radio",
  "Rate",
  "Row",
  "Select",
  "Slider",
  "Spin",
  "Steps",
  "Switch",
  "Table",
  "Transfer",
  "Tree",
  "TreeSelect",
  "Tabs",
  "Tag",
  "TimePicker",
  "Timeline",
  "Tooltip",
  "Mention",
  "Upload",
]
`;

 

© 著作权归作者所有

上一篇: 分享话题列表
下一篇: e2e
-鹏

-鹏

粉丝 21
博文 155
码字总数 92388
作品 0
杭州
前端工程师
私信 提问
Ant Design 更新到 3.4.0,修复多项 bug

ant-design 更新到 3.4.0,修复多项 bug。 下载地址: Source code (zip) Source code (tar.gz) 更新: 修复了一些语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832)......

h4cd
2018/04/02
938
0
NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移动端UI组件库正式发布

NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现。 Ant Design 作为服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观,通过模块化的解决方案,降低冗余的生产成本,...

NG_ZORRO_MOBILE
2018/10/10
0
0
2018 12 25 ant design 按钮 雪堆 圣诞节彩蛋

今天正在写钉钉自建应用相关功能。突然小伙伴发了个我们项目的页面给我,让我看bug,如下 什么鬼,但是仔细一看,是雪堆?难道是圣诞节彩蛋,而且,刚刚似乎见到过?翻来覆去找,终于 然后跑...

dangsh_
2018/12/25
0
0
官宣!vue.ant.design 低调上线

官宣!官宣!官宣! 是的,你没看错就是那个 vue.ant.design。 至此,Ant Design 已经全面覆盖了 React、Angular、Vue 三大前端框架,向着世界第一好用的 UI 设计语言迈进。 距离 ant-design...

zeka
02/18
0
0
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
01/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部