- 投稿日：2020-04-21T21:47:49+09:00
Vueコンポーネントをもっと「効率的にテストする」
初めに
vueのテストでコンポーネントを生成する際、
- 基本的にデフォルト値を使用
- 必要な値だけ変更
という感じで簡単に生成できるよう考えました。Vuetifyの「効率的にテストする」の以下のようにしても良いですが
「これだと結局propsData全部指定しなきゃいけないし増えたらケース毎に指定するの面倒じゃない？」
と思ったのが発端です。やってみる
元のソースコード
「効率的にテストする」から引用const mountFunction = options => { return mount(CustomCard, { localVue, vuetify, ...options, }) } it('should have a custom title and match snapshot', () => { const wrapper = mountFunction({ propsData: { title: 'Fizzbuzz', }, }) expect(wrapper.html()).toMatchSnapshot() })いじったあとのソースコード
デフォルト値を指定// デフォルトの値を指定 const defaultOptions = { title: 'Fizzbuzz', text: 'hogehoge', } const mountFunction = (options=defaultOptions) => { return mount(CustomCard, { localVue, vuetify, propsData: Object.assign(defaultOptions, options), }) } it('デフォルトの値をそのまま利用する場合', () => { const wrapper = mountFunction() // 値を気にしなくて良いテストはそのままデフォルト値を使用 expect(wrapper.html()).toMatchSnapshot() }) it('複数のpropsの中で一つだけ変更したい場合', () => { const wrapper = mountFunction({ title: 'BuzzFizz' }) // 必要な値だけ更新してテスト expect(wrapper.html()).toMatchSnapshot() })まとめ
ただの表示確認なら
mountFunction()でいいですし
一つのプロパティに値を設定してその結果を見たいならmountFunction({ key: value })で、そのプロパティ以外の無駄なコードを省けますし使えるかも！
とvue始めたての初心者が思いついた記事でした。
ありきたりかもしれませんが備忘録的な意味も込めて。もっと良い方法なんかがあれば教えてください！
以上です。
- 投稿日：2020-04-21T16:34:56+09:00
Vueの監視プロパティwatchで配列やオブジェクトを監視しても変更時取得される古い値と新しい値が同じな件
まーそういうことよね（・・｀
https://jp.vuejs.org/v2/api/index.html#vm-watchなのでdeep watchとかで配列やオブジェクトを監視する際旧値が必要な場合は
dataに旧値を手動保存しときましょーね
- 投稿日：2020-04-21T16:34:56+09:00
Vueの監視プロパティwatchで配列やオブジェクトの変更を監視しても変更時取得される古い値と新しい値が同じな件
リンク先の赤いびっくりマーク参照。
まーそういうことよね（・・｀
https://jp.vuejs.org/v2/api/index.html#vm-watchなのでdeep watchとかで配列やオブジェクトを監視する際旧値が必要な場合は
dataに旧値を手動保存しときましょーね
- 投稿日：2020-04-21T13:57:59+09:00
Vueハンズオン
Vueハンズオン用ドキュメント。
インストール〜APIリクエスト、テーブル操作までやってみる。インストール
- Node.js
Mac
$ brew update # nodebrew インストール $ brew install nodebrew $ mkdir -p ~/.nodebrew/src # node.js インストール $ nodebrew install-binary stable ## 確認 $ nodebrew ls v12.16.1 ## 適用 $ nodebrew use v12.16.1 ## 環境パス適用(zsh用) $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc $ source ~/.zshrc ## node確認 $ node -v v12.16.1Windows
下記手順に沿ってインストール
https://qiita.com/Masayuki-M/items/840a997a824e18f576d8
Node.jsバージョンの指定はありません
- Vue CLI
$ npm install -g @vue/cli ## Version確認 $ vue --version @vue/cli 4.2.2最新版のインストールでOK
Vueハンズオン
1.プロジェクト作成と起動
$ vue create my-vue-project ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features ## 確認 $ cd my-vue-project $ ls -lrt total 928 -rw-r--r-- 1 usami65 staff 73 3 29 14:41 babel.config.js drwxr-xr-x 4 usami65 staff 128 3 29 14:41 public drwxr-xr-x 6 usami65 staff 192 3 29 14:41 src -rw-r--r-- 1 usami65 staff 843 3 29 14:41 package.json drwxr-xr-x 822 usami65 staff 26304 3 29 14:41 node_modules -rw-r--r-- 1 usami65 staff 460067 3 29 14:41 package-lock.json -rw-r--r-- 1 usami65 staff 326 3 29 14:41 README.md ## 起動 $ npm run serve ## 確認 http://localhost:8080/2.Bootstrap Vue
- Bootstrap Vueインストール
$ vue create my-first-bootstrap-project $ cd my-first-bootstrap-project $ npm install bootstrap-vue bootstrap
- エントリーポイント(
src/main.js)へbootstrapを登録import Vue from 'vue' import App from './App.vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin) Vue.config.productionTip = false
- bootstrap使ってみる(Form input)
# src/App.vue <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <hr /> <div> <b-form-input v-model="text" placeholder="Enter your name"></b-form-input> <div class="mt-2">Value: {{ text }}</div> </div> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, data() { return { text: '' } } } </script>
- 確認
## 起動 $ npm run serve ## 確認 http://localhost:8080/入力フィールドあるはず!!
3.APIリクエスト
- axiosインストール
$ vue create my-first-axios-project $ cd my-first-axios-project $ npm install axios
- エントリーポイント(
src/main.js)へbootstrapを登録import Vue from 'vue' import App from './App.vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin) Vue.config.productionTip = false
- APIリクエスト(Get)を書いてみる
src/App.vueの内容を下記へ書き換える<template> <div> <br> <b-button variant="outline-primary" @click="getIp">IPを取得</b-button> <hr/> <div>Your IP: {{ ipAddress }}</div> <br> <div>Json Data: {{ jsonData }}</div> </div> </template> <script> import axios from 'axios' export default { name: 'TestAPP', data() { return { jsonData: '', ipAddress: '', } }, methods: { getIp() { const url = 'https://httpbin.org/get'; axios.get(url) .then((response) => { console.log(response.data); this.jsonData = response.data; this.ipAddress = response.data.origin; }) .catch((e) => { alert(e); }); } } } </script> <style scoped> </style>
- 確認
## 起動 $ npm run serve ## 確認 http://localhost:8080/
IPを取得ボタンを押すとIPアドレスが表示される。4.テーブル
作業用プロジェクトをgit cloneする$ git clone https://github.com/65usami/vue-hanson-project.git
- テーブルデータ コンポーネント作成
src/components/HandsOn.vueの内容を下記へ書き換える<template> <div> <table border="1"> <tr> <td>{{items[0].age}}</td> <td>{{items[0].first_name}}</td> <td>{{items[0].last_name}}</td> </tr> <tr> <td>{{items[1].age}}</td> <td>{{items[1].first_name}}</td> <td>{{items[1].last_name}}</td> </tr> <tr> <td>{{items[2].age}}</td> <td>{{items[2].first_name}}</td> <td>{{items[2].last_name}}</td> </tr> </table> </div> </template> <script> export default { name: 'HandsOn', data() { return { items: [ {age: 40, first_name: 'Dickerson', last_name: 'Macdonald'}, {age: 21, first_name: 'Larsen', last_name: 'Shaw'}, {age: 89, first_name: 'Geneva', last_name: 'Wilson'}, ] } } } </script> <style scoped> </style>
- 確認
## 起動 $ npm run serve ## 確認 http://localhost:8080/5.テーブル(Bootstrap)
作業用プロジェクトをgit cloneする$ git clone https://github.com/65usami/vue-hanson-project.git
- テーブルデータ コンポーネント作成
src/components/HandsOn.vueの内容を下記へ書き換える<template> <div> <b-table striped hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { age: 89, first_name: 'Geneva', last_name: 'Wilson' }, ] } } } </script>
- 確認
## 起動 $ npm run serve ## 確認 http://localhost:8080/
- 参考