Add basic components

Author: jakeboone02

packages/solid-querybuilder/scripts/ssr-smoke-entry.jsx

@@ -6,10 +6,23 @@
  * call. The library is imported by BARE SPECIFIER on purpose: that exercises the `solid` export
  * condition the same way a real SSR consumer does.
  *
+ * `QueryBuilder` (not a placeholder) since step 4: it uses `createContext`, `createStore`, and
+ * `createEffect`, so it is also the thing that would break first if the two module graphs ever
+ * stopped sharing one Solid instance.
+ *
  * Plain `.jsx`, not `.tsx`, so it stays out of the typecheck project — `bun run check` must not
  * depend on `dist/` existing.
  */
 import { renderToString } from '@solidjs/web';
-import { Placeholder } from 'solid-querybuilder';
+import { QueryBuilder } from 'solid-querybuilder';
+
+const fields = [{ name: 'f1', label: 'F1' }];
+
+const query = {
+  id: 'root',
+  combinator: 'and',
+  rules: [{ id: 'r1', field: 'f1', operator: '=', value: 'v1' }],
+};
 
-export const render = () => renderToString(() => <Placeholder label="ssr-smoke" />);
+export const render = () =>
+  renderToString(() => <QueryBuilder fields={fields} query={query} onQueryChange={() => {}} />);

packages/solid-querybuilder/scripts/ssr-smoke.ts

@@ -13,7 +13,9 @@
  *    `renderToString` from `@solidjs/web` (synchronous in Solid 2), and assert the full
  *    markup.
  *
- * At step 1 the component under test is `Placeholder`; step 4 repoints this at `QueryBuilder`.
+ * The component under test is `QueryBuilder` (step 4 repointed this from the step-1
+ * `Placeholder`) — it exercises `createContext`, `createStore`, and `createEffect`, which is
+ * what makes the single-Solid-instance requirement below load-bearing rather than theoretical.
  * Step 8 adds a SolidStart SSR gate but keeps this script, because it is the only thing that
  * checks the export condition in isolation.
  */
@@ -153,11 +155,44 @@ const html: string = mod.render();
 
 await vite.close();
 
-const expectedHtml = '<div data-testid="solid-querybuilder-placeholder">ssr-smoke</div>';
+// The markup assertion. Not a full-string comparison: the rendered tree is ~2KB and dominated
+// by the default operator list, which would make this a snapshot in all but name. Instead it
+// asserts every structural claim the SSR path is here to make — that the wrapper, the group, the
+// rule, and each of the rule's controls all rendered, with the *value* of the controlled query
+// present — plus the exact number of `data-testid` elements, so a dropped or added control turns
+// this red.
+const requiredFragments = [
+  '<div role="form" class="queryBuilder" data-dnd="disabled" data-inlinecombinators="disabled">',
+  'data-testid="rule-group"',
+  'class="ruleGroup-header"',
+  'data-testid="combinators"',
+  'data-testid="add-rule"',
+  'data-testid="add-group"',
+  'class="ruleGroup-body"',
+  'data-testid="rule"',
+  'data-path="[0]"',
+  'data-testid="fields"',
+  'data-testid="operators"',
+  'data-testid="value-editor"',
+  'value="v1"',
+  'data-testid="remove-rule"',
+];
+
+const expectedTestIdCount = 9;
+
+for (const fragment of requiredFragments) {
+  if (!html.includes(fragment)) {
+    fail(`SSR markup is missing ${fragment}.\n  actual: ${html}`);
+  }
+}
 
