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

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/PropertyRow.test.js

@@ -1,9 +1,35 @@
 import '@testing-library/jest-dom';
+import fs from 'fs';
 import React from 'react';
+import path from 'path';
 import { render } from '@testing-library/react';
 import PropertyRow from '../../components/PropertyRow';
 
 describe('PropertyRow', () => {
+  it('does not suppress first-column separators for nested tree cells in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).not.toContain(
+      '.schema-table tbody tr + tr td.property-cell--tree',
+    );
+  });
+
+  it('removes the extra left border from full-width schema rows in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain(".schema-table td[colspan='5']");
+    expect(css).toContain('border-left: none;');
+  });
+
+  it('defines an explicit neutral class for control rows in CSS', () => {
+    const cssPath = path.join(__dirname, '../../components/SchemaRows.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain('.schema-row--control');
+    expect(css).toContain('background-color: transparent');
+  });
   it('renders a basic property', () => {
     const row = {
       name: 'name',
@@ -51,10 +77,40 @@ describe('PropertyRow', () => {
     );
 
     expect(container.querySelector('.required-row')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-cell--required'),
+    ).toBeInTheDocument();
     expect(container.querySelector('.required')).toBeInTheDocument();
     expect(getByText('required')).toBeInTheDocument();
   });
 
+  it('applies the same zebra class to the main row and continuation rows', () => {
+    const row = {
+      name: 'event',
+      level: 0,
+      required: true,
+      propertyType: 'string',
+      description: 'Event name.',
+      examples: ['purchase'],
+      constraints: ['required', 'const: "purchase"'],
+      path: ['event'],
+    };
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} stripeIndex={1} />
+        </tbody>
+      </table>,
+    );
+
+    const rows = container.querySelectorAll('tbody tr');
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveClass('schema-row--zebra-odd');
+    expect(rows[1]).toHaveClass('schema-row--zebra-odd');
+    expect(rows[0]).not.toHaveClass('schema-row--zebra-even');
+  });
+
   it('renders multiple constraints', () => {
     const row = {
       name: 'name',
@@ -156,6 +212,107 @@ describe('PropertyRow', () => {
     expect(cells[2].innerHTML).toBe('');
   });
 
+  it('renders additionalProperties as a schema keyword row and keeps its connector open', () => {
+    const row = {
+      name: 'additionalProperties',
+      level: 1,
+      required: false,
+      propertyType: 'string',
+      description: 'Catch-all values.',
+      examples: ['beta_tester'],
+      constraints: [],
+      path: ['user_properties', 'additionalProperties'],
+      hasChildren: false,
+      containerType: null,
+      continuingLevels: [],
+      isSchemaKeywordRow: true,
+      keepConnectorOpen: false,
+    };
+
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} isLastInGroup={true} />
+        </tbody>
+      </table>,
+    );
+
+    const keyword = getByText('additionalProperties');
+    expect(keyword).toBeInTheDocument();
+    expect(container.querySelector('.property-keyword')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-cell--keyword'),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.property-cell--tree')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-name--keyword'),
+    ).toBeInTheDocument();
+    expect(keyword).not.toHaveAttribute('title');
+    expect(keyword).toHaveAttribute(
+      'aria-describedby',
+      'schema-keyword-help-additionalProperties',
+    );
+    expect(
+      container.querySelector('.property-keyword-tooltip'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('#schema-keyword-help-additionalProperties'),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'Controls properties not listed in properties and not matched by patternProperties.',
+      ),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.is-last')).toBeInTheDocument();
+  });
+
+  it('renders patternProperties rows as schema keywords with tooltip help', () => {
+    const row = {
+      name: 'patternProperties /^custom_/',
+      level: 1,
+      required: false,
+      propertyType: 'number',
+      description: 'Numeric custom attribute values.',
+      examples: [5],
+      constraints: ['minimum: 0'],
+      path: ['attributes', 'patternProperties /^custom_/'],
+      hasChildren: false,
+      containerType: null,
+      continuingLevels: [],
+      isSchemaKeywordRow: true,
+      keepConnectorOpen: false,
+    };
+
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} isLastInGroup={true} />
+        </tbody>
+      </table>,
+    );
+
+    const keyword = getByText('patternProperties');
+    expect(getByText('/^custom_/')).toBeInTheDocument();
+    expect(
+      container.querySelector('.property-keyword-pattern'),
+    ).toBeInTheDocument();
+    expect(keyword).toHaveAttribute(
+      'aria-describedby',
+      'schema-keyword-help-patternProperties /^custom_/',
+    );
+    expect(
+      container.ownerDocument.getElementById(
+        'schema-keyword-help-patternProperties /^custom_/',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'Applies the subschema to property names that match the given regular expression.',
+      ),
+    ).toBeInTheDocument();
+    expect(container.querySelector('.is-last')).toBeInTheDocument();
+  });
+
   describe('hierarchical lines feature', () => {
     it('renders {} symbol for object containers', () => {
       const row = {
@@ -368,6 +525,65 @@ describe('PropertyRow', () => {
       );
 
       expect(container.querySelector('.level-2')).toBeInTheDocument();
+      expect(
+        container.querySelector('.property-cell--tree'),
+      ).toBeInTheDocument();
+    });
+
+    it('does not add a separator-suppression class to nested tree cells', () => {
+      const row = {
+        name: 'nested_item',
+        level: 2,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['parent', 'nested_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(
+        container.querySelector('.property-cell--tree-no-separator'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('does not mark root-level cells as tree cells', () => {
+      const row = {
+        name: 'root_item',
+        level: 0,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['root_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(
+        container.querySelector('.property-cell--tree'),
+      ).not.toBeInTheDocument();
     });
 
     it('applies padding-left based on level using rem units', () => {