docusaurus-plugin-generate-schema-docs 1.1.1 → 1.3.0

package/__tests__/components/PropertyRow.test.js

@@ -0,0 +1,487 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import PropertyRow from '../../components/PropertyRow';
+
+describe('PropertyRow', () => {
+  it('renders a basic property', () => {
+    const row = {
+      name: 'name',
+      level: 0,
+      required: false,
+      propertyType: 'string',
+      description: 'The name of the user.',
+      example: 'John Doe',
+      constraints: [],
+      path: ['name'],
+    };
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+
+    expect(getByText('name')).toBeInTheDocument();
+    expect(getByText('string')).toBeInTheDocument();
+    expect(getByText('The name of the user.')).toBeInTheDocument();
+    expect(getByText('John Doe')).toBeInTheDocument();
+  });
+
+  it('marks required properties', () => {
+    const row = {
+      name: 'name',
+      level: 0,
+      required: true,
+      propertyType: 'string',
+      description: '',
+      example: '',
+      constraints: ['required'],
+      path: ['name'],
+    };
+
+    const { container, getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+
+    expect(container.querySelector('.required-row')).toBeInTheDocument();
+    expect(container.querySelector('.required')).toBeInTheDocument();
+    expect(getByText('required')).toBeInTheDocument();
+  });
+
+  it('renders multiple constraints', () => {
+    const row = {
+      name: 'name',
+      level: 0,
+      required: true,
+      propertyType: 'string',
+      description: '',
+      example: '',
+      constraints: ['required', 'minLength: 1', 'maxLength: 10'],
+      path: ['name'],
+    };
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+    expect(getByText('required')).toBeInTheDocument();
+    expect(getByText('minLength: 1')).toBeInTheDocument();
+    expect(getByText('maxLength: 10')).toBeInTheDocument();
+  });
+
+  it('renders an example', () => {
+    const row = {
+      name: 'name',
+      level: 0,
+      required: false,
+      propertyType: 'string',
+      description: '',
+      example: 'foo',
+      constraints: [],
+      path: ['name'],
+    };
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+    expect(getByText('foo')).toBeInTheDocument();
+  });
+
+  it('does not render anything for empty constraints', () => {
+    const row = {
+      name: 'name',
+      level: 0,
+      required: false,
+      propertyType: 'string',
+      description: '',
+      example: '',
+      constraints: [],
+      path: ['name'],
+    };
+
+    const { container } = render(
+      <table>
+        <tbody>
+          <PropertyRow row={row} />
+        </tbody>
+      </table>,
+    );
+
+    // The cell for constraints is the 3rd cell (index 2)
+    const cells = container.querySelectorAll('td');
+    expect(cells[2].innerHTML).toBe('');
+  });
+
+  describe('hierarchical lines feature', () => {
+    it('renders {} symbol for object containers', () => {
+      const row = {
+        name: 'user_data',
+        level: 0,
+        required: false,
+        propertyType: 'object',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['user_data'],
+        hasChildren: true,
+        containerType: 'object',
+        continuingLevels: [],
+      };
+
+      const { container, getByText } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(getByText('{}')).toBeInTheDocument();
+      expect(container.querySelector('.container-symbol')).toBeInTheDocument();
+    });
+
+    it('renders [] symbol for array containers', () => {
+      const row = {
+        name: 'addresses',
+        level: 0,
+        required: false,
+        propertyType: 'array',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['addresses'],
+        hasChildren: true,
+        containerType: 'array',
+        continuingLevels: [],
+      };
+
+      const { container, getByText } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(getByText('[]')).toBeInTheDocument();
+      expect(container.querySelector('.container-symbol')).toBeInTheDocument();
+    });
+
+    it('does not render container symbol for simple properties', () => {
+      const row = {
+        name: 'name',
+        level: 0,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['name'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(
+        container.querySelector('.container-symbol'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('applies has-children class when property has children', () => {
+      const row = {
+        name: 'user_data',
+        level: 1,
+        required: false,
+        propertyType: 'object',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['user_data'],
+        hasChildren: true,
+        containerType: 'object',
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(container.querySelector('.has-children')).toBeInTheDocument();
+    });
+
+    it('applies container-object class for object containers', () => {
+      const row = {
+        name: 'user_data',
+        level: 1,
+        required: false,
+        propertyType: 'object',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['user_data'],
+        hasChildren: true,
+        containerType: 'object',
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(container.querySelector('.container-object')).toBeInTheDocument();
+    });
+
+    it('applies container-array class for array containers', () => {
+      const row = {
+        name: 'addresses',
+        level: 1,
+        required: false,
+        propertyType: 'array',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['addresses'],
+        hasChildren: true,
+        containerType: 'array',
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      expect(container.querySelector('.container-array')).toBeInTheDocument();
+    });
+
+    it('applies is-last class when isLastInGroup is true', () => {
+      const row = {
+        name: 'last_item',
+        level: 1,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['last_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+        isLastInGroup: true,
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} isLastInGroup={true} />
+          </tbody>
+        </table>,
+      );
+
+      expect(container.querySelector('.is-last')).toBeInTheDocument();
+    });
+
+    it('applies level class based on nesting level', () => {
+      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('.level-2')).toBeInTheDocument();
+    });
+
+    it('applies padding-left based on level using rem units', () => {
+      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>,
+      );
+
+      const td = container.querySelector('td');
+      // level 2: 2 * 1.25 + 0.5 = 3rem
+      expect(td.style.paddingLeft).toBe('3rem');
+    });
+
+    it('applies background-image for parent-to-child line when hasChildren is true', () => {
+      const row = {
+        name: 'user_data',
+        level: 1,
+        required: false,
+        propertyType: 'object',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['user_data'],
+        hasChildren: true,
+        containerType: 'object',
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      const td = container.querySelector('td');
+      expect(td.style.backgroundImage).toContain('linear-gradient');
+    });
+
+    it('applies background-image for continuing ancestor lines', () => {
+      const row = {
+        name: 'deep_item',
+        level: 3,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['a', 'b', 'deep_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [0, 1], // Ancestors at levels 0 and 1 have more siblings
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      const td = container.querySelector('td');
+      // Should have background gradients for continuing lines
+      // Level 0 passes filter (0 < 3-1 = 2), level 1 passes (1 < 2)
+      expect(td.style.backgroundImage).toContain('linear-gradient');
+    });
+
+    it('filters out immediate parent level from continuing lines', () => {
+      const row = {
+        name: 'nested_item',
+        level: 2,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['parent', 'nested_item'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [0, 1], // Level 1 is immediate parent
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      const td = container.querySelector('td');
+      // Filter is lvl < level - 1, so for level 2: lvl < 1
+      // Only level 0 should pass, level 1 should be filtered out
+      // So we should have exactly one gradient (for level 0)
+      const bgImage = td.style.backgroundImage;
+      // Count occurrences of linear-gradient
+      const gradientCount = (bgImage.match(/linear-gradient/g) || []).length;
+      expect(gradientCount).toBe(1);
+    });
+
+    it('has no background-image when continuingLevels is empty and no children', () => {
+      const row = {
+        name: 'simple',
+        level: 1,
+        required: false,
+        propertyType: 'string',
+        description: '',
+        example: '',
+        constraints: [],
+        path: ['simple'],
+        hasChildren: false,
+        containerType: null,
+        continuingLevels: [],
+      };
+
+      const { container } = render(
+        <table>
+          <tbody>
+            <PropertyRow row={row} />
+          </tbody>
+        </table>,
+      );
+
+      const td = container.querySelector('td');
+      expect(td.style.backgroundImage).toBe('');
+    });
+  });
+});

package/__tests__/components/SchemaJsonViewer.test.js

@@ -0,0 +1,36 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import SchemaJsonViewer from '../../components/SchemaJsonViewer';
+
+// Mock CodeBlock as it's an external theme component
+jest.mock('@theme/CodeBlock', () => {
+  return function DummyCodeBlock({ children, language }) {
+    return <pre data-language={language}>{children}</pre>;
+  };
+});
+
+describe('SchemaJsonViewer', () => {
+  it('renders the schema in a CodeBlock', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        name: { type: 'string' },
+      },
+    };
+
+    const { getByText, container } = render(
+      <SchemaJsonViewer schema={schema} />,
+    );
+
+    expect(getByText('View Raw JSON Schema')).toBeInTheDocument();
+    const detailsElement = container.querySelector('details');
+    expect(detailsElement).toHaveClass('schema-json-viewer');
+    const codeBlockElement = container.querySelector('pre');
+    expect(codeBlockElement).toBeInTheDocument();
+    expect(codeBlockElement).toHaveAttribute('data-language', 'json');
+    expect(codeBlockElement.textContent).toEqual(
+      JSON.stringify(schema, null, 2),
+    );
+  });
+});

package/__tests__/components/SchemaRows.test.js

@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import SchemaRows from '../../components/SchemaRows';
+
+// Mock child components
+jest.mock('../../components/PropertyRow', () => {
+  const MockPropertyRow = (props) => (
+    <tr>
+      <td>Mocked PropertyRow: {props.row.name}</td>
+    </tr>
+  );
+  MockPropertyRow.displayName = 'MockPropertyRow';
+  return MockPropertyRow;
+});
+
+jest.mock('../../components/FoldableRows', () => {
+  const MockFoldableRows = (props) => (
+    <tr>
+      <td>Mocked FoldableRows: {props.row.choiceType}</td>
+    </tr>
+  );
+  MockFoldableRows.displayName = 'MockFoldableRows';
+  return MockFoldableRows;
+});
+
+describe('SchemaRows', () => {
+  it('renders a PropertyRow for each property type item in tableData', () => {
+    const tableData = [
+      { type: 'property', name: 'name', path: ['name'] },
+      { type: 'property', name: 'age', path: ['age'] },
+    ];
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <SchemaRows tableData={tableData} />
+        </tbody>
+      </table>,
+    );
+
+    expect(getByText('Mocked PropertyRow: name')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: age')).toBeInTheDocument();
+  });
+
+  it('renders nested properties from a flat list', () => {
+    const tableData = [
+      { type: 'property', name: 'user', path: ['user'], level: 0 },
+      { type: 'property', name: 'id', path: ['user', 'id'], level: 1 },
+    ];
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <SchemaRows tableData={tableData} />
+        </tbody>
+      </table>,
+    );
+
+    // It should render both the parent and child property from the flat list
+    expect(getByText('Mocked PropertyRow: user')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: id')).toBeInTheDocument();
+  });
+
+  it('renders a FoldableRows for choice type items in tableData', () => {
+    const tableData = [
+      {
+        type: 'choice',
+        choiceType: 'oneOf',
+        path: ['choice'],
+        options: [],
+      },
+    ];
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <SchemaRows tableData={tableData} />
+        </tbody>
+      </table>,
+    );
+
+    expect(getByText('Mocked FoldableRows: oneOf')).toBeInTheDocument();
+  });
+
+  it('renders a mix of properties and choices', () => {
+    const tableData = [
+      { type: 'property', name: 'prop1', path: ['prop1'] },
+      {
+        type: 'choice',
+        choiceType: 'anyOf',
+        path: ['choice'],
+        options: [],
+      },
+      { type: 'property', name: 'prop2', path: ['prop2'] },
+    ];
+
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <SchemaRows tableData={tableData} />
+        </tbody>
+      </table>,
+    );
+
+    expect(getByText('Mocked PropertyRow: prop1')).toBeInTheDocument();
+    expect(getByText('Mocked FoldableRows: anyOf')).toBeInTheDocument();
+    expect(getByText('Mocked PropertyRow: prop2')).toBeInTheDocument();
+  });
+});

package/__tests__/components/SchemaViewer.test.js

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import SchemaViewer from '../../components/SchemaViewer';
+import choiceEventSchema from '../__fixtures__/static/schemas/choice-event.json';
+
+// Mock the CodeBlock component as it's not relevant to this test
+jest.mock('@theme/CodeBlock', () => {
+  const MockCodeBlock = ({ children }) => <pre>{children}</pre>;
+  MockCodeBlock.displayName = 'MockCodeBlock';
+  return MockCodeBlock;
+});
+
+// Mock the Heading component
+jest.mock('@theme/Heading', () => {
+  const MockHeading = ({ as: Component, ...props }) => <Component {...props} />;
+  MockHeading.displayName = 'MockHeading';
+  return MockHeading;
+});
+
+describe('SchemaViewer', () => {
+  it('renders complex schema with payment_method and required indicators', () => {
+    render(<SchemaViewer schema={choiceEventSchema} />);
+
+    // Check that payment_method property name is rendered within the table
+    const table = screen.getByRole('table');
+    expect(within(table).getByText('payment_method')).toBeInTheDocument();
+
+    // Check that the "required" text is rendered for the user_id choice
+    const userIdChoiceHeader = screen.getByText(
+      (content, element) =>
+        element.tagName.toLowerCase() === 'h4' &&
+        content.includes('Select one of the following options:'),
+    );
+    expect(userIdChoiceHeader).toBeInTheDocument();
+
+    // The required text is rendered as a 'required' constraint code block.
+    // We expect it for 'event', 'user_id', and 'payment_method' at the top level.
+    const requiredConstraints = within(table).getAllByText('required');
+
+    // There should be at least 3 required constraints visible at the top level.
+    expect(requiredConstraints.length).toBeGreaterThanOrEqual(3);
+  });
+});

package/__tests__/components/TableHeader.test.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import TableHeader from '../../components/TableHeader';
+
+describe('TableHeader', () => {
+  it('renders the table header with correct columns', () => {
+    const { getByText } = render(
+      <table>
+        <TableHeader />
+      </table>,
+    );
+
+    expect(getByText('Property')).toBeInTheDocument();
+    expect(getByText('Type')).toBeInTheDocument();
+    expect(getByText('Constraints')).toBeInTheDocument();
+    expect(getByText('Examples')).toBeInTheDocument();
+    expect(getByText('Description')).toBeInTheDocument();
+  });
+});