add data-testid

apps/app/src/components/Me/AssociateModal.tsx

@@ -112,7 +112,7 @@ const AssociateModal = (props: Props): JSX.Element => {
         </div>
       </ModalBody>
       <ModalFooter className="border-top-0">
-        <button type="button" className="btn btn-primary mt-3" onClick={clickAddLdapAccountHandler}>
+        <button type="button" className="btn btn-primary mt-3" data-testid="add-external-account-button" onClick={clickAddLdapAccountHandler}>
           <span className="material-symbols-outlined" aria-hidden="true">add_circle</span>
           {t('add')}
         </button>

apps/app/src/components/Me/PersonalSettings.jsx

@@ -20,22 +20,22 @@ const PersonalSettings = () => {
   const navTabMapping = useMemo(() => {
     return {
       user_infomation: {
-        Icon: () => <span className="material-symbols-outlined">person</span>,
+        Icon: () => <span data-testid="user-infomation-tab-button" className="material-symbols-outlined">person</span>,
         Content: UserSettings,
         i18n: t('User Information'),
       },
       external_accounts: {
-        Icon: () => <span className="material-symbols-outlined">ungroup</span>,
+        Icon: () => <span data-testid="external-accounts-tab-button" className="material-symbols-outlined">ungroup</span>,
         Content: ExternalAccountLinkedMe,
         i18n: t('admin:user_management.external_accounts'),
       },
       password_settings: {
-        Icon: () => <span className="material-symbols-outlined">password</span>,
+        Icon: () => <span data-testid="password-settings-tab-button" className="material-symbols-outlined">password</span>,
         Content: PasswordSettings,
         i18n: t('Password Settings'),
       },
       api_settings: {
-        Icon: () => <span className="material-symbols-outlined">api</span>,
+        Icon: () => <span data-testid="api-settings-tab-button" className="material-symbols-outlined">api</span>,
         Content: ApiSettings,
         i18n: t('API Settings'),
       },
@@ -45,12 +45,12 @@ const PersonalSettings = () => {
       //   i18n: t('editor_settings.editor_settings'),
       // },
       in_app_notification_settings: {
-        Icon: () => <span className="material-symbols-outlined">notifications</span>,
+        Icon: () => <span data-testid="in-app-notification-settings-tab-button" className="material-symbols-outlined">notifications</span>,
         Content: InAppNotificationSettings,
         i18n: t('in_app_notification_settings.in_app_notification_settings'),
       },
       other_settings: {
-        Icon: () => <span className="material-symbols-outlined">settings</span>,
+        Icon: () => <span data-testid="other-settings-tab-button" className="material-symbols-outlined">settings</span>,
         Content: OtherSettings,
         i18n: t('Other Settings'),
       },