From 7421203bc43397131325eeb027c754048b482d95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B9=AF=E6=9C=AC=20=E9=96=8B?= Date: Fri, 10 Nov 2023 03:50:33 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20567:=20=E3=83=86=E3=82=B9?= =?UTF-8?q?=E3=83=88=E7=94=A8Attribute=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task3060: テスト用Attributeを追加](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3060) - E2Eテストから指定しやすいように代表的な要素（ログアウトボタン等）に一意の名前を付ける実装を追加 - `data-*` はカスタムデータ属性と呼ばれるもので、「標準的な取り扱い方」が存在しない属性 - https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes - 一般的に、E2Eテストで「このボタン」とか「このラベル」とかを指定したい時に使われる - https://docs.cypress.io/guides/references/best-practices - 本番環境などでも属性としては残したままにする想定だが、`data-test-id` 等の見るからにテスト用の名前を指定すると、テスト処理が入っているような変な誤解を招きそうなので名前は `data-tag` とした - 実際にはテストにも使える、副作用が特にない属性 ## レビューポイント - 動作が変わるような変更が入り込んでしまっていないか - タグ名は妥当か ## UIの変更 - なし ## 動作確認状況 - ローカルで確認 --- .../src/components/delegate/index.tsx | 1 + .../src/components/header/loginedHeader.tsx | 2 ++ .../src/components/snackbar/index.tsx | 18 +++++++++++++++--- .../pages/AccountPage/deleteAccountPopup.tsx | 8 +++++++- .../src/pages/AccountPage/index.tsx | 7 ++++++- dictation_client/src/pages/TermsPage/index.tsx | 5 +++++ dictation_client/src/pages/TopPage/index.tsx | 1 + 7 files changed, 37 insertions(+), 5 deletions(-) diff --git a/dictation_client/src/components/delegate/index.tsx b/dictation_client/src/components/delegate/index.tsx index 1bfce9e..a4750de 100644 --- a/dictation_client/src/components/delegate/index.tsx +++ b/dictation_client/src/components/delegate/index.tsx @@ -46,6 +46,7 @@ export const DelegationBar: React.FC = (): JSX.Element => { alt="Exit" title="Exit" onClick={onClickExit} + data-tag="exit-delegation" /> ); diff --git a/dictation_client/src/components/header/loginedHeader.tsx b/dictation_client/src/components/header/loginedHeader.tsx index 86f5e68..57ee5dd 100644 --- a/dictation_client/src/components/header/loginedHeader.tsx +++ b/dictation_client/src/components/header/loginedHeader.tsx @@ -87,6 +87,7 @@ const LoginedHeader: React.FC = (props: HeaderProps) => { ? styles.isActive : "" } + data-tag={`menu-${x.key}`} > {t(x.label)} @@ -101,6 +102,7 @@ const LoginedHeader: React.FC = (props: HeaderProps) => { diff --git a/dictation_client/src/components/snackbar/index.tsx b/dictation_client/src/components/snackbar/index.tsx index 2f41161..0967d86 100644 --- a/dictation_client/src/components/snackbar/index.tsx +++ b/dictation_client/src/components/snackbar/index.tsx @@ -39,22 +39,34 @@ const Snackbar: React.FC = (props) => { const isShow = isOpen ? styles.isShow : ""; return ( -
+
{level === "error" ? ( - check + check ) : ( report )} -

{message}

+

+ {message} +

{level === "error" && (

@@ -92,6 +96,7 @@ export const DeleteAccountPopup: React.FC = ( )} className={`${styles.formDelete} ${styles.marginBtm1} ${styles.isActive}`} onClick={onDeleteAccount} + data-tag="delete-account" />

= ( )} className={`${styles.formButtonTx} ${styles.marginBtm1}`} onClick={closePopup} + data-tag="cancel-delete-account" />

diff --git a/dictation_client/src/pages/AccountPage/index.tsx b/dictation_client/src/pages/AccountPage/index.tsx index 924048c..79963ae 100644 --- a/dictation_client/src/pages/AccountPage/index.tsx +++ b/dictation_client/src/pages/AccountPage/index.tsx @@ -364,6 +364,7 @@ const AccountPage: React.FC = (): JSX.Element => { } `} onClick={onSaveChangesButton} + data-tag="savechanges-account" /> {
  • {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} - + {t(getTranslationID("accountPage.label.deleteAccount"))}
    • diff --git a/dictation_client/src/pages/TermsPage/index.tsx b/dictation_client/src/pages/TermsPage/index.tsx index 586b029..cb45b5d 100644 --- a/dictation_client/src/pages/TermsPage/index.tsx +++ b/dictation_client/src/pages/TermsPage/index.tsx @@ -109,6 +109,7 @@ const TermsPage: React.FC = (): JSX.Element => { target="_blank" className={styles.linkTx} onClick={() => setIsClickedEulaLink(true)} + data-tag="open-eula" > {t(getTranslationID("termsPage.label.linkOfEula"))} @@ -123,6 +124,7 @@ const TermsPage: React.FC = (): JSX.Element => { value="" onChange={(e) => setIsCheckedEula(e.target.checked)} disabled={!isClickedEulaLink} + data-tag="accept-eula" /> {t( getTranslationID("termsPage.label.checkBoxForConsent") @@ -140,6 +142,7 @@ const TermsPage: React.FC = (): JSX.Element => { target="_blank" className={styles.linkTx} onClick={() => setIsClickedDpaLink(true)} + data-tag="open-dpa" > {t(getTranslationID("termsPage.label.linkOfDpa"))} @@ -154,6 +157,7 @@ const TermsPage: React.FC = (): JSX.Element => { value="" onChange={(e) => setIsCheckedDpa(e.target.checked)} disabled={!isClickedDpaLink} + data-tag="accept-dpa" /> {t( getTranslationID("termsPage.label.checkBoxForConsent") @@ -172,6 +176,7 @@ const TermsPage: React.FC = (): JSX.Element => { canClickButton() ? styles.isActive : "" }`} onClick={onAcceptTermsOfUse} + data-tag="accept-terms" />

    diff --git a/dictation_client/src/pages/TopPage/index.tsx b/dictation_client/src/pages/TopPage/index.tsx index 20ab130..1a4e435 100644 --- a/dictation_client/src/pages/TopPage/index.tsx +++ b/dictation_client/src/pages/TopPage/index.tsx @@ -86,6 +86,7 @@ const TopPage: React.FC = (): JSX.Element => { }; instance.loginRedirect(loginRequest); }} + data-tag="signin" > {t(getTranslationID("topPage.label.signInButton"))}