田中賢一郎氏の
Webアプリ開発入門: 4.Jest編 Future Coders テキスト
結構難しくなってきた、、、
今回は 7.2.4 App.vue です。
App.spec.js
index.html
App.vue
を写経。
筆者の
ここまでテストを記述しながら、在庫アプリを作成する様子をみてきました。まだほかにもいろいろなシナリオが考えられますが、大体どのような形式で記述するかというイメージは伝わったかと思います。
の言葉がつらい。
写経だけでは、何を実装しているのかわからない、、、
動かしながら実感したいが、いきなりテストコードから始まって（ＴＤＤなので当たり前だが）画面がないところで進めると、何をしているのか頭に入らない。
もちろん、テストしたい処理に対して、テスト値を入れ、期待値通りか確認する、というステップはわかるのだが、実装したvueがどう動くのか、が想像できていないので
もう暗中模索状態。
とりあえず実行してみるも、画面は真っ白。
npm run serve は正常に実行されているので、エラーなどは出ていない。
F12でコンソールに出された情報を見てみる。
エラーのファイル名が、自分で実装したファイルではない。
よって、どこが悪いのか、探しにくくなっている。
目視で問題を探すのも限界、、、
答えとdiffだ。
export defaultの階層構造記載ミス
data やmethods は第1階層目から書かれているのに
computed の階層は2階層目から。
書き換えて、、、
う、動いたー
こ、こんなの作っていたんだ、、、
知らなかった。
いや、本にはこういうものを作る、と説明してもらっていたのは知っていたのだが、実感としてわかなかった。
今度はこの画面を見て、中の値とかも見ながら単体テストで何を確認したかったのか、逆に追ってみよう、、、
ということでunitテストもapp.spec.js が通せてなかったのでやります。
コマンドが書かれてなかったのですが
npm run test:unit App
ですね。
test/unitフォルダに App.spec.js を入れて実行。
案の定エラーが出ますが、見ていると写経ミスのところばかりで
failedになったところも1つずつ解決していき、、、全部パス。
良かった。。。
念のため、答えの画面見てみますか、、、
！？
棒グラフが縦、、、
私のは横、、、
InventoryChart.vueのところが著しく違います。
InventoryInput.vueのスライダーやボタンの大きさも、答えのほうがすっきりしている。
私の物はボタンおおきすぎです。。
読み進めると、、、「7.3 vue-chart-3,chart.jsによるグラフ描画」という章がありました。
そうか、答えの縦棒はこれをしないとだめなのか！？
vue-chartをnpmで指示通りに入れて、
InventoryChart.vueを書き換えました。
vue run serve!
> tdd-inventory@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 6:03:19
error in ./src/main.js
Module not found: Error: Can't resolve './App.vue' in 'C:\ｘｘｘ\tdd-inventory\src'
ERROR in ./src/main.js 2:0-28
Module not found: Error: Can't resolve './App.vue' in 'C:\ｘｘｘ\tdd-inventory\src'
webpack compiled with 1 error
main.jsでエラー？
とりあえず Module not found ということなので、きっと今書き換えたものが動いていないのでしょう、、、、
エラーもざっくりだな。
幸い、答えもSection3フォルダに提供いただいているのでありがたく参照させてもらう。
diffとると、、、
× method
〇 models
これはわかりずらい。。。
これも直して、diffの差異が無くなった、、、
でもエラーがでる、、、なんで？
・・・
・・・
・・・
App.vue がいつの間にかなくなっている、、、
そういえば、コマンドを打とうとしたのに、フォーカスが「ターミナル」に入っていなくて、エクスプローラのところにフォーカスが当たっていた時があったような気がしたのですが、その時にいろいろキーを打っていた時に消したかも。
もうここまでくるとさすがに同じ問題で困る人はいないかもしれませんが
念のため残しておきます。
やっとでた。
入庫や在庫をすると、グラフがぐいーっと伸びたり縮んだりするのがきもちいい。
いやー、結構長かった。
ボタンが大きすぎる件は、まあいいか。
ここで 単体テストしてみたらどうなるんだろう、、、
npm run test:unit App
実行
まあ、エラーが出ました。
見ていくと、、、vue-chart-3の部分で何か対応が必要みたいです。
Details:
C:\ｘｘｘ\tdd-inventory\node_modules\lodash-es\lodash.js:10
export { default as add } from './add.js';
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (node_modules/vue-chart-3/dist/index.cjs:71:24)
・・・まあここはいいか。
本も次の章に行くようなので、これはまた知識がついてから取り組むことにします。