feat(integration): add image variants section and standardize code snippets

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

@@ -22,6 +22,7 @@ const SECTION_LABELS = [
 	'Media',
 	'Users and invites',
 	'Settings',
+	'Images and variants',
 	'Session only',
 	'Errors',
 	'Notes',
@@ -97,10 +98,7 @@ async function activateTab(container: HTMLElement, label: string) {
 	const button = Array.from(container.querySelectorAll('[role="tab"]')).find(
 		(el) => el.textContent?.trim() === label,
 	) as HTMLButtonElement | undefined
-	button?.focus()
-	button?.dispatchEvent(
-		new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
-	)
+	button?.click()
 	await flushPromises()
 }
 
@@ -182,7 +180,7 @@ describe('Default, every card collapsed', () => {
 		expect(section(wrapper, 'settings').text()).toContain('1 route')
 	})
 
-	it('makes no /v1 request while rendering or expanding cards', async () => {
+	it('makes no /v1 request for a session without the owner or admin role', async () => {
 		const wrapper = await mountIntegration()
 		await expand(wrapper, 'POST /v1/article/')
 		await expand(wrapper, 'GET /v1/media/')
@@ -210,12 +208,12 @@ describe('Group scrolled, one card expanded', () => {
 		const tabs = created.findAll('[role="tab"]')
 		expect(tabs.map((tab) => tab.text())).toEqual(['fetch', 'curl', 'Response'])
 		expect(tabs[0]!.attributes('aria-selected')).toBe('true')
-		expect(text).toContain('JavaScript')
-		expect(
-			created
-				.findAll('button')
-				.some((button) => button.attributes('aria-label') === 'Copy JavaScript example'),
-		).toBe(true)
+		expect(created.findAll('[role="tablist"]')).toHaveLength(1)
+		expect(created.get('pre').text()).toBe(
+			endpointExamples(created.props('endpoint'), STUB_ORIGIN).fetch,
+		)
+		expect(text).not.toContain('Shell')
+		expect(created.findAll('button[aria-label="Copy code"]')).toHaveLength(1)
 
 		expect(text).toContain('Errors')
 		const statuses = created
@@ -273,17 +271,19 @@ describe('Copied, the Base URL copy button', () => {
 
 		expect(writeText).toHaveBeenCalledWith(STUB_ORIGIN)
 		expect(findButton(wrapper, 'Copied')).toBeTruthy()
-		expect(wrapper.find('[aria-live="polite"]').text()).toContain('Copied')
+		expect(wrapper.find('[aria-live="polite"]').text()).toBe('Copied')
 
-		await vi.advanceTimersByTimeAsync(2000)
+		await vi.advanceTimersByTimeAsync(1999)
+		expect(findButton(wrapper, 'Copied')).toBeTruthy()
+		await vi.advanceTimersByTimeAsync(1)
 
-		expect(findButton(wrapper, 'Copy')).toBeTruthy()
+		expect(wrapper.find('[aria-live="polite"]').text()).toBe('Copy')
 		expect(findButton(wrapper, 'Copied')).toBeFalsy()
 	})
 })
 
-describe("Copied, a CodeBlock's Copy button is independent of the Base URL's", () => {
-	it("copies only that card's exact code and leaves the other buttons unaffected", async () => {
+describe("Copied, a CodeSnippet's Copy button is independent of the Base URL's", () => {
+	it("copies only that card's active tab and leaves the other buttons unaffected", async () => {
 		const writeText = stubClipboard()
 		vi.useFakeTimers()
 		const wrapper = await mountIntegration()
@@ -291,7 +291,7 @@ describe("Copied, a CodeBlock's Copy button is independent of the Base URL's", (
 
 		const button = created
 			.findAll('button')
-			.find((item) => item.attributes('aria-label') === 'Copy JavaScript example')!
+			.find((item) => item.attributes('aria-label') === 'Copy code')!
 		await button.trigger('click')
 		await flushPromises()
 
@@ -299,10 +299,13 @@ describe("Copied, a CodeBlock's Copy button is independent of the Base URL's", (
 		expect(writeText).toHaveBeenCalledWith(expected)
 		const copied = wrapper.findAll('button').filter((item) => item.text().trim() === 'Copied')
 		expect(copied).toHaveLength(1)
-		expect(copied[0]!.attributes('aria-label')).toBe('Copy JavaScript example')
-		expect(findButton(wrapper, 'Copy')).toBeTruthy()
+		expect(copied[0]!.attributes('aria-label')).toBe('Copy code')
+		expect(copied[0]!.element).toBe(button.element)
+		expect(findButton(wrapper, 'Copy')!.attributes('aria-label')).toBe('Copy code')
 
-		await vi.advanceTimersByTimeAsync(2000)
+		await vi.advanceTimersByTimeAsync(1999)
+		expect(findButton(wrapper, 'Copied')).toBeTruthy()
+		await vi.advanceTimersByTimeAsync(1)
 		expect(findButton(wrapper, 'Copied')).toBeFalsy()
 	})
 })
@@ -591,3 +594,68 @@ describe('Notes', () => {
 		)
 	})
 })
+
+describe('CodeSnippet migration', () => {
+	it('draws the Base URL as a CodeSnippet with the single tab "Base URL"', async () => {
+		const wrapper = await mountIntegration()
+
+		const label = wrapper.findAll('span').find((item) => item.text() === 'Base URL')!
+		const snippet = label.element.parentElement!
+		expect(snippet.querySelectorAll('[role="tab"]')).toHaveLength(0)
+		expect(snippet.querySelector('[role="tablist"]')?.textContent?.trim()).toBe('Base URL')
+		expect(snippet.querySelector('pre')?.textContent).toBe(STUB_ORIGIN)
+	})
+
+	it('draws the Authentication example with curl and fetch tabs and no Shell or JavaScript label', async () => {
+		const wrapper = await mountIntegration()
+		const auth = section(wrapper, 'auth')
+
+		expect(auth.findAll('[role="tablist"]')).toHaveLength(1)
+		expect(auth.findAll('[role="tab"]').map((tab) => tab.text())).toEqual(['curl', 'fetch'])
+		expect(auth.get('[role="tab"][aria-selected="true"]').text()).toBe('curl')
+		expect(auth.get('pre').text()).toBe(authExamples(STUB_ORIGIN).curl)
+		expect(auth.text()).not.toContain('Shell')
+		expect(auth.text()).not.toContain('JavaScript')
+	})
+
+	it('draws the Errors sample as a CodeSnippet named "Error response · text/plain"', async () => {
+		const wrapper = await mountIntegration()
+		const errors = section(wrapper, 'errors')
+
+		expect(errors.get('[role="tablist"]').text()).toBe('Error response · text/plain')
+		expect(errors.findAll('button[aria-label="Copy code"]')).toHaveLength(1)
+		expect(errors.get('pre').text().split('\n')).toEqual([
+			'HTTP/1.1 403 Forbidden',
+			'Content-Type: text/plain',
+			'',
+			'This action needs a real session.',
+		])
+	})
+
+	it('keeps independent Copy buttons across the page', async () => {
+		const writeText = stubClipboard()
+		const wrapper = await mountIntegration()
+
+		await findButton(wrapper, 'Copy')!.trigger('click')
+		await flushPromises()
+
+		expect(writeText).toHaveBeenCalledWith(STUB_ORIGIN)
+		expect(wrapper.findAll('button').filter((item) => item.text() === 'Copied')).toHaveLength(1)
+	})
+
+	it('removes CodeBlock and every import of it, and keeps CodeText', () => {
+		const sources = import.meta.glob<string>('/src/**/*.{vue,ts}', {
+			query: '?raw',
+			import: 'default',
+			eager: true,
+		})
+		const paths = Object.keys(sources)
+
+		expect(paths).not.toContain('/src/components/CodeBlock.vue')
+		expect(paths).toContain('/src/components/CodeText.vue')
+		const importers = paths.filter(
+			(path) => !path.endsWith('.spec.ts') && sources[path]!.includes('CodeBlock'),
+		)
+		expect(importers).toEqual([])
+	})
+})