Merge branch 'main' into fix/mdv-code-component

packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.spec.tsx

@@ -143,7 +143,7 @@ describe('HttpOperation', () => {
   });
 
   describe('Query Parameters', () => {
-    it('should render correct validations', async () => {
+    it('should render panel when there are query parameters', async () => {
       const data: IHttpOperation = {
         id: 'get',
         method: 'get',
@@ -180,11 +180,25 @@ describe('HttpOperation', () => {
       expect(queryParametersPanel).toBeInTheDocument();
       expect(queryParametersPanel).toBeVisible();
       expect(queryParametersPanel).toBeEnabled();
+    });
+
+    it('should not render panel when there are no header parameters', () => {
+      const data: IHttpOperation = {
+        id: 'get',
+        method: 'get',
+        path: '/path',
+        responses: [],
+        request: {
+          query: [],
+        },
+      };
 
-      expect(await screen.findByText(/parameter name$/)).toBeInTheDocument();
-      expect(await screen.findByText(/required/)).toBeInTheDocument();
-      expect(await screen.findByText(/deprecated/)).toBeInTheDocument();
-      expect(screen.queryByText(/example key/)).not.toBeInTheDocument();
+      const { unmount } = render(<HttpOperation data={data} />);
+
+      const headersPanel = screen.queryByRole('heading', { name: 'Query' });
+      expect(headersPanel).not.toBeInTheDocument();
+
+      unmount();
     });
 
     it('should not render default styles', () => {
@@ -258,8 +272,6 @@ describe('HttpOperation', () => {
       expect(headersPanel).toBeVisible();
       expect(headersPanel).toBeEnabled();
 
-      expect(screen.queryByText('parameter name')).toBeInTheDocument();
-
       unmount();
     });
 
@@ -284,7 +296,7 @@ describe('HttpOperation', () => {
   });
 
   describe('Path Parameters', () => {
-    it('should render correct validations', async () => {
+    it('should render panel when there are path parameters', async () => {
       const data: IHttpOperation = {
         id: 'get',
         method: 'get',
@@ -321,10 +333,6 @@ describe('HttpOperation', () => {
       expect(pathParametersPanel).toBeInTheDocument();
       expect(pathParametersPanel).toBeVisible();
       expect(pathParametersPanel).toBeEnabled();
-
-      expect(await screen.findByText('parameter name')).toBeInTheDocument();
-      expect(await screen.findByText('example value')).toBeInTheDocument();
-      expect(await screen.findByText('another example')).toBeInTheDocument();
     });
 
     it('should still show path parameters panel when there are no parameters', () => {

packages/elements-core/src/components/Docs/HttpOperation/Parameters.spec.tsx

@@ -0,0 +1,81 @@
+import { HttpParamStyles, IHttpParam } from '@stoplight/types';
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import { JSONSchema7 } from 'json-schema';
+import * as React from 'react';
+
+import { Parameter } from './Parameters';
+
+describe('Parameter', () => {
+  const data: IHttpParam = {
+    name: 'parameter name',
+    description: 'a parameter description',
+    schema: {
+      enum: ['foo', 'bar'],
+      default: 'foo',
+      type: 'string',
+    },
+    deprecated: true,
+    explode: true,
+    required: true,
+    style: HttpParamStyles.Form,
+    examples: [
+      {
+        value: 'example value',
+        key: 'example key',
+      },
+    ],
+  };
+
+  const schema = { type: 'array', items: { type: 'string', enum: ['foo', 'bar'] } } as JSONSchema7;
+
+  it('should render correct name and description', async () => {
+    render(<Parameter parameter={data} parameterType="query" />);
+
+    expect(await screen.findByText(/parameter name$/)).toBeInTheDocument();
+    expect(await screen.findByText(/a parameter description/)).toBeInTheDocument();
+  });
+
+  it('should render if parameter is deprecated', async () => {
+    render(<Parameter parameter={data} parameterType="query" />);
+
+    expect(await screen.findByText(/deprecated/)).toBeInTheDocument();
+  });
+
+  it('should render correct basic type', async () => {
+    render(<Parameter parameter={data} parameterType="query" />);
+
+    expect(await screen.findByText(/string/)).toBeInTheDocument();
+  });
+
+  it('should render correct array subtype', async () => {
+    render(<Parameter parameter={{ ...data, schema: schema }} parameterType="query" />);
+
+    expect(await screen.findByText(/array\[string\]/)).toBeInTheDocument();
+  });
+
+  it('should render correct validations', async () => {
+    render(<Parameter parameter={data} parameterType="query" />);
+
+    expect(await screen.findByText(/required/)).toBeInTheDocument();
+    expect(await screen.findByText(/Default value:/)).toBeInTheDocument();
+    expect(await screen.findAllByText(/foo/)).toHaveLength(2);
+    expect(await screen.findByText(/bar/)).toBeInTheDocument();
+  });
+
+  it('should render validations from schema items', async () => {
+    render(<Parameter parameter={{ ...data, schema: schema }} parameterType="query" />);
+
+    expect(await screen.findByText(/Allowed values:/)).toBeInTheDocument();
+    expect(await screen.findByText(/foo/)).toBeInTheDocument();
+    expect(await screen.findByText(/bar/)).toBeInTheDocument();
+  });
+
+  it('should render correct examples', async () => {
+    render(<Parameter parameter={data} parameterType="query" />);
+
+    expect(screen.queryByText(/Example value:/)).toBeInTheDocument();
+    expect(screen.queryByText(/example value/)).toBeInTheDocument();
+    expect(screen.queryByText(/example key/)).not.toBeInTheDocument();
+  });
+});

packages/elements-core/src/components/Docs/HttpOperation/Parameters.tsx

@@ -55,7 +55,9 @@ export const Parameter: React.FunctionComponent<IParameterProps> = ({ parameter,
   // TODO (CL): This can be removed when http operations are fixed https://github.com/stoplightio/http-spec/issues/26
   const description = get(parameter, 'description') || get(parameter, 'schema.description');
 
-  const type = get(parameter, 'schema.type', 'unknown');
+  const rootType = get(parameter, 'schema.type', 'unknown');
+  const type =
+    parameter.schema?.items?.['type'] && rootType === 'array' ? `array[${parameter.schema.items['type']}]` : rootType;
 
   const format = parameter.schema?.format;
 
@@ -78,6 +80,7 @@ export const Parameter: React.FunctionComponent<IParameterProps> = ({ parameter,
     {
       ...omit(parameter, ['name', 'required', 'deprecated', 'description', 'schema', 'style', 'examples']),
       ...omit(get(parameter, 'schema'), ['description', 'type', 'deprecated']),
+      ...omit(get(parameter, 'schema.items'), ['description', 'type', 'deprecated']),
       examples: [...parameterExamples, ...schemaExamplesArray],
     },
     // Remove empty arrays and objects