@redocly/openapi-docs 3.24.0-next.9 → 3.24.1

package/lib/components/Request/__tests__/RequestDetails.test.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RequestDetails } from '../RequestDetails.js';
+import { getField, getMediaContent } from '../../../models/index.js';
+import { normalizeOptions, OpenAPIParser } from '../../../services/index.js';
+import { withTestProviders, TestMemoryRouter } from '../../../testProviders.js';
+const OPERATION_POINTER = '#/paths/~1pets/get';
+// Wide enough that 45 * 45 = 2025 rows blow the 2000-row budget one level after
+// the schema's own properties.
+const WIDTH = 45;
+const SMALL_WIDTH = 44;
+function makeWideProperties(prefix, value, width = WIDTH) {
+    return Object.fromEntries(Array.from({ length: width }, (_, i) => [`${prefix}_${i}`, { ...value }]));
+}
+const definition = {
+    openapi: '3.0.0',
+    info: { title: 'test', version: '0' },
+    paths: {},
+    components: {
+        schemas: {
+            Small: {
+                type: 'object',
+                properties: makeWideProperties('small', { $ref: '#/components/schemas/SmallLeaf' }, SMALL_WIDTH),
+            },
+            SmallLeaf: {
+                type: 'object',
+                properties: makeWideProperties('small_leaf', { type: 'string' }, SMALL_WIDTH),
+            },
+            Big: {
+                type: 'object',
+                properties: makeWideProperties('big', { $ref: '#/components/schemas/BigLeaf' }),
+            },
+            BigLeaf: {
+                type: 'object',
+                properties: makeWideProperties('leaf', { type: 'string' }),
+            },
+        },
+    },
+};
+// The probe replaces the parameters/body tree: it renders a real SubSchema at the
+// level nested parameter nodes actually mount at (PropertyDetails defaults level
+// to 1 and passes level + 1), so the test observes whether "Expand all" reaches
+// parameter nesting.
+vi.mock('../../RequestParameters/index.js', async () => {
+    const { SubSchema } = await import('../../Schema/SubSchema.js');
+    return {
+        RequestParameters: () => (_jsx(SubSchema, { expandByDefault: false, expandable: true, level: 2, propertyLength: WIDTH, deepLink: `${OPERATION_POINTER}/t=request`, operationPointer: OPERATION_POINTER, children: _jsx("div", { "data-testid": "nested-content" }) })),
+    };
+});
+const options = normalizeOptions({});
+const parser = new OpenAPIParser(definition, undefined, options);
+const operationDeps = { operation: { pointer: OPERATION_POINTER } };
+function makeOperation(overrides) {
+    return {
+        id: 'getPets',
+        pointer: OPERATION_POINTER,
+        description: undefined,
+        externalDocs: undefined,
+        extensions: {},
+        security: [],
+        parameters: [],
+        requestBody: undefined,
+        callbackId: '',
+        ...overrides,
+    };
+}
+function renderRequestDetails(operation) {
+    return render(withTestProviders(_jsx(TestMemoryRouter, { children: _jsx(RequestDetails, { operation: operation, translate: (_key, value) => value || _key }) }), { definition }));
+}
+describe('RequestDetails expand-all depth', () => {
+    it('expands parameter nesting one level when the parameter schema fits the budget', () => {
+        const parameter = getField(parser, { name: 'filter', in: 'query', schema: { $ref: '#/components/schemas/Small' } }, '', options, operationDeps);
+        renderRequestDetails(makeOperation({ parameters: [parameter] }));
+        expect(screen.queryByTestId('nested-content')).not.toBeInTheDocument();
+        // A parameter's own property rows render behind a level-2 node (the parameter
+        // row itself is level 1). Showing the 45 properties fits the budget, so
+        // "Expand all" must open the parameter node — not skip parameters entirely.
+        fireEvent.click(screen.getByRole('button', { name: /expand all/i }));
+        expect(screen.getByTestId('nested-content')).toBeInTheDocument();
+    });
+    it('keeps nested body nodes collapsed when their rows exceed the budget', () => {
+        const requestBody = {
+            content: getMediaContent({
+                parser,
+                info: { 'application/json': { schema: { $ref: '#/components/schemas/Big' } } },
+                isRequestType: true,
+                options,
+                data: operationDeps,
+            }),
+        };
+        renderRequestDetails(makeOperation({ requestBody }));
+        // The body root's 45 property rows are always visible; expanding their nested
+        // level-2 nodes would add 2025 rows and blow the budget, so depth stays 1.
+        fireEvent.click(screen.getByRole('button', { name: /expand all/i }));
+        expect(screen.queryByTestId('nested-content')).not.toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=RequestDetails.test.js.map

package/lib/components/RequestSamples/__tests__/Example.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/RequestSamples/__tests__/Example.test.js

@@ -0,0 +1,384 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Example } from '../Example.js';
+import { withTestProviders } from '../../../testProviders.js';
+// Mock the dependencies
+vi.mock('../../Samples', () => ({
+    ExampleSwitch: ({ examples, exampleKey, onChange, }) => (_jsx("div", { "data-testid": "example-switch", children: _jsx("select", { "data-testid": "example-selector", value: exampleKey, onChange: (e) => onChange(e.target.value), children: Object.keys(examples).map((key) => (_jsx("option", { value: key, children: key }, key))) }) })),
+    useExampleKey: vi.fn(() => ({ exampleKey: 'bee' })),
+}));
+import { useTelemetry, useActivateExample } from '../../../hooks/index.js';
+import { useExampleKey } from '../../Samples/index.js';
+vi.mock('../../../hooks', async () => ({
+    ...(await vi.importActual('../../../hooks')),
+    useActivateExample: vi.fn(() => vi.fn()),
+    useTelemetry: vi.fn(() => ({
+        sendExamplesSwitcherClickedMessage: vi.fn(),
+    })),
+}));
+vi.mock('../../../jotai/operation', () => ({
+    operationStore: vi.fn(() => ({
+        toString: () => 'operationStore',
+    })),
+}));
+import { useAtom } from 'jotai';
+const mockUseTelemetry = vi.mocked(useTelemetry);
+const mockUseActivateExample = vi.mocked(useActivateExample);
+const mockUseExampleKey = vi.mocked(useExampleKey);
+// Mock jotai at module level
+vi.mock('jotai', async () => {
+    const actual = await vi.importActual('jotai');
+    return {
+        ...actual,
+        useAtom: vi.fn(),
+    };
+});
+const mockUseAtom = vi.mocked(useAtom);
+describe('Example component', () => {
+    const mockMediaType = {
+        name: 'application/json',
+        examples: {
+            bee: {
+                mime: 'application/json',
+                value: {
+                    petType: 'bee',
+                    honeyPerDay: 3.14,
+                },
+                rawValue: {
+                    petType: 'bee',
+                    honeyPerDay: 3.14,
+                },
+            },
+        },
+        schema: undefined,
+        isRequestType: true,
+        onlyRequiredInSamples: false,
+        operation: {
+            pointer: '/paths/~1pet/post',
+        },
+    };
+    const mockMediaContent = {
+        mediaTypes: [mockMediaType],
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        vi.spyOn(console, 'log').mockImplementation(() => { });
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: 'bee',
+                activeOneOf: {},
+                requestValues: { body: null },
+            },
+            vi.fn(),
+        ]);
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('should render component with single example without ExampleSwitch', () => {
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: mockMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        expect(renderSample).toHaveBeenCalledWith();
+        expect(screen.queryByTestId('example-switch')).not.toBeInTheDocument();
+        expect(screen.getByTestId('sample')).toBeInTheDocument();
+    });
+    it('should render component without examples', () => {
+        const noExamplesMediaType = {
+            ...mockMediaType,
+            examples: undefined,
+            formExamples: undefined,
+        };
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: noExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        expect(renderSample).toHaveBeenCalledWith();
+        expect(screen.queryByTestId('example-switch')).not.toBeInTheDocument();
+    });
+    it('should render component with multiple examples and ExampleSwitch', () => {
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        expect(screen.getByTestId('example-switch')).toBeInTheDocument();
+        expect(renderSample).toHaveBeenCalledWith('bee');
+    });
+    it('should handle example change correctly', async () => {
+        const user = userEvent.setup();
+        const setOperation = vi.fn();
+        const sendTelemetry = vi.fn();
+        const setActivateExampleName = vi.fn();
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: 'bee',
+                activeOneOf: {},
+                requestValues: { body: null },
+            },
+            setOperation,
+        ]);
+        mockUseTelemetry.mockReturnValue({
+            sendExamplesSwitcherClickedMessage: sendTelemetry,
+        });
+        mockUseActivateExample.mockReturnValue(setActivateExampleName);
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        const selector = screen.getByTestId('example-selector');
+        await user.selectOptions(selector, 'cat');
+        await waitFor(() => {
+            expect(sendTelemetry).toHaveBeenCalledWith([
+                {
+                    object: 'button',
+                    exampleNumber: 1,
+                    totalExamples: 2,
+                    id: 'examplesSwitcherButton',
+                    uri: 'urn:redocly:redoc:ui:button:examplesSwitcherButton',
+                },
+            ]);
+            expect(setOperation).toHaveBeenCalledWith(expect.objectContaining({
+                activeExampleName: 'cat',
+                activeOneOf: expect.any(Object),
+                requestValues: { body: null },
+            }));
+            expect(setActivateExampleName).toHaveBeenCalledWith('cat');
+        });
+    });
+    it('should use formExamples when examples is undefined', () => {
+        const formExamplesMediaType = {
+            ...mockMediaType,
+            examples: undefined,
+            formExamples: {
+                example1: {
+                    mime: 'application/x-www-form-urlencoded',
+                    value: { field: 'value1' },
+                    rawValue: { field: 'value1' },
+                },
+                example2: {
+                    mime: 'application/x-www-form-urlencoded',
+                    value: { field: 'value2' },
+                    rawValue: { field: 'value2' },
+                },
+            },
+        };
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: formExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        expect(screen.getByTestId('example-switch')).toBeInTheDocument();
+        expect(renderSample).toHaveBeenCalledWith('bee');
+    });
+    it('should memoize the component correctly', () => {
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        const { rerender } = render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        const initialCallCount = renderSample.mock.calls.length;
+        // Rerender with the same props
+        rerender(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        // The renderSample should not be called again due to memoization
+        expect(renderSample.mock.calls.length).toBe(initialCallCount);
+    });
+    it('should use examplesPointer when provided for activeOneOf', () => {
+        const customPointer = '/paths/~1pet/post/requestBody/content/application~1json';
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            examplesPointer: customPointer,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: 'cat',
+                activeOneOf: { [customPointer]: 1 },
+                requestValues: { body: null },
+            },
+            vi.fn(),
+        ]);
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        expect(screen.getByTestId('example-switch')).toBeInTheDocument();
+        // Should render with 'cat' example since activeOneOf[customPointer] = 1
+        expect(renderSample).toHaveBeenCalledWith('cat');
+    });
+    it('should use examplesPointer in handleExampleChange when it starts with operation pointer', async () => {
+        const user = userEvent.setup();
+        const setOperation = vi.fn();
+        const setActivateExampleName = vi.fn();
+        const sendTelemetry = vi.fn();
+        const operationPointer = '/paths/~1pet/post';
+        const examplesPointer = '/paths/~1pet/post/requestBody/content/application~1json';
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            operation: {
+                ...mockMediaType.operation,
+                pointer: operationPointer,
+            },
+            examplesPointer,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: 'bee',
+                activeOneOf: {},
+                requestValues: { body: null },
+            },
+            setOperation,
+        ]);
+        mockUseTelemetry.mockReturnValue({
+            sendExamplesSwitcherClickedMessage: sendTelemetry,
+        });
+        mockUseActivateExample.mockReturnValue(setActivateExampleName);
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        const selector = screen.getByTestId('example-selector');
+        await user.selectOptions(selector, 'cat');
+        await waitFor(() => {
+            expect(setOperation).toHaveBeenCalledWith(expect.objectContaining({
+                activeExampleName: 'cat',
+                activeOneOf: { [examplesPointer]: 1 },
+                requestValues: { body: null },
+            }));
+        });
+    });
+    it('should use operation pointer in handleExampleChange when examplesPointer does not start with operation pointer', async () => {
+        const user = userEvent.setup();
+        const setOperation = vi.fn();
+        const setActivateExampleName = vi.fn();
+        const sendTelemetry = vi.fn();
+        const operationPointer = '/paths/~1pet/post';
+        const examplesPointer = '/different/pointer';
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            operation: {
+                ...mockMediaType.operation,
+                pointer: operationPointer,
+            },
+            examplesPointer,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: 'bee',
+                activeOneOf: {},
+                requestValues: { body: null },
+            },
+            setOperation,
+        ]);
+        mockUseTelemetry.mockReturnValue({
+            sendExamplesSwitcherClickedMessage: sendTelemetry,
+        });
+        mockUseActivateExample.mockReturnValue(setActivateExampleName);
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        const selector = screen.getByTestId('example-selector');
+        await user.selectOptions(selector, 'cat');
+        await waitFor(() => {
+            // Should use operation pointer instead of examplesPointer
+            expect(setOperation).toHaveBeenCalledWith(expect.objectContaining({
+                activeExampleName: 'cat',
+                activeOneOf: { [operationPointer]: 1 },
+                requestValues: { body: null },
+            }));
+        });
+    });
+    it('should fallback to activeExampleKey from useExampleKey when activeOneOf is empty', () => {
+        mockUseExampleKey.mockReturnValue({ exampleKey: 'cat' });
+        const multipleExamplesMediaType = {
+            ...mockMediaType,
+            examples: {
+                bee: {
+                    mime: 'application/json',
+                    value: { petType: 'bee' },
+                    rawValue: { petType: 'bee' },
+                },
+                cat: {
+                    mime: 'application/json',
+                    value: { petType: 'cat' },
+                    rawValue: { petType: 'cat' },
+                },
+            },
+        };
+        mockUseAtom.mockReturnValue([
+            {
+                activeExampleName: undefined,
+                activeOneOf: {},
+                requestValues: { body: null },
+            },
+            vi.fn(),
+        ]);
+        const renderSample = vi.fn(() => _jsx("div", { "data-testid": "sample", children: "Sample" }));
+        render(withTestProviders(_jsx(Example, { mediaType: multipleExamplesMediaType, mediaContent: mockMediaContent, renderSample: renderSample })));
+        // Should use 'cat' from useExampleKey
+        expect(renderSample).toHaveBeenCalledWith('cat');
+    });
+});
+//# sourceMappingURL=Example.test.js.map

package/lib/components/RequestSamples/__tests__/RequestSamples.test.d.ts

@@ -0,0 +1 @@
+export {};