|
| 1 | +// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license. |
| 2 | + |
| 3 | +/** |
| 4 | + * objectstack#29077 — a read-only flow edge inspector says why its controls are |
| 5 | + * disabled, on hover, on keyboard focus and to assistive tech, when its host |
| 6 | + * hands it the reason (`readOnlyReason`), as the node inspector does since |
| 7 | + * objectstack#28985. |
| 8 | + * |
| 9 | + * Measured on the card: on a read-only package every control of the connection |
| 10 | + * inspector (From, To, the branch pickers, Label, Condition, Default branch, |
| 11 | + * Type, Remove connection) was disabled with no `aria-describedby` and no tab |
| 12 | + * stop, and the reason Studio's Automations pillar hands every flow inspector |
| 13 | + * was dropped. Both panels now draw it through one `InspectorReadOnlyReason`. |
| 14 | + * |
| 15 | + * The reason is the host's: a host that passes none gets the panel it always |
| 16 | + * had. Studio's pillar passing it to a selected connection is pinned in |
| 17 | + * `StudioDesignSurface.automationsReadOnly-11124.test.tsx`. |
| 18 | + */ |
| 19 | + |
| 20 | +import '@testing-library/jest-dom/vitest'; |
| 21 | +import * as React from 'react'; |
| 22 | +import { describe, it, expect, vi, afterEach } from 'vitest'; |
| 23 | +import { render, screen, cleanup } from '@testing-library/react'; |
| 24 | +import userEvent from '@testing-library/user-event'; |
| 25 | + |
| 26 | +vi.mock('../previews/useObjectFields', () => ({ |
| 27 | + useObjectFields: () => ({ fields: [], loading: false, error: null }), |
| 28 | +})); |
| 29 | + |
| 30 | +import { FlowEdgeInspector } from './FlowEdgeInspector'; |
| 31 | +import { flowEdgeDisplayName } from '../previews/flow-canvas-parts'; |
| 32 | +import { t } from '../i18n'; |
| 33 | + |
| 34 | +afterEach(cleanup); |
| 35 | + |
| 36 | +const REASON = 'Read-only package: switch to or create a writable package to edit.'; |
| 37 | + |
| 38 | +const NODES = [ |
| 39 | + { id: 'start', type: 'start', label: 'Start' }, |
| 40 | + { id: 'review', type: 'approval', label: 'Review' }, |
| 41 | + { id: 'end', type: 'end', label: 'End' }, |
| 42 | +]; |
| 43 | +// An approval's out-edge, so the panel also draws its "Approval branch" picker. |
| 44 | +const DRAFT = { |
| 45 | + name: 'f', |
| 46 | + label: 'F', |
| 47 | + nodes: NODES, |
| 48 | + edges: [ |
| 49 | + { id: 'e1', source: 'start', target: 'review' }, |
| 50 | + { id: 'e2', source: 'review', target: 'end', label: 'approve' }, |
| 51 | + ], |
| 52 | +}; |
| 53 | + |
| 54 | +function mount({ readOnly, readOnlyReason }: { readOnly: boolean; readOnlyReason?: string }) { |
| 55 | + return render( |
| 56 | + <FlowEdgeInspector |
| 57 | + type="flow" |
| 58 | + name="f" |
| 59 | + draft={DRAFT} |
| 60 | + selection={{ kind: 'edge', id: 'e2' }} |
| 61 | + onPatch={() => {}} |
| 62 | + onClearSelection={() => {}} |
| 63 | + readOnly={readOnly} |
| 64 | + readOnlyReason={readOnlyReason} |
| 65 | + locale="en-US" |
| 66 | + />, |
| 67 | + ); |
| 68 | +} |
| 69 | + |
| 70 | +const removeButton = () => screen.getByRole('button', { name: t('engine.inspector.flowEdge.remove', 'en-US') }); |
| 71 | + |
| 72 | +/** The panel's form controls, Remove connection included — the ones the reason is about. */ |
| 73 | +const controls = (root: HTMLElement) => [ |
| 74 | + ...root.querySelectorAll<HTMLElement>('input, select, textarea, button[role="combobox"]'), |
| 75 | + removeButton(), |
| 76 | +]; |
| 77 | + |
| 78 | +describe('Flow edge inspector, read-only with a reason from its host (objectstack#29077)', () => { |
| 79 | + it('the panel is a tab stop described by the reason, named by the connection, and holds the disabled controls', () => { |
| 80 | + const { container } = mount({ readOnly: true, readOnlyReason: REASON }); |
| 81 | + const body = container.querySelector('[data-disabled-reason]') as HTMLElement; |
| 82 | + expect(body).not.toBeNull(); |
| 83 | + expect(body).toHaveAttribute('tabindex', '0'); |
| 84 | + expect(body).toHaveAccessibleDescription(REASON); |
| 85 | + // The same name the panel's title shows: each end by its node's name. |
| 86 | + expect(body).toHaveAccessibleName(flowEdgeDisplayName({ source: 'review', target: 'end' }, NODES, 'en-US')); |
| 87 | + expect(body).not.toHaveAccessibleName(/review|end\b/); |
| 88 | + |
| 89 | + const all = controls(body); |
| 90 | + // From, To, Approval branch, Label, Condition, Default branch, Type and |
| 91 | + // Remove connection; at least six, so a vacuous pass is not one. |
| 92 | + expect(all.length).toBeGreaterThanOrEqual(6); |
| 93 | + for (const el of all) { |
| 94 | + expect(body).toContainElement(el); |
| 95 | + expect(el).toBeDisabled(); |
| 96 | + } |
| 97 | + }); |
| 98 | + |
| 99 | + it('hovering the disabled "Remove connection" opens a tooltip with the reason', async () => { |
| 100 | + const user = userEvent.setup(); |
| 101 | + mount({ readOnly: true, readOnlyReason: REASON }); |
| 102 | + expect(removeButton()).toBeDisabled(); |
| 103 | + await user.hover(removeButton()); |
| 104 | + expect(await screen.findByRole('tooltip')).toHaveTextContent(REASON); |
| 105 | + }); |
| 106 | + |
| 107 | + it('a keyboard user reaches the reason: Tab lands on the described panel, which opens the tooltip', async () => { |
| 108 | + const user = userEvent.setup(); |
| 109 | + const { container } = mount({ readOnly: true, readOnlyReason: REASON }); |
| 110 | + const body = container.querySelector('[data-disabled-reason]') as HTMLElement; |
| 111 | + await user.tab(); |
| 112 | + expect(body).toHaveFocus(); |
| 113 | + expect(await screen.findByRole('tooltip')).toHaveTextContent(REASON); |
| 114 | + }); |
| 115 | +}); |
| 116 | + |
| 117 | +describe('Flow edge inspector — the controls (objectstack#29077)', () => { |
| 118 | + it('a host that passes no reason gets the panel it always had: no tab stop, no description', () => { |
| 119 | + const { container } = mount({ readOnly: true }); |
| 120 | + expect(container.querySelector('[data-disabled-reason]')).toBeNull(); |
| 121 | + expect(container.querySelector('[tabindex="0"]')).toBeNull(); |
| 122 | + for (const el of controls(container)) expect(el).toBeDisabled(); |
| 123 | + }); |
| 124 | + |
| 125 | + it('a blank reason counts as none', () => { |
| 126 | + const { container } = mount({ readOnly: true, readOnlyReason: ' ' }); |
| 127 | + expect(container.querySelector('[data-disabled-reason]')).toBeNull(); |
| 128 | + }); |
| 129 | + |
| 130 | + it('a writable inspector ignores a reason: the controls are live and nothing is described', () => { |
| 131 | + const { container } = mount({ readOnly: false, readOnlyReason: REASON }); |
| 132 | + expect(container.querySelector('[data-disabled-reason]')).toBeNull(); |
| 133 | + expect(screen.queryByText(REASON)).toBeNull(); |
| 134 | + const all = controls(container); |
| 135 | + expect(all.length).toBeGreaterThanOrEqual(6); |
| 136 | + for (const el of all) expect(el).toBeEnabled(); |
| 137 | + }); |
| 138 | +}); |
![objectstack-fleet[bot]](https://avatars.githubusercontent.com/u/254823548?v=4&size=40){kind=avatar}
0 commit comments