NISHIO Hirokazu[日本語][English]

Kozaneba開発日記2021-08-10

本日の一枚、チュートリアルを自動テストする image

prev Kozaneba開発日記2021-08-06

  • Sentryを入れてエラーが起きた時に情報が取れるようにする
  • 開発メニューをデプロイ版から隠す
    • 開発者メニューをlocalhost以外ではデフォルト非表示にする
    • オプションで出せるようにする
  • チュートリアルでやってる内容をテストでカバーする
    • 特にデータのロードセーブ周りを念入りにテスト

緊急度低いが重要なこと

  • フィードバックを送るためのダイアログをつくる

create-react-appの開発モードではエラーのハンドラがSentryより先に登録されているため、先に発動してしまう

  • エラーバウンダリー？調べる

✅開発者メニューをlocalhost以外ではデフォルト非表示にする

  • ✅オプションで出せるようにする
  • 僕のアカウントでログインしてたら出すようにハードコードしようかな

https://reactjs.org/docs/error-boundaries.html

Error boundaries do not catch errors for:

  • Event handlers (learn more)

  • Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) ダメじゃん

関連: 無意識に例外を握りつぶしてた

  • そうだった、これオーバーレイだから閉じたらいいだけか

開発サーバでエラーレポートダイアログを見れるようになった image

日本人が頑張って英語でレポート書かないように日本語でOKって書いとくか

  • image

GoogleAnalyticsでチュートリアルがどこまで閲覧されてるか取るという手も考えたがそれは広くアナウンスするくらいのタイミングでいいか

メモ

  • まずは今チュートリアルに書いている内容を自動テストできるようにする
  • その後
    • グループを閉じる機能追加
    • テスト書く
    • チュートリアルに追加
    • グループにタイトルを設定する機能
      • ungroup時にはこざねに変わる

テスト用の露出は開発モードだけにした

チュートリアルでやってる内容をテストでカバーする 最近のテスト状況 image

image ts

    cy.contains("Add Kozane").should("exist");
    cy.contains("Close").click();

これは、Closeを含む要素がいくつもあるから。 画面上に表示されてないけど他のダイアログにもある。 testidをつけて特定の要素を指し示した方がいい。 そうすると暗黙のアサーションでそれが画面上に表示されてるかどうかテストされるから。

ts

    cy.contains("Enable Cloud Auto-Save").click();
    cy.testid("save-status").contains("uploading");
    cy.testid("save-status").contains("done");

アップロード中になった後、完了する、という非同期な処理が明示的なwaitなしに書けている

image

  • ステータスバーのアイコンにマウスホバーした時のツールチップテキストでテストしている

チュートリアルのうちのフォントサイズ調整のテストと範囲選択のテストをしてない

  • テストケースに従うと範囲選択の段階ではこざねが一つもない
  • 別途追加する必要があるが、人間も戸惑うと思うので流れを変えようと思う
  • ここにフォントサイズ調節の話を持ってくる
    • でサンプルの、長い文章を含むテキストを追加してみる
    • 将来的にはここに長い文章のsplit機能が入る
  • これをチュートリアルで実現しようとすると、入力テキストにプリセットを指定したくなる
    • split機能も同じものを使うな、と思ったが新規追加と置き換えとでダイアログを共通にするのは良くない抽象化かもな
  • もしダイアログをわけるなら、新規追加のダイアログにプリセットを用意するのはやりすぎ？
    • そうでもない、例えば将来的にKeichoやScrapboxからインポートする機能をつけるなら、プリセットに入った状態で開いて欲しいから

image

チュートリアルの内容を50枚程度の付箋にしてチュートリアル中に挿入できるようになった この後にグループに関するページを付け加えると良さそう

グループ解除の話を書いて、将来的にグループの開閉やタイトル付けもここに入るかな…と思ったが、 今時点でストーリー上必要ないなら今後もここに入れる必要はないわけで、 チュートリアルは最小限の分量で一段落つくところまで到着させて必須でない知識はその後追加で読めるようにする方がいい

そういう意味ではいま、明示的にチュートリアルの終わりがないのでよくない 「一通り終わったよ！おめでとう！」のページが必要だ

できた image

文房具を効果的に使うためには練習が必要

あなたは鉛筆やキーボードを使うことができる。これは生まれながらに使えたわけではない。 文房具を使いこなすことで、人間の知性はそれなしで活動するよりも強化される。しかしそれには練習が必要だ。

スキルは教科書を読むことによって身につくのではない。実際にやってみることによって身につくのだ。

チュートリアルの内容をこざねにした 既に著者によって構造化されたチュートリアルをあなたは読んだところだが、あなたなりの言葉を追加して再度構造化してみよう

他人の書いた文章を読んで、その内容からこざねを作ろう。それを読んであなたが考えたことも追加しよう。そしてそれ全体を構造化しよう。

あなたがどういうときに楽しいと思うか、何を面白いと思うかについて50〜100枚の小札を作ろう。そしてそれを構造化しよう。

image

Next Kozaneba開発日記2021-08-11

(C)NISHIO Hirokazu / Converted from Markdown (ja)
Source: [GitHub] / [Scrapbox]