Corrected tests

src/__test__/Form.test.js

@@ -2,15 +2,17 @@ import React from 'react';
 import Form from '../components/Form/Form.js';
 import { mount, shallow } from 'enzyme';
 
+import { Input, Warning } from '../components/Form/style';
+
 describe('Place holder', () => {
   const colorTest = (inputWindow, color) => {
-    const inputField = inputWindow.find('input').at(0).prop('style');
+    const inputField = inputWindow.find(Input).at(0).prop('style');
     expect(inputField).toHaveProperty('color', color);
   };
 
   it('Placeholder shows on loading and color is grey', () => {
     const inputWindow = shallow(<Form />);
-    expect(inputWindow.find('input').at(0).prop('value')).toBeTruthy();
+    expect(inputWindow.find(Input).at(0).prop('value')).toBeTruthy();
     colorTest(inputWindow, 'grey');
   });
 
@@ -60,12 +62,12 @@ describe('Validation', () => {
       target: { name: name, value: newValue }
     });
     inputField.simulate('blur');
-    expect(formWindow.find('.warning').at(0).length).toBe(1);
+    expect(formWindow.find(Warning).at(0).length).toBe(1);
   });
 
   it('Unmatched password shows a warning on blur', () => {
     const formWindow = mount(<Form />);
-    const inputField = formWindow.find('input').at(1);
+    const inputField = formWindow.find(Input).at(1);
     expect(inputField.prop('type')).toBe('password');
     const name = inputField.prop('name');
     const newValue = 'test';
@@ -73,13 +75,13 @@ describe('Validation', () => {
       target: { name: name, value: newValue }
     });
     inputField.simulate('blur');
-    expect(formWindow.find('.warning').length).toBeTruthy();
+    expect(formWindow.find(Warning).length).toBeTruthy();
   });
 
   it('Submitting an empty form shows all warnings', () => {
     const formWindow = mount(<Form />);
     formWindow.simulate('submit');
     // two warnings on two pwd input fields
-    expect(formWindow.find('.warning').length).toBeTruthy();
+    expect(formWindow.find(Warning).length).toBeTruthy();
   });
 });

src/__test__/TabView.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import TabView from '../components/Tabs/TabView';
 import { shallow, mount } from 'enzyme';
 
+import { Tab, TabContent } from '../components/Tabs/style';
+
 describe('<TabView />', () => {
   let props;
   let mountedTab;
@@ -19,9 +21,9 @@ describe('<TabView />', () => {
   });
 
   it('Default active on the first tab and not active on the rest', () => {
-    const tab = tabView().find('.tab');
-    expect(tab.at(0).hasClass('active')).toBe(true);
-    expect(tab.at(1).hasClass('active')).toBe(false);
+    const tab = tabView().find(Tab);
+    expect(tab.at(0).prop('isActive')).toBe(true);
+    expect(tab.at(1).prop('isActive')).toBe(false);
     expect(tabView().find('TabGroup').length).toBe(1);
   });
 
@@ -30,11 +32,9 @@ describe('<TabView />', () => {
       tabs: ['one', 'two', 'thre'],
       content: ['1', '2', '3']
     };
-    props = {
-      data
-    };
-    const tabContent = tabView().find('.tabContent');
-    expect(tabContent.find('div').text()).toBe('1');
+    props = { data };
+    const tabContent = tabView().find(TabContent);
+    expect(tabContent.text()).toBe('1');
   });
 
   it('Click on the inactive tab activate the tab', () => {
@@ -46,10 +46,10 @@ describe('<TabView />', () => {
       data
     };
     const tabViewWindow = tabView();
-    const tab1 = tabViewWindow.find('.tab').at(1);
+    const tab1 = tabViewWindow.find(Tab).at(1);
     const tab1Activated = tab1.simulate('click');
-    expect(tab1Activated.hasClass('active')).toBe(true);
-    const tabContent = tabViewWindow.find('.tabContent');
-    expect(tabContent.render().find('div').text()).toBe('2');
+    expect(tab1Activated.prop('isActive')).toBe(true);
+    const tabContent = tabViewWindow.find(TabContent);
+    expect(tabContent.render().text()).toBe('2');
   });
 });

src/components/Form/Form.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router';
 import { Motion, spring } from 'react-motion';
 
 import { TextArea, Warning, Input, Label } from './style';
 
-import './style.css';
-
 export default class Form extends React.Component {
   static placeHolder = {
     name: { message: 'Enter your name', color: 'grey', warnings: [] },
@@ -39,9 +36,9 @@ export default class Form extends React.Component {
         key="isMinLength"
       >
         {({ x }) =>
-          <span className="warning" style={{ opacity: x }}>
+          <Warning style={{ opacity: x }}>
             This field should at least have {length} characters.
-          </span>}
+          </Warning>}
       </Motion>
     );
     const color = this.state[name].color;
@@ -204,7 +201,7 @@ export default class Form extends React.Component {
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit} action={<Link to="/tabss" />}>
+      <form onSubmit={this.handleSubmit} action="/search">
         <Label htmlFor="name">Name:</Label>
         {this.renderInput('text', 'name')}
         {this.state.name.warnings}

src/components/Form/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Form from './Form';
 import SharedTile from '../Utils/SharedTitle';
 import Code from '../Utils/Code';

src/components/Form/style.css

@@ -1,42 +0,0 @@
-input:not([type=submit]) {
-    width: 150px;
-    margin: 8px 10px;
-    padding: 5px;
-    border: none;
-    border-bottom: 1px solid #ccc;
-    box-sizing: border-box;
-}
-
-input:not([type=submit]):focus {
-    outline: none;
-    border-bottom: 1px solid #66ccff;
-    box-sizing: border-box;
-}
-textarea:focus {
-    outline: none;
-    border-color: #66ccff;
-}
-textarea {
-    width: 200px;
-    height: 100px;
-    margin: 8px 0;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box;
-    display: block;
-}
-
-label {
-    display: block;
-}
-
-.warning {
-    display: block;
-    width: 400px;
-    color: red;
-    font-size: 80%;
-}
-
-input[type=submit] {
-    margin: 8px 0;
-}