diff --git a/admin/tests/views/ReorderView.test.ts b/admin/tests/views/ReorderView.test.ts index 9474794..2be8ae6 100644 --- a/admin/tests/views/ReorderView.test.ts +++ b/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') + }) +})