-if (html !== expectedHtml) {
-  fail(`SSR markup mismatch.\n  expected: ${expectedHtml}\n  actual:   ${html}`);
+const testIdCount = html.match(/data-testid=/g)?.length ?? 0;
+if (testIdCount !== expectedTestIdCount) {
+  fail(
+    `SSR markup has ${testIdCount} \`data-testid\` elements, expected ${expectedTestIdCount}.` +
+      `\n  actual: ${html}`
+  );
 }
 
-console.log(`SSR render: ${html} (ok)`);
+console.log(`SSR render: ${testIdCount} controls, all structural fragments present (ok)`);
 console.log('test:ssr passed.');

packages/solid-querybuilder/src/components/ActionElement.test.tsx

@@ -0,0 +1,100 @@
+import { render } from '@solidjs/testing-library';
+import { createSignal, flush } from 'solid-js';
+import { describe, expect, it, vi } from 'vitest';
+import type { ActionProps } from '../types/props.js';
+import { ActionElement } from './ActionElement.jsx';
+
+const baseProps = (overrides: Partial<ActionProps> = {}): ActionProps =>
+  ({
+    label: 'Add rule',
+    title: 'Add rule title',
+    className: 'custom',
+    testID: 'add-rule',
+    path: [],
+    level: 0,
+    handleOnClick: () => {},
+    ruleOrGroup: { combinator: 'and', rules: [] },
+    schema: {},
+    ...overrides,
+  }) as ActionProps;
+
+describe('ActionElement', () => {
+  it('renders a button carrying the label, title, class, and test ID', () => {
+    const { getByTestId } = render(() => <ActionElement {...baseProps()} />);
+    const button = getByTestId('add-rule');
+    expect(button.tagName).toBe('BUTTON');
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button).toHaveAttribute('title', 'Add rule title');
+    expect(button).toHaveClass('custom');
+    expect(button.textContent).toBe('Add rule');
+    expect(button).not.toBeDisabled();
+  });
+
+  it('calls handleOnClick with the event', () => {
+    const handleOnClick = vi.fn();
+    const { getByTestId } = render(() => <ActionElement {...baseProps({ handleOnClick })} />);
+    getByTestId('add-rule').click();
+    expect(handleOnClick).toHaveBeenCalledTimes(1);
+    expect(handleOnClick.mock.calls[0][0]).toBeInstanceOf(MouseEvent);
+  });
+
+  it('is disabled when `disabled` is set and there is no disabled translation', () => {
+    const { getByTestId } = render(() => <ActionElement {...baseProps({ disabled: true })} />);
+    expect(getByTestId('add-rule')).toBeDisabled();
+  });
+
+  it('stays enabled and swaps label/title when a disabled translation is supplied', () => {
+    const { getByTestId } = render(() => (
+      <ActionElement
+        {...baseProps({
+          disabled: true,
+          disabledTranslation: { label: 'Unlock', title: 'Unlock title' },
+        })}
+      />
+    ));
+    const button = getByTestId('add-rule');
+    expect(button).not.toBeDisabled();
+    expect(button.textContent).toBe('Unlock');
+    expect(button).toHaveAttribute('title', 'Unlock title');
+  });
+
+  it('ignores the disabled translation while enabled', () => {
+    const { getByTestId } = render(() => (
+      <ActionElement
+        {...baseProps({ disabledTranslation: { label: 'Unlock', title: 'Unlock title' } })}
+      />
+    ));
+    expect(getByTestId('add-rule').textContent).toBe('Add rule');
+  });
+
+  /**
+   * The props-reactivity gate for this component. A destructure at the top of `ActionElement`
+   * severs every one of these and fails no type check.
+   */
+  it('updates when its props change', () => {
+    const [label, setLabel] = createSignal('one');
+    const [disabled, setDisabled] = createSignal(false);
+    const { getByTestId } = render(() => (
+      <ActionElement
+        {...baseProps({
+          get label() {
+            return label();
+          },
+          get disabled() {
+            return disabled();
+          },
+        })}
+      />
+    ));
+    const button = getByTestId('add-rule');
+    expect(button.textContent).toBe('one');
+    expect(button).not.toBeDisabled();
+
+    setLabel('two');
+    setDisabled(true);
+    flush();
+
+    expect(button.textContent).toBe('two');
+    expect(button).toBeDisabled();
+  });
+});

packages/solid-querybuilder/src/components/ActionElement.tsx

@@ -0,0 +1,26 @@
+import type { JSX } from '@solidjs/web';
+import { Label } from '../internal/Label.jsx';
+import type { ActionProps } from '../types/props.js';
+
+/**
+ * Default `<button>` component for every action control.
+ *
+ * Port of React Query Builder's `ActionElement`. When the control is disabled *and* a
+ * `disabledTranslation` is supplied, the button stays enabled (so the tooltip is reachable) and
+ * renders that translation's label and title instead of its own.
+ */
+export const ActionElement = (props: ActionProps): JSX.Element => {
+  const useDisabledTranslation = () => !!props.disabledTranslation && !!props.disabled;
+
+  return (
+    <button
+      type="button"
+      data-testid={props.testID}
+      disabled={props.disabled && !props.disabledTranslation}
+      class={props.className}
+      title={useDisabledTranslation() ? props.disabledTranslation?.title : props.title}
+      onClick={e => props.handleOnClick(e)}>
+      <Label label={useDisabledTranslation() ? props.disabledTranslation?.label : props.label} />
+    </button>
+  );
+};