feat(deps): bump formdata-node from 3.7.0 to 4.0.0 (#2196)

- fix all related tests
- add backward compatibility with Buffer instances

Closes #2196

Author: char0n

package-lock.json

@@ -115,7 +115,7 @@
     "deep-extend": "~0.6.0",
     "fast-json-patch": "^3.0.0-1",
     "form-data-encoder": "^1.4.3",
-    "formdata-node": "^3.6.2",
+    "formdata-node": "^4.0.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.19",
     "qs": "^6.9.4",

package.json

@@ -1,5 +1,5 @@
 import { Readable } from 'stream';
-import { Encoder } from 'form-data-encoder';
+import { FormDataEncoder } from 'form-data-encoder';
 
 /**
  * formdata-node works in [email protected] via form-data-encoder only.
@@ -9,7 +9,7 @@ import { Encoder } from 'form-data-encoder';
  * TODO([email protected]): this can be removed when migrated to [email protected]
  */
 const foldFormDataToRequest = (formdata, request) => {
-  const encoder = new Encoder(formdata);
+  const encoder = new FormDataEncoder(formdata);
   const readableStream = Readable.from(encoder);
 
   // get rid of previous headers

src/http/fold-formdata-to-request.node.js

@@ -4,7 +4,7 @@ import jsYaml from 'js-yaml';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
 import { Buffer } from 'buffer';
-import { FormData } from 'formdata-node';
+import { FormData, File, Blob } from 'formdata-node';
 
 import { encodeDisallowedCharacters } from '../execute/oas3/style-serializer';
 import foldFormDataToRequest from './fold-formdata-to-request.node';
@@ -164,14 +164,12 @@ export function isFile(obj, navigatorObj) {
   }
 
   if (typeof File !== 'undefined' && obj instanceof File) {
-    // eslint-disable-line no-undef
     return true;
   }
   if (typeof Blob !== 'undefined' && obj instanceof Blob) {
-    // eslint-disable-line no-undef
     return true;
   }
-  if (typeof Buffer !== 'undefined' && obj instanceof Buffer) {
+  if (Buffer.isBuffer(obj)) {
     return true;
   }
 
@@ -340,6 +338,11 @@ function buildFormData(reqForm) {
    * Build a new FormData instance, support array as field value
    * OAS2.0 - when collectionFormat is multi
    * OAS3.0 - when explode of Encoding Object is true
+   *
+   * This function explicitly handles Buffers (for backward compatibility)
+   * if provided as a values to FormData. FormData can only handle USVString
+   * or Blob.
+   *
    * @param {Object} reqForm - ori req.form
    * @return {FormData} - new FormData instance
    */
@@ -349,8 +352,16 @@ function buildFormData(reqForm) {
       if (Array.isArray(value)) {
         // eslint-disable-next-line no-restricted-syntax
         for (const v of value) {
-          formData.append(key, v);
+          if (Buffer.isBuffer(v)) {
+            const blob = new Blob([v]);
+            formData.append(key, blob);
+          } else {
+            formData.append(key, v);
+          }
         }
+      } else if (Buffer.isBuffer(value)) {
+        const blob = new Blob([value]);
+        formData.append(key, blob);
       } else {
         formData.append(key, value);
       }

src/http/index.js

@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 import { Readable } from 'stream';
+import { File } from 'formdata-node';
 
 import { buildRequest } from '../../src/execute';
 import sampleMultipartOpenApi2 from '../data/sample-multipart-oas2';
@@ -226,7 +227,7 @@ describe('buildRequest - openapi 3.0', () => {
     });
   });
 
-  describe('formData with file', () => {
+  describe('formData with Buffer', () => {
     const file1 = Buffer.from('test file data1');
     const file2 = Buffer.from('test file data2');
 
@@ -257,6 +258,41 @@ describe('buildRequest - openapi 3.0', () => {
     });
   });
 
+  describe('formData with File/Blob', () => {
+    const file1 = new File(['test file data1'], 'file1.txt', {
+      type: 'text/plain',
+    });
+    const file2 = new File(['test file data2'], 'file2.txt', {
+      type: 'text/plain',
+    });
+
+    const req = buildRequest({
+      spec: sampleMultipartOpenApi3,
+      operationId: 'post_land_content_uploadImage',
+      requestBody: {
+        imageId: 'id',
+        'images[]': [file1, file2],
+      },
+    });
+
+    test('should return FormData entry list and item entries (in order)', async () => {
+      expect(req).toMatchObject({
+        method: 'POST',
+        url: '/api/v1/land/content/uploadImage',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': expect.stringMatching(/^multipart\/form-data/),
+        },
+      });
+      expect(req.body).toBeInstanceOf(Readable);
+      const itemEntries = req.formdata.getAll('images[]');
+
+      expect(itemEntries.length).toEqual(2);
+      expect(await itemEntries[0].text()).toEqual(await file1.text());
+      expect(await itemEntries[1].text()).toEqual(await file2.text());
+    });
+  });
+
   describe('respect Encoding Object', () => {
     test('Should be set to object in the style of deepObject', () => {
       const spec = {

test/http/http-multipart.js

@@ -1,5 +1,6 @@
 import xmock from 'xmock';
 import fetchMock from 'fetch-mock';
+import { File, Blob } from 'formdata-node';
 
 import http, {
   serializeHeaders,
@@ -440,20 +441,15 @@ describe('http', () => {
   });
 
   describe('isFile', () => {
-    // mock browser File class
-    global.File = class MockBrowserFile {};
-    // mock browser Blob class
-    global.Blob = class MockBrowserBlob {};
-
     const mockBrowserNavigator = {
       product: 'Gecko',
     };
     const mockReactNativeNavigator = {
       product: 'ReactNative',
     };
 
-    const browserFile = new global.File();
-    const browserBlob = new global.File();
+    const browserFile = new File(['file'], 'file.txt');
+    const browserBlob = new Blob(['blob']);
     const reactNativeFileObject = {
       uri: '/mock/path',
     };