feat: add field component add form field component which imports styl…

…es and creates foundation

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "stage-0"]
+  "presets": ["env", "stage-0", "react"]
 }

package.json

@@ -39,6 +39,7 @@
     "babel-core": "^6.26.0",
     "babel-jest": "^22.4.1",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "coveralls": "^3.0.0",
     "enzyme": "^3.3.0",

src/index.test.jsx

@@ -1,6 +1,7 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 
+import formFieldFoundation from './foundation';
 import FormField from './index';
 
 const HTML_FOR = 'HTML_FOR';
@@ -30,3 +31,88 @@ test('<FormField /> > Renders extra classNames based on props', () => {
 
   expect(actual).toBe(expected);
 });
+
+test('<FormField /> > Adds the default foundation', () => {
+  const RIPPLE_ACTIVATE = () => 'RIPPLE_ACTIVATE';
+  const RIPPLE_DEACTIVATE = () => 'RIPPLE_DEACTIVATE';
+  const wrapper = mount(
+    <FormField
+      htmlFor={HTML_FOR}
+      label={LABEL}
+      rippleActivate={RIPPLE_ACTIVATE}
+      rippleDeactivate={RIPPLE_DEACTIVATE}
+    />,
+  );
+  const instance = wrapper.instance();
+  const expected = formFieldFoundation({
+    activateElementInputRipple: RIPPLE_ACTIVATE,
+    deactivateElementInputRipple: RIPPLE_DEACTIVATE,
+    elementLabel: instance.elementLabel,
+  });
+  expected.init();
+
+  const actual = instance.formFieldFoundation;
+
+  expect(JSON.stringify(actual)).toEqual(JSON.stringify(expected));
+});
+
+test('<FormField /> > Destroys the default foundation when the component unmounts', () => {
+  const wrapper = mount(<FormField htmlFor={HTML_FOR} label={LABEL} />);
+  const instance = wrapper.instance();
+  instance.formFieldDestroy = jest.fn();
+
+  wrapper.unmount();
+
+  expect(instance.formFieldDestroy).toHaveBeenCalledTimes(1);
+});
+
+test('<FormField /> > Creates the foundation on mount', () => {
+  const formFieldCreate = jest.fn();
+  const wrapper = shallow(
+    <FormField htmlFor={HTML_FOR} label={LABEL} />,
+    { disableLifecycleMethods: true },
+  );
+  const instance = wrapper.instance();
+  const expected = 1;
+  instance.formFieldCreate = formFieldCreate;
+
+  instance.componentDidMount();
+  const actual = formFieldCreate.mock.calls.length;
+
+  expect(actual).toBe(expected);
+});
+
+test('<FormField /> > Destroys the foundation on unmount', () => {
+  const formFieldDestroy = jest.fn();
+  const wrapper = shallow(
+    <FormField htmlFor={HTML_FOR} label={LABEL} />,
+    { disableLifecycleMethods: true },
+  );
+  const instance = wrapper.instance();
+  const expectedFormFieldDestroy = 1;
+  const expectedFoundation = undefined;
+  instance.formFieldDestroy = formFieldDestroy;
+
+  instance.componentWillUnmount();
+  const actualFormFieldDestroy = formFieldDestroy.mock.calls.length;
+  const actualFoundation = instance.formFieldFoundation;
+
+  expect(actualFormFieldDestroy).toBe(expectedFormFieldDestroy);
+  expect(actualFoundation).toBe(expectedFoundation);
+});
+
+test('<FormField /> > formFieldDestroy() destroys the foundation', () => {
+  const destroy = jest.fn();
+  const wrapper = shallow(
+    <FormField htmlFor={HTML_FOR} label={LABEL} />,
+    { disableLifecycleMethods: true },
+  );
+  const instance = wrapper.instance();
+  const expected = 1;
+  instance.formFieldFoundation = { destroy };
+
+  instance.formFieldDestroy();
+  const actual = destroy.mock.calls.length;
+
+  expect(actual).toBe(expected);
+});