Fix multipart form submission (#26)

siren-js · Apr 20, 2023 · 33519f1 · 33519f1
1 parent 340f8aa
commit 33519f1
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
-    "@golevelup/ts-jest": "^0.3.4",
     "@types/jest": "^29.2.5",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",

diff --git a/src/serialize/default-serializer.spec.ts b/src/serialize/default-serializer.spec.ts
@@ -1,5 +1,3 @@
-import { createMock } from '@golevelup/ts-jest';
-
 import { nameField } from '../../test/stubs';
 import { defaultSerializer } from './default-serializer';
 import { fieldsToNameValuePairs } from './fields-to-name-value-pairs';
@@ -33,12 +31,12 @@ describe('defaultSerializer', () => {
 
   it('should serialize application/x-www-form-urlencoded', async () => {
     const type = 'application/x-www-form-urlencoded';
-    const params = createMock<URLSearchParams>();
-    mockedSerializeUrlEncodedForm.mockReturnValueOnce(params);
+    const content = new URLSearchParams();
+    mockedSerializeUrlEncodedForm.mockReturnValueOnce(content);
 
     const result = await defaultSerializer(type, fields);
 
-    expect(result).toStrictEqual({ contentType: type, content: params });
+    expect(result).toEqual({ content: content, contentType: type });
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledTimes(1);
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledWith(fields);
     expect(mockedSerializeUrlEncodedForm).toHaveBeenCalledTimes(1);
@@ -47,12 +45,12 @@ describe('defaultSerializer', () => {
 
   it('should serialize multipart/form-data', async () => {
     const type = 'multipart/form-data';
-    const content = 'foo';
+    const content = new FormData();
     mockedSerializeMultipartFormData.mockReturnValueOnce(content);
 
     const result = await defaultSerializer(type, fields);
 
-    expect(result).toEqual({ contentType: type, content });
+    expect(result).toEqual({ content, contentType: undefined });
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledTimes(1);
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledWith(fields);
     expect(mockedSerializeMultipartFormData).toHaveBeenCalledTimes(1);
@@ -66,7 +64,7 @@ describe('defaultSerializer', () => {
 
     const result = await defaultSerializer(type, fields);
 
-    expect(result).toEqual({ contentType: type, content });
+    expect(result).toEqual({ content, contentType: type });
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledTimes(1);
     expect(mockedFieldsToNamedValuePairs).toHaveBeenCalledWith(fields);
     expect(mockedSerializePlainText).toHaveBeenCalledTimes(1);

diff --git a/src/serialize/default-serializer.ts b/src/serialize/default-serializer.ts
@@ -23,10 +23,13 @@ const typeToSerializeFn = new Map<string, SerializeFn>([
 export const defaultSerializer: Serializer = (type: string, fields: Field[]): Promise<Serialization> =>
   new Promise((resolve, reject) => {
     const serialize = typeToSerializeFn.get(type);
-    return serialize == null
-      ? reject(new UnsupportedSerializerTypeError(type))
-      : resolve({
-          contentType: type,
-          content: serialize(fieldsToNameValuePairs(fields))
-        });
+    if (serialize == null) return reject(new UnsupportedSerializerTypeError(type));
+
+    const serialization = serialize(fieldsToNameValuePairs(fields));
+
+    return resolve({
+      content: serialization,
+      // let the Fetch API generate a boundary parameter for FormData
+      contentType: serialization instanceof FormData ? undefined : type
+    });
   });
diff --git a/src/serialize/serialization.ts b/src/serialize/serialization.ts
@@ -1,7 +1,12 @@
 /**
- * Result of serializing and {@link Action}
+ * Result of serializing an {@link Action}
  */
 export interface Serialization {
-  contentType: string;
   content: BodyInit;
+
+  /**
+   * Media type of `content`. Omit this value to let the Fetch API generate the
+   * `Content-Type` header.
+   */
+  contentType?: string;
 }
diff --git a/src/submit.spec.ts b/src/submit.spec.ts
@@ -8,7 +8,6 @@ describe('submit', () => {
   const baseUrl = 'https://api.example.com';
   const path = '/foo';
   const url = new URL(path, baseUrl).toString();
-  const responseBody = 'Success!';
 
   beforeEach(() => {
     if (!nock.isActive()) {
@@ -38,13 +37,12 @@ describe('submit', () => {
   )}`;
 
   it('should make HTTP GET request when method is missing', async () => {
-    const scope = nock(baseUrl).get(path).reply(200, responseBody);
+    const scope = nock(baseUrl).get(path).reply(204);
 
     const response = await submit(action);
 
     expect(response.url).toBe(url);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 
@@ -54,13 +52,12 @@ describe('submit', () => {
     action.href = url;
     action.method = method;
     action.fields = [nameField, emailField];
-    const scope = nock(baseUrl).intercept(`${path}?${urlEncodedForm}`, method).reply(200, responseBody);
+    const scope = nock(baseUrl).intercept(`${path}?${urlEncodedForm}`, method).reply(204);
 
     const response = await submit(action);
 
     expect(response.url).toBe(`${url}?${urlEncodedForm}`);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 
@@ -70,13 +67,12 @@ describe('submit', () => {
     action.href = url;
     action.method = method;
     action.fields = [nameField, emailField];
-    const scope = nock(baseUrl).intercept(path, method, urlEncodedForm).reply(200, responseBody);
+    const scope = nock(baseUrl).intercept(path, method, urlEncodedForm).reply(204);
 
     const response = await submit(action);
 
     expect(response.url).toBe(url);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 
@@ -96,40 +92,37 @@ describe('submit', () => {
     const serializer: Serializer = () => Promise.resolve({ content, contentType });
     const scope = nock(baseUrl, { reqheaders: { 'Content-Type': contentType } })
       .post(path, content)
-      .reply(200, responseBody);
+      .reply(204);
 
     const response = await submit(action, { serializer });
 
     expect(response.url).toBe(url);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 
   it('should accept and send request options', async () => {
     const apiKey = 'foo-bar-baz';
     const headers = { 'Api-Key': apiKey };
-    const scope = nock(baseUrl, { reqheaders: headers }).get(path).reply(200, responseBody);
+    const scope = nock(baseUrl, { reqheaders: headers }).get(path).reply(204);
 
     const response = await submit(action, { requestInit: { headers } });
 
     expect(response.url).toBe(url);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 
   it('should resolve relative URL', async () => {
     const action = new Action();
     action.name = 'do-something';
     action.href = path;
-    const scope = nock(baseUrl).get(path).reply(200, responseBody);
+    const scope = nock(baseUrl).get(path).reply(204);
 
     const response = await submit(action, { baseUrl });
 
     expect(response.url).toBe(url);
-    expect(response.status).toBe(200);
-    await expect(response.text()).resolves.toBe(responseBody);
+    expect(response.status).toBe(204);
     expect(scope.isDone()).toBe(true);
   });
 });
diff --git a/src/submit.ts b/src/submit.ts
@@ -51,7 +51,9 @@ export async function submit(action: Action, options: SubmitOptions = {}): Promi
     if (init.method === 'GET' || init.method === 'DELETE') {
       target.search = serialization.content.toString();
     } else {
-      init.headers = { ...init.headers, 'Content-Type': serialization.contentType };
+      if (serialization.contentType) {
+        init.headers = { ...init.headers, 'Content-Type': serialization.contentType };
+      }
       init.body = serialization.content;
     }
   }