Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 0c8f31b6 authored by Zamil Majdy's avatar Zamil Majdy
Browse files

[#140656091] [Refactor] Heavily refactor vacancy related (efek merge userstory 4 :')

parent b8438bad
Hide whitespace changes
Inline Side-by-side
assets/css/custom.css
View file @ 0c8f31b6
......@@ -8,11 +8,6 @@
-moz-box-sizing: border-box;
}
.applicant{
margin-left: 150px;
margin-right: 150px;
}
.ui.inverted.segment.header{
background-color: #EEEEEE;
color:black;
......
assets/js/VacancyPage.jsx
View file @ 0c8f31b6
......@@ -43,7 +43,6 @@ export default class VacancyPage extends React.Component {
<Pane label="Lamaran saya" >
<VacancyList
key={2}
status="Batal"
userId={this.state.id}
url={`/students/${this.state.id}/applied-vacancies/`}
/>
......
assets/js/__test__/components/ApplyModal-test.jsx
View file @ 0c8f31b6
......@@ -12,10 +12,11 @@ describe('ApplyModal', () => {
it('open without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<ApplyModal id={4} data={{ key: 'value' }} buttonTitle="submit" />);
<ApplyModal id={4} data={{ key: 'value' }} buttonTitle="submit" apply={() => {}}/>);
const modal = ReactTestUtils.findRenderedDOMComponentWithTag(modalPendaftaran, 'Button');
modalPendaftaran.handleApply();
ReactTestUtils.Simulate.click(modal);
expect(modalPendaftaran).to.exist;
});
it('change without problem', () => {
......
assets/js/__test__/components/CancelModal-test.jsx
View file @ 0c8f31b6
/* eslint-disable no-unused-expressions */
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import fetchMock from 'fetch-mock';
import CancelModal from '../../components/CancelModal';
import Storage from '../../lib/Storage';
describe('CancelModal', () => {
it('renders without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
expect(modalPendaftaran).to.exist;
});
it('open without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
const modal = ReactTestUtils.findRenderedDOMComponentWithTag(modalPendaftaran, 'Button');
ReactTestUtils.Simulate.click(modal);
expect(modalPendaftaran.state.modalOpen).to.equal(true);
});
it('close without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
modalPendaftaran.handleClose();
expect(modalPendaftaran.state.modalOpen).to.equal(false);
});
it('remove vacancy without problem', () => {
fetchMock.delete('*', { data: 'value' });
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
const response3 = { student: { id: 1, name: 2 } };
Storage.set('user-data', response3);
modalPendaftaran.removeVacancy();
expect(modalPendaftaran.state.header).to.exist;
fetchMock.restore();
});
it('remove vacancy with problem', () => {
fetchMock.delete('*', 404);
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
const response3 = { student: { id: 1, name: 2 } };
Storage.set('user-data', response3);
modalPendaftaran.removeVacancy();
expect(modalPendaftaran.state.header).to.exist;
fetchMock.restore();
});
it('confirm with problem', () => {
fetchMock.delete('*', 404);
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
modalPendaftaran.confirm();
expect(modalPendaftaran.state.header).to.equal('Permintaan gagal');
fetchMock.restore();
});
it('render next modal without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
modalPendaftaran.state.confirmed = true;
modalPendaftaran.forceUpdate()
expect(modalPendaftaran).to.exist;
});
});
// /* eslint-disable no-unused-expressions */
// import React from 'react';
// import ReactTestUtils from 'react-addons-test-utils';
// import fetchMock from 'fetch-mock';
// import ConfirmationModal from '../../components/ConfirmationModal';
// import Storage from '../../lib/Storage';
//
// describe('ConfirmationModal', () => {
// it('renders without problem', () => {
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
// expect(modalPendaftaran).to.exist;
// });
//
// it('open without problem', () => {
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// const modal = ReactTestUtils.findRenderedDOMComponentWithTag(modalPendaftaran, 'Button');
// ReactTestUtils.Simulate.click(modal);
// expect(modalPendaftaran.state.modalOpen).to.equal(true);
// });
//
// it('close without problem', () => {
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// modalPendaftaran.handleClose();
// expect(modalPendaftaran.state.modalOpen).to.equal(false);
// });
//
// it('remove vacancy without problem', () => {
// fetchMock.delete('*', { data: 'value' });
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// const response3 = { student: { id: 1, name: 2 } };
// Storage.set('user-data', response3);
// modalPendaftaran.removeVacancy();
// expect(modalPendaftaran.state.header).to.exist;
// fetchMock.restore();
// });
//
// it('remove vacancy with problem', () => {
// fetchMock.delete('*', 404);
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// const response3 = { student: { id: 1, name: 2 } };
// Storage.set('user-data', response3);
// modalPendaftaran.removeVacancy();
// expect(modalPendaftaran.state.header).to.exist;
// fetchMock.restore();
// });
//
// it('confirm with problem', () => {
// fetchMock.delete('*', 404);
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// modalPendaftaran.confirm();
// expect(modalPendaftaran.state.header).to.equal('Permintaan gagal');
// fetchMock.restore();
// });
//
// it('render next modal without problem', () => {
// const modalPendaftaran = ReactTestUtils.renderIntoDocument(
// <ConfirmationModal id={4} />);
//
// modalPendaftaran.state.confirmed = true;
// modalPendaftaran.forceUpdate()
// expect(modalPendaftaran).to.exist;
// });
// });
assets/js/__test__/components/ApplyConfirmationModal-test.jsx → assets/js/__test__/components/ConfirmationModal-test.jsx
View file @ 0c8f31b6
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import ApplyConfirmationModal from '../../components/ApplyConfirmationModal';
import ConfirmationModal from '../../components/ConfirmationModal';
import fetchMock from 'fetch-mock';
import Storage from '../../lib/Storage';
import Server from '../../lib/Server';
describe('ApplyConfirmationModal', () => {
describe('ConfirmationModal', () => {
it('renders without problem', () => {
const applyModal = ReactTestUtils.renderIntoDocument(
<ApplyConfirmationModal id={4} coverLetter="letter" onChangeValue={() => {}} />,
<ConfirmationModal />,
);
expect(applyModal).to.exist;
});
it('test apply without problem', () => {
const applyModal = ReactTestUtils.renderIntoDocument(
<ApplyConfirmationModal id={4} coverLetter="letter" onChangeValue={() => {}} />,
<ConfirmationModal />,
);
const response = { student: { id: 1, name: 2 } };
Storage.set('user-data', response);
fetchMock.post('*', { data: 'value' });
applyModal.open();
applyModal.handleOpen();
applyModal.close();
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(
<ApplyConfirmationModal id={4} coverLetter="letter" onChangeValue={() => {}} />,
<ConfirmationModal />,
);
const response = { student: { id: 1, name: 2 } };
Storage.set('user-data', response);
fetchMock.post('*', 404);
applyModal.open();
applyModal.handleOpen();
applyModal.close();
applyModal.open('Menghubungkan ke Server', '', '', () => {});
applyModal.handleYes();
expect(applyModal.state.header).to.equal('Menghubungkan ke Server');
fetchMock.restore();
});
});
\ No newline at end of file
});
assets/js/__test__/components/Vacancy-test.jsx
View file @ 0c8f31b6
......@@ -72,6 +72,7 @@ describe('Vacancy', () => {
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
expect(lowongan.bookmark()).to.be.undefined;
fetchMock.restore();
});
it('cancel bookmarks without problem', () => {
......@@ -79,8 +80,49 @@ describe('Vacancy', () => {
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1}/>);
const response3 = { student: { id: 1, name: 2 } };
lowongan.removeVacancyApplication();
lowongan.openConfirmationModal();
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
expect(lowongan.bookmark()).to.be.undefined;
fetchMock.restore();
});
it('cancel bookmarks with problem', () => {
fetchMock.delete('*', 404);
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1}/>);
const response3 = { student: { id: 1, name: 2 } };
lowongan.removeVacancyApplication();
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
expect(lowongan.bookmark()).to.be.undefined;
fetchMock.restore();
});
it('apply without problem', () => {
fetchMock.post('*', response);
fetchMock.delete('*', response);
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1}/>);
const response3 = { student: { id: 1, name: 2 } };
lowongan.apply(1);
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
expect(lowongan.bookmark()).to.be.undefined;
fetchMock.restore();
});
it('apply with problem', () => {
fetchMock.post('*', 404);
fetchMock.delete('*', response);
const lowongan = ReactTestUtils.renderIntoDocument(
<Vacancy status="Daftar" data={response2} bookmarked={1}/>);
const response3 = { student: { id: 1, name: 2 } };
lowongan.apply(1);
expect(lowongan.props.data.id).to.equal(3);
Storage.set('user-data', response3);
expect(lowongan.bookmark()).to.be.undefined;
fetchMock.restore();
});
});
assets/js/__test__/components/VacancyList-test.jsx
View file @ 0c8f31b6
......@@ -15,7 +15,24 @@ describe('VacancyList', () => {
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 3,
id: 1,
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: 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',
......@@ -43,7 +60,7 @@ describe('VacancyList', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" />);
vacancyList.updateBookmarkList();
vacancyList.updateStatusList();
expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
fetchMock.restore();
});
......@@ -54,6 +71,7 @@ describe('VacancyList', () => {
<VacancyList userId={1} url="test" />);
vacancyList.state.vacancies = response;
vacancyList.state.bookmarkList = [{ id: 5 }, { id: 3 }, { id: 1 }];
vacancyList.updateStatusList();
expect(vacancyList.generateVacancies()).to.exist;
fetchMock.restore();
});
......@@ -78,7 +96,7 @@ describe('VacancyList', () => {
});
it('success delete vacancy', (done) => {
fetchMock.delete('*', response);
fetchMock.delete('*', response2);
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" deleteCallback={() => {}} />);
......
assets/js/components/ApplyConfirmationModal.jsx deleted 100644 → 0
View file @ b8438bad
import React from 'react';
import { Modal, Button, Icon } from 'semantic-ui-react';
import Server from '../lib/Server';
import Storage from '../lib/Storage';
export default class ApplyConfirmationModal extends React.Component {
static propTypes = {
id: React.PropTypes.number.isRequired,
onChangeValue: React.PropTypes.func.isRequired,
coverLetter: React.PropTypes.string,
status: React.PropTypes.string.isRequired,
};
static defaultProps = {
coverLetter: '',
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
open: false,
header: 'Menghubungkan ke Server',
content: 'Harap menunggu, permintaan anda sedang diproses...',
};
this.handleOpen = this.handleOpen.bind(this);
}
open = () => this.setState({ open: true });
close = () => this.setState({ open: false });
handleOpen() {
const studentId = Storage.get('user-data').student.id;
const daftarSuccess = 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n';
const daftarFailed = 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n';
const requestData = { vacancy_id: this.props.id, cover_letter: this.props.coverLetter };
Server.post(`/students/${studentId}/applied-vacancies/`, requestData).then(() => {
this.setState({
header: 'Pendaftaran Berhasil',
content: daftarSuccess,
});
}, () => {
this.setState({
header: 'Pendaftaran Gagal',
content: daftarFailed,
});
});
}
render() {
const { open } = this.state;
const buttonColor = this.props.status === 'Daftar' ? 'blue' : 'red';
return (
<Modal
open={open}
onOpen={this.open}
onClose={this.close}
size="small"
basic
trigger={<Button color={buttonColor} onClick={this.handleOpen}> {this.props.status} <Icon name="right chevron" /></Button>}
>
<Modal.Header>{this.state.header}</Modal.Header>
<Modal.Content>
<p>{this.state.content}</p>
</Modal.Content>
<Modal.Actions>
<Button icon="checkmark" color="green" content="All Done" onClick={this.props.onChangeValue} />
</Modal.Actions>
</Modal>
);
}
}
assets/js/components/ApplyModal.jsx
View file @ 0c8f31b6
import React from 'react';
import { Modal, Button, TextArea, Form } from 'semantic-ui-react';
import ApplyConfirmationModal from './ApplyConfirmationModal';
import { Icon, Modal, Button, TextArea, Form } from 'semantic-ui-react';
import ModalAlert from './../components/ModalAlert';
export default class ApplyModal extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
id: React.PropTypes.number.isRequired,
active: React.PropTypes.bool.isRequired,
buttonTitle: React.PropTypes.string.isRequired,
apply: React.PropTypes.func.isRequired,
};
constructor(props) {
......@@ -15,9 +16,11 @@ export default class ApplyModal extends React.Component {
this.state = {
modalOpen: false,
coverLetter: '',
load: false,
};
this.handleChange = this.handleChange.bind(this);
this.handleOpen = this.handleOpen.bind(this);
this.handleApply = this.handleApply.bind(this);
}
handleChange(event) {
......@@ -32,48 +35,48 @@ export default class ApplyModal extends React.Component {
modalOpen: false,
});
handleApply = () => {
this.load();
this.props.apply();
};
load = () => this.setState({ load: true });
render = () => (
<Modal
trigger={<Button primary onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
closeIcon="close"
open={this.state.modalOpen}
onClose={this.handleClose}
>
<Modal.Header>{this.props.data.header}</Modal.Header>
<Modal.Content>
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
<Modal.Description>
<Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
{this.props.data.description}
</Modal.Description>
{this.props.active && (
<div className="coverLetter">
<div className="linkCV">
<a> your latest CV </a>
</div>
<h5> Write your Cover Letter </h5>
<Form >
<TextArea placeholder="Tell us more" size='big' onChange={this.handleChange}/>
</Form>
<a> your latest CV </a>
</div>
<div>
<h5> Write your Cover Letter </h5>
<Form >
<TextArea placeholder="Tell us more" size="big" onChange={this.handleChange} />
</Form>
</div>
</div>
)}
</Modal.Content>
<Modal.Actions>
<ApplyConfirmationModal
id={this.props.id}
onChangeValue={this.handleClose}
coverLetter={this.state.coverLetter}
status="Daftar"
/>
<Button loading={this.state.load} color="blue" disabled={!this.props.active} onClick={this.handleApply}>
{ this.props.active ? 'Daftar' : 'Sudah Terdaftar' } <Icon name="right chevron" />
</Button>
</Modal.Actions>
</Modal>
)
}
assets/js/components/CancelModal.jsx deleted 100644 → 0
View file @ b8438bad
import React from 'react';
import { Modal, Button, Icon, Header } from 'semantic-ui-react';
import Server from '../lib/Server';
import Storage from '../lib/Storage';
export default class CancelModal extends React.Component {
static propTypes = {
id: React.PropTypes.number.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
modalOpen: false,
confirmed: false,
header: 'Batalkan Pendaftaran?',
content: 'Aksi ini tidak dapat direka ulang. Pastikan anda benar-benar ingin membatalkan pendaftaran',
};
this.open = this.open.bind(this);
this.confirm = this.confirm.bind(this);
this.removeVacancy = this.removeVacancy.bind(this);
}
handleClose = () => this.setState({
modalOpen: false,
});
removeVacancy() {
const studentId = Storage.get('user-data').student.id;
const batalSuccess = 'Pendaftaran anda berhasil dihapus dari sistem\n';
const batalFailed = 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n';
Server.delete(`/students/${studentId}/applied-vacancies/${this.props.id}/`).then(() => {
this.setState({
header: 'Pendaftaran Berhasil Dibatalkan',
content: batalSuccess,
confirmed: true,
});
}, () => {
this.setState({
header: 'Permintaan gagal',
content: batalFailed,
});
});
}
confirm() {
this.setState({
header: 'Permintaan gagal',
content: this.batalFailed,
});
}
open = () => this.setState({ modalOpen: true });