[レベル1-タスク4]2次自動販売機タスクフィードバック

レベル1タスク4自販機タスク2段階PR
今回は評論家のフィードバックだけを持ってきました~
誰よりも速いウォルターのフィードバック...ウォルターさん、ありがとうございます.🙇‍♂️🙇‍♂️🙇‍♂️

💪 JS

上下水道が複雑なら分けましょう。

定数を複数のファイルに分離したことがない.しかし、constants.tsファイルを初めていくつかのファイルに分けた.
constants.TSには定数がたくさんあります(エラーメッセージ、アクション、Auth、...)

水道水が複雑になったら、分けなければなりません!

コードを構想に沿って作成しましょう。

一般的にvalidate--関数を見ると、どのような役割と戻り値を期待しますか?
間違いない.入力したパラメータ値を検証し、有効であればtrueまたはfalseを返す可能性があります.
しかし、私は反対の戻り値を書いています.

// 에러 발생 시
new ValidationResult(true, '에러메세지');

// 에러가 발생하지 않을 시
new ValidationResult(false);

👆 ValidationResultの最初のパラメータはhasErrorなので、trueでエラーが発生するように設計されています.
しかし、一般的にvalidate--はtrue額面が有効であると考えられる.
ウォルターのフィードバックに基づいて,hasErrorをpassに変更しboolean値を反転した.

private page routing

private pageは通常ルータによって制御される.
👇 構成部品をインストールし、変数に基づいてテンプレートを変更しないでください.

// in login-component.ts
if (!isLogin) {
  return `<h2>🚫이 페이지는 관리자만 접근할 수 있습니다🚫 </h2>`;
}

👇 最初に権限がないことを라우터에서 판단に変更してprivate pageをマウントします!

// in router.ts
const accessiblePage = isLogin 
	? PAGE.PRODUCT_MANAGE_PAGE
	:PAGE.ONLY_MANAGER_ACCESSIBLE_PAGE;

DOM直接指向id

 const [$email, $password] = this.querySelectorAll('input');

👆 ピッピッピッピッピッピッピッピッピッピッピッピッピッピッピッピッテンプレートを何らかの理由で変更した場合(例えば、inputを一番前に追加した場合)、必要な操作を実行できますか?

const $email = this.querySelector('#login-email-input') as HTMLInputElement;
const $password = this.querySelector('#login-password-input') as HTMLInputElement;

👆 IDを一人ずつ持ってきてくださいより安定する.(DOM構造への依存を避ける)

不要なAPIリクエストの削減

😢 既存のコードでは、複数のgetUserInfo()関数がAPI要求によって呼び出され、ユーザ情報が取得される.
ウォルターは私にフィードバックして、私は1回だけgetUserInfoを呼ぶように変更しました!(一度だけ呼び出してstateにuser-infoを保存しました.)
😀 変更後、ウェブページでnavtabを移動する時間も短縮され、大きな効果が得られました…!
実際、前回のフィードバックでもlocalStorage.getItem()のようにコストの高いタスクを最小限に抑えるというフィードバックがありましたが、今回も変更できず、似たようなフィードバックを聞きました
心に刻みましょう.APIリクエストやローカルストレージへのアクセスなど、高価なタスクを最小限に抑える.

APIエラーハンドル

ウォルターフィードバック:非同期リクエストの場合は必ずエラー処理を行います!

総じて非同期リクエストに対するエラー処理が不足しているようです.

動かない部分もあれば、間違いがあってできない場合もあります!

APIを取得する過程で,様々なhttp応答エラーが存在する.

しかしtry catch文を使用して取得しているものはありません...反省する🙇‍♂️🙇‍♂️

💪 Cypress

API test

外部APIを直接要求すると、テストは独立できません.
テストとは独立してAPIを処理しましょう.
CypressからAPIをブロックする

cy.intercept('POST', `${API}/login`, { fixture: 'response-ok' }).as('login');

someLogic() // 로그인을 위한 input 작성 및 로그인 form 제출 로직

cy.wait('@login');

このようにAPIをブロックすればcy.wait()を処理できるcy.waitは適切に書かれていますよね?
😀 粘性のないcy.wait(1000)を取り除くことができるのでとても役に立ちます

Cypressからログインを解除するエラー(feat.LocalStorage)

Question

Cypressはずっとログインしていないので、毎回beforeEach rollにログインしてテストします.なぜですか?

Answer

cypressでは、各テストがクッキーとlocalStorageを初期化し、複数のテストが同時に行われるとサイドフラップ効果が発生しないようにします.
👉 あ、私のログインインプリメンテーションはlocalStorageを使用しているので、localStorageの初期化に伴い、既存のログイン情報がクリアされました!
解決策を見つけた.

npm i --save-dev cypress-localstorage-commands

上記のようにパッケージまたはコマンドを使用します.jsでlocalStorageを保存する関数を直接作成すればいいです
🤔 ただし、必須でない場合は、既存のcypressの意図に従ってlocalStorageを初期化するたびに安全になると思います.