Kozaneba開発日記2021-08-10
本日の一枚、チュートリアルを自動テストする
https://gyazo.com/705e639aaafce2c1142768a3411b8e8b
---
Sentryを入れてエラーが起きた時に情報が取れるようにする
開発メニューをデプロイ版から隠す
開発者メニューをlocalhost以外ではデフォルト非表示にする
オプションで出せるようにする
チュートリアルでやってる内容をテストでカバーする
特にデータのロードセーブ周りを念入りにテスト
緊急度低いが重要なこと
フィードバックを送るためのダイアログをつくる
create-react-appの開発モードではエラーのハンドラがSentryより先に登録されているため、先に発動してしまう
エラーバウンダリー？調べる
✅開発者メニューをlocalhost以外ではデフォルト非表示にする
✅オプションで出せるようにする
僕のアカウントでログインしてたら出すようにハードコードしようかな
Error boundaries do not catch errors for:
Event handlers (learn more)
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
ダメじゃん
そうだった、これオーバーレイだから閉じたらいいだけか
開発サーバでエラーレポートダイアログを見れるようになった
https://gyazo.com/8ea5def65c0278127887dfdbfa6afbc1
オプショナルにする方法が見つからないんだよな
あー、適当なデフォルト値を入れとくのか
日本人が頑張って英語でレポート書かないように日本語でOKって書いとくか
https://gyazo.com/bd1fdaf3195dcda1dc53b59a66f2d09a
GoogleAnalyticsでチュートリアルがどこまで閲覧されてるか取るという手も考えたがそれは広くアナウンスするくらいのタイミングでいいか
メモ
まずは今チュートリアルに書いている内容を自動テストできるようにする
その後
グループを閉じる機能追加
テスト書く
チュートリアルに追加
グループにタイトルを設定する機能
ungroup時にはこざねに変わる
テスト用の露出は開発モードだけにした
---
チュートリアルでやってる内容をテストでカバーする
最近のテスト状況
https://gyazo.com/3206c440e3d5a49888c1a5c2ff2e7f99
https://gyazo.com/c95ed0b11dbfc348cc47e370f4e20181
code:ts
cy.contains("Add Kozane").should("exist");
cy.contains("Close").click();
これは、Closeを含む要素がいくつもあるから。
画面上に表示されてないけど他のダイアログにもある。
testidをつけて特定の要素を指し示した方がいい。
そうすると暗黙のアサーションでそれが画面上に表示されてるかどうかテストされるから。
code:ts
cy.contains("Enable Cloud Auto-Save").click();
cy.testid("save-status").contains("uploading");
cy.testid("save-status").contains("done");
アップロード中になった後、完了する、という非同期な処理が明示的なwaitなしに書けている
https://gyazo.com/213a48c08f75805098d96e9fbd88fd92
ステータスバーのアイコンにマウスホバーした時のツールチップテキストでテストしている
チュートリアルのうちのフォントサイズ調整のテストと範囲選択のテストをしてない
テストケースに従うと範囲選択の段階ではこざねが一つもない
別途追加する必要があるが、人間も戸惑うと思うので流れを変えようと思う
ここにフォントサイズ調節の話を持ってくる
でサンプルの、長い文章を含むテキストを追加してみる
将来的にはここに長い文章のsplit機能が入る
これをチュートリアルで実現しようとすると、入力テキストにプリセットを指定したくなる
split機能も同じものを使うな、と思ったが新規追加と置き換えとでダイアログを共通にするのは良くない抽象化かもな
もしダイアログをわけるなら、新規追加のダイアログにプリセットを用意するのはやりすぎ？
そうでもない、例えば将来的にKeichoやScrapboxからインポートする機能をつけるなら、プリセットに入った状態で開いて欲しいから
https://gyazo.com/e5d85c3b70c1d5eb22569f92a94edd0a
---
チュートリアルの内容を50枚程度の付箋にしてチュートリアル中に挿入できるようになった
この後にグループに関するページを付け加えると良さそう
グループ解除の話を書いて、将来的にグループの開閉やタイトル付けもここに入るかな…と思ったが、
今時点でストーリー上必要ないなら今後もここに入れる必要はないわけで、
チュートリアルは最小限の分量で一段落つくところまで到着させて必須でない知識はその後追加で読めるようにする方がいい
そういう意味ではいま、明示的にチュートリアルの終わりがないのでよくない
「一通り終わったよ！おめでとう！」のページが必要だ
できた
https://gyazo.com/4f987b91589579ccb6a9db3f23650e2c
---
文房具を効果的に使うためには練習が必要
あなたは鉛筆やキーボードを使うことができる。これは生まれながらに使えたわけではない。
文房具を使いこなすことで、人間の知性はそれなしで活動するよりも強化される。しかしそれには練習が必要だ。
スキルは教科書を読むことによって身につくのではない。実際にやってみることによって身につくのだ。
チュートリアルの内容をこざねにした
既に著者によって構造化されたチュートリアルをあなたは読んだところだが、あなたなりの言葉を追加して再度構造化してみよう
他人の書いた文章を読んで、その内容からこざねを作ろう。それを読んであなたが考えたことも追加しよう。そしてそれ全体を構造化しよう。
あなたがどういうときに楽しいと思うか、何を面白いと思うかについて50〜100枚の小札を作ろう。そしてそれを構造化しよう。
https://gyazo.com/73e05bd3ea896f7d699c27e26d4c3c16