|
| 1 | +/** |
| 2 | + * ObjectUI |
| 3 | + * Copyright (c) 2024-present ObjectStack Inc. |
| 4 | + * |
| 5 | + * This source code is licensed under the MIT license found in the |
| 6 | + * LICENSE file in the root directory of this source tree. |
| 7 | + */ |
| 8 | + |
| 9 | +/** |
| 10 | + * objectstack#27520 row 7, the sort half: `SortBuilder` names a date's |
| 11 | + * direction as time, and keeps one row per field. |
| 12 | + * |
| 13 | + * Observed in the RC walkthrough on the Tasks list toolbar: the direction of a |
| 14 | + * datetime sort read "A → Z", and the same field could be added to the sort |
| 15 | + * twice. The second key on a field the first already orders by changes |
| 16 | + * nothing, so a duplicate row is a control that does nothing. |
| 17 | + * |
| 18 | + * Every case reads the real `SortBuilder` and its real Radix `Select`, and |
| 19 | + * keeps its control beside it: a text field still reads "A → Z", and a field |
| 20 | + * no other row holds is still an ordinary option. |
| 21 | + */ |
| 22 | +import { describe, it, expect, vi, afterEach } from 'vitest'; |
| 23 | +import React from 'react'; |
| 24 | +import { cleanup, render, screen, fireEvent, within } from '@testing-library/react'; |
| 25 | +import '@testing-library/jest-dom'; |
| 26 | +import { SortBuilder, type SortBuilderProps, type SortItem } from '../custom/sort-builder'; |
| 27 | + |
| 28 | +type Fields = NonNullable<SortBuilderProps['fields']>; |
| 29 | +type Row = Pick<SortItem, 'field' | 'order'>; |
| 30 | + |
| 31 | +const FIELDS: Fields = [ |
| 32 | + { value: 'title', label: 'Title', type: 'text' }, |
| 33 | + { value: 'due_date', label: 'Due Date', type: 'date' }, |
| 34 | + { value: 'created_at', label: 'Created At', type: 'datetime' }, |
| 35 | +]; |
| 36 | + |
| 37 | +/** Holds the value the way a host does, so a change is rendered back. */ |
| 38 | +function Harness({ fields, initial, onChange }: { fields: Fields; initial: Row[]; onChange: (rows: Row[]) => void }) { |
| 39 | + const [value, setValue] = React.useState<SortItem[]>(() => |
| 40 | + initial.map((row, i) => ({ id: `r${i}`, ...row })), |
| 41 | + ); |
| 42 | + return ( |
| 43 | + <SortBuilder |
| 44 | + fields={fields} |
| 45 | + value={value} |
| 46 | + onChange={(next) => { |
| 47 | + onChange(next.map(({ field, order }) => ({ field, order }))); |
| 48 | + setValue(next); |
| 49 | + }} |
| 50 | + /> |
| 51 | + ); |
| 52 | +} |
| 53 | + |
| 54 | +function mount(initial: Row[], fields: Fields = FIELDS) { |
| 55 | + const onChange = vi.fn(); |
| 56 | + render(<Harness fields={fields} initial={initial} onChange={onChange} />); |
| 57 | + return onChange; |
| 58 | +} |
| 59 | + |
| 60 | +/** Each row is `[field select, direction select]`. */ |
| 61 | +const fieldTriggers = () => screen.getAllByRole('combobox').filter((_, i) => i % 2 === 0); |
| 62 | +const directionTriggers = () => screen.getAllByRole('combobox').filter((_, i) => i % 2 === 1); |
| 63 | + |
| 64 | +/** Open a dropdown and return what it offers, closing it again. */ |
| 65 | +function optionsOf(trigger: HTMLElement): Array<{ label: string; disabled: boolean }> { |
| 66 | + fireEvent.click(trigger); |
| 67 | + const listbox = screen.getByRole('listbox'); |
| 68 | + const options = within(listbox).getAllByRole('option').map((o) => ({ |
| 69 | + label: o.textContent?.trim() ?? '', |
| 70 | + disabled: o.getAttribute('aria-disabled') === 'true', |
| 71 | + })); |
| 72 | + fireEvent.keyDown(listbox, { key: 'Escape' }); |
| 73 | + return options; |
| 74 | +} |
| 75 | + |
| 76 | +const asc = (field: string): Row => ({ field, order: 'asc' }); |
| 77 | + |
| 78 | +afterEach(() => { |
| 79 | + cleanup(); |
| 80 | +}); |
| 81 | + |
| 82 | +describe('SortBuilder names a date sort as time (objectstack#27520 row 7)', () => { |
| 83 | + it('a date row reads "Oldest → Newest" / "Newest → Oldest"; a datetime row too', () => { |
| 84 | + mount([asc('due_date'), { field: 'created_at', order: 'desc' }]); |
| 85 | + const [dateDir, datetimeDir] = directionTriggers(); |
| 86 | + expect(dateDir).toHaveTextContent('Oldest → Newest'); |
| 87 | + expect(datetimeDir).toHaveTextContent('Newest → Oldest'); |
| 88 | + expect(optionsOf(dateDir).map((o) => o.label)).toEqual(['Oldest → Newest', 'Newest → Oldest']); |
| 89 | + }); |
| 90 | + |
| 91 | + it('CONTROL: a text row keeps "A → Z" / "Z → A"', () => { |
| 92 | + mount([asc('title')]); |
| 93 | + expect(directionTriggers()[0]).toHaveTextContent('A → Z'); |
| 94 | + expect(optionsOf(directionTriggers()[0]).map((o) => o.label)).toEqual(['A → Z', 'Z → A']); |
| 95 | + }); |
| 96 | + |
| 97 | + it('the label follows the row when its field changes from text to date', () => { |
| 98 | + mount([asc('title')]); |
| 99 | + fireEvent.click(fieldTriggers()[0]); |
| 100 | + fireEvent.click(within(screen.getByRole('listbox')).getByRole('option', { name: 'Due Date' })); |
| 101 | + expect(directionTriggers()[0]).toHaveTextContent('Oldest → Newest'); |
| 102 | + }); |
| 103 | + |
| 104 | + it('CONTROL: a field entry with no type keeps "A → Z"', () => { |
| 105 | + mount([asc('due_date')], FIELDS.map(({ value, label }) => ({ value, label }))); |
| 106 | + expect(directionTriggers()[0]).toHaveTextContent('A → Z'); |
| 107 | + }); |
| 108 | +}); |
| 109 | + |
| 110 | +describe('SortBuilder keeps one row per field (objectstack#27520 row 7)', () => { |
| 111 | + it('a field another row sorts by is unavailable in this row; the row\'s own field and the free ones are not', () => { |
| 112 | + mount([asc('title'), asc('due_date')]); |
| 113 | + expect(optionsOf(fieldTriggers()[1])).toEqual([ |
| 114 | + { label: 'Title', disabled: true }, |
| 115 | + { label: 'Due Date', disabled: false }, |
| 116 | + { label: 'Created At', disabled: false }, |
| 117 | + ]); |
| 118 | + // CONTROL: the first row sees the second row's field the same way. |
| 119 | + expect(optionsOf(fieldTriggers()[0])).toEqual([ |
| 120 | + { label: 'Title', disabled: false }, |
| 121 | + { label: 'Due Date', disabled: true }, |
| 122 | + { label: 'Created At', disabled: false }, |
| 123 | + ]); |
| 124 | + }); |
| 125 | + |
| 126 | + it('"Add sort" seeds the first field no row holds, not the first field', () => { |
| 127 | + const onChange = mount([asc('title')]); |
| 128 | + fireEvent.click(screen.getByRole('button', { name: /add sort/i })); |
| 129 | + expect(onChange).toHaveBeenLastCalledWith([asc('title'), asc('due_date')]); |
| 130 | + }); |
| 131 | + |
| 132 | + it('"Add sort" is disabled once every field has a row', () => { |
| 133 | + mount([asc('title'), asc('due_date'), asc('created_at')]); |
| 134 | + expect(screen.getByRole('button', { name: /add sort/i })).toBeDisabled(); |
| 135 | + }); |
| 136 | + |
| 137 | + it('CONTROL: with a field still free, "Add sort" stays enabled', () => { |
| 138 | + mount([asc('title'), asc('due_date')]); |
| 139 | + expect(screen.getByRole('button', { name: /add sort/i })).toBeEnabled(); |
| 140 | + }); |
| 141 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments