[#144502159] [Refactor] #37 edit vacancyList dan Vacancy components to conform...

[#144502159] [Refactor] #37 edit vacancyList dan Vacancy components to conform with Pagination component

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

@@ -3,60 +3,84 @@ import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
 import Pagination from '../../components/Pagination';
+import Logger from '../../lib/Logger';
 
 describe('Pagination', () => {
   const response = {
-    items: [{
-            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,
-          }, {
-            close_time: '2019-03-28T05:55:42Z',
-            company: {
-              address: 'kebayoran baru',
-              id: 2,
-              logo: null,
-              name: 'tutup lapak',
-            },
-            created: '2017-03-28T07:05:47.128672Z',
-            description: 'Lorem ipsum dolbh.',
-            id: 2,
-            name: 'Software Engineer',
-            open_time: '2017-03-28T05:55:38Z',
-            updated: '2017-03-28T07:34:13.122093Z',
-            verified: true,
-          },
-          ],
-    next:'/next',
+    count: 4,
+    next: 'next',
+    previous: 'prev',
+    results: [{
+      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,
+    }, {
+      close_time: '2019-03-28T05:55:42Z',
+      company: {
+        address: 'kebayoran baru',
+        id: 2,
+        logo: null,
+        name: 'tutup lapak',
+      },
+      created: '2017-03-28T07:05:47.128672Z',
+      description: 'Lorem ipsum dolbh.',
+      id: 2,
+      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',
+  const response2 = {
+    count: 4,
+    next: null,
+    previous: null,
+    results: [{
+      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,
-      logo: null,
-      name: 'tutup lapak',
+      name: 'Software Engineer',
+      open_time: '2017-03-28T05:55:38Z',
+      updated: '2017-03-28T07:34:13.122093Z',
+      verified: true,
+    }, {
+      close_time: '2019-03-28T05:55:42Z',
+      company: {
+        address: 'kebayoran baru',
+        id: 2,
+        logo: null,
+        name: 'tutup lapak',
+      },
+      created: '2017-03-28T07:05:47.128672Z',
+      description: 'Lorem ipsum dolbh.',
+      id: 2,
+      name: 'Software Engineer',
+      open_time: '2017-03-28T05:55:38Z',
+      updated: '2017-03-28T07:34:13.122093Z',
+      verified: true,
     },
-    created: '2017-03-28T07:05:47.128672Z',
-    description: 'Lorem ipsum dolbh.',
-    id: 2,
-    name: 'Software Engineer',
-    open_time: '2017-03-28T05:55:38Z',
-    updated: '2017-03-28T07:34:13.122093Z',
-    verified: true,
-  }];
+    ],
+  };
 
   it('renders without problem', () => {
     fetchMock.get('*', response);
@@ -66,17 +90,26 @@ describe('Pagination', () => {
     fetchMock.restore();
   });
 
+  it('renders without problem when it is the first or last page', () => {
+    fetchMock.get('*', response2);
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <Pagination child={<div />} url="test" />);
+    expect(pagination).to.exist;
+    fetchMock.restore();
+  });
+
   it('get items without problem', () => {
     fetchMock.get('*', response);
     const pagination = ReactTestUtils.renderIntoDocument(
       <Pagination child={<div />} url="test" />);
-    pagination.getItemsData().then(() =>
-      expect(JSON.stringify(pagination.state.items)).to.equal(JSON.stringify(response.items)));
+    pagination.getItemsData().then(() => {
+      expect(JSON.stringify(pagination.state.items)).to.equal(JSON.stringify(response.items));
+    });
     fetchMock.restore();
   });
 
   it('renders without problem when failed getting data', () => {
-    fetchMock.get('*', 400);
+    fetchMock.get('*', 404);
     const pagination = ReactTestUtils.renderIntoDocument(
       <Pagination child={<div />} url="test" />);
     expect(pagination).to.exist;
@@ -84,11 +117,27 @@ describe('Pagination', () => {
   });
 
   it('can go prev without problem', () => {
+    fetchMock.restore();
     fetchMock.get('*', response);
     const pagination = ReactTestUtils.renderIntoDocument(
       <Pagination child={<div />} url="test" />);
-    const prev = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a')[0];
-    ReactTestUtils.Simulate.click(prev);
+    pagination.getItemsData().then(() => {
+      const prev = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[0];
+      ReactTestUtils.Simulate.click(prev);
+    });
+    pagination.handlePrev();
+    fetchMock.restore();
+  });
+
+  it('can refresh without problem', () => {
+    fetchMock.get('*', response);
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <Pagination child={<div />} url="test" />);
+    pagination.getItemsData().then(() => {
+      const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[1];
+      ReactTestUtils.Simulate.click(next);
+    });
+    pagination.refresh();
     fetchMock.restore();
   });
 
@@ -96,8 +145,26 @@ describe('Pagination', () => {
     fetchMock.get('*', response);
     const pagination = ReactTestUtils.renderIntoDocument(
       <Pagination child={<div />} url="test" />);
-    const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a')[2];
-    ReactTestUtils.Simulate.click(next);
+    pagination.getItemsData().then(() => {
+      const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[2];
+      ReactTestUtils.Simulate.click(next);
+    });
+    pagination.handleNext();
+    fetchMock.restore();
+  });
+
+  it('cannot go next or prev without problem', () => {
+    fetchMock.get('*', response2);
+    const pagination = ReactTestUtils.renderIntoDocument(
+      <Pagination child={<div />} url="test" />);
+    pagination.getItemsData().then(() => {
+      const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'Menu.Item')[2];
+      ReactTestUtils.Simulate.click(next);
+    });
+    pagination.state.first = true;
+    pagination.state.last = true;
+    pagination.handleNext();
+    pagination.handlePrev();
     fetchMock.restore();
   });
 });

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

@@ -40,34 +40,85 @@ describe('Vacancy', () => {
     verified: true,
   };
 
+  const studentUser = {
+    role: 'company',
+    data: {
+      url: 'http://localhost:8001/api/users/8/',
+      username: 'Tutuplapak',
+      email: '',
+      is_staff: false,
+      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,
+        birth_place: null,
+        birth_date: null,
+        major: null,
+        batch: null,
+        show_resume: false,
+        bookmarked_vacancies: [
+          3,
+          2,
+        ],
+        applied_vacancies: [
+          3,
+          1,
+        ],
+      },
+    },
+  };
+
+
   it('renders with null picture and apply button without problem', () => {
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response} />);
+      <Vacancy status={0} user={studentUser} data={response} />);
     expect(lowongan).to.exist;
   });
 
   it('renders with null picture and cancel button without problem', () => {
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Batal" data={response} />);
+      <Vacancy status={1} user={studentUser} data={response} />);
     expect(lowongan).to.exist;
   });
 
   it('renders with picture and apply button without problem', () => {
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} />);
+      <Vacancy status={0} user={studentUser} data={response2} />);
     expect(lowongan).to.exist;
   });
 
   it('renders with picture and cancel button without problem', () => {
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Batal" data={response2} />);
+      <Vacancy status={2} user={studentUser} data={response2} />);
+    expect(lowongan).to.exist;
+  });
+
+  it('renders for accepted without problem', () => {
+    const lowongan = ReactTestUtils.renderIntoDocument(
+      <Vacancy status={4} user={studentUser} data={response2} />);
+    expect(lowongan).to.exist;
+  });
+
+  it('renders for rejected without problem', () => {
+    const lowongan = ReactTestUtils.renderIntoDocument(
+      <Vacancy status={3} user={studentUser} data={response2} />);
     expect(lowongan).to.exist;
   });
 
   it('bookmarks without problem', () => {
     fetchMock.post('*', response);
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} />);
+      <Vacancy status="Daftar" user={studentUser} data={response2} />);
     const response3 = { student: { id: 1, name: 2 } };
     expect(lowongan.props.data.id).to.equal(3);
     Storage.set('user-data', response3);
