test: add Playwright tests for Access Token creation and deletion

apps/app/playwright/60-home/home.spec.ts

@@ -97,6 +97,29 @@ test('Access API setting', async({ page }) => {
   await expect(page.locator('.Toastify__toast')).toBeVisible();
 });
 
+test('Access Access Token setting', async({ page }) => {
+  await page.goto('/me');
+
+  // Click ApiSettingTabButton
+  await expect(page.getByTestId('grw-user-settings')).toBeVisible();
+  await page.getByTestId('api-settings-tab-button').first().click();
+
+  // Expect a success toaster to be displayed when new Access Token is generated
+  await page.getByTestId('btn-accesstoken-toggleform').click();
+  await page.getByTestId('grw-accesstoken-textare-description').fill('dummy');
+  await page.getByTestId('grw-accesstoken-create-button').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+  await expect(page.locator('grw-accesstokne-new-token-display')).toBeVisible();
+
+  // Expect a success toaster to be displayed when the Access Token is deleted
+  await page.getByTestId('grw-accesstoken-delete-button').click();
+  await page.getByTestId('grw-accesstoken-cancel-button-in-modal').click();
+  await page.getByTestId('grw-accesstoken-delete-button').click();
+  await page.getByTestId('grw-accesstoken-delete-button-in-modal').click();
+  await expect(page.locator('.Toastify__toast')).toBeVisible();
+
+});
+
 test('Access In-App Notification setting', async({ page }) => {
   await page.goto('/me');
 

apps/app/src/client/components/Me/AccessTokenForm.tsx

@@ -46,6 +46,7 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
                   <input
                     type="date"
                     className="form-control"
+                    data-testid="grw-accesstoken-input-expiredAt"
                     name="expiredAt"
                     min={new Date().toISOString().split('T')[0]}
                     required
@@ -66,6 +67,7 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
               rows={3}
               required
               defaultValue=""
+              data-testid="grw-accesstoken-textarea-description"
             />
             <div className="form-text">{t('page_me_access_token.form.description_desc')}</div>
           </div>
@@ -79,7 +81,7 @@ export const AccessTokenForm = React.memo((props: AccessTokenFormProps): JSX.Ele
           <button
             type="submit"
             className="btn btn-primary"
-            data-testid="create-access-token-button"
+            data-testid="grw-accesstoken-create-button"
           >
             {t('page_me_access_token.create_token')}
           </button>

apps/app/src/client/components/Me/AccessTokenList.tsx

@@ -66,6 +66,7 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
                           className="btn btn-danger"
                           type="button"
                           onClick={() => handleDeleteClick(token._id)}
+                          data-testid="grw-accesstoken-delete-button"
                         >
                           {t('Delete')}
                         </button>
@@ -90,10 +91,10 @@ export const AccessTokenList = React.memo((props: AccessTokenListProps): JSX.Ele
           <p className="text-danger fw-bold">{t('page_me_access_token.modal.alert')}</p>
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={toggleModal}>
+          <Button color="secondary" onClick={toggleModal} data-testid="grw-accesstoken-cancel-button-in-modal">
             {t('Cancel')}
           </Button>
-          <Button color="danger" onClick={handleConfirmDelete}>
+          <Button color="danger" onClick={handleConfirmDelete} data-testid="grw-accesstoken-delete-button-in-modal">
             {t('page_me_access_token.modal.delete_token')}
           </Button>
         </ModalFooter>

apps/app/src/client/components/Me/AccessTokenSettings.tsx

@@ -25,7 +25,7 @@ const NewTokenDisplay = React.memo(({ newToken, closeNewTokenDisplay }: { newTok
   }
 
   return (
-    <div className="alert alert-success mb-4" role="alert">
+    <div className="alert alert-success mb-4" role="alert" data-testid="grw-accesstoken-new-token-display">
       <div className="d-flex justify-content-between align-items-center mb-2">
         <h5 className="mb-0">
           {t('page_me_access_token.new_token.title')}