vueをテストする
インストール方法
npm install --save-dev @vue/test-utils
記述
import { shallow } from '@vue/test-utils' import Vue from 'vue' import Vuetify from 'vuetify' import Menu from '@/components/Menu' import VueI18n from 'vue-i18n' Vue.use(Vuetify) Vue.use(VueI18n) const data = require('../../../src/i18n/message.json') const i18n = new VueI18n({ locale: 'ja', messages: data }) describe('Menu.vue', () => { it('should render correct contents', () => { const wrapper = shallow(Menu, {i18n}) expect(wrapper.text()) .to.contain('割引/ポイント') expect(wrapper.text()) .to.contain('軽快な操作性') expect(wrapper.text()) .to.contain('PWA') }) })
Vue.js + Reactもくもく会@東銀座#25に参加しました
medpeer.connpass.com
初参加、胡蝶蘭が綺麗と思ったら引っ越ししたてだったと思い出す。
柔らかな雰囲気の黙々会となりました。react陣が多めでした。
課題
書こうと思ってもなかなか手がつけられていないテスト。
拙作Gratan - Unit Price Memo Toolの単体テストを書くことを課題としました
vuetify.jsを使ったvueのテストは素のままエラーとなる
test/unit/index.jsにimport文を追加する
vuetifyのimportよりも前に書きましょう！
import 'babel-polyfill'
package.jsonに追記
"babel-polyfill": "^6.26.0"
vuexやi18nを使うコンポーネントは,普通にアプリで使っているように記述する
Constructorの引数にvex,i18nのインスタンスを渡すのが肝心。
Shop.spec.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import Shop from '@/components/Shop'
import VueI18n from 'vue-i18n'
import { store } from '../../../src/store/store.js'
Vue.use(Vuetify)
Vue.use(VueI18n)
const data = require('../../../src/i18n/message.json')
const i18n = new VueI18n({
locale: 'ja',
messages: data
})
describe('Shop.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(Shop)
const vm = new Constructor({i18n, store}).$mount()
console.log(vm.$el.textContent)
expect(vm.$el.textContent)
.to.contain('検索')
expect(vm.$el.textContent)
.to.contain('名前')
expect(vm.$el.textContent)
.to.contain('税')
expect(vm.$el.textContent)
.to.contain('操作')
})
})
vuetify.jsのCSSの指定方法
マカレル使うか
以前インストールして全く使っていなかったのでGratanリリースしたので
監視して見ますか。
mackerel-agentのインストール
nginxのビルド
cd nginx-x.x.x // ソースを解凍したディレクトリ ./configure --prefix=/usr/local/nginx --with-http_ssl_module --without-http_uwsgi_module --with-http_realip_module --add-module=./ngx_aws_auth --with-debug --with-http_stub_status_module make make install
nginx_statusの有効化
nginx.confの編集
location /nginx_status {
stub_status on;
access_log off;
allow 127.0.0.1;
deny all;
}
なんかグラフでない
副業している（したい）エンジニア交流会に参加しました
凄いエンジニアさんが登壇していて
自分の能力のなさに辟易。
もう人と比較するのは、しないようにしよう。がっかりするだけだ。
とにかく、楽しそうなことにJOINして
スキルを上げたりするのが一番だ。
ストレスのお話も出ていたように。
楽しければ、時間を忘れる。
そんな感じでした。
そうそう、副業するならば、時給制が良いという検知を得ました。
お金を稼ぐのを目的とすると、スキルの習得が２の次になりかねない。
副業はオープンにしている。
開業どどけをとりあえず出してしまう
などなど・・・
vuetify.js v-toolbar 画面サイズを小さくした時にボタンが消えるので何とかしたい
vuetify.jsのv-toolbarサンプルでは画面の横幅を小さくして行くと
ボタンが消えてしまい。操作できなくなる。
ハンバーガーボタンで選べるようにしたいのですが・・・
ググりましたら、下記のサンプルを発見しました。
Vue Router + Vuetify JS Example - Plunker
これを参考にして実装して見ます。
