test(admin): import the reorder modules by path

- the reorder route renders ReorderView with a ReorderBranch per level
- ReorderBranch renders nodes from the REORDER_PAGE context and moves
  through it

admin/tests/views/ReorderView.test.ts

@@ -1,7 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { enableAutoUnmount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { ref } from 'vue'
+import { enableAutoUnmount, flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import ReorderBranch from '../../src/components/reorder/ReorderBranch.vue'
+import { REORDER_PAGE, type ReorderPage } from '../../src/components/reorder/context'
 import { applyDrop, applyMove, buildTree, canDrop, canMove, flatten, type TreeNode } from '../../src/components/reorder/tree'
 import { setSettings } from '../../src/state/useSettings'
+import ReorderView from '../../src/views/ReorderView.vue'
 import { toasts } from '../../src/state/useToasts'
 import { clone, companionsFormSchemaFixture, listFixture, listSchemaFixture } from '../fixtures/typed'
 import { API, keydown, mountApp, queryOf, requestsTo, resetState, wait, type Reply, type Route } from '../helpers'
@@ -372,3 +376,42 @@ describe('reorder tree rules', () => {
     ])
   })
 })
+
+// The reorder modules imported by path (T-10-25): the page the route renders,
+// its tree level and the injection key they share.
+describe('reorder modules', () => {
+  it('the reorder route renders ReorderView with a ReorderBranch per tree level', async () => {
+    const { wrapper } = await mountApp('/acme/companions/links/reorder', { [`GET ${REORDER}`]: tree() })
+    expect(wrapper.findComponent(ReorderView).exists()).toBe(true)
+    // Top level and Blog's children.
+    expect(wrapper.findAllComponents(ReorderBranch).length).toBe(2)
+  })
+
+  it('ReorderBranch renders each node from the REORDER_PAGE context and moves through it', async () => {
+    const move = vi.fn()
+    const page: ReorderPage = {
+      dragging: ref(null),
+      dropTarget: ref(null),
+      blocked: ref(null),
+      nameOf: (node: TreeNode) => node.name,
+      canMove: () => true,
+      move,
+      onHandleKeydown: vi.fn(),
+      onDragStart: vi.fn(),
+      onDragOver: vi.fn(),
+      onDragLeave: vi.fn(),
+      onDrop: vi.fn(),
+      onDragEnd: vi.fn(),
+    }
+    const nodes: TreeNode[] = [
+      { id: 7, name: 'First', children: [] },
+      { id: 8, name: 'Second', children: [{ id: 9, name: 'Child', children: [] }] },
+    ]
+    const wrapper = mount(ReorderBranch, { props: { nodes, depth: 0 }, global: { provide: { [REORDER_PAGE as symbol]: page } } })
+    const rows = wrapper.findAll('[data-reorder-node]')
+    expect(rows.map((row) => row.attributes('data-reorder-node'))).toEqual(['7', '8', '9'])
+    expect(rows.map((row) => row.find('span.min-w-0').text())).toEqual(['First', 'Second', 'Child'])
+    await wrapper.find('[data-reorder-node="8"] [data-action="reorder-down"]').trigger('click')
+    expect(move).toHaveBeenCalledWith(8, 'down')
+  })
+})