tests: add new tests

Co-Authored-By: Alex Gorji <ag@roko.li>

src/components/generic/AConfirmDialog.vue

@@ -11,6 +11,7 @@
           :html="promptLabel"
           sanitize-preset="inline-noninteractive"
           class="tw-mb-2"
+          data-testid="confirm-dialog:prompt-label"
         />
         <FormGroup v-slot="attrs">
           <input
@@ -18,6 +19,7 @@
             v-model="promptVerifyValue"
             type="text"
             required
+            data-testid="confirm-dialog:prompt"
             :aria-labelledby="promptLabelId"
           />
         </FormGroup>
@@ -32,11 +34,17 @@
           :form="formId"
           :class="confirmClass ?? 'btn-danger'"
           :disabled="!canConfirm"
+          data-testid="confirm-dialog:confirm"
         >
           <SafeHTML :html="confirmLabel" sanitize-preset="inline-noninteractive" />
         </button>
 
-        <button type="button" class="btn btn-secondary" @click="dialog.close()">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          data-testid="confirm-dialog:abort"
+          @click="dialog.close()"
+        >
           <SafeHTML :html="cancelLabel ?? t('cancel')" sanitize-preset="inline-noninteractive" />
         </button>
       </div>

src/components/nav/AMainNavMenu.vue

@@ -34,6 +34,7 @@
 
             <ANavListItem>
               <ANavLink
+                test-id="nav:show:basic-data"
                 :route="{
                   name: 'show-basic-data',
                   params: { ...ctx.route.params, showId: show.id.toString() },

src/components/playlist/APlaylistEditor.vue

@@ -107,6 +107,7 @@
             v-if="isAllowedToAddFiles"
             type="button"
             class="btn btn-default"
+            data-testid="playlist-editor:open-file-dialog"
             @click="openFileDialog()"
           >
             <icon-iconamoon-file-audio-thin class="tw-flex-none" />

src/components/playlist/APlaylistEntryEditor.vue

@@ -19,7 +19,7 @@
       </template>
       <template v-else-if="type === 'file'">
         <icon-iconamoon-file-audio-thin class="tw-flex-none" />
-        <span class="tw-truncate">
+        <span class="tw-truncate" data-testid="playlist-entry-editor:file-title">
           {{ file?.metadata?.title ?? t('file.unnamed') }}
         </span>
         <span

src/components/shows/AShowDeletionFlow.vue

@@ -4,6 +4,7 @@
       <button
         type="button"
         class="btn btn-default tw-w-full tw-justify-center"
+        data-testid="show-deletion-flow:delete"
         @click="confirmDeleteShow"
       >
         <Loading v-if="isProcessing" class="tw-h-2" />

tests/shows.spec.ts

-import { expect, test } from '@playwright/test'
+import { expect, Page, test } from '@playwright/test'
+import { getFileMetadata, purgeSteeringState, purgeTankState, steeringAPI } from './util'
+import { Show } from '@/types'
 
-test('Can create new show.', async ({ page }) => {
+test.describe.configure({ mode: 'serial' })
+
+test.beforeEach(async ({ request }) => {
+  await purgeSteeringState(request, { params: { modelCategories: 'program' } })
+})
+
+async function createShow(page: Page): Promise<Show> {
   await page.goto('/')
   await page.getByTestId('nav:shows').click()
   await page.getByTestId('my-shows:add-show').click()
@@ -9,5 +17,49 @@ test('Can create new show.', async ({ page }) => {
   await page.getByTestId('add-show-modal:show-type').selectOption({ index: 0 })
   await page.getByTestId('add-show-modal:show-funding-category').selectOption({ index: 0 })
   await page.locator('[data-testid="add-show-modal"] button[type="submit"]').click()
+  await page.waitForURL(/\/shows\/\d+/)
+  const showId = (page.url().match(/\/shows\/(\d+)/) as RegExpMatchArray)[1]
+  return await page.request.get(steeringAPI('shows', showId)).then((res) => res.json())
+}
+
+test('Can create new show.', async ({ page }) => {
+  await createShow(page)
   await expect(page.getByTestId('page-header:lead')).toHaveText('my series')
 })
+
+test('Can delete a show', async ({ page }) => {
+  const show = await createShow(page)
+  await page.goto(`/shows/${show.id}/basic-data`)
+  await page.getByTestId('show-deletion-flow:delete').click()
+  const promptValue = await page
+    .getByTestId('confirm-dialog:prompt-label')
+    .locator('code')
+    .innerText()
+  await page.getByTestId('confirm-dialog:prompt').fill(promptValue)
+  await page.getByTestId('confirm-dialog:confirm').click()
+
+  expect((await page.request.get(steeringAPI('shows', show.id))).status()).toBe(404)
+})
+
+test.describe('Show media management', () => {
+  let show: Show
+
+  test.afterEach(async ({ request }) => {
+    await purgeTankState(request)
+  })
+
+  test.beforeEach(async ({ page }) => {
+    show = await createShow(page)
+    await page.goto(`/shows/${show.id}/basic-data`)
+  })
+
+  test('Can upload file', async ({ page }) => {
+    const fileChooserPromise = page.waitForEvent('filechooser')
+    const soundfile = getFileMetadata('meeresrauschen.opus')
+    await page.getByTestId('playlist-editor:open-file-dialog').click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(soundfile.path)
+    const fileTitle = await page.getByTestId('playlist-entry-editor:file-title').innerText()
+    expect(fileTitle).toBe(soundfile.name)
+  })
+})

tests/util.ts

-import { APIRequestContext } from '@playwright/test'
+import { fileURLToPath } from 'node:url'
 
+import { APIRequestContext } from '@playwright/test'
 import { createURLBuilder } from '@rokoli/bnb/common'
 
 const steeringOrigin = createURLBuilder(process.env.STEERING_ORIGIN as string)
 export const steeringAPI = steeringOrigin.prefix('api', 'v1')
 
+const tankOrigin = createURLBuilder(process.env.TANK_ORIGIN as string, false)
+export const tankAPI = tankOrigin.prefix('api', 'v1')
+
 export function purgeSteeringState(
   request: APIRequestContext,
-  params: Record<string, string>,
+  options?: { params?: Record<string, string>; report?: boolean },
 ): Promise<Record<string, number>> {
-  return request
+  const result = request
     .delete(steeringAPI('debug', 'application-state'), {
-      params,
+      params: options?.params ?? {},
+      failOnStatusCode: true,
+    })
+    .then((res) => res.json())
+  if (options?.report) void result.then(reportDeleteCounts.bind(null, 'steering'))
+  return result
+}
+
+export function purgeTankState(
+  request: APIRequestContext,
+  options?: { params?: Record<string, string>; report?: boolean },
+): Promise<Record<string, number>> {
+  const result = request
+    .delete(tankAPI('debug', 'application-state'), {
+      params: options?.params ?? {},
       failOnStatusCode: true,
     })
     .then((res) => res.json())
+  if (options?.report) void result.then(reportDeleteCounts.bind(null, 'tank'))
+  return result
+}
+
+export function reportDeleteCounts(source: string, deleteCounts: Record<string, number>): void {
+  if (Object.keys(deleteCounts).length === 0) return
+  const result = []
+  let total = 0
+  for (const [key, value] of Object.entries(deleteCounts)) {
+    if (value === 0) continue
+    result.push(`${key}: ${value}`)
+    total += value
+  }
+  console.debug(`Deleted ${total} record(s) from ${source}:\n\t${result.join(', ')}`)
+}
+
+export function getFileMetadata(filename: string) {
+  return {
+    name: filename,
+    path: fileURLToPath(new URL(`./files/${filename}`, import.meta.url)),
+  }
 }