feat(core): INT-1997 Add optional target parameter

bigcommerce · Oct 23, 2019 · 6676d75 · 6676d75
1 parent 61dea44
commit 6676d75
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/src/form-builder.ts b/src/form-builder.ts
@@ -1,12 +1,12 @@
 export default class FormBuilder {
-    build(url: string, data: { [key: string]: any }): HTMLFormElement {
+    build(url: string, data: { [key: string]: any }, target?: string): HTMLFormElement {
         const form = document.createElement('form');
 
         form.style.display = 'none';
 
         form.setAttribute('action', url);
         form.setAttribute('method', 'POST');
-        form.setAttribute('target', '_top');
+        form.setAttribute('target', target || '_top');
 
         Object.keys(data)
             .forEach(key => {

diff --git a/src/form-poster.ts b/src/form-poster.ts
@@ -11,8 +11,8 @@ export default class FormPoster {
         private _options?: FormPosterOptions
     ) {}
 
-    postForm(url: string, data: { [key: string]: any }, callback?: () => void): void {
-        const form = this._formBuilder.build(this._prependHost(url), data);
+    postForm(url: string, data: { [key: string]: any }, callback?: () => void, target?: string): void {
+        const form = this._formBuilder.build(this._prependHost(url), data, target);
 
         window.addEventListener('unload', function handleUnload() {
             window.removeEventListener('unload', handleUnload);

diff --git a/test/form-builder.spec.ts b/test/form-builder.spec.ts
@@ -10,8 +10,9 @@ describe('FormBuilder', () => {
     describe('#build()', () => {
         const url = '/url/123';
         const data = { field_1: 'foo', field_2: 'bar' };
+        const target = 'target_iframe';
 
-        it('returns a HTML form with hidden input fields', () => {
+        it('returns a HTML form with hidden input fields with the default target if no target is provided', () => {
             const output = formBuilder.build(url, data);
             const expectedOutput = (
                 '<form style="display: none;" action="/url/123" method="POST" target="_top">' +
@@ -23,5 +24,18 @@ describe('FormBuilder', () => {
             expect(output.outerHTML)
                 .toEqual(expectedOutput);
         });
+
+        it('returns a HTML form with hidden input fields and overrides the target when provided', () => {
+            const output = formBuilder.build(url, data, target);
+            const expectedOutput = (
+                '<form style="display: none;" action="/url/123" method="POST" target="' + target + '">' +
+                    '<input name="field_1" type="hidden" value="foo">' +
+                    '<input name="field_2" type="hidden" value="bar">' +
+                '</form>'
+            );
+
+            expect(output.outerHTML)
+                .toEqual(expectedOutput);
+        });
     });
 });
diff --git a/test/form-poster.spec.ts b/test/form-poster.spec.ts
@@ -19,17 +19,28 @@ describe('FormPoster', () => {
     describe('#postForm()', () => {
         const url = '/url/123';
         const data = { field_1: 'foo', field_2: 'bar' };
+        const target = 'target_iframe';
 
         beforeEach(() => {
             jest.spyOn(form, 'submit')
                 .mockImplementation(jest.fn());
         });
 
-        it('posts the data using a hidden HTML form', () => {
+        it('posts the data using a hidden HTML form with the default target', () => {
             formPoster.postForm(url, data);
 
             expect(formBuilder.build)
-                .toHaveBeenCalledWith(url, data);
+                .toHaveBeenCalledWith(url, data, undefined);
+
+            expect(form.submit)
+                .toHaveBeenCalled();
+        });
+
+        it('posts the data using a hidden HTML form with the provided target', () => {
+            formPoster.postForm(url, data, undefined, target);
+
+            expect(formBuilder.build)
+                .toHaveBeenCalledWith(url, data, target);
 
             expect(form.submit)
                 .toHaveBeenCalled();
@@ -41,7 +52,7 @@ describe('FormPoster', () => {
             formPoster.postForm(url, data);
 
             expect(formBuilder.build)
-                .toHaveBeenCalledWith('https://foobar.com/url/123', data);
+                .toHaveBeenCalledWith('https://foobar.com/url/123', data, undefined);
         });
 
         it('triggers the callback after posting the data', () => {