Chart builder: field-first shelf + value-or-field channels

src/app/components/ChartBuilderModal.test.tsx

@@ -296,4 +296,74 @@ describe('ChartBuilderModal', () => {
     expect(refLink()).toBeDefined();
     expect(refLink()!.getAttribute('href')).toContain('vega.github.io');
   });
+
+  test('clicking a field in the shelf assigns it to a channel as a pill (field-first, 2B)', async () => {
+    const ds = createDataset({
+      name: 'Shop',
+      data: [{ region: 'E', sales: 5 }],
+      format: 'json',
+      source: 'inline',
+      now: T,
+    });
+    useDatasetStore.getState().add(ds);
+    const id = useDatasetStore.getState().datasets[0].id;
+    const store = useChartBuilderStore.getState();
+    store.init(id);
+    // Clear the smart-default axes so the click lands on the first empty channel (X).
+    store.setChannelColumn('x', null);
+    store.setChannelColumn('y', null);
+
+    await act(async () => {
+      root.render(<ChartBuilderModal />);
+      await Promise.resolve();
+    });
+
+    const fieldButton = Array.from(container.querySelectorAll('button')).find((b) =>
+      b.textContent?.includes('region'),
+    );
+    expect(fieldButton).toBeDefined();
+
+    await act(async () => {
+      fieldButton!.click();
+      await Promise.resolve();
+    });
+
+    expect(useChartBuilderStore.getState().config.encodings.x).toEqual({
+      field: 'region',
+      type: 'nominal',
+    });
+  });
+
+  test('Colour can be switched to a constant value (the Property model, 2A/2B)', async () => {
+    const ds = createDataset({
+      name: 'Shop',
+      data: [{ region: 'E', sales: 5 }],
+      format: 'json',
+      source: 'inline',
+      now: T,
+    });
+    useDatasetStore.getState().add(ds);
+    const id = useDatasetStore.getState().datasets[0].id;
+    useChartBuilderStore.getState().init(id);
+
+    await act(async () => {
+      root.render(<ChartBuilderModal />);
+      await Promise.resolve();
+    });
+
+    // The empty Colour slot offers an "or constant" affordance (Colour is first in Marks).
+    const constButton = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'or constant',
+    );
+    expect(constButton).toBeDefined();
+
+    await act(async () => {
+      constButton!.click();
+      await Promise.resolve();
+    });
+
+    expect(useChartBuilderStore.getState().config.encodings.color?.value).toBeDefined();
+    // A colour picker renders for the constant.
+    expect(container.querySelector('input[type="color"]')).not.toBeNull();
+  });
 });