@@ -78,7 +129,7 @@ describe('Vacancy', () => {
   it('cancel bookmarks without problem', () => {
     fetchMock.delete('*', { data: 'value' });
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} bookmarked={1} />);
+      <Vacancy status="Daftar" user={studentUser} data={response2} bookmarked={1} />);
     const response3 = { student: { id: 1, name: 2 } };
     lowongan.removeVacancyApplication();
     lowongan.openConfirmationModal();
@@ -92,7 +143,7 @@ describe('Vacancy', () => {
   it('cancel bookmarks with problem', () => {
     fetchMock.delete('*', 404);
     const lowongan = ReactTestUtils.renderIntoDocument(
-      <Vacancy status="Daftar" data={response2} bookmarked={1} />);
+      <Vacancy status="Daftar" user={studentUser} data={response2} bookmarked={1} />);
     const response3 = { student: { id: 1, name: 2 } };
     lowongan.removeVacancyApplication();
     expect(lowongan.props.data.id).to.equal(3);

assets/js/components/ApplicantList.jsx

@@ -10,7 +10,6 @@ export default class ApplicantList extends React.Component {
     status: React.PropTypes.number.isRequired,
   };
 
-
   constructor(props) {
     super(props);
     /* istanbul ignore next */

assets/js/components/CompanyList.jsx

@@ -16,7 +16,7 @@ export default class CompanyList extends React.Component {
     /* istanbul ignore next */
     this.state = { companies: [], loading: true };
     Server.get(this.props.url, false).then((data) => {
-      this.setState({ companies: data, loading: false });
+      this.setState({ companies: data.results, loading: false });
     });
 
     this.generateCompanies = this.generateCompanies.bind(this);

assets/js/components/Pagination.jsx

@@ -58,7 +58,7 @@ export default class Pagination extends React.Component {
     }
     this.setState({ first, last });
   }, error => error.then((r) => {
-    this.modalAlert.open(this.props.error, r.error);
+    this.modalAlert.open(this.props.error, r.detail);
   }));
 
   refresh() {

assets/js/components/Vacancy.jsx

 import React from 'react';
 import { Item, Rating, Button, Grid } from 'semantic-ui-react';
+import moment from 'moment';
 import ApplyModal from './ApplyModal';
 import Server from '../lib/Server';
 import ConfirmationModal from './ConfirmationModal';
 import ModalAlert from './ModalAlert';
-import moment from 'moment';
 
 const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';