# afeng-ui

> ## Project setup ``` npm install ```

Latest version **2.1.0** (published 2020-04-16) · 0 weekly downloads

## Install

```sh
npm install afeng-ui
pnpm add afeng-ui
yarn add afeng-ui
bun add afeng-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-04-16 |
| First published | 2020-04-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 602 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | amgyen |

## Links

- npm: https://www.npmjs.com/package/afeng-ui
- npm.io page: https://npm.io/package/afeng-ui

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [afeng-ui](https://npm.io/package/afeng-ui.md) ^2.0.0

## Recent versions

- 2.1.0 (latest) — 2020-04-16
- 2.0.0 — 2020-04-16

## README

# project

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your unit tests
```
npm run test:unit
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


这里的shallowMount被译为潜渲染，也就是说HelloWorld中引入其他组件是会被忽略掉的，当然也有深度渲染mount方法！

我们每写完一个功能，会先手动测试功能是否正常，测试后可能会将测试代码注释起来。这样会产生一系列问题，因为会污染源代码，所有的测试代码和源代码混合在一起。如果删除掉，下次测试还需要重新编写。

jest默认自带断言功能，断言的意思就是判断是不是这个样子，我断定你今天没吃饭~，结果你吃了。说明这次断言就失败了，测试就无法通过

匹配器分为三类、判断相等、不等、是否包含

为了更方便的测试Vue官方提供给我们了个测试工具Vue Test Utils,而且这个工具为了方便应用，采用了同步的更新策略

import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld';
import {shallowMount} from '@vue/test-utils'
describe('测试HelloWolrd 组件',()=>{
    it('传入 msg 属性看能否渲染到h1标签内',()=>{
        const wrapper = shallowMount(HelloWorld,{
            propsData:{
                msg:'hello'
            }
        })
        expect(wrapper.find('h1').text()).toContain('hello')
    });
});

这样写测试是不是很hi,可以直接渲染组件传入属性，默认返回wrapper，wrapper上提供了一系列方法，可以快速的获取dom元素! 其实这个测试库的核心也是在 wrapper的方法上, 更多方法请看 Vue Test Utils

这里的shallowMount被译为潜渲染，也就是说HelloWorld中引入其他组件是会被忽略掉的，当然也有深度渲染mount方法！

刚才写测试的这种方式就是先编写功能！编写完成后,我们来模拟用户的行为进行测试，而且只测试其中的某个具体的功能！ 这就是我们所谓的 BDD形式的单元测试。



1.4 测试框架
Karma Karma为前端自动化测试提供了跨浏览器测试的能力，可以在浏览器中执行测试用例
Mocha 前端自动化测试框架,需要配合其他库一起使用，像chai、sinon...
Jest Jest 是facebook推出的一款测试框架,集成了 Mocha,chai,jsdom,sinon等功能。
...
看到这facebook 都在推Jest,你还不学吗? Jest也有一些缺陷就是不能像karam这样直接跑早浏览器上，它采用的是jsdom，优势是简单、0配置！ 后续我们通过jest来聊前端自动化测试

jest常用的命令,matchers匹配器 测试操作jsdom,在node中操作dom元素,异步函数测试,mock使用，钩子函数等等

Vue中集成Jest的

var webpackConfig = require('@vue/cli-service/webpack.config')

module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],
    files: ['tests/**/*.spec.js'],//需要加载到浏览器的文件列表
    preprocessors: {  //在浏览器使用之前处理匹配的文件
      '**/*.spec.js': ['webpack', 'sourcemap']
    },
    autoWatch: true,//启用或禁用自动检测文件变化进行测试
    webpack: webpackConfig,
    reporters: ['spec'], // 使用reporters为"spec"时报告输出的类型和那目录
    browsers: ['ChromeHeadless']  //测试启动的浏览器
  })
}

一般我们通过describe 来划分作用域


npm unpublish zhu-feng-ui --force

---
_Source: https://npm.io/package/afeng-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._