Merge branch 'Features/admin-dashboard' into 'develop'

Features/admin dashboard

See merge request !14

assets/css/custom.css

@@ -13,6 +13,10 @@
   color:black;
 }
 
+.item-list {
+  word-wrap: break-word;
+  width: 100%;
+}
 
 .ui.card.register{
 background-color: #EEEEEE;
@@ -155,6 +159,8 @@ card .formRegis{
 
 .ui.pointing.secondary.menu{
   background-color: #ffffff;
+  margin-bottom: 10px;
+  margin-top: 0px;
 }
 
 .extra.extra-company h3{
@@ -237,3 +243,13 @@ card .formRegis{
   margin-left: 10%;
   margin-right: 10%;
 }
+
+
+.admin-bar{
+  margin: 0;
+  padding: 0 10px 0 0;
+  width: 100%;
+  text-align: right;
+  background-color: #304D8A;
+  color: white;
+}
\ No newline at end of file

assets/js/ApplicantPage.jsx

 import React from 'react';
 import Tabs from './components/Tabs';
-import Pane from './components/Pane';
-import Storage from './lib/Storage';
 import ApplicantList from './components/ApplicantList';
 import Applicant from './components/Applicant';
 
@@ -20,11 +18,8 @@ export default class ApplicantPage extends React.Component {
       errorFlag: false,
       company: { id: 1 },
     };
-    this.handleItemClick = this.handleItemClick.bind(this);
   }
 
-  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
-
   render() {
     const company = this.props.user.data.company;
     return (

assets/js/CompanyPage.jsx

+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import Tabs from './components/Tabs';
+import CompanyList from './components/CompanyList';
+import Company from './components/Company';
+
+export default class CompanyPage extends React.Component {
+
+  static propTypes = {
+    user: React.PropTypes.object.isRequired,
+  };
+
+  handleClick = () => window.open('/admin/');
+
+  render() {
+    return (
+      <div>
+        <div style={{ paddingLeft: '10px' }}>
+          <Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
+        </div>
+        <Tabs selected={0}>
+          <CompanyList label="Baru" key={1} url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`} status={Company.COMPANY_STATUS.NEW} />
+          <CompanyList label="Terverifikasi" key={2} url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`} status={Company.COMPANY_STATUS.VERIFIED} />
+          <CompanyList label="Ditolak" key={3} url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`} status={Company.COMPANY_STATUS.UNVERIFIED} />
+          <CompanyList label="Semua Perusahaan" key={4} url={'/companies/'} status={Company.COMPANY_STATUS.ALL} />
+        </Tabs>
+      </div>
+    );
+  }
+}

assets/js/CreateVacancy.jsx

@@ -5,7 +5,6 @@ import DatePicker from 'react-datepicker';
 import moment from 'moment';
 import ModalAlert from './components/ModalAlert';
 import Server from './lib/Server';
-import Storage from './lib/Storage';
 import Dumper from './lib/Dumper';
 
 export default class CreateVacancy extends React.Component {
@@ -20,6 +19,8 @@ export default class CreateVacancy extends React.Component {
     /* istanbul ignore next */
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.setCloseTime = this.setCloseTime.bind(this);
+    this.setOpenTime = this.setOpenTime.bind(this);
 
     this.state = {
       formLoading: false,
@@ -41,6 +42,14 @@ export default class CreateVacancy extends React.Component {
     });
   }
 
+  setOpenTime(date) {
+    this.setState({ open_time: date });
+  }
+
+  setCloseTime(date) {
+    this.setState({ close_time: date });
+  }
+
   handleChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };
@@ -60,7 +69,7 @@ export default class CreateVacancy extends React.Component {
     Server.sendRequest(url, method, data).then(() => {
       browserHistory.push('/lowongan');
     }, error => error.then((r) => {
-      this.modalAlert.open('Gagal Membuat Lowongan', Dumper.dump(r, '    '));
+      this.modalAlert.open('Gagal Membuat Lowongan', r.detail);
       this.setState({ formLoading: false });
     }));
   };
@@ -90,7 +99,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Buka Lowongan"
               selected={this.state.open_time}
-              onChange={date => this.setState({ open_time: date })}
+              onChange={this.setOpenTime}
               required
             />
             <Form.Field
@@ -98,7 +107,7 @@ export default class CreateVacancy extends React.Component {
               control={DatePicker}
               label="Waktu Tutup Lowongan"
               selected={this.state.close_time}
-              onChange={date => this.setState({ close_time: date })}
+              onChange={this.setCloseTime}
               required
             />
           </Form.Group>

assets/js/Dashboard.jsx

@@ -8,11 +8,12 @@ export default class Dashboard extends React.Component {
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node,
     ]).isRequired,
+    user: React.PropTypes.object.isRequired,
   };
 
   render = () => (
     <div>
-      <TopMenu />
+      <TopMenu user={this.props.user} />
       <div className="content"> {this.props.children} </div>
       <Footer />
     </div>

assets/js/VacancyPage.jsx

@@ -13,7 +13,7 @@ export default class VacancyPage extends React.Component {
     const role = user.role;
     if (role === 'student') {
       return user.data.student.id;
-    } else if (role === 'company') {
+    } else if (role === 'company' || role === 'admin') {
       return user.data.company.id;
     }
 
@@ -57,7 +57,7 @@ export default class VacancyPage extends React.Component {
           </Pane>
         </Tabs>
       );
-    } else if (this.props.user.role === 'company') {
+    } else if (this.props.user.role === 'company' || this.props.user.role === 'admin') {
       return (
         <VacancyList key={1} userId={this.state.id} url={`/companies/${this.state.id}/vacancies/`} type="company" />
       );

assets/js/__test__/ApplicantPage-test.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import ApplicantPage from '../ApplicantPage';
+
+describe('ApplicantPage', () => {
+  fetchMock.get('*', { data: 'value' });
+
+  const companyUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for companies without problem', () => {
+    const applicantPage = ReactTestUtils.renderIntoDocument(
+      <ApplicantPage user={companyUser} />);
+    expect(applicantPage).to.exist;
+  });
+});

assets/js/__test__/CompanyPage-test.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import CompanyPage from '../CompanyPage';
+
+describe('CompanyPage', () => {
+  fetchMock.get('*', { data: 'value' });
+
+  const adminUser = {
+    role: 'admin',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for admin without problem', () => {
+    const companyPage = ReactTestUtils.renderIntoDocument(
+      <CompanyPage user={adminUser} />);
+    expect(companyPage).to.exist;
+  });
+
+  it('click dashboard button problem', () => {
+    const companyPage = ReactTestUtils.renderIntoDocument(
+      <CompanyPage user={adminUser} />);
+    const dashboardButton = ReactTestUtils.findRenderedDOMComponentWithTag(companyPage, 'Button');
+    ReactTestUtils.Simulate.click(dashboardButton);
+    expect(companyPage).to.exist;
+    expect(dashboardButton).to.exist;
+  });
+});

assets/js/__test__/CreateVacancy-test.jsx

 import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
+import moment from 'moment';
 import CreateVacancy from '../CreateVacancy';
 import Storage from '../lib/Storage';
 
@@ -137,6 +138,8 @@ describe('CreateVacancy', () => {
     ReactTestUtils.Simulate.keyDown(openField, { key: 'Enter', keyCode: 13, which: 13 });
     ReactTestUtils.Simulate.click(closeField);
     ReactTestUtils.Simulate.keyDown(closeField, { key: 'Enter', keyCode: 13, which: 13 });
+    createVacancy.setOpenTime(moment());
+    createVacancy.setCloseTime(moment());
 
     expect(createVacancy.state.formLoading).to.equal(false);
     createVacancy.handleSubmit(new Event('click'));

assets/js/__test__/Dashboard-test.jsx

+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import Dashboard from '../Dashboard';
+
+describe('Dashboard', () => {
+  fetchMock.get('*', { data: 'value' });
+
+  const studentUser = {
+    role: 'student',
+    data: {
+      url: 'http://localhost:8000/api/users/9/',
+      username: 'muhammad.reza42',
+      email: 'muhammad.reza42@ui.ac.id',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8000/api/users/9/',
+          username: 'muhammad.reza42',
+          email: 'muhammad.reza42@ui.ac.id',
+          is_staff: false,
+        },
+        name: 'Muhammad R.',
+        created: '2017-03-28T13:33:46.147241Z',
+        updated: '2017-03-28T13:33:46.148248Z',
+        npm: 1406543593,
+        resume: null,
+        phone_number: null,
+        bookmarked_vacancies: [
+          3,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+  const companyUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8001/api/users/8/',
+          username: 'Tutuplapak',
+          email: '',
+          is_staff: false,
+        },
+        name: 'Tutuplapak',
+        created: '2017-03-28T07:30:10.535000Z',
+        updated: '2017-03-28T07:30:10.535000Z',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
+        verified: true,
+        logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
+        address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
+      },
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const adminUser = {
+    role: 'admin',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const supervisorUser = {
+    role: 'supervisor',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  const errorUser = {
+    role: 'error',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: null,
+    },
+  };
+
+  it('renders for company without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={companyUser} />);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for supervisor without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={supervisorUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for admin without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={adminUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for student without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={studentUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+
+  it('renders for error without problem', () => {
+    const dashboard = ReactTestUtils.renderIntoDocument(
+      <Dashboard user={errorUser}>
+        <div> test </div>
+      </Dashboard>);
+    expect(dashboard).to.exist;
+  });
+});
+

assets/js/__test__/Login.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import Login from '../Login';
+
+describe('Login', () => {
+  it('renders for login without problem', () => {
+    const login = ReactTestUtils.renderIntoDocument(<Login><div>test</div></Login>);
+    expect(login).to.exist;
+  });
+});
+

assets/js/__test__/TranscriptPage-test.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import TranscriptPage from '../TranscriptPage';
+
+describe('TranscriptPage', () => {
+  const data = {
+    transcript: [
+      { kelas: { nm_kls: 'kelas1' }, nilai: 'A' },
+      { kelas: { nm_kls: 'kelas2' }, nilai: 'B' },
+      { nilai: 'B' },
+    ],
+    name: 'Badak Terbang',
+  };
+
+  fetchMock.get('*', data);
+
+  it('renders for admin without problem', () => {
+    const transcriptPage = ReactTestUtils.renderIntoDocument(
+      <TranscriptPage params={{ id: 1 }} />);
+    transcriptPage.setState({data})
+    expect(transcriptPage).to.exist;
+  });
+});

assets/js/__test__/VacancyPage-test.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
 import VacancyPage from '../VacancyPage';
-import Storage from '../lib/Storage';
 
 describe('VacancyPage', () => {
   fetchMock.get('*', { data: 'value' });

assets/js/__test__/components/Applicant-test.jsx

@@ -52,31 +52,4 @@ describe('Applicant', () => {
     expect(applicant).to.exist;
     fetchMock.restore();
   });
-
-  // it('test apply without problem', () => {
-  //   const applyModal = ReactTestUtils.renderIntoDocument(
-  //     <Applicant />,
-  //   );
-  //   const response = { student: { id: 1, name: 2 } };
-  //
-  //   Storage.set('user-data', response);
-  //   fetchMock.post('*', { data: 'value' });
-  //   applyModal.open('Menghubungkan ke Server');
-  //   expect(applyModal.state.header).to.equal('Menghubungkan ke Server');
-  //   fetchMock.restore();
-  // });
-  //
-  // it('test apply with problem', () => {
-  //   const applyModal = ReactTestUtils.renderIntoDocument(
-  //     <Applicant />,
-  //   );
-  //   const response = { student: { id: 1, name: 2 } };
-  //
-  //   Storage.set('user-data', response);
-  //   fetchMock.post('*', 404);
-  //   applyModal.open('Menghubungkan ke Server', '', '', () => {});
-  //   applyModal.handleYes();
-  //   expect(applyModal.state.header).to.equal('Menghubungkan ke Server');
-  //   fetchMock.restore();
-  // });
 });

assets/js/__test__/components/ApplicantList-test.jsx

+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import fetchMock from 'fetch-mock';
+import ApplicantList from '../../components/ApplicantList';
+import Applicant from '../../components/Applicant';
+
+describe('ApplicantList', () => {
+
+  const vacancy = {
+    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: 1,
+    name: 'Software Engineer',
+    open_time: '2017-03-28T05:55:38Z',
+    updated: '2017-03-28T07:34:13.122093Z',
+    verified: true,
+  }
+
+  const student = {
+    role: 'student',
+    data: {
+      url: 'http://localhost:8000/api/users/9/',
+      username: 'muhammad.reza42',
+      email: 'muhammad.reza42@ui.ac.id',
+      is_staff: false,
+      company: null,
+      supervisor: null,
+      student: {
+        id: 3,
+        user: {
+          url: 'http://localhost:8000/api/users/9/',
+          username: 'muhammad.reza42',
+          email: 'muhammad.reza42@ui.ac.id',
+          is_staff: false,
+        },
+        name: 'Muhammad R.',
+        created: '2017-03-28T13:33:46.147241Z',
+        updated: '2017-03-28T13:33:46.148248Z',
+        npm: 1406543593,
+        resume: null,
+        phone_number: null,
+        bookmarked_vacancies: [
+          3,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+  const response = [
+    { id: 1, status: Applicant.APPLICATION_STATUS.ACCEPTED, student, vacancy },
+    { id: 2, status: Applicant.APPLICATION_STATUS.BOOKMARKED, student, vacancy },
+    { id: 3, status: Applicant.APPLICATION_STATUS.NEW, student, vacancy },
+    { id: 4, status: Applicant.APPLICATION_STATUS.REJECTED, student, vacancy },
+  ];
+
+  fetchMock.restore();
+  fetchMock.get('*', response);
+
+  it('renders without problem', () => {
+    const applicantList = ReactTestUtils.renderIntoDocument(
+      <ApplicantList status={Applicant.