diff --git a/assets/js/__test__/CompanyRegister-test.jsx b/assets/js/__test__/CompanyRegister-test.jsx
index ba9348cc0e6e0097b1e1ef08f2a561f5e68fc22c..0a46e09ad33cceecbe43f784b756b7b033f7c34c 100644
--- a/assets/js/__test__/CompanyRegister-test.jsx
+++ b/assets/js/__test__/CompanyRegister-test.jsx
@@ -1,9 +1,9 @@
 // /* eslint-disable no-unused-expressions */
 // import React from 'react';
 // import ReactTestUtils from 'react-addons-test-utils';
-// import Lowongan from '../components/ComponentRegister';
+// import Vacancy from '../components/ComponentRegister';
 //
-// describe('Lowongan', () => {
+// describe('Vacancy', () => {
 //  it('renders without problem', () => {
 //     let companyRegister = ReactTestUtils.renderIntoDocument(
 //       <CompanyRegister />);
diff --git a/assets/js/__test__/components/Lowongan-test.jsx b/assets/js/__test__/components/Lowongan-test.jsx
deleted file mode 100644
index 8b20f193d93d2bceeb2bdd739593f70be59cda9d..0000000000000000000000000000000000000000
--- a/assets/js/__test__/components/Lowongan-test.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable no-unused-expressions */
-import React from 'react';
-import ReactTestUtils from 'react-addons-test-utils';
-import Lowongan from '../../components/Lowongan';
-
-describe('Lowongan', () => {
- it('renders without problem', () => {
-    let lowongan = ReactTestUtils.renderIntoDocument(
-      <Lowongan />);
-    expect(lowongan).to.exist;
-
-    lowongan = ReactTestUtils.renderIntoDocument(
-      <Lowongan image="img" header="header" content="content" paragraph="paragraph"/>);
-    expect(lowongan).to.exist;
-  });
-});
\ No newline at end of file
diff --git a/assets/js/__test__/components/ModalAlert-test.jsx b/assets/js/__test__/components/ModalAlert-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..150c7f872bca902d4c759b9b20e2ded5951e50c1
--- /dev/null
+++ b/assets/js/__test__/components/ModalAlert-test.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import ModalAlert from '../../components/ModalAlert';
+
+describe('ModalAlert', () => {
+  it('renders without problem', () => {
+    const modalAlert = ReactTestUtils.renderIntoDocument(
+      <ModalAlert id={4} coverLetter="letter" onChangeValue={() => {}}/>);
+    expect(modalAlert).to.exist;
+  });
+});
\ No newline at end of file
diff --git a/assets/js/__test__/components/ModalPendaftaran-test.jsx b/assets/js/__test__/components/ModalPendaftaran-test.jsx
index f910a348011cc8d462dda8b3f3d116641695e931..55d6bfcac2d4965e7e1da3fb33a2f49c7c448e40 100644
--- a/assets/js/__test__/components/ModalPendaftaran-test.jsx
+++ b/assets/js/__test__/components/ModalPendaftaran-test.jsx
@@ -5,8 +5,17 @@ import ModalPendaftaran from '../../components/ModalPendaftaran';
 
 describe('ModalPendaftaran', () => {
  it('renders without problem', () => {
-    const ModalPendaftaran = ReactTestUtils.renderIntoDocument(
-      <ModalPendaftaran header="header" buttontTitle="buttonTitle" content="content"/>);
-    expect(ModalPendaftaran).to.exist;
+    const modalPendaftaran = ReactTestUtils.renderIntoDocument(
+      <ModalPendaftaran id={4} data={{key: 'value'}} buttonTitle="submit" />);
+    expect(modalPendaftaran).to.exist;
+ });
+
+  it('open without problem', () => {
+    const modalPendaftaran = ReactTestUtils.renderIntoDocument(
+      <ModalPendaftaran id={4} data={{ key: 'value' }} buttonTitle="submit" />);
+
+    const modal = ReactTestUtils.findRenderedDOMComponentWithTag(modalPendaftaran, 'Button');
+    ReactTestUtils.Simulate.click(modal);
   });
-});
\ No newline at end of file
+
+});
diff --git a/assets/js/__test__/components/Vacancy-test.jsx b/assets/js/__test__/components/Vacancy-test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7cf27c87d5ca520058c40de44dd2fd697989364b
--- /dev/null
+++ b/assets/js/__test__/components/Vacancy-test.jsx
@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import Vacancy from '../../components/Vacancy';
+
+describe('Vacancy', () => {
+  const response ={
+    close_time: '2019-03-28T05:55:42Z',
+      company: {
+      address: 'kebayoran baru',
+        id: 1,
+        logo: null,
+        name: 'tutup lapak',
+    },
+    created: '2017-03-28T07:05:47.128672Z',
+      description: 'Lorem ipsum dolbh.',
+      id: 3,
+      name: 'Software Engineer',
+      open_time: '2017-03-28T05:55:38Z',
+      updated: '2017-03-28T07:34:13.122093Z',
+      verified: true,
+  };
+
+  const response2 ={
+    close_time: '2019-03-28T05:55:42Z',
+    company: {
+      address: 'kebayoran baru',
+      id: 1,
+      logo: 'pictures',
+      name: 'tutup lapak',
+    },
+    created: '2017-03-28T07:05:47.128672Z',
+    description: 'Lorem ipsum dolbh.',
+    id: 3,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
+  };
+
+  it('renders null picture without problem', () => {
+    const lowongan = ReactTestUtils.renderIntoDocument(
+      <Vacancy data={response} />);
+    expect(lowongan).to.exist;
+  });
+
+  it('renders with picture without problem', () => {
+    const lowongan = ReactTestUtils.renderIntoDocument(
+      <Vacancy data={response2} />);
+    expect(lowongan).to.exist;
+  });
+});
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 46add0967aa13393a9dad70bfed2e1fab84cd692..011045bae8d78a60701f5131dcda75a7f2f8d413 100644
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -2,21 +2,41 @@
 import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import VacancyList from '../../components/VacancyList';
-import Lowongan from '../../components/Lowongan';
+import Server from '../../lib/Server';
 
 describe('VacancyList', () => {
-  it('created without problem', () => {
-    const vacancyList = new VacancyList();
-    expect(vacancyList).to.be.an.instanceof(VacancyList);
-  });
+  const fetchMock = require('fetch-mock');
+  const response = [{
+    close_time: '2019-03-28T05:55:42Z',
+    company: {
+      address: 'kebayoran baru',
+      id: 1,
+      logo: null,
+      name: 'tutup lapak',
+    },
+    created: '2017-03-28T07:05:47.128672Z',
+    description: 'Lorem ipsum dolbh.',
+    id: 3,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
+  }];
+  const response2 = { hello: 'not-world' };
 
   it('renders without problem', () => {
     const vacancyList = ReactTestUtils.renderIntoDocument(
-      <VacancyList vacancies={[{ key: 'value' }, { key2: 'value2' }]} />);
+      <VacancyList url="test" />);
     expect(vacancyList).to.exist;
+  });
 
-    React.Children.forEach(vacancyList.props.children, (child) => {
-      expect(child).to.be.an.instanceof(Lowongan);
+  it('success calling API', () => {
+    fetchMock.get('*', response);
+    const vacancyList = ReactTestUtils.renderIntoDocument(
+      <VacancyList url="test" />);
+    vacancyList.state.vacancies = response;
+    expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
+    expect(vacancyList.generateVacancies()).to.exist;
     });
   });
-});
+
diff --git a/assets/js/__test__/lib/Server-test.jsx b/assets/js/__test__/lib/Server-test.jsx
index 4c8818180ed3a474058b21cf2f47f5926fc8e812..2b3dd16ffff9b55a0ab2f0ef781dd0023790d209 100644
--- a/assets/js/__test__/lib/Server-test.jsx
+++ b/assets/js/__test__/lib/Server-test.jsx
@@ -24,7 +24,22 @@ import Server from './../../lib/Server';
 
 describe('Server get test', () => {
   const fetchMock = require('fetch-mock');
-  const response = { hello: 'world' };
+  const response = {
+    close_time: '2019-03-28T05:55:42Z',
+    company: {
+      address: 'kebayoran baru',
+      id: 1,
+      logo: null,
+      name: 'tutup lapak',
+    },
+    created: '2017-03-28T07:05:47.128672Z',
+    description: 'Lorem ipsum dolbh.',
+    id: 3,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
+  };
 
   it('Check Server get right response', () => {
     fetchMock.get('*', response);
@@ -85,6 +100,6 @@ describe('Server get test', () => {
 
   it('Check getcookie method', () => {
     document.cookie = ';test=test;';
-    expect(Server.getCookie('test')).to.not.exist;
+    expect(Server.getCookie('test')).to.exist;
   });
 });
diff --git a/assets/js/components/Lowongan.jsx b/assets/js/components/Lowongan.jsx
deleted file mode 100644
index 76ebdb82800c1df5fdb4793f05dabca5d645e3a3..0000000000000000000000000000000000000000
--- a/assets/js/components/Lowongan.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Button, Image as ImageComponent, Item, Rating } from 'semantic-ui-react'
-import ModalPendaftaran from './ModalPendaftaran';
-
-const defaultImage = "http://semantic-ui.com/images/wireframe/image.png";
-
-export default class Lowongan extends React.Component {
-  static propTypes = {
-    data: React.PropTypes.object.isRequired,
-  };
-
-  render() {
-    console.log(this.props.data);
-    console.log(this.props.data.company);
-    return (
-
-        <Item >
-          <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo: defaultImage} />
-          <Item.Content verticalAlign="middle">
-            <Item.Extra>
-                <h3>{ this.props.data.name }</h3>
-                <h4>{ this.props.data.company.name }</h4>
-                <h5>{ this.props.data.company.address }</h5>
-
-                <ModalPendaftaran id={this.props.data.id} data={{ header: this.props.data.name,
-                  description: this.props.data.description }} buttonTitle="Daftar" />
-
-            </Item.Extra>
-          </Item.Content>
-        </Item>
-
-    );
-  }
-}
\ No newline at end of file
diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index 6fb8e3092ea6bcf1f0800b46bbb84f41ee666f7b..e324ab74c260ea7ec88ea948ca80869fa42d37bb 100644
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Modal, Button, Icon } from 'semantic-ui-react';
 import Server from '../lib/Server';
-import Logger from '../lib/Logger';
 
 export default class ModalAlert extends React.Component {
   static propTypes = {
@@ -25,7 +24,6 @@ export default class ModalAlert extends React.Component {
   close = () => this.setState({ open: false });
 
   handleOpen() {
-    Logger.log(this.state);
     const requestData = { coverLetter: this.props.coverLetter };
     Server.post(`/students/${this.props.id}/application`, requestData).then((data) => {
       this.setState({
diff --git a/assets/js/components/ModalPendaftaran.jsx b/assets/js/components/ModalPendaftaran.jsx
index 549dd0e88b10dcd70528754d7c6ca9201c31c94b..1ced8744acc1a00ef9996d6da44a25d6eb7f8637 100644
--- a/assets/js/components/ModalPendaftaran.jsx
+++ b/assets/js/components/ModalPendaftaran.jsx
@@ -26,7 +26,7 @@ export default class ModalPendaftaran extends React.Component {
   }
 
   handleChange(event) {
-    // this.setState({ coverLetter: event.target.value });
+    this.setState({ coverLetter: event.target.value });
   }
 
   handleOpen() {
@@ -39,7 +39,7 @@ export default class ModalPendaftaran extends React.Component {
 
   render = () => (
     <Modal
-      trigger={<Button onClick={this.handleOpen}  floated='right'>{this.props.buttonTitle}</Button>}
+      trigger={<Button onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
       closeIcon="close"
       open={this.state.modalOpen}
       onClose={this.handleClose}
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..505d80e37380804c4831663d5e0be206dccd6c7d
--- /dev/null
+++ b/assets/js/components/Vacancy.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, Image as ImageComponent, Item, Rating } from 'semantic-ui-react'
+import ModalPendaftaran from './ModalPendaftaran';
+
+const defaultImage = "http://semantic-ui.com/images/wireframe/image.png";
+
+export default class Lowongan extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
+  };
+
+  render() {
+    return (
+      <Item >
+        <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo: defaultImage} />
+        <Item.Content verticalAlign="middle">
+          <Item.Extra>
+            <h3>{ this.props.data.name }</h3>
+            <h4>{ this.props.data.company.name }</h4>
+            <h5>{ this.props.data.company.address }</h5>
+
+            <ModalPendaftaran
+              id={this.props.data.id} data={{ header: this.props.data.name,
+              description: this.props.data.description }} buttonTitle="Daftar" />
+
+          </Item.Extra>
+        </Item.Content>
+      </Item>
+    );
+  }
+}
\ No newline at end of file
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index cae3def6dbde5af7cf72127dd7c8df95e92582a0..bc783ce4f721a5cb55026ce829bc50bc82031b43 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Item } from 'semantic-ui-react';
-import Lowongan from './Lowongan';
+import Lowongan from './Vacancy';
 import Server from '../lib/Server';
 
 export default class VacancyList extends React.Component {
@@ -11,9 +11,9 @@ export default class VacancyList extends React.Component {
 
   constructor(props) {
     super(props);
+    /* istanbul ignore next */
     this.state = { vacancies: [] };
     Server.get(this.props.url, false).then((data) => {
-      console.log(data);
       this.setState({ vacancies: data });
     }, () => {
     });
@@ -29,9 +29,7 @@ export default class VacancyList extends React.Component {
   render = () => {
     return (
       <Item.Group relaxed>
-        {/*<Item.Group relaxed>*/}
         { this.generateVacancies() }
-        {/*</Item.Group>*/}
       </Item.Group>
     );
   }