feat(SPA): screen to manage API keys (PART 2/3)

web/src/views/__tests__/IntegrationView.spec.ts

@@ -4,6 +4,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import uiPlugin from '@nuxt/ui/vue-plugin'
 import router from '@/router'
 import { useSessionStore } from '@/stores/session'
+import UButton from '@nuxt/ui/components/Button.vue'
 import EndpointCard from '@/components/EndpointCard.vue'
 import IntegrationView from '../IntegrationView.vue'
 
@@ -102,6 +103,31 @@ describe("Default — the page loads with the app's own origin", () => {
 	})
 })
 
+describe('Manage API keys link', () => {
+	it('sits below the three notes as a link-variant button with a trailing arrow and navigates to the keys screen', async () => {
+		stubOrigin(STUB_ORIGIN)
+		const wrapper = await mountIntegration()
+
+		const anchor = wrapper.findAll('a').find((a) => a.text().trim() === 'Manage API keys')!
+		expect(anchor.attributes('href')).toBe('/integration/api-keys')
+		const button = wrapper
+			.findAllComponents(UButton)
+			.find((component) => component.element === anchor.element)!
+		expect(button.props('variant')).toBe('link')
+		expect(button.props('trailingIcon')).toBe('i-lucide-arrow-right')
+		const lastNote = wrapper
+			.findAll('span')
+			.find((span) => span.text().startsWith('Browsers can only call the API'))!
+		expect(
+			lastNote.element.compareDocumentPosition(anchor.element) &
+				Node.DOCUMENT_POSITION_FOLLOWING,
+		).toBeTruthy()
+
+		await anchor.trigger('click')
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/integration/api-keys'))
+	})
+})
+
 describe('Copied — the Base URL copy button', () => {
 	it('writes the origin to the clipboard, shows Copied for 2s, then reverts', async () => {
 		stubOrigin(STUB_ORIGIN)