內(nèi)容

一礼烈、自動化測試

二峭拘、持續(xù)集成

三、發(fā)布npm包

四咬扇、npm link

——————————————————————————————————

一甲葬、自動化測試

使用karma + mocha 做單元測試

使用 Karma + Mocha做單元測試
1.Karma（[?kɑrm?] 卡瑪）是一個測試運行器，它可以呼起瀏覽器懈贺，加載測試腳本经窖，然后運行測試用例
2.Mocha（[?mo?k?] 摩卡）是一個單元測試框架/庫，它可以用來寫測試用例
3.Sinon（西農(nóng)）是一個 spy / stub / mock 庫梭灿，用以輔助測試（使用后才能理解）

步驟

1.安裝各種工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

2. 創(chuàng)建 karma 配置

    // 新建 karma.conf.js画侣，內(nèi)容如下
    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: ['ChromeHeadless'],
   
           // Continuous Integration mode
           // if true, Karma captures browsers, runs the tests and exits
           singleRun: false,
   
           // Concurrency level
           // how many browser should be started simultaneous
           concurrency: Infinity
       })
   }
   
   
   
   

3. 創(chuàng)建 test/button.test.js 文件

    const expect = chai.expect;
    import Vue from 'vue'
    import Button from '../src/button'
   
    Vue.config.productionTip = false
    Vue.config.devtools = false
   
    describe('Button', () => {
        it('存在.', () => {
            expect(Button).to.be.ok
        })
        it('可以設(shè)置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('可以設(shè)置loading.', () => {
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings',
                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 默認(rèn)的 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('設(shè)置 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 觸發(fā) 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
   
        })
    })
   
   

4. 創(chuàng)建測試腳本
   在 package.json 里面找到 scripts 并改寫 scripts

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

5. 運行測試腳本

   1. 要么使用 npm run test 一次性運行
   2. 要么使用 npm run dev-test 進(jìn)行 watch 運行

成果

如此一來，你開發(fā)的時候新開一個命令行窗口運行 npm run dev-test 就可以實時查看測試結(jié)果（無刷新）堡妒。
如果你只想看一次結(jié)果配乱，就只用運行 npm run test

二、持續(xù)集成 使用Travis CI

1.到travisCI 創(chuàng)建一個賬戶

持續(xù)集成包括

image.png

目前持續(xù)化集成 中的持續(xù)測試有兩個：
travis CI 沒有數(shù)量限制皮迟，想做幾個項目就做幾個項目
circle CI 功能強大但是有數(shù)量限制搬泥，一次只能運行一個，如果運行多個就要花錢

在根目錄中創(chuàng)建travis.yml

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
addons:
  chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

打開travisCI 點擊+

image.png

搜索

image.png

然后回到首頁

image.png

就在自動測試了

三伏尼、發(fā)布npm包

1 確保你的代碼測試通過了

npm run test 全部是綠色（原諒色）才行忿檩。

2 上傳代碼到 npmjs.org

1. 更新 package.json

   1. 在 package.json 里將版本號改為 0.0.1，等我們做完了再改成 1.0.0
   2. 創(chuàng)建 index.js爆阶，在 index.js 里將你想要導(dǎo)出的內(nèi)容全部導(dǎo)出

2. 去 https://www.npmjs.com/ 注冊一個賬戶

3. 確認(rèn)一下郵箱（必須）

4. 在 gulu 項目根目錄運行 npm adduser

   • 如果錯誤提示里面含有 https://registry.npm.taobao.org則說明你的 npm 源目前為淘寶源燥透，需要更換為 npm 官方源
     步驟：
     npm config list 找到以.npmrc結(jié)尾的文件 將淘寶源那句話前面加// 注釋掉即可

5. 運行 npm publish

image.png

3 使用自己的包

1. 預(yù)測其他使用你的包的人會怎么使用
   • 使用 vue-cli
   • 使用 webpack
   • 使用 parcel
2. 分別使用這些方式來使用自己的包（我們只以 vue-cli 為例）
   1. 使用過程中我們發(fā)現(xiàn)報錯說 import 語法有問題，那時因為 node 目前確實不支持 import辨图，我們需要用 babel 轉(zhuǎn)譯 import
      1. 你可以要求使用者自己用 babel 來轉(zhuǎn)譯
      2. 你也可以轉(zhuǎn)義好了再給他用
         • npx parcel build index.js --no-minify （本來不應(yīng)該加 --no-minify 的班套，奈何不加會有 bug，HTML 壓縮把 slot 標(biāo)簽全刪了）
         • 將 package.json 的 main 改為 dist/index.js
3. 使用 npm link 或者 yarn link 來加速調(diào)試
   1. 你每次修改源碼之后徒役，有兩條路讓別人得到最新效果
      1. 更新 package.json 里的 version孽尽，然后 npm publish窖壕。別人通過 npm update xxx 來更新忧勿。
      2. 如果你只是為了本地調(diào)試杉女，可以在項目目錄使用 npm link渐北，然后在使用之處運行 npm link xxx畴嘶，就是最新了

四、npm link

如何避免總是發(fā)版本 npm publish 然后在本地目錄下載版本呢

首先執(zhí)行 npm link 或者 yarn link

image.png

然后本機的用戶測試的時候執(zhí)行 yarn link vue-ui-zzyo

這時如果輪子的代碼改動了 只需執(zhí)行 npx parcel build index.js --no-cache --no-minify 本地測試環(huán)境中刷新就可以看到改動了 不需要重復(fù) yarn link前痘，只執(zhí)行yarn link 一次就可以了