docusaurus-plugin-generate-schema-docs 1.8.2 → 1.8.4

package/__tests__/components/ConditionalRows.test.js

@@ -147,4 +147,32 @@ describe('ConditionalRows', () => {
       screen.getByText(JSON.stringify([{ name: 'postal_code' }])),
     ).toBeInTheDocument();
   });
+
+  it('keeps conditional control rows neutral instead of zebra-striped', () => {
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <ConditionalRows
+            row={conditionalRow}
+            stripeIndex={1}
+            stripeState={{ current: 2 }}
+          />
+        </tbody>
+      </table>,
+    );
+
+    const ifRow = getByText('If').closest('tr');
+    const thenRow = getByText('Then').closest('tr');
+    const elseRow = getByText('Else').closest('tr');
+
+    expect(ifRow).toHaveClass('schema-row--control');
+    expect(thenRow).toHaveClass('schema-row--control');
+    expect(elseRow).toHaveClass('schema-row--control');
+    expect(ifRow).not.toHaveClass('schema-row--zebra-even');
+    expect(thenRow).not.toHaveClass('schema-row--zebra-even');
+    expect(elseRow).not.toHaveClass('schema-row--zebra-even');
+    expect(
+      container.querySelector('[data-testid="schema-rows"]'),
+    ).toBeInTheDocument();
+  });
 });

package/__tests__/components/FoldableRows.test.js

@@ -1,12 +1,10 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import FoldableRows from '../../components/FoldableRows';
 
 jest.mock('../../components/SchemaRows', () => {
   const MockSchemaRows = (props) => (
-    // The mock needs to return a valid element to be a child of a tbody
-    // We'll use a data-testid to check for its presence.
     <tr data-testid="schema-rows">
       <td>{JSON.stringify(props.tableData)}</td>
     </tr>
@@ -16,318 +14,61 @@ jest.mock('../../components/SchemaRows', () => {
 });
 
 jest.mock('@theme/Heading', () => {
-  const MockHeading = ({ as: Component, children, ...props }) => (
-    <Component {...props}>{children}</Component>
+  const MockHeading = ({ as: Tag = 'h4', children, className }) => (
+    <Tag className={className}>{children}</Tag>
   );
   MockHeading.displayName = 'MockHeading';
   return MockHeading;
 });
 
 describe('FoldableRows', () => {
-  const oneOfRow = {
+  const choiceRow = {
     type: 'choice',
     choiceType: 'oneOf',
-    path: ['payment'],
-    level: 1,
-    description: 'Select one payment method:',
+    description: 'Choose one payment type.',
+    name: 'payment',
+    level: 0,
+    continuingLevels: [],
     options: [
       {
         title: 'Credit Card',
-        description: 'Pay with card',
-        rows: [{ name: 'cardNumber' }],
+        description: 'Card payment.',
+        rows: [{ name: 'card_number' }],
       },
       {
         title: 'PayPal',
-        description: 'Pay with PayPal',
+        description: 'PayPal payment.',
         rows: [{ name: 'email' }],
       },
     ],
   };
 
-  const anyOfRow = {
-    type: 'choice',
-    choiceType: 'anyOf',
-    path: ['contact'],
-    level: 1,
-    description: 'Select any contact method:',
-    options: [
-      {
-        title: 'Email',
-        description: 'Contact via email',
-        rows: [{ name: 'email_address' }],
-      },
-      {
-        title: 'Phone',
-        description: 'Contact via phone',
-        rows: [{ name: 'phone_number' }],
-      },
-    ],
-  };
-
-  it('renders oneOf as a radio-style accordion', () => {
-    render(
-      <table>
-        <tbody>
-          <FoldableRows row={oneOfRow} />
-        </tbody>
-      </table>,
-    );
-
-    const creditCardToggle = screen.getByText('Credit Card');
-    const paypalToggle = screen.getByText('PayPal');
-
-    // Initially, first option is open
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'cardNumber' }])),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByText(JSON.stringify([{ name: 'email' }])),
-    ).not.toBeInTheDocument();
-
-    // Click the second option
-    fireEvent.click(paypalToggle);
-
-    // Now, second option should be open and first should be closed
-    expect(
-      screen.queryByText(JSON.stringify([{ name: 'cardNumber' }])),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'email' }])),
-    ).toBeInTheDocument();
-  });
-
-  it('renders anyOf as a checkbox-style accordion', () => {
+  it('keeps choice headers and toggles neutral instead of zebra-striped', () => {
     render(
       <table>
         <tbody>
-          <FoldableRows row={anyOfRow} />
+          <FoldableRows
+            row={choiceRow}
+            stripeIndex={1}
+            stripeState={{ current: 2 }}
+          />
         </tbody>
       </table>,
     );
 
-    const emailToggle = screen.getByText('Email');
-    const phoneToggle = screen.getByText('Phone');
-
-    // Initially, nothing is open
-    expect(screen.queryByTestId('schema-rows')).not.toBeInTheDocument();
-
-    // Click the first option
-    fireEvent.click(emailToggle);
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'email_address' }])),
-    ).toBeInTheDocument();
-    expect(
-      screen.queryByText(JSON.stringify([{ name: 'phone_number' }])),
-    ).not.toBeInTheDocument();
-
-    // Click the second option
-    fireEvent.click(phoneToggle);
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'email_address' }])),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'phone_number' }])),
-    ).toBeInTheDocument();
-
-    // Click the first option again to close it
-    fireEvent.click(emailToggle);
-    expect(
-      screen.queryByText(JSON.stringify([{ name: 'email_address' }])),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.getByText(JSON.stringify([{ name: 'phone_number' }])),
-    ).toBeInTheDocument();
-  });
-
-  describe('hierarchical lines feature', () => {
-    it('applies padding-left based on level using rem units', () => {
-      const rowWithLevel = {
-        type: 'choice',
-        choiceType: 'oneOf',
-        path: ['nested', 'payment'],
-        level: 2,
-        description: 'Nested choice',
-        continuingLevels: [],
-        options: [
-          {
-            title: 'Option A',
-            description: 'First option',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={rowWithLevel} />
-          </tbody>
-        </table>,
-      );
-
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      // level 2: 2 * 1.25 + 0.5 = 3rem
-      cells.forEach((cell) => {
-        expect(cell.style.paddingLeft).toBe('3rem');
-      });
-    });
-
-    it('applies background-image for continuing ancestor lines', () => {
-      const rowWithContinuingLevels = {
-        type: 'choice',
-        choiceType: 'anyOf',
-        path: ['deeply', 'nested', 'choice'],
-        level: 2,
-        description: 'Choice with continuing lines',
-        continuingLevels: [0], // Ancestor at level 0 has more siblings
-        options: [
-          {
-            title: 'Option A',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={rowWithContinuingLevels} />
-          </tbody>
-        </table>,
-      );
-
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      cells.forEach((cell) => {
-        expect(cell.style.backgroundImage).toContain('linear-gradient');
-      });
-    });
-
-    it('applies background-image for immediate parent level connection', () => {
-      const rowWithParentLevel = {
-        type: 'choice',
-        choiceType: 'oneOf',
-        path: ['parent', 'choice'],
-        level: 1,
-        description: 'Choice at level 1',
-        continuingLevels: [],
-        options: [
-          {
-            title: 'Option A',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={rowWithParentLevel} />
-          </tbody>
-        </table>,
-      );
-
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      // Should have a line at parent level (level 0) position
-      cells.forEach((cell) => {
-        expect(cell.style.backgroundImage).toContain('linear-gradient');
-      });
-    });
-
-    it('has a bracket gradient for root level choices with no continuing levels', () => {
-      const rootLevelRow = {
-        type: 'choice',
-        choiceType: 'oneOf',
-        path: ['user_id'],
-        level: 0,
-        description: 'Root level choice',
-        continuingLevels: [],
-        groupBrackets: [],
-        options: [
-          {
-            title: 'Option A',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={rootLevelRow} />
-          </tbody>
-        </table>,
-      );
-
-      // Root-level choice rows get a bracket gradient even without tree-line continuing levels
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      cells.forEach((cell) => {
-        expect(cell.style.backgroundImage).toContain('linear-gradient');
-      });
-    });
-
-    it('combines multiple continuing levels in background-image', () => {
-      const rowWithMultipleLevels = {
-        type: 'choice',
-        choiceType: 'anyOf',
-        path: ['a', 'b', 'c', 'choice'],
-        level: 3,
-        description: 'Deeply nested choice',
-        continuingLevels: [0, 1], // Multiple ancestors have siblings
-        options: [
-          {
-            title: 'Option A',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={rowWithMultipleLevels} />
-          </tbody>
-        </table>,
-      );
-
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      cells.forEach((cell) => {
-        const bgImage = cell.style.backgroundImage;
-        // colSpan=5 rows only have bracket lines (right side), not tree lines (left side).
-        // Should have exactly 1 bracket gradient.
-        const gradientCount = (bgImage.match(/linear-gradient/g) || []).length;
-        expect(gradientCount).toBeGreaterThanOrEqual(1);
-      });
-    });
-
-    it('applies correct indentation for level 0', () => {
-      const levelZeroRow = {
-        type: 'choice',
-        choiceType: 'oneOf',
-        path: ['user_id'],
-        level: 0,
-        description: 'Level 0 choice',
-        continuingLevels: [],
-        options: [
-          {
-            title: 'Option A',
-            rows: [{ name: 'fieldA' }],
-          },
-        ],
-      };
-
-      const { container } = render(
-        <table>
-          <tbody>
-            <FoldableRows row={levelZeroRow} />
-          </tbody>
-        </table>,
-      );
-
-      const cells = container.querySelectorAll('td[colspan="5"]');
-      // level 0: 0 * 1.25 + 0.5 = 0.5rem
-      cells.forEach((cell) => {
-        expect(cell.style.paddingLeft).toBe('0.5rem');
-      });
-    });
+    const headerRow = screen
+      .getByText((content) =>
+        content.includes('Select one of the following options:'),
+      )
+      .closest('tr');
+    const firstToggleRow = screen.getByText('Credit Card').closest('tr');
+    const secondToggleRow = screen.getByText('PayPal').closest('tr');
+
+    expect(headerRow).toHaveClass('schema-row--control');
+    expect(firstToggleRow).toHaveClass('schema-row--control');
+    expect(secondToggleRow).toHaveClass('schema-row--control');
+    expect(headerRow).not.toHaveClass('schema-row--zebra-even');
+    expect(firstToggleRow).not.toHaveClass('schema-row--zebra-even');
+    expect(secondToggleRow).not.toHaveClass('schema-row--zebra-even');
   });
 });

package/__tests__/components/PropertiesTable.test.js

@@ -2,6 +2,11 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import PropertiesTable from '../../components/PropertiesTable';
+import { schemaToTableData } from '../../helpers/schemaToTableData';
+
+jest.mock('../../helpers/schemaToTableData', () => ({
+  schemaToTableData: jest.fn(() => []),
+}));
 
 jest.mock('../../components/TableHeader', () => {
   const MockTableHeader = () => (
@@ -32,6 +37,10 @@ jest.mock('../../components/WordWrapButton', () => {
 });
 
 describe('PropertiesTable', () => {
+  beforeEach(() => {
+    schemaToTableData.mockClear();
+  });
+
   it('renders the table with header and schema rows', () => {
     const schema = {
       properties: {
@@ -46,6 +55,63 @@ describe('PropertiesTable', () => {
     expect(getByText('Mocked SchemaRows')).toBeInTheDocument();
   });
 
+  it('filters out inherited top-level properties without description or examples', () => {
+    const schema = {
+      properties: {
+        event: { type: 'string' },
+        items: { type: 'array' },
+      },
+      required: ['event'],
+    };
+    const sourceSchema = {
+      properties: {
+        event: { type: 'string' },
+      },
+    };
+
+    render(<PropertiesTable schema={schema} sourceSchema={sourceSchema} />);
+
+    expect(schemaToTableData).toHaveBeenCalledWith({
+      ...schema,
+      properties: {
+        event: { type: 'string' },
+      },
+    });
+  });
+
+  it('keeps inherited top-level properties when they include documentation fields', () => {
+    const schema = {
+      properties: {
+        event: { type: 'string' },
+        app_version: {
+          type: 'string',
+          description: 'Shared app version for all mobile events.',
+          examples: ['1.2.3'],
+        },
+      },
+      required: ['event'],
+    };
+    const sourceSchema = {
+      properties: {
+        event: { type: 'string' },
+      },
+    };
+
+    render(<PropertiesTable schema={schema} sourceSchema={sourceSchema} />);
+
+    expect(schemaToTableData).toHaveBeenCalledWith({
+      ...schema,
+      properties: {
+        event: { type: 'string' },
+        app_version: {
+          type: 'string',
+          description: 'Shared app version for all mobile events.',
+          examples: ['1.2.3'],
+        },
+      },
+    });
+  });
+
   it('toggles word wrap when the button is clicked', () => {
     const schema = {
       properties: {