Agentic Dropdown: extend contract tests and non-input native coverage

.changeset/metal-plums-sniff.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+

packages/agentic/components/src/components/dropdown/dropdown.stories.tsx

@@ -120,6 +120,18 @@ type Story = WdioStory<StoryObj<SceneProps>>;
 export const Default: Story = {
   tags: ['desktop-focus'],
   wdio: {
+    'DRP-011 exposes a named, empty, collapsed native combobox before input': async ({ browser, expect, platform }) => {
+      const trigger = await browser.$('~dropdown-trigger');
+      expect(await trigger.getProperty('role')).toBe('combobox');
+      expect(await trigger.getProperty('name')).toBe('Fruit');
+      expect(await trigger.getProperty('expanded')).toBe(false);
+      const renderer = 'furn:renderer' in browser.capabilities ? browser.capabilities['furn:renderer'] : undefined;
+      if (platform === 'macos') {
+        expect(['fabric', 'paper']).toContain(renderer);
+      }
+      // macOS Fabric converts empty accessibilityValue.text to nil; Paper and UIA retain the empty string.
+      expect(await trigger.getProperty('value')).toBe(platform === 'macos' && renderer === 'fabric' ? null : '');
+    },
     'opens from the keyboard on the first option and commits with Enter': async (context) => {
       const { requireDesktopFocus, expectNativeState } = await import('../../common/desktopFocus.wdio.ts');
       if (!requireDesktopFocus(context)) return;
@@ -338,7 +350,12 @@ function GalleryScene() {
           </Dropdown>
         )),
       )}
-      <Dropdown accessibilityLabel="Selected" defaultSelectedOptions={['banana']} style={styles.field}>
+      <Dropdown
+        accessibilityLabel="Selected"
+        defaultSelectedOptions={['banana']}
+        trigger={{ testID: 'dropdown-selected-trigger' }}
+        style={styles.field}
+      >
         {options}
       </Dropdown>
       <Dropdown accessibilityLabel="Error" error style={styles.field}>
@@ -353,9 +370,23 @@ function GalleryScene() {
 
 export const Appearance: Story = {
   render: () => <GalleryScene />,
+  wdio: {
+    'DRP-011 exposes a nonempty selected native value without input': async ({ browser, expect }) => {
+      const trigger = await browser.$('~dropdown-selected-trigger');
+      expect(await trigger.getProperty('role')).toBe('combobox');
+      expect(await trigger.getProperty('name')).toBe('Selected');
+      expect(await trigger.getProperty('expanded')).toBe(false);
+      expect(await trigger.getProperty('value')).toBe('Banana');
+    },
+  },
   parameters: {
     controls: { disable: true },
-    docs: { description: { story: "Input's outline and underline chrome at each size, with selected, error, and disabled states." } },
+    docs: {
+      description: {
+        story:
+          "Input's outline and underline chrome at each size, with selected, error, and disabled states. Native selected values remain the option label on every renderer, including macOS Fabric, which omits empty AXValue.",
+      },
+    },
   },
 };
 

packages/agentic/components/src/components/dropdown/dropdown.test.tsx

@@ -68,6 +68,100 @@ function Scene(props: Partial<DropdownProps>) {
 describe('Dropdown', () => {
   beforeEach(() => dispatchCommand.mockClear());
 
+  it.each(
+    (['controlled', 'uncontrolled'] as const).flatMap((owner) =>
+      [
+        { scenario: 'select replaces', actionName: 'Select', initial: ['apple'], target: 'cherry', next: ['cherry'], changed: true },
+        { scenario: 'select unchanged', actionName: 'Select', initial: ['apple'], target: 'apple', next: ['apple'], changed: false },
+        {
+          scenario: 'add appends',
+          actionName: 'AddToSelection',
+          initial: ['apple'],
+          target: 'cherry',
+          next: ['apple', 'cherry'],
+          changed: true,
+        },
+        {
+          scenario: 'add existing',
+          actionName: 'AddToSelection',
+          initial: ['apple', 'cherry'],
+          target: 'apple',
+          next: ['apple', 'cherry'],
+          changed: false,
+        },
+        { scenario: 'remove selected', actionName: 'RemoveFromSelection', initial: ['apple'], target: 'apple', next: [], changed: true },
+        {
+          scenario: 'remove absent',
+          actionName: 'RemoveFromSelection',
+          initial: ['apple'],
+          target: 'cherry',
+          next: ['apple'],
+          changed: false,
+        },
+        { scenario: 'custom forwarded', actionName: 'custom', initial: ['apple'], target: 'cherry', next: ['apple'], changed: false },
+      ].map((scenario) => ({ owner, ...scenario })),
+    ),
+  )('DRP-005 DRP-011 handles $scenario once with $owner multiselection', async ({ owner, actionName, initial, target, next, changed }) => {
+    const calls: string[] = [];
+    const onSelectedOptionsChange = jest.fn(() => calls.push('selection'));
+    const onAccessibilityAction = jest.fn(() => calls.push('action'));
+    const onOpenChange = jest.fn();
+    const onPress = jest.fn();
+    const scene = (selection: string[]) => (
+      <Dropdown
+        accessibilityLabel="Fruit"
+        defaultOpen
+        multiselect
+        selectedOptions={owner === 'controlled' ? selection : undefined}
+        defaultSelectedOptions={initial}
+        onSelectedOptionsChange={onSelectedOptionsChange}
+        onOpenChange={onOpenChange}
+      >
+        {['apple', 'cherry'].map((value) => (
+          <ListboxItem
+            key={value}
+            value={value}
+            content={value === 'apple' ? 'Apple' : 'Cherry'}
+            accessibilityActions={[{ name: 'custom', label: 'Custom action' }]}
+            onAccessibilityAction={onAccessibilityAction}
+            onPress={onPress}
+          />
+        ))}
+      </Dropdown>
+    );
+    const component = await render(scene(initial));
+    const event = action(actionName);
+    await fireEvent(component.getByRole('listitem', { name: target === 'apple' ? 'Apple' : 'Cherry' }), 'accessibilityAction', event);
+
+    expect(onSelectedOptionsChange.mock.calls).toEqual(changed ? [[next, { value: target }]] : []);
+    expect(onAccessibilityAction.mock.calls).toEqual([[event]]);
+    expect(calls).toEqual(changed ? ['selection', 'action'] : ['action']);
+    expect(onPress).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(component.getByRole('combobox', { name: 'Fruit' }).props.accessibilityState.expanded).toBe(true);
+    const displayed = owner === 'controlled' ? initial : next;
+    expect(component.getAllByRole('listitem').map((option) => option.props.accessibilityState.selected)).toEqual([
+      displayed.includes('apple'),
+      displayed.includes('cherry'),
+    ]);
+
+    await component.rerender(scene(next));
+    const trigger = component.getByRole('combobox', { name: 'Fruit' });
+    expect(trigger.props.accessibilityValue).toEqual({
+      text: ['apple', 'cherry']
+        .filter((value) => next.includes(value))
+        .map((value) => (value === 'apple' ? 'Apple' : 'Cherry'))
+        .join(', '),
+    });
+    expect(component.getAllByRole('listitem').map((option) => option.props.accessibilityState.selected)).toEqual([
+      next.includes('apple'),
+      next.includes('cherry'),
+    ]);
+    expect(onSelectedOptionsChange).toHaveBeenCalledTimes(changed ? 1 : 0);
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
   it('renders an inaccessible root around a collapsed combobox trigger showing the placeholder', async () => {
     const ref = React.createRef<View>();
     await render(<Scene ref={ref} />);