Merged PR 567: テスト用Attributeを追加
## 概要 [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の変更 - なし ## 動作確認状況 - ローカルで確認
This commit is contained in:
湯本 開
parent
4b0110856c
commit
7421203bc4
@ -46,6 +46,7 @@ export const DelegationBar: React.FC = (): JSX.Element => {
|
||||
alt="Exit"
|
||||
title="Exit"
|
||||
onClick={onClickExit}
|
||||
data-tag="exit-delegation"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -87,6 +87,7 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
? styles.isActive
|
||||
: ""
|
||||
}
|
||||
data-tag={`menu-${x.key}`}
|
||||
>
|
||||
{t(x.label)}
|
||||
</a>
|
||||
@ -101,6 +102,7 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
|
||||
<span
|
||||
className={styles.accountSignout}
|
||||
onClick={onSignoutButton}
|
||||
data-tag="logout"
|
||||
style={{ pointerEvents: isDelegation ? "none" : "auto" }}
|
||||
>
|
||||
<img src={logout} alt="" className={styles.accountIcon} />
|
||||
|
||||
@ -39,22 +39,34 @@ const Snackbar: React.FC<SnackbarProps> = (props) => {
|
||||
const isShow = isOpen ? styles.isShow : "";
|
||||
|
||||
return (
|
||||
<div className={`${styles.snackbar} ${isAlert} ${isShow}`}>
|
||||
<div
|
||||
className={`${styles.snackbar} ${isAlert} ${isShow}`}
|
||||
data-tag="snackbar"
|
||||
>
|
||||
{level === "error" ? (
|
||||
<img src={reportWhite} className={styles.snackbarIcon} alt="check" />
|
||||
<img
|
||||
src={reportWhite}
|
||||
className={styles.snackbarIcon}
|
||||
alt="check"
|
||||
data-tag="snackbar-error"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={checkCircleWhite}
|
||||
className={styles.snackbarIcon}
|
||||
alt="report"
|
||||
data-tag="snackbar-report"
|
||||
/>
|
||||
)}
|
||||
<p className={styles.txNormal}>{message}</p>
|
||||
<p className={styles.txNormal} data-tag="snackbar-text">
|
||||
{message}
|
||||
</p>
|
||||
{level === "error" && (
|
||||
<button
|
||||
style={{ marginLeft: "auto" }}
|
||||
type="button"
|
||||
onClick={onCloseSnackbar}
|
||||
data-tag="close-snackbar"
|
||||
>
|
||||
<img
|
||||
src={closeWhite}
|
||||
|
||||
@ -56,7 +56,11 @@ export const DeleteAccountPopup: React.FC<DeleteAccountPopupProps> = (
|
||||
<div className={styles.modalBox}>
|
||||
<p className={styles.modalTitle}>
|
||||
{t(getTranslationID("deleteAccountPopup.label.title"))}
|
||||
<button type="button" onClick={closePopup}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closePopup}
|
||||
data-tag="close-delegate-popup"
|
||||
>
|
||||
<img src={close} className={styles.modalTitleIcon} alt="close" />
|
||||
</button>
|
||||
</p>
|
||||
@ -92,6 +96,7 @@ export const DeleteAccountPopup: React.FC<DeleteAccountPopupProps> = (
|
||||
)}
|
||||
className={`${styles.formDelete} ${styles.marginBtm1} ${styles.isActive}`}
|
||||
onClick={onDeleteAccount}
|
||||
data-tag="delete-account"
|
||||
/>
|
||||
<p>
|
||||
<input
|
||||
@ -102,6 +107,7 @@ export const DeleteAccountPopup: React.FC<DeleteAccountPopupProps> = (
|
||||
)}
|
||||
className={`${styles.formButtonTx} ${styles.marginBtm1}`}
|
||||
onClick={closePopup}
|
||||
data-tag="cancel-delete-account"
|
||||
/>
|
||||
</p>
|
||||
</dd>
|
||||
|
||||
@ -364,6 +364,7 @@ const AccountPage: React.FC = (): JSX.Element => {
|
||||
}
|
||||
`}
|
||||
onClick={onSaveChangesButton}
|
||||
data-tag="savechanges-account"
|
||||
/>
|
||||
<img
|
||||
style={{ display: isLoading ? "inline" : "none" }}
|
||||
@ -377,7 +378,11 @@ const AccountPage: React.FC = (): JSX.Element => {
|
||||
<ul className={styles.linkBottom}>
|
||||
<li>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
|
||||
<a className={styles.linkTx} onClick={onDeleteAccountOpen}>
|
||||
<a
|
||||
className={styles.linkTx}
|
||||
onClick={onDeleteAccountOpen}
|
||||
data-tag="open-delete-account-popup"
|
||||
>
|
||||
{t(getTranslationID("accountPage.label.deleteAccount"))}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -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"))}
|
||||
</a>
|
||||
@ -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"))}
|
||||
</a>
|
||||
@ -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"
|
||||
/>
|
||||
</p>
|
||||
</dd>
|
||||
|
||||
@ -86,6 +86,7 @@ const TopPage: React.FC = (): JSX.Element => {
|
||||
};
|
||||
instance.loginRedirect(loginRequest);
|
||||
}}
|
||||
data-tag="signin"
|
||||
>
|
||||
{t(getTranslationID("topPage.label.signInButton"))}
|
||||
<img
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user