snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/scripts/ui/__tests__/render-ui-reference.spec.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest';
+
+import { renderComponentReference } from '../render-component-reference';
+import { renderTokenReference } from '../render-ui-reference';
+
+describe('renderComponentReference', () => {
+  it('escapes attributes and prose while keeping markdown and code intact', () => {
+    const reference = renderComponentReference({
+      name: 'Example',
+      entryPoint: 'twenty-ui/primitives/input',
+      slug: 'input/example',
+      props: [
+        {
+          name: 'render',
+          type: 'Ref<custom> | "quoted"',
+          required: true,
+          defaultValue: null,
+          description:
+            'Render `<custom>` with {value} & more.\n\n- `unmount`: Manually unmounts.\n\n```tsx\n<Example render={<span />} />\n```',
+        },
+      ],
+    });
+
+    expect(reference).toBe(
+      [
+        '<ParamField body="render" type="Ref&lt;custom&gt; | &quot;quoted&quot;" required>',
+        '  Render `<custom>` with &#123;value&#125; &amp; more.',
+        '',
+        '  - `unmount`: Manually unmounts.',
+        '',
+        '  ```tsx',
+        '  <Example render={<span />} />',
+        '  ```',
+        '</ParamField>',
+        '',
+      ].join('\n'),
+    );
+  });
+});
+
+describe('compound component references', () => {
+  it('includes convenience props before compound parts', () => {
+    const reference = renderComponentReference({
+      name: 'Tooltip',
+      entryPoint: 'twenty-ui/primitives/surfaces',
+      slug: 'surfaces/tooltip',
+      props: [
+        {
+          name: 'content',
+          type: 'ReactNode',
+          required: true,
+          defaultValue: null,
+          description: 'Tooltip content.',
+        },
+      ],
+      parts: [
+        {
+          name: 'Popup',
+          props: [
+            {
+              name: 'arrow',
+              type: 'boolean',
+              required: false,
+              defaultValue: 'false',
+              description: 'Show an arrow.',
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(reference).toContain('<ParamField body="content"');
+    expect(reference).toContain('### Tooltip.Popup');
+    expect(reference).toContain('<ParamField body="Popup.arrow"');
+    expect(reference.indexOf('body="content"')).toBeLessThan(
+      reference.indexOf('### Tooltip.Popup'),
+    );
+  });
+
+  it('distinguishes identically named props on different parts and retains defaults', () => {
+    const reference = renderComponentReference({
+      name: 'Menu',
+      entryPoint: 'twenty-ui/primitives/surfaces',
+      slug: 'surfaces/menu',
+      props: [],
+      parts: [
+        {
+          name: 'Item',
+          props: [
+            {
+              name: 'closeOnClick',
+              type: 'boolean',
+              required: false,
+              defaultValue: 'true',
+              description: 'Close after selection.',
+            },
+          ],
+        },
+        {
+          name: 'CheckboxItem',
+          props: [
+            {
+              name: 'closeOnClick',
+              type: 'boolean',
+              required: false,
+              defaultValue: 'false',
+              description: 'Keep open for multiple choices.',
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(reference).toContain('### Menu.Item');
+    expect(reference).toContain('### Menu.CheckboxItem');
+    expect(reference).toContain(
+      '<ParamField body="Item.closeOnClick" type="boolean" default="true">',
+    );
+    expect(reference).toContain(
+      '<ParamField body="CheckboxItem.closeOnClick" type="boolean" default="false">',
+    );
+  });
+});
+
+describe('renderTokenReference', () => {
+  it('keeps token expressions inside one table cell and distinguishes numeric values', () => {
+    const reference = renderTokenReference([
+      {
+        path: 'spacing.1',
+        cssVariable: '--t-spacing-1',
+        light: 'calc(1px | <custom> & {value})\nnext',
+        dark: '4px',
+        isNumber: false,
+      },
+      {
+        path: 'icon.size.md',
+        cssVariable: '--t-icon-size-md',
+        light: '16',
+        dark: '16',
+        isNumber: true,
+      },
+    ]);
+    const rows = reference
+      .split('\n')
+      .filter(
+        (line) => line.startsWith('| spacing.') || line.startsWith('| icon.'),
+      );
+
+    expect(rows).toHaveLength(2);
+    expect(rows.every((row) => row.split('|').length === 7)).toBe(true);
+    expect(reference).not.toContain('<custom>');
+    expect(rows[1]).toContain('| Yes |');
+    expect(reference).toContain('## spacing');
+    expect(reference).toContain('## icon');
+  });
+});