@bobbykim/manguito-cms-admin 0.6.3 → 0.6.4

package/src/components/fields/__tests__/ReferenceSelect.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import { defineComponent, h, ref } from 'vue'
 import { createPinia, setActivePinia } from 'pinia'
-import { http, HttpResponse } from 'msw'
+import { http, HttpResponse, delay } from 'msw'
 import type { ParsedField, ParsedContentType } from '@bobbykim/manguito-cms-core'
 import { server } from '../../../test-utils/server'
 import { useSchemaStore } from '../../../stores/schema'
@@ -61,6 +61,22 @@ function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
   }
 }
 
+// The admin list endpoint as chip labels use it: rows for the ids asked for
+// with filter[id], in any order, and nothing for an id that no longer exists.
+// Every request URL lands in `requests`.
+function serveLabels(names: Record<string, string>, requests: URL[] = []) {
+  server.use(
+    http.get(`${ADMIN}/api/content/content--user`, ({ request }) => {
+      const url = new URL(request.url)
+      requests.push(url)
+      const ids = url.searchParams.getAll('filter[id]')
+      const data = ids.filter((id) => names[id] !== undefined).reverse().map((id) => ({ id, title: names[id] }))
+      return HttpResponse.json({ ok: true, data, meta: { total: data.length, page: 1, per_page: 100, total_pages: 1 } })
+    })
+  )
+  return requests
+}
+
 let pinia: ReturnType<typeof createPinia>
 
 beforeEach(() => {
@@ -183,13 +199,9 @@ describe('ReferenceSelect', () => {
     const manyField = () =>
       makeField({ ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'many-to-many' } })
 
-    // Chip labels load per id on mount.
+    // Chip labels load on mount, from the list endpoint.
     async function mountWithChips(ids: string[], props: { disabled?: boolean } = {}) {
-      server.use(
-        http.get(`${ADMIN}/api/content/content--user/:id`, ({ params }) =>
-          HttpResponse.json({ ok: true, data: { id: params.id, title: NAMES[String(params.id)] } })
-        )
-      )
+      serveLabels(NAMES)
       const wrapper = mount(ReferenceSelect, {
         global: { plugins: [pinia] },
         props: { field: manyField(), modelValue: ids, ...props },
@@ -224,11 +236,7 @@ describe('ReferenceSelect', () => {
       // MUTATION: drop the focus step in moveChip. The pressed button moves
       // with its chip (or disappears at an end), focus falls to <body>, and a
       // keyboard user must tab back from the top for every step.
-      server.use(
-        http.get(`${ADMIN}/api/content/content--user/:id`, ({ params }) =>
-          HttpResponse.json({ ok: true, data: { id: params.id, title: NAMES[String(params.id)] } })
-        )
-      )
+      serveLabels(NAMES)
       // A parent with a real v-model, so a move re-renders the list.
       const Parent = defineComponent({
         setup() {
@@ -273,11 +281,7 @@ describe('ReferenceSelect', () => {
   })
 
   it('input is disabled and counter shows X / Y when max_items is reached', async () => {
-    server.use(
-      http.get(`${ADMIN}/api/content/content--user/:id`, ({ params }) =>
-        HttpResponse.json({ ok: true, data: { id: params['id'], title: `User ${params['id']}` } })
-      )
-    )
+    serveLabels({ u1: 'User u1', u2: 'User u2' })
     const field = makeField({
       validation: { required: false, max_items: 2 },
       ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'many-to-many' },
@@ -307,4 +311,130 @@ describe('ReferenceSelect', () => {
     await wrapper.findAll('[role="option"]')[0]!.trigger('click')
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['u1'])
   })
+
+  describe('chip labels (#57)', () => {
+    const manyField = (max_items?: number) =>
+      makeField({
+        validation: { required: false, ...(max_items !== undefined && { max_items }) },
+        ui_component: { component: 'typeahead-select', ref: 'content--user', rel: 'many-to-many' },
+      })
+    const removeLabels = (w: ReturnType<typeof mountComponent>) =>
+      w.findAll('button[aria-label^="Remove "]').map((b) => b.attributes('aria-label'))
+
+    it('loads every chip label in one list request, with no item reads', async () => {
+      // MUTATION: fetch each label from GET /:id, as before. Each chip then
+      // loads its whole item (every paragraph and link) in its own request:
+      // itemReads is 3 and the list is never asked.
+      let itemReads = 0
+      server.use(
+        http.get(`${ADMIN}/api/content/content--user/:id`, () => {
+          itemReads++
+          return HttpResponse.json({ ok: true, data: { id: 'x', title: 'x' } })
+        })
+      )
+      const requests = serveLabels({ u1: 'Alice', u2: 'Bob', u3: 'Cara' })
+      const w = mountComponent(manyField(), ['u1', 'u2', 'u3'])
+      await flushPromises()
+
+      expect(itemReads).toBe(0)
+      expect(requests).toHaveLength(1)
+      expect(requests[0]!.searchParams.getAll('filter[id]')).toEqual(['u1', 'u2', 'u3'])
+      expect(requests[0]!.searchParams.get('per_page')).toBe('3')
+      // The response comes back in another order; chips keep the saved one.
+      expect(removeLabels(w)).toEqual(['Remove Alice', 'Remove Bob', 'Remove Cara'])
+    })
+
+    it('labels an id the list does not return with the id itself', async () => {
+      // MUTATION: leave a missing id without a label. Its chip then reads
+      // "Remove undefined", or blank, instead of naming the deleted item's id.
+      // A deleted item's id is still a well-formed uuid; the list just has no row for it.
+      const gone = '00000000-0000-4000-8000-0000000000ff'
+      serveLabels({ u1: 'Alice' })
+      const w = mountComponent(manyField(), ['u1', gone])
+      await flushPromises()
+      expect(removeLabels(w)).toEqual(['Remove Alice', `Remove ${gone}`])
+    })
+
+    it('labels ids that arrive after mount', async () => {
+      // MUTATION: load labels only in onMounted. An id the parent sets later
+      // (a form reset, a reused instance) then shows its bare id forever.
+      const requests = serveLabels({ u1: 'Alice', u2: 'Bob' })
+      const w = mountComponent(manyField(), ['u1'])
+      await flushPromises()
+      await w.setProps({ modelValue: ['u1', 'u2'] })
+      await flushPromises()
+      expect(removeLabels(w)).toEqual(['Remove Alice', 'Remove Bob'])
+      // Only the new id is asked for the second time.
+      expect(requests.map((r) => r.searchParams.getAll('filter[id]'))).toEqual([['u1'], ['u2']])
+    })
+
+    it('asks for at most 100 ids per request', async () => {
+      // MUTATION: send every id in one request. With 101 ids, per_page=101 is
+      // over the API's limit of 100, it answers 400, and no chip gets a label.
+      const names = Object.fromEntries(Array.from({ length: 101 }, (_, i) => [`u${i}`, `User ${i}`]))
+      const requests = serveLabels(names)
+      const w = mountComponent(manyField(), Object.keys(names))
+      await flushPromises()
+      expect(requests.map((r) => r.searchParams.getAll('filter[id]').length)).toEqual([100, 1])
+      expect(requests.map((r) => r.searchParams.get('per_page'))).toEqual(['100', '1'])
+      expect(removeLabels(w)).toContain('Remove User 100')
+    })
+
+    it('a one-to-one reference loads its label from the list too', async () => {
+      // MUTATION: keep the per-id read for a single id. The one chip then
+      // loads its whole item.
+      const requests = serveLabels({ u1: 'Alice' })
+      const w = mountComponent(makeField(), 'u1')
+      await flushPromises()
+      expect(requests[0]!.searchParams.getAll('filter[id]')).toEqual(['u1'])
+      expect(w.text()).toContain('Alice')
+    })
+  })
+
+  it('keeps the newest search results when an older answer arrives later', async () => {
+    // MUTATION: drop the searchSeq check. The slow answer to "al" then lands
+    // after the answer to "alice" and replaces it.
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, async ({ request }) => {
+        const q = new URL(request.url).searchParams.get('search')
+        if (q === 'al') {
+          await delay(1000)
+          return HttpResponse.json({ ok: true, data: [{ id: 'u9', title: 'Old answer' }] })
+        }
+        return HttpResponse.json({ ok: true, data: [{ id: 'u1', title: 'Alice' }] })
+      })
+    )
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('al')
+    await wrapper.find('input').trigger('input')
+    await vi.advanceTimersByTimeAsync(300)
+    await wrapper.find('input').setValue('alice')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(wrapper.text()).toContain('Alice')
+    expect(wrapper.text()).not.toContain('Old answer')
+  })
+
+  it('searches with search=, the parameter the list endpoint reads', async () => {
+    // MUTATION: send filters[title][like]=… as before. The API's filter parser
+    // reads only filter[…] with gt/gte/lt/lte, so it ignores the parameter and
+    // every search returns the first 10 items, whatever was typed.
+    const requests: URL[] = []
+    server.use(
+      http.get(`${ADMIN}/api/content/content--user`, ({ request }) => {
+        requests.push(new URL(request.url))
+        return HttpResponse.json({ ok: true, data: [{ id: 'u1', title: 'Alice' }] })
+      })
+    )
+    const wrapper = mountComponent(makeField())
+    await wrapper.find('input').setValue('ali')
+    await wrapper.find('input').trigger('input')
+    await vi.runAllTimersAsync()
+    await flushPromises()
+    expect(requests).toHaveLength(1)
+    expect(requests[0]!.searchParams.get('search')).toBe('ali')
+    expect(requests[0]!.searchParams.get('per_page')).toBe('10')
+    expect([...requests[0]!.searchParams.keys()].filter((k) => k.startsWith('filter'))).toEqual([])
+  })
 })