fix(core): use param delimiter for arrays in TryIt (stoplightio#2274)

vimystic · Nov 3, 2022 · c5b5fbb · c5b5fbb
1 parent a9475aa
commit c5b5fbb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -24,7 +24,7 @@ jobs:
   build:
     working_directory: /mnt/ramdisk/project
     docker:
-      - image: cimg/node:lts
+      - image: cimg/node:16.17
     resource_class: large
     environment:
       CYPRESS_CACHE_FOLDER: /mnt/ramdisk/.cache/Cypress

diff --git a/packages/elements-core/src/components/TryIt/build-request.spec.ts b/packages/elements-core/src/components/TryIt/build-request.spec.ts
@@ -84,5 +84,25 @@ describe('Build Request', () => {
         { name: 'items_pipes_not_exploded', value: 'first|second' },
       ]);
     });
+
+    it('Splits string arrays by a respective delimiter', () => {
+      const params = getQueryParams({
+        httpOperation,
+        parameterValues: {
+          items: '"first,second"',
+          items_spaces: '"first second"',
+          items_pipes: '"first|second"',
+        },
+      });
+
+      expect(params).toStrictEqual([
+        { name: 'items', value: 'first' },
+        { name: 'items', value: 'second' },
+        { name: 'items_spaces', value: 'first' },
+        { name: 'items_spaces', value: 'second' },
+        { name: 'items_pipes', value: 'first' },
+        { name: 'items_pipes', value: 'second' },
+      ]);
+    });
   });
 });
diff --git a/packages/elements-core/src/components/TryIt/build-request.ts b/packages/elements-core/src/components/TryIt/build-request.ts
@@ -50,14 +50,20 @@ const getServerUrl = ({
   return serverUrl;
 };
 
+const delimiter = {
+  [HttpParamStyles.Form]: ',',
+  [HttpParamStyles.SpaceDelimited]: ' ',
+  [HttpParamStyles.PipeDelimited]: '|',
+};
+
 export const getQueryParams = ({
   httpOperation,
   parameterValues,
 }: Pick<BuildRequestInput, 'httpOperation'> & Pick<BuildRequestInput, 'parameterValues'>) => {
   const query = httpOperation.request?.query;
   if (!query) return [];
 
-  return query.reduce((acc, param) => {
+  return query.reduce<{ name: string; value: string }[]>((acc, param) => {
     const value = parameterValues[param.name] ?? '';
     if (value.length === 0) return acc;
 
@@ -85,20 +91,21 @@ export const getQueryParams = ({
     } else if (param.schema?.type === 'array' && value) {
       let nested: string[];
       try {
-        nested = JSON.parse(value);
-        if (!Array.isArray(nested)) throw Error();
+        const parsed = JSON.parse(value);
+        if (typeof parsed === 'string') {
+          nested = parsed.split(delimiter[param.style]);
+        } else if (Array.isArray(parsed)) {
+          nested = parsed;
+        } else {
+          throw Error();
+        }
       } catch (e) {
         throw new Error(`Cannot use param value "${value}". JSON array expected.`);
       }
 
       if (explode) {
         acc.push(...nested.map(value => ({ name: param.name, value: value.toString() })));
       } else {
-        const delimiter = {
-          [HttpParamStyles.Form]: ',',
-          [HttpParamStyles.SpaceDelimited]: ' ',
-          [HttpParamStyles.PipeDelimited]: '|',
-        };
         acc.push({
           name: param.name,
           value: nested.join(delimiter[param.style] ?? delimiter[HttpParamStyles.Form]),
@@ -109,7 +116,7 @@ export const getQueryParams = ({
     }
 
     return acc;
-  }, [] as Array<{ name: string; value: string }>);
+  }, []);
 };
 
 export async function buildFetchRequest({