Repository: jaredpalmer/formik
Pull request #337 (2018-01-09 23:07:04)

Fix unshift in FieldArray
Fixed a small bug with FieldArray's unshift (it was returning the original array), and added tests.

jaredpalmer: Good looks

Patch:
diff --git a/src/FieldArray.tsx b/src/FieldArray.tsx
index e3a5459..4023ce5 100644
--- a/src/FieldArray.tsx
+++ b/src/FieldArray.tsx
@@ -19,7 +19,7 @@ export interface ArrayHelpers {
   move: (from: number, to: number) => void;
   /** Insert an element at a given index into the array */
   insert: (index: number, value: any) => void;
-  /** Add an element to the  beginning of an array and return its length */
+  /** Add an element to the beginning of an array and return its length */
   unshift: (value: any) => number;
   /** Remove and element at an index of an array */
   remove<T>(index: number): T | undefined;
@@ -60,7 +60,7 @@ export class FieldArray extends React.Component<
     let arr = [];
     this.changeValue((array: any[]) => {
       arr = array ? [value, ...array] : [value];
-      return array;
+      return arr;
     });
     return arr.length;
   };


Test patch:
diff --git a/test/FieldArray.test.tsx b/test/FieldArray.test.tsx
index 22e07c3..25fa036 100644
--- a/test/FieldArray.test.tsx
+++ b/test/FieldArray.test.tsx
@@ -7,9 +7,12 @@ import { isFunction } from '../src/utils';
 // tslint:disable-next-line:no-empty
 const noop = () => {};
 
-const friends = ['jared', 'andrea', 'brent'];
 const TestForm: React.SFC<any> = p => (
-  <Formik onSubmit={noop} initialValues={{ friends }} {...p} />
+  <Formik
+    onSubmit={noop}
+    initialValues={{ friends: ['jared', 'andrea', 'brent'] }}
+    {...p}
+  />
 );
 
 describe('<FieldArray />', () => {
@@ -59,8 +62,8 @@ describe('<FieldArray />', () => {
       );
 
       arrayHelpers.push('jared');
-      expect(formikBag.values.friends).toEqual(friends.concat('jared'));
-      expect(formikBag.values.friends.length).toEqual(friends.length + 1);
+      const expected = ['jared', 'andrea', 'brent', 'jared'];
+      expect(formikBag.values.friends).toEqual(expected);
     });
   });
 
@@ -87,8 +90,122 @@ describe('<FieldArray />', () => {
       );
 
       const el = arrayHelpers.pop();
-      expect(formikBag.values.friends).toEqual(['jared', 'andrea']);
+      const expected = ['jared', 'andrea'];
+      expect(formikBag.values.friends).toEqual(expected);
       expect(el).toEqual('brent');
     });
   });
+
+  describe('props.swap()', () => {
+    it('should swap two values in field array', () => {
+      let formikBag: any;
+      let arrayHelpers: any;
+      ReactDOM.render(
+        <TestForm
+          render={(props: any) => {
+            formikBag = props;
+            return (
+              <FieldArray
+                name="friends"
+                render={arrayProps => {
+                  arrayHelpers = arrayProps;
+                  return null;
+                }}
+              />
+            );
+          }}
+        />,
+        node
+      );
+
+      arrayHelpers.swap(0, 2);
+      const expected = ['brent', 'andrea', 'jared'];
+      expect(formikBag.values.friends).toEqual(expected);
+    });
+  });
+
+  describe('props.insert()', () => {
+    it('should insert a value at given index of field array', () => {
+      let formikBag: any;
+      let arrayHelpers: any;
+      ReactDOM.render(
+        <TestForm
+          render={(props: any) => {
+            formikBag = props;
+            return (
+              <FieldArray
+                name="friends"
+                render={arrayProps => {
+                  arrayHelpers = arrayProps;
+                  return null;
+                }}
+              />
+            );
+          }}
+        />,
+        node
+      );
+
+      arrayHelpers.insert(1, 'brian');
+      const expected = ['jared', 'brian', 'andrea', 'brent'];
+      expect(formikBag.values.friends).toEqual(expected);
+    });
+  });
+
+  describe('props.unshift()', () => {
+    it('should add a value to start of field array and return its length', () => {
+      let formikBag: any;
+      let arrayHelpers: any;
+      ReactDOM.render(
+        <TestForm
+          render={(props: any) => {
+            formikBag = props;
+            return (
+              <FieldArray
+                name="friends"
+                render={arrayProps => {
+                  arrayHelpers = arrayProps;
+                  return null;
+                }}
+              />
+            );
+          }}
+        />,
+        node
+      );
+
+      const el = arrayHelpers.unshift('brian');
+      const expected = ['brian', 'jared', 'andrea', 'brent'];
+      expect(formikBag.values.friends).toEqual(expected);
+      expect(el).toEqual(4);
+    });
+  });
+
+  describe('props.remove()', () => {
+    it('should remove a value at given index of field array', () => {
+      let formikBag: any;
+      let arrayHelpers: any;
+      ReactDOM.render(
+        <TestForm
+          render={(props: any) => {
+            formikBag = props;
+            return (
+              <FieldArray
+                name="friends"
+                render={arrayProps => {
+                  arrayHelpers = arrayProps;
+                  return null;
+                }}
+              />
+            );
+          }}
+        />,
+        node
+      );
+
+      arrayHelpers.remove(1);
+      const expected = ['jared', 'brent'];
+      expect(formikBag.values.friends).toEqual(expected);
+    });
+  });
 });