e2e test for token list page

Author: david-crespo

app/pages/settings/AccessTokensPage.tsx

@@ -70,7 +70,7 @@ export default function AccessTokensPage() {
       colHelper.accessor('id', {
         header: () => (
           <>
-            ID{' '}
+            ID
             <TipIcon className="ml-1.5">
               A database ID for the token record, not the bearer token itself.
             </TipIcon>

mock-api/token.ts

@@ -12,17 +12,17 @@ import type { Json } from './json-type'
 export const deviceTokens: Json<DeviceAccessToken>[] = [
   {
     id: '6e762538-dd89-454e-b6e7-82a199b6e51a',
-    time_created: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 7 days ago
-    time_expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(), // 30 days from now
+    time_created: '2025-05-27T15:11:00Z',
+    time_expires: '2025-07-03T15:11:00Z',
   },
   {
     id: '9c858b30-bb11-4596-8c5e-c2bf1a26843e',
-    time_created: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(), // 14 days ago
-    time_expires: new Date(Date.now() + 60 * 24 * 60 * 60 * 1000).toISOString(), // 60 days from now
+    time_created: '2025-05-20T15:11:00Z',
+    time_expires: '2025-08-02T15:11:00Z',
   },
   {
     id: '29b1d980-e0d3-4318-b714-4a1f3e7b191f',
-    time_created: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago
-    time_expires: null, // Never expires
+    time_created: '2025-05-31T15:11:00Z',
+    time_expires: null,
   },
 ]

test/e2e/access-tokens.e2e.ts

@@ -0,0 +1,54 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { expect, test } from '@playwright/test'
+
+import { clickRowAction, expectRowVisible } from './utils'
+
+const token1 = '6e762538-dd89-454e-b6e7-82a199b6e51a'
+const token2 = '9c858b30-bb11-4596-8c5e-c2bf1a26843e'
+const token3 = '29b1d980-e0d3-4318-b714-4a1f3e7b191f'
+
+test('Access tokens', async ({ page }) => {
+  await page.goto('/')
+
+  await page.getByLabel('User menu').click()
+  await page.getByRole('menuitem', { name: 'Settings' }).click()
+  await page.getByRole('link', { name: 'Access Tokens' }).click()
+
+  await expect(page.getByRole('heading', { name: 'Access Tokens' })).toBeVisible()
+
+  const table = page.getByRole('table')
+  await expectRowVisible(table, {
+    ID: token1,
+    created: expect.stringContaining('May 27, 2025'),
+    Expires: expect.stringContaining('Jul 3, 2025'),
+  })
+  await expectRowVisible(table, {
+    ID: token2,
+    created: expect.stringContaining('May 20, 2025'),
+    Expires: expect.stringContaining('Aug 2, 2025'),
+  })
+  await expectRowVisible(table, {
+    ID: token3,
+    created: expect.stringContaining('May 31, 2025'),
+    Expires: 'Never',
+  })
+
+  // Delete a token
+  await clickRowAction(page, token1, 'Delete')
+  await expect(page.getByRole('dialog').getByText('Cannot be undone')).toBeVisible()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
+  // Token should be gone
+  await expect(page.getByRole('cell', { name: token1 })).toBeHidden()
+
+  // Other two tokens should still be there
+  await expectRowVisible(table, { ID: token2 })
+  await expectRowVisible(table, { ID: token3 })
+})