tnkgs/atkadai

reactテスト

課題説明

セットアップ方法

まず、NodeJSをインストールしてください。

その後、以下のコマンドで開始できます。

npm install // 環境のセットアップ
npm start // サーバ起動、ライブリロード
npm test // テスト実行

(hint: windowsの場合、npm installでこけることがありえるが、Vitual Studioをインストールして、何かすれば解決できる)

フィーチャー

• テキストボックスとToast追加ボタンを表示する
• テキストボックスに適当な文章をいれてToast追加ボタンを押すと、Toastがリスト表示されるようにする
• テキストボックスが未記入の時、Toast追加ボタンは押せない
• Toastを追加したら追加した分だけリスト表示できるようにする。
• Close!ボタンが押された時、Toastがリスト表示から消えるようにする
• Toastが表示されて3秒たったら、リスト表示から消えるようにする

要件

• Toastをリスト表示させるReactComponentを作り、上記フィーチャーを実装する
• 実装したReactComponentをKadaiComponentにマウントさせる（表示させる）
• 実装したReactComponentに対して適切なテストを書き、テストがパスできるようにする。（コードカバレッジが高いほど評価）

atkadai's Issues

徳山:atkadaiの質問について2

お世話になっております徳山です。
課題について、再び問題が生じたので質問させて頂きたいです。
今回の質問は技術的な質問、gitについての質問、testについての質問が一つずつあります。
長くなってしまいましたが、今回も読んで貰えると幸いです。

まず技術的な問題について、index.tsxのhandleRemove(Toastを削除する)のToastの指定についての質問です。
ToastのhandleCloseを非同期にしたところ、index.tsx内のhandleRemoveに返ってくるindex, textはToast作成時のパラメタのままなので、二つ続けてToastを作成したり、CloseボタンでToastを消したりすると順番がズレて、indexが信用できなくなってしまいます。
どうしても解決策が思いつかなかったので、質問させて頂きました。簡単なヒントでも、出して頂けると助かります。
添付されているatkadai_src.zip内のsrc/index.tsxの冒頭のコメントアウトに、試したことが書かれてあります。
atkadai_src.zip

次にgitについて、ヒントに従ってブランチ:questionを分けてpushしたのですが、上手くいきません。
エラーは以下のようになってしまいます。
git -c diff.mnemonicprefix=false -c core.quotepath=false push -v --tags --set-upstream origin question:question
remote: Permission to mtsug1/atkadai.git denied to tkymwtr.

fatal: unable to access 'https://[email protected]/mtsug1/atkadai.git/': The requested URL returned error: 403
Pushing to https://[email protected]/mtsug1/atkadai.git
これに関してインターネットにヒントが沢山あったのですが、ある程度試しても上手くいかなかったので、質問させて頂きました。sshではkeyを作りましたが、認証に失敗してしまいます。
元々bitbucketを利用していまして、gitとの接続先としてgitのアカウントを作ったのですが、もしかすると原因に関係しているかもしれません。
もし原因にお心当たりがありましたら、お教えください。

最後に、testについての質問です。testについてコードカバレッジを測るとのことなのですが、chaiを用いた方が良いでしょうか？

以上です。二度目の質問で恐縮なのですが、よろしくお願い致します。

use redux

reduxで実装してみる。

徳山:atkadaiの質問について3

お世話になっております、徳山です。
課題としては完了したのですが、原因が分からず仕舞いの問題が発生してしまいました。

testのcomponentを作成している際、Toast.spec.tsxに元々あるtest文'Should call onRequestClose callback on 3 seconds after the mount'はToast.tsx内の3秒間をsinon.useFakeTimers()で進めて、onRequestCloseの呼び出しの有無を確かめるという内容でしたが、改変後のToast.tsxではどうしても通すことが出来ませんでした。
改変前は通すことが出来ました。

結局はuseFakeTimersを使わずに、test側でsetTimeoutを使うことでpassすることが出来ましたが、原因が分かりませんでした。
onRequestCloseが実行されるまでの時間を測ってみましたが、問題はありませんでした。
恐らく、Node.Timerを使っていないことか、非同期であることが原因であると考えていますが、もしこの問題の原因に心当たりがありましたら、お教え頂けると嬉しいです。

Toastが表示されて3秒たったら、リスト表示から消えるようにする