1
2
3

cd yourProject
# npm install -D chai
yarn add -D chai

1
2
3

cd yourProject
# npm install -D chai-spies
yarn add -D chai-spies

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
import Vue from 'vue'
import VueButton from './components/vuebutton/VueButton.vue'
import VueButtonGroup from './components/ButtonGroup/ButtonGroup.vue'

import VueButton2 from './components/vuebutton/VueButton'
import VueIcon from './components/icon/Icon'

Vue.component('v-button', VueButton2)
Vue.component('v-icon', VueIcon)
Vue.component('v-button-group', VueButtonGroup)

// 单元测试
import chai from 'chai'
const expect = chai.expect

{
    console.log(VueButton)
}

</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script>
import ...
// 单元测试
import chai from 'chai'
const expect = chai.expect

{
  // 构造函数 扩展为全局的 VueComponent函数
  const Constructor = Vue.extend(VueButton2)
  const button = new Constructor({
    propsData: {
      icon: 'settings'
    },
  })
  // button.$mount('#test')
  button.$mount()
  
  // 找到 <svg class="v-icon"><use :xlink:href="`#i-${name}`"></use></svg>
  const useElement = button.$el.querySelector('use')
  
  // console.log(userElement)
  /*
  // Uncaught AssertionError
  // expect(useElement.getAttribute('xlink:href')).to.equal('settings')
  */
  
  // 可以通过的测试用例
  expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
  const href = useElement.getAttribute('xlink:href')
  expect(href).to.eq('#i-settings')
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// 单元测试
import chai from 'chai'
import spies from 'chai-spies'

chai.use(spies)
const expect = chai.expect

// 测试按钮含有 icon
  {
    const Constructor = Vue.extend(VueButton)
    const button = new Constructor({
      propsData: {
        icon: 'settings'
      },
    })
    // button.$mount('#test')
    button.$mount()
    // 获取 use 元素
    const useElement = vm.$el.querySelector('use')
    // console.log(userElement)
    /*
    // Uncaught AssertionError
    // expect(useElement.getAttribute('xlink:href')).to.equal('settings')
    */
    // 可以通过的测试用例
    expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
    const href = useElement.getAttribute('xlink:href')
    expect(href).to.eq('#i-settings')
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

//...
// 测试 isLoading 属性
{
  const Constructor = Vue.extend(VueButton2)
  const button = new Constructor({
    propsData: {
      icon: 'settings',
      isLoading: true,
    },
  })
  button.$mount()
  const useElement = button.$el.querySelector('use')
  const href = useElement.getAttribute('xlink:href')
  // Uncaught AssertionError
  // expect(href).to.eq('#i-settings')
  expect(href).to.eq('#i-loading')
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

//...
// 单元测试
// import ...

// 测试 icon
{
  const Constructor = Vue.extend(VueButton2)
  const vm = new Constructor({
    propsData: {
      icon: 'settings'
    },
  })
  // button.$mount('#test')
  // 页面空挂载
  vm.$mount()
  const useElement = vm.$el.querySelector('use')
  // console.log(userElement)
  /*
  // Uncaught AssertionError
  // expect(useElement.getAttribute('xlink:href')).to.equal('settings')
  */
  // 可以通过的测试用例
  expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
  const href = useElement.getAttribute('xlink:href')
  expect(href).to.eq('#i-settings')
  vm.$el.remove()
  vm.$destroy()
}

// 测试 isLoading
{
  const Constructor = Vue.extend(VueButton2)
  const vm = new Constructor({
    propsData: {
      icon: 'settings',
      isLoading: true,
    },
  })
  // 页面空挂载
  vm.$mount()
  const useElement = vm.$el.querySelector('use')
  const href = useElement.getAttribute('xlink:href')
  // Uncaught AssertionError
  // expect(href).to.eq('#i-settings')
  expect(href).to.eq('#i-loading')
  vm.$el.remove()
  vm.$destroy()
}

// 测试 iconPosition order 默认为 1 左边 ；2 右边
{
  const Constructor = Vue.extend(VueButton2)
  const vm = new Constructor({
    propsData: {
      icon: 'settings',
    },
  })
  // button 必须被加载 渲染到页面中，CSS加载，才能识别 order，否则 expect(order).to.eq('')为空
  const div = document.createElement('div')
  document.body.appendChild(div)
  // 页面挂载到 div 上
  vm.$mount(div)
  const svg = vm.$el.querySelector('svg')
  // const order = window.getComputedStyle(svg).order
  // ES6+ 解构赋值
  const {order} = window.getComputedStyle(svg)
  // 错误断言
  // expect(order).to.eq(1)
  // 正确断言
  //CSS 所有属性值都是字符串
  expect(order).to.eq("1")
  vm.$el.remove()
  vm.$destroy()
}

// 测试 iconPosition order 为 2 右边
{
  const Constructor = Vue.extend(VueButton2)
  const vm = new Constructor({
    propsData: {
      icon: 'settings',
      iconPosition: 'right',
    },
  })
  const div =document.createElement('div')
  document.body.appendChild(div)
  // 页面挂载到 div 上
  vm.$mount(div)
  const svg = vm.$el.querySelector('svg')
  // 获得计算样式
  const {order} = window.getComputedStyle(svg)
  // 错误断言
  // expect(order).to.eq("1")
  // 正确断言
  expect(order).to.eq("2")
  vm.$el.remove()
  vm.$destroy()
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//...
import spies from 'chai-spies'
chai.use(spies)
//...

  // 测试 按钮触发 click // mock 使用 chai.spies 监听函数
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
      },
    });
    vm.$mount();
    const spyFn = chai.spy(() => {
      console.log('spy function OK');
    });

    vm.$on('click', spyFn);
    const button = vm.$el;
    (button as HTMLButtonElement).click();
    // 期望 函数被执行
    expect(spyFn).to.have.been.called();
    vm.$el.remove();
    vm.$destroy();
  }
//...

1

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#...
+ karma-chai@0.1.0
+ karma-chai-spies@0.1.4
+ karma-sinon-chai@2.0.2
+ karma-mocha@2.0.1
+ karma-chrome-launcher@3.1.0
+ sinon-chai@3.5.0
+ sinon@9.2.1
+ mocha@8.2.1
+ karma@5.2.3
added 172 packages from 962 contributors, removed 43 packages and updated 43 packages in 189.026s

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

module.exports = function (config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],
    client: {
      chai: {
        includeStack: true
      }
    },

    // list of files / patterns to load in the browser
    files: [
      'dist/**/*.test.js',
      'dist/**/*.test.css'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {},

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

const expect = chai.expect;
 import Vue from 'vue'
 import Button from '../src/button' // import Button from '../src/components/vuebutton/VueButton.vue'

 Vue.config.productionTip = false
 Vue.config.devtools = false

 describe('VueButton组件', () => {
     it('存在.', () => {
         expect(Button).to.be.ok
     })
     it('可以设置icon.', () => {
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings'
         }
         }).$mount()
         const useElement = vm.$el.querySelector('use')
         expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
         vm.$destroy()
     })
     it('可以设置loading.', () => {
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings', // 'loading'
             loading: true
         }
         }).$mount()
         const useElements = vm.$el.querySelectorAll('use')
         expect(useElements.length).to.equal(1)
         expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading')
         vm.$destroy()
     })
     it('icon 默认的 order 是 1', () => {
         const div = document.createElement('div')
         document.body.appendChild(div)
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings',
         }
         }).$mount(div)
         const icon = vm.$el.querySelector('svg')
         expect(getComputedStyle(icon).order).to.eq('1')
         vm.$el.remove()
         vm.$destroy()
     })
     it('设置 iconPosition 可以改变 order', () => {
         const div = document.createElement('div')
         document.body.appendChild(div)
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings',
             iconPosition: 'right'
         }
         }).$mount(div)
         const icon = vm.$el.querySelector('svg')
         expect(getComputedStyle(icon).order).to.eq('2')
         vm.$el.remove()
         vm.$destroy()
     })
     it('点击 button 触发 click 事件', () => {
         const Constructor = Vue.extend(Button)
         const vm = new Constructor({
         propsData: {
             icon: 'settings',
         }
         }).$mount()

         const callback = sinon.fake();
         vm.$on('click', callback)
         vm.$el.click()
         expect(callback).to.have.been.called

     })
 })

1
2
3
4
5

"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-minify && karma start --single-run"
 },

1
2
3
4
5
6

"scripts": {
     "dev-watch": "parcel watch test/* --no-cache",
     "dev-test": "karma start --auto-watch",
     "test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
 },

1
2
3
4
5
6
7

// ...
// list of files / patterns to load in the browser
files: [
  'dist/**/*.test.js', // /**/* 表示穷尽查找路径所有文件
  'dist/**/*.test.css'
],
// ...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

language: node_js
node_js:
  -"14"
  -"12"
  -"16"
  addons:
    chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies
        run: yarn
      - uses: browser-actions/setup-chrome@latest
      - run: chrome --version
      - run: yarn build
      - run: yarn test

1
2
3
4
5
6

import Button from './src/components/vuebutton/VueButton.vue'
import ButtonGroup from './src/components/ButtonGroup/ButtonGroup.vue'
import icon from './src/components/icon/VueIcon.vue'

export {Button, ButtonGroup, icon}

1
2
3
4
5

yarn global add nrm
# 查看
nrm ls
# 切换 淘宝源
nrm use taobao

1
2
3

"scripts": {
    "start": "parcel index.html --no-cache",
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

// 单元测试
import chai from 'chai';
import spies from 'chai-spies';

chai.use(spies);
const expect = chai.expect;
try {
  // 测试按钮含有 icon
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings'
      },
    });
    // button.$mount('#test')
    vm.$mount();
    const useElement = vm.$el.querySelector('use');
    // console.log(userElement)
    /*
    // Uncaught AssertionError
    // expect(useElement.getAttribute('xlink:href')).to.equal('settings')
    */
    // 可以通过的测试用例
    if (useElement) {
      expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings');
      const href = useElement.getAttribute('xlink:href');
      expect(href).to.eq('#i-settings');
    }
    vm.$el.remove();
    vm.$destroy();
  }

  // 测试 isLoading属性 是否显示#i-loading的图标
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
        isLoading: true,
      },
    });
    vm.$mount();
    const useElement = vm.$el.querySelector('use');
    const href = useElement?.getAttribute('xlink:href');
    // Uncaught AssertionError
    // expect(href).to.eq('#i-settings')
    expect(href).to.eq('#i-loading');
    vm.$el.remove();
    vm.$destroy();
  }

  // 测试 iconPosition order 默认为 1 左边 ；2 右边
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
      },
    });
    // button 必须被加载 渲染到页面中，CSS加载，才能识别 order
    // 否则 expect(order).to.eq('')为空
    const div = document.createElement('div');
    document.body.appendChild(div);
    vm.$mount(div);
    const svg = vm.$el.querySelector('svg');
    const {order} = window.getComputedStyle(svg as SVGSVGElement);
    // 错误断言
    // expect(order).to.eq(1)
    // 正确断言
    //CSS 所有属性值都是字符串
    expect(order).to.eq('1');
    vm.$el.remove();
    vm.$destroy();
  }

  // 测试 iconPosition order 为 2 右边
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
        iconPosition: 'right',
      },
    });
    const div = document.createElement('div');
    document.body.appendChild(div);
    vm.$mount(div);
    const svg = vm.$el.querySelector('svg');
    const {order} = window.getComputedStyle(svg as SVGSVGElement);
    expect(order).to.eq('2');
    vm.$el.remove();
    vm.$destroy();
  }

  // 测试 按钮触发 click // mock 使用 chai.spies 监听函数
  {
    const Constructor = Vue.extend(VueButton);
    const vm = new Constructor({
      propsData: {
        icon: 'settings',
      },
    });
    vm.$mount();
    const spyFn = chai.spy(() => {
      console.log('spy function OK');
    });

    vm.$on('click', spyFn);
    const button = vm.$el;
    (button as HTMLButtonElement).click();
    // 期望 函数被执行
    expect(spyFn).to.have.been.called();
    vm.$el.remove();
    vm.$destroy();
  }

} catch (error) {
  // window.errors = [error];
  console.log('error: ', error);
} finally {
  // window.errors 存在 打印所有错误信息
  /*
  window.errors && window.errors.forEach((error: Error) => {
    console.error(error.message);
  });
  */
}