ユーザーエクスペリエンス
開発プロセス
設計規約
- フィードバック
- 一貫性
- 予測可能
プロジェクトの初期化
LICENSEの設定 MITを選択
小包のインストール
でindex.htmlを開きます。/nde_modules/.bin/parcelでindex.htmlを開きます。
主なことは、実行するたびにキャッシュを削除するか、--no-cacheを使って最後のキャッシュを使わないようにすることを忘れないことです。
parcelがエラーを報告した場合は、vueのエイリアス属性を追加し、vueをフルバージョンの
デフォルトスタイルの定義
後で参照しやすいようにcssスタイル変数を定義します。
ボタンアイコンbutton-groupのラッピング
アイコン
iconは引数icon(アイコン名)を受け取り、対応するアイコンを自動的に導入します。
Vueのスロットを使用すると、ボタンはアイコンの名前/アイコンの位置を受け付け、対応するアイコンとそれを配置する場所を自動的に紹介します。
単体テスト
BDD 振る舞い駆動開発 特徴：要求の自然言語記述、ロジック重視
TDD テスト駆動開発 特徴：出力結果に着目。
Assert アサーション、主観で正しいかどうか判断。
console.assert(typeof '1'==='string')//結果が間違っている場合、エラーが投げられる
chai
chai.jsは、TDD(テスト駆動開発)/BDD(行動駆動開発)/アサーションライブラリのセットです。
インストール
import chai, { expect } from 'chai'
import spies from 'chai-spies'
chai.use(spies)
{
//mock
const Constructor = Vue.extend(Button)
const vm = new Constructor({
propsData: {
icon: 'setting'
}
})
vm.$mount()
let spy = chai.spy(function () { console.log('呼び出される') })
vm.$on('click', spy)
vm.$el.click()
expect(spy).to.have.been.called()//この関数が呼ばれることを期待する
vm.$destroy()//テスト後にメモリから削除する
}
テストの自動化
インストール
karma karmaはブラウザを呼び出すテストランナーです。
mochaはユニットテストフレームワーク/ライブラリです。
sinonはテストを支援するスパイ/スタブ/モックライブラリです。
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-minify && karma start --single-run"
},
継続的インテグレーション
travis アカウントの登録
.travis.ymlファイルを追加し、設定します。
これにより、コードを送信するたびに自動的にテストすることができます。
独自パッケージの公開
検査コード
npm アカウントの登録
npm adduser アカウントの追加
npm linkを使った開発効率化
