Fakultas Ilmu Komputer UI

Commit 8a177f53 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

So much things done. Create SupervisorPage, refactor TopMenu and Dashboard,...

So much things done. Create SupervisorPage, refactor TopMenu and Dashboard, add and refactor many testing files.
parent 44903104
import React from 'react'; import React from 'react';
import TopMenu from './components/TopMenu'; import TopMenu from './components/TopMenu';
import Server from './lib/Server'; import Footer from './components/Footer';
const defaultPicture = 'http://semantic-ui.com/images/avatar/small/elliot.jpg';
export default class Dashboard extends React.Component { export default class Dashboard extends React.Component {
static propTypes = { static propTypes = {
...@@ -16,43 +13,9 @@ export default class Dashboard extends React.Component { ...@@ -16,43 +13,9 @@ export default class Dashboard extends React.Component {
]).isRequired, ]).isRequired,
}; };
static getInfo(user) {
const adminRole = {
name: 'admin',
user: {
email: '',
},
photo: null,
};
const role = user.role;
if (role === 'student') {
return user.data.student;
} else if (role === 'company') {
return user.data.company;
}
return adminRole;
}
constructor(props) {
super(props);
/* istanbul ignore next */
const data = Dashboard.getInfo(this.props.user);
this.state = {
id: data.id,
name: data.name,
email: data.user.email,
photo: data.photo,
};
}
render = () => ( render = () => (
<div> <div>
<TopMenu <TopMenu user={this.props.user} />
name={this.state.name} email={this.state.email}
photo={this.state.photo ? this.state.photo : defaultPicture}
/>
{this.props.children} {this.props.children}
</div> </div>
) )
......
...@@ -157,7 +157,7 @@ export default class ProfilePage extends React.Component { ...@@ -157,7 +157,7 @@ export default class ProfilePage extends React.Component {
<Grid.Column width={7}> <Grid.Column width={7}>
<Header as="h2" icon textAlign="center"> <Header as="h2" icon textAlign="center">
<br /> <br />
<Image src={this.state.photo ? this.state.photo : defaultPicture} size="medium" /> <Image src={this.state.photo || defaultPicture} size="medium" />
</Header> </Header>
</Grid.Column> </Grid.Column>
...@@ -219,10 +219,7 @@ export default class ProfilePage extends React.Component { ...@@ -219,10 +219,7 @@ export default class ProfilePage extends React.Component {
<Container textAlign="center"> <Container textAlign="center">
<div className="button-profile"> <div className="button-profile">
<a href={this.state.resume ? this.state.resume : '#'} ><Button primary size="small">Resume</Button></a> <a href={this.state.resume || '#'} ><Button primary size="small">Resume</Button></a>
{ this.state.show_transcript &&
<Button primary size="small">Transkrip</Button>
}
</div> </div>
<div> <div>
<h4> Bagikan Transkrip : { this.state.bagikanTranskrip }</h4> <h4> Bagikan Transkrip : { this.state.bagikanTranskrip }</h4>
......
import React from 'react';
import { Header, Icon, Grid } from 'semantic-ui-react';
import Pagination from './components/Pagination';
import Server from './lib/Server';
import ApplicationList from './components/ApplicationList';
const cols = [
{ key: 'StudentName', label: 'Nama' },
{ key: 'StudentID', label: 'NPM' },
{ key: 'Perusahaan', label: 'Perusahaan' },
{ key: 'Posisi', label: 'Posisi' },
{ key: 'Status', label: 'Status' },
];
export default class SupervisorPage extends React.Component {
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { list: [] };
}
componentDidMount() {
this.UserList();
}
UserList() {
Server.get('/student-applications/', false).then((data) => {
this.setState({ list: data.results });
});
}
render = () => {
return (
<Grid container columns="eleven" doubling>
<Grid.Row>
<br />
</Grid.Row>
<Grid.Row>
<Header as="h2">
<Icon name="list" />
Daftar Mahasiswa
</Header>
</Grid.Row>
<Grid.Row>
<div id="layout-content" className="layout-content-wrapper">
<Pagination url={'/student-applications/'} child={<ApplicationList cols={cols} />} />
</div>
</Grid.Row>
</Grid>
);
}
}
...@@ -3,7 +3,7 @@ import Tabs from './components/Tabs'; ...@@ -3,7 +3,7 @@ import Tabs from './components/Tabs';
import Pane from './components/Pane'; import Pane from './components/Pane';
import VacancyList from './components/VacancyList'; import VacancyList from './components/VacancyList';
import Pagination from './components/Pagination'; import Pagination from './components/Pagination';
import Applicants from './components/SupervisorPage'; import Applicants from './SupervisorPage';
export default class VacancyPage extends React.Component { export default class VacancyPage extends React.Component {
...@@ -47,7 +47,6 @@ export default class VacancyPage extends React.Component { ...@@ -47,7 +47,6 @@ export default class VacancyPage extends React.Component {
/> />
} }
/> />
<Applicants />
</Pane> </Pane>
<Pane label="Lamaran saya" > <Pane label="Lamaran saya" >
<Pagination <Pagination
......
...@@ -90,7 +90,28 @@ describe('Dashboard', () => { ...@@ -90,7 +90,28 @@ describe('Dashboard', () => {
email: '', email: '',
is_staff: false, is_staff: false,
company: null, company: null,
supervisor: null, supervisor: {
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,
],
},
student: null, student: null,
}, },
}; };
......
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import fetchMock from 'fetch-mock';
import SupervisorPage from '../SupervisorPage';
describe('SupervisorPage', () => {
const data = {
count: 5,
next: null,
previous: null,
results: [
{
company_name: 'Tutuplapak',
name: 'Joshua Casey Darian Gunawan',
npm: 1406622616,
vacancy_name: 'Software Engineer',
status: 'accepted',
},
{
company_name: 'Tutuplapak',
name: 'Muhammad Reza Qorib',
npm: 1406543593,
vacancy_name: 'Software Engineer',
status: 'accepted',
},
{
company_name: 'Tutuplapak',
name: 'Muhammad Reza Qorib',
npm: 1406543593,
vacancy_name: 'Kepala Sekolah',
status: 'read',
},
{
company_name: 'company1',
name: 'Farhan Farasdak',
npm: 1406572321,
vacancy_name: 'Data Scientist',
status: 'new',
},
{
company_name: 'company1',
name: 'student2',
npm: 1406527513,
vacancy_name: 'Data Scientist',
status: 'new',
},
],
};
fetchMock.get('*', data);
it('renders for admin without problem', () => {
const supervisorPage = ReactTestUtils.renderIntoDocument(
<SupervisorPage />);
expect(supervisorPage).to.exist;
fetchMock.restore();
});
});
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import Footer from '../../components/Footer';
describe('Footer', () => {
it('renders without problem', () => {
const footer = ReactTestUtils.renderIntoDocument(
<Footer params={{ id: 1 }} />);
expect(footer).to.exist;
});
});
...@@ -119,7 +119,28 @@ describe('TopMenu', () => { ...@@ -119,7 +119,28 @@ describe('TopMenu', () => {
email: '', email: '',
is_staff: false, is_staff: false,
company: null, company: null,
supervisor: null, supervisor: {
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,
],
},
student: null, student: null,
}, },
}; };
......
...@@ -35,7 +35,7 @@ describe('VacancyList', () => { ...@@ -35,7 +35,7 @@ describe('VacancyList', () => {
}; };
const studentUser = { const studentUser = {
role: 'company', role: 'student',
data: { data: {
url: 'http://localhost:8001/api/users/8/', url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak', username: 'Tutuplapak',
...@@ -69,6 +69,8 @@ describe('VacancyList', () => { ...@@ -69,6 +69,8 @@ describe('VacancyList', () => {
1, 1,
], ],
}, },
company: null,
supervisor: null,
}, },
}; };
...@@ -215,6 +217,38 @@ describe('VacancyList', () => { ...@@ -215,6 +217,38 @@ describe('VacancyList', () => {
}, },
]; ];
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: 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 = [{ const response2 = [{
close_time: '2019-03-28T05:55:42Z', close_time: '2019-03-28T05:55:42Z',
company: { company: {
...@@ -235,96 +269,45 @@ describe('VacancyList', () => { ...@@ -235,96 +269,45 @@ describe('VacancyList', () => {
it('renders without problem', () => { it('renders without problem', () => {
const vacancyList = ReactTestUtils.renderIntoDocument( const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList items={newResponse} userId={1} user={studentUser} />); <VacancyList items={newResponse} userId={1} user={studentUser} />);
vacancyList.generateVacancies();
expect(vacancyList).to.exist; expect(vacancyList).to.exist;
}); });
it('renders without problem for company', () => { it('renders without problem for company', () => {
const vacancyList = ReactTestUtils.renderIntoDocument( const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList items={newResponse} userId={1} user={companyUser} />); <VacancyList items={newResponse} userId={1} user={companyUser} />);
vacancyList.generateVacancies();
vacancyList.state.vacancies = newResponse; vacancyList.state.vacancies = newResponse;
expect(vacancyList.generateVacancies()).to.exist; expect(vacancyList.generateVacancies()).to.exist;
}); });
// it('renders with problem for company', () => {
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList type="company" userId={1} url="test" />);
// vacancyList.state.vacancies = response;
// expect(vacancyList.generateVacancies()).to.exist;
// });
//
// it('update bookmarks without problem', () => {
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList userId={1} url="test" />);
// vacancyList.state.appliedList = [{ id: 1 }, { id: 3 }];
// vacancyList.updateStatusList().then(() => {
// expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
// });
// });
//
// it('check applied vacancies without problem', () => {
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList userId={1} url="test" />);
// vacancyList.updateStatusList().then(() => {
// expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
// });
// });
//
// it('renders marked bookmarked vacancies without problem', (done) => {
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList userId={1} url="test" />);
// vacancyList.state.vacancies = response;
// vacancyList.state.bookmarkList = [{ id: 5 }, { id: 3 }, { id: 1 }];
// vacancyList.updateStatusList().then(() => {
// expect(vacancyList.generateVacancies()).to.exist;
// done();
// }, () => done());
// });
//
// it('renders not marked vacancies without problem', () => {
// fetchMock.get('*', response);
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList userId={1} url="test" />);
// vacancyList.state.vacancies = response;
// vacancyList.state.bookmarkList = [{ id: 6 }, { id: 4 }, { id: 2 }];
// expect(vacancyList.generateVacancies()).to.exist;
// fetchMock.restore();
// });
//
// it('success calling API', () => {
// fetchMock.get('*', response);
// const vacancyList = ReactTestUtils.renderIntoDocument(
// <VacancyList userId={1} url="test" />);
// vacancyList.state.vacancies = response;
// expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
// fetchMock.restore();
// });
//
it('success delete vacancy', () => { it('success delete vacancy', () => {
fetchMock.restore(); fetchMock.restore();
fetchMock.delete('*', response2); fetchMock.delete('*', response2);
fetchMock.get('*', newResponse);
const vacancyList = ReactTestUtils.renderIntoDocument( const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" deleteCallback={() => {}} user={companyUser} />); <VacancyList items={newResponse} userId={1} deleteCallback={() => {}} user={companyUser} />);
vacancyList.state.vacancies = newResponse; vacancyList.state.vacancies = newResponse;
vacancyList.deleteVacancy(1).then(() => { vacancyList.deleteVacancy(1).then(() => {
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response)); expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(newResponse));
fetchMock.restore(); fetchMock.restore();
}, () => { }, () => {
fetchMock.restore(); fetchMock.restore();
}); });
}); });
it('fails delete vacancy', () => { it('fails delete vacancy', (done) => {
fetchMock.restore(); fetchMock.restore();
fetchMock.delete('*', 404); fetchMock.delete('*', 404);
const vacancyList = ReactTestUtils.renderIntoDocument( const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} items={newResponse} user={companyUser} deleteCallback={() => {}} />, <VacancyList userId={1} items={newResponse} user={companyUser} deleteCallback={() => {}} />,
); );
vacancyList.state.vacancies = newResponse; vacancyList.state.vacancies = response;
vacancyList.deleteVacancy(1).then(() => { vacancyList.deleteVacancy(1).then(() => {
fetchMock.restore(); fetchMock.restore();
done(); done();
}, () => { }, () => {
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(newResponse)); expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
fetchMock.restore(); fetchMock.restore();
done(); done();
}); });
......
import React from 'react'; import React from 'react';
import { Table } from 'semantic-ui-react'; import { Table } from 'semantic-ui-react';
export default class Tables extends React.Component { export default class ApplicationList extends React.Component {
static propTypes = { static propTypes = {
cols: React.PropTypes.any.isRequired, cols: React.PropTypes.any.isRequired,
data: React.PropTypes.any.isRequired, items: React.PropTypes.any,
};
static defaultProps = {
items: [],
}; };
generateHeaders() { generateHeaders() {
const cols2 = this.props.cols; // [{key, label}] const cols2 = this.props.cols; // [{key, label}]
// generate our header (th) cell components // generate our header (th) cell components
return cols2.map(colData => <Table.HeaderCell singleLine key={colData.key}> {colData.label} </Table.HeaderCell> return cols2.map(colData =>
, error => error.then(() => ('Gagal mendapatkan informasi data')), <Table.HeaderCell singleLine key={colData.key}> {colData.label} </Table.HeaderCell>
); );
} }
generateRows() { generateRows() {
const cols3 = this.props.cols; // [{key, label}] return this.props.items.map(item =>
const data2 = this.props.data; (
<Table.Row key={`${item.npm}_${item.company}_${item.position}_${item.status}_row`}>
return data2.map((item) => { <Table.Cell key={`${item.name}_name`}> {item.name} </Table.Cell>
// handle the column data within each row <Table.Cell key={`${item.name}_npm`}> {item.npm} </Table.Cell>
const cells = cols3.map(colData => <Table.Cell key={`${item.name}_company`}>
// colData.key might be "firstName" {item.company_name}
<Table.Cell> {item[colData.key]} </Table.Cell>); </Table.Cell>
return <Table.Row key={item.id}> {cells} </Table.Row>; <Table.Cell key={`${item.name}_position`}>
}); {item.vacancy_name}
</Table.Cell>
<Table.Cell key={`${item.name}_status`}>
{item.status}
</Table.Cell>
</Table.Row>
)
);
} }
render() {