feat(activity): update summary cards to toggles and introduce export menu

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

@@ -1,17 +1,15 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises } from '@vue/test-utils'
 import router from '@/router'
-import { ApiError, NetworkError, useApi } from '@/composables/useApi'
+import { useApi } from '@/composables/useApi'
 import { initializeLocale, setLocale } from '@/i18n'
 import {
 	EXPORT_PATH,
 	LIST_PATH,
 	SUMMARY_PATH,
 	callsTo,
-	click,
 	days,
 	findButton,
-	harness,
 	mountActivity,
 	queryObject,
 	rows,
@@ -19,7 +17,6 @@ import {
 	textOf,
 	unmountActivity,
 } from './activityHarness'
-import ActivityCategorySelect from '@/components/ActivityCategorySelect.vue'
 import { activityItems, makeItem, pageOf, summaryDefault } from './activityFixtures'
 
 vi.mock('@/composables/useApi', async (importOriginal) => {
@@ -34,24 +31,13 @@ vi.mock('@nuxt/ui/composables', async (importOriginal) => {
 	return { ...actual, useToast: () => ({ add: toastAdd }) }
 })
 
-const clicked: HTMLAnchorElement[] = []
-
 beforeEach(() => {
 	toastAdd = vi.fn()
-	clicked.length = 0
 	localStorage.clear()
 	initializeLocale()
-	URL.createObjectURL = vi.fn(() => 'blob:activity')
-	URL.revokeObjectURL = vi.fn()
-	vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (
-		this: HTMLAnchorElement,
-	) {
-		clicked.push(this)
-	})
 })
 
 afterEach(async () => {
-	vi.restoreAllMocks()
 	unmountActivity()
 	vi.mocked(useApi).mockReset()
 	localStorage.clear()
@@ -59,75 +45,6 @@ afterEach(async () => {
 	await router.push('/login')
 })
 
-function toastCall(index = 0) {
-	const options = toastAdd.mock.calls[index]![0] as {
-		color: string
-		icon: string
-		title: string
-	}
-	return { color: options.color, icon: options.icon, title: options.title }
-}
-
-describe('Export', () => {
-	it('prepares the file with the list filters, then downloads it and toasts', async () => {
-		let release: (blob: Blob) => void = () => undefined
-		const pending = new Promise<Blob>((resolve) => (release = resolve))
-		await mountActivity({ exportFile: () => pending })
-		harness.wrapper!.findComponent(ActivityCategorySelect).vm.$emit('select', 'auth')
-		await flushPromises()
-		await click(
-			Array.from(
-				document.body.querySelectorAll<HTMLButtonElement>(
-					'[role="group"][aria-label="Dates"] button',
-				),
-			).find((button) => textOf(button) === '30 days'),
-		)
-
-		await click(findButton('Export CSV'))
-
-		expect(callsTo(EXPORT_PATH)).toHaveLength(1)
-		expect(queryObject(callsTo(EXPORT_PATH)[0])).toEqual({ category: 'auth', range: '30d' })
-		const busy = findButton('Preparing file…')!
-		expect(busy.disabled).toBe(true)
-		expect(clicked).toHaveLength(0)
-
-		release(new Blob(['when,actor'], { type: 'text/csv' }))
-		await flushPromises()
-
-		expect(clicked).toHaveLength(1)
-		expect(clicked[0]!.download).toBe('activity.csv')
-		expect(URL.createObjectURL).toHaveBeenCalledTimes(1)
-		expect(toastCall()).toEqual({
-			color: 'success',
-			icon: 'i-lucide-circle-check',
-			title: 'Export started. Your file will download shortly.',
-		})
-		expect(findButton('Export CSV')?.disabled).toBe(false)
-	})
-
-	it.each([
-		['a 500 response', () => new ApiError(500)],
-		['a 403 response', () => new ApiError(403)],
-		['a network failure', () => new NetworkError()],
-	])('raises an error toast after %s and re-enables the button', async (_, failure) => {
-		await mountActivity({
-			exportFile: () => {
-				throw failure()
-			},
-		})
-
-		await click(findButton('Export CSV'))
-
-		expect(toastCall()).toEqual({
-			color: 'error',
-			icon: 'i-lucide-circle-x',
-			title: "Couldn't export activity. Try again.",
-		})
-		expect(clicked).toHaveLength(0)
-		expect(findButton('Export CSV')?.disabled).toBe(false)
-	})
-})
-
 describe('My activity: a role that is not owner or admin sees its own events', () => {
 	it.each([['editor'], [undefined]])('role %s', async (role) => {
 		await mountActivity({
@@ -142,7 +59,7 @@ describe('My activity: a role that is not owner or admin sees its own events', (
 		expect(textOf(document.body)).toContain("Everything you've done on this site.")
 		expect(stripCards()).toHaveLength(0)
 		expect(textOf(document.body)).not.toContain('All people')
-		expect(findButton('Export CSV')).toBeUndefined()
+		expect(findButton('Export')).toBeUndefined()
 		const headers = Array.from(document.body.querySelectorAll('[role="columnheader"]')).map(
 			textOf,
 		)
@@ -204,7 +121,7 @@ describe('The French interface', () => {
 		})
 
 		expect(textOf(document.body.querySelector('h1'))).toBe('Activité')
-		expect(textOf(findButton('Exporter en CSV'))).toBe('Exporter en CSV')
+		expect(textOf(findButton('Exporter'))).toBe('Exporter')
 		const strip = stripCards().map(textOf)
 		expect(strip[0]).toContain('Actions au total')
 		expect(strip[1]).toContain('Personnes actives')