add api key e2e tests and improve labels

Author: Onatcer

e2e/profile.spec.ts

@@ -1,25 +1,69 @@
-import { test, expect } from '../playwright/fixtures';
-import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import {test, expect} from '../playwright/fixtures';
+import {PLAYWRIGHT_BASE_URL} from '../playwright/config';
 
-test('test that user name can be updated', async ({ page }) => {
+test('test that user name can be updated', async ({page}) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
-    await page.getByLabel('Name').fill('NEW NAME');
+    await page.getByLabel('Name', {exact: true} ).fill('NEW NAME');
     await Promise.all([
-        page.getByRole('button', { name: 'Save' }).first().click(),
+        page.getByRole('button', {name: 'Save'}).first().click(),
         page.waitForResponse('**/user/profile-information'),
     ]);
     await page.reload();
-    await expect(page.getByLabel('Name')).toHaveValue('NEW NAME');
+    await expect(page.getByLabel('Name', {exact: true})).toHaveValue('NEW NAME');
 });
 
-test.skip('test that user email can be updated', async ({ page }) => {
+test.skip('test that user email can be updated', async ({page}) => {
     // this does not work because of email verification currently
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     const emailId = Math.round(Math.random() * 10000);
     await page.getByLabel('Email').fill(`newemail+${emailId}@test.com`);
-    await page.getByRole('button', { name: 'Save' }).first().click();
+    await page.getByRole('button', {name: 'Save'}).first().click();
     await page.reload();
     await expect(page.getByLabel('Email')).toHaveValue(
         `newemail+${emailId}@test.com`
     );
 });
+
+async function createNewApiToken(page) {
+    await page.getByLabel('API Key Name').fill('NEW API KEY');
+    await Promise.all([
+        page.getByRole('button', {name: 'Create API Key'}).click(),
+        page.waitForResponse('**/users/me/api-tokens')
+    ]);
+
+    await expect(page.locator('body')).toContainText('API Token created successfully');
+    await page.getByRole('dialog').getByText('Close').click();
+    await expect(page.locator('body')).toContainText('NEW API KEY');
+}
+
+test('test that user can create an API key', async ({page}) => {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    await createNewApiToken(page);
+});
+
+test('test that user can delete an API key', async ({page}) => {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    await createNewApiToken(page);
+    page.getByLabel('Delete API Token NEW API KEY').click();
+    await expect(page.getByRole('dialog')).toContainText('Are you sure you would like to delete this API token?');
+    await Promise.all([
+        page.getByRole('dialog').getByRole('button', {name: 'Delete'}).click(),
+        page.waitForResponse('**/users/me/api-tokens')
+    ]);
+    await expect(page.locator('body')).not.toContainText('NEW API KEY');
+});
+
+
+test('test that user can revoke an API key', async ({page}) => {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
+    await createNewApiToken(page);
+    page.getByLabel('Revoke API Token NEW API KEY').click();
+    await expect(page.getByRole('dialog')).toContainText('Are you sure you would like to revoke this API token?');
+    await Promise.all([
+        page.getByRole('dialog').getByRole('button', {name: 'Revoke'}).click(),
+        page.waitForResponse('**/users/me/api-tokens')
+    ]);
+    await expect(page.getByRole('button', {name: 'Revoke'})).toBeHidden();
+    await expect(page.locator('body')).toContainText('NEW API KEY');
+    await expect(page.locator('body')).toContainText('Revoked');
+});

resources/js/Pages/Profile/Partials/ApiTokensForm.vue

@@ -157,9 +157,9 @@ const revokeApiTokenMutation = useMutation({
             <template #form>
                 <!-- Token Name -->
                 <div class="col-span-6 sm:col-span-4">
-                    <InputLabel for="name" value="Name" />
+                    <InputLabel for="api_key_name" value="API Key Name" />
                     <TextInput
-                        id="name"
+                        id="api_key_name"
                         v-model="createApiTokenForm.name"
                         type="text"
                         class="mt-1 block w-full" />
@@ -172,9 +172,7 @@ const revokeApiTokenMutation = useMutation({
                         API Tokens are valid for 1 year
                         </span>
                     </div>
-
                 </div>
-
             </template>
 
             <template #actions>
@@ -187,7 +185,7 @@ const revokeApiTokenMutation = useMutation({
                 <PrimaryButton
                     :class="{ 'opacity-25': createApiTokenForm.processing }"
                     :disabled="createApiTokenForm.processing">
-                    Create
+                    Create API Key
                 </PrimaryButton>
             </template>
         </FormSection>
@@ -236,11 +234,13 @@ const revokeApiTokenMutation = useMutation({
                                     <button
                                         v-if="!token.revoked"
                                         class="cursor-pointer ms-6 text-sm text-text-secondary"
+                                        :aria-label="'Revoke API Token ' + token.name"
                                         @click="confirmApiTokenRevocation(token)">
                                         Revoke
                                     </button>
                                     <button
                                         class="cursor-pointer ms-6 text-sm text-red-500"
+                                        :aria-label="'Delete API Token ' + token.name"
                                         @click="confirmApiTokenDeletion(token)">
                                         Delete
                                     </button>
@@ -254,7 +254,7 @@ const revokeApiTokenMutation = useMutation({
 
         <!-- Token Value Modal -->
         <DialogModal :show="displayingToken" @close="displayingToken = false">
-            <template #title> API Token </template>
+            <template #title> API Token created successfully </template>
 
             <template #content>
                 <div>