From c18009058f7ff9350e443f592a48fb07c31a5a53 Mon Sep 17 00:00:00 2001
From: "M. Reza Qorib" <rezaqorib96@gmail.com>
Date: Tue, 28 Mar 2017 18:18:57 +0700
Subject: [PATCH] #140654507 #13 improve testing and component for vacancy js
consumer
---
assets/js/__test__/CompanyRegister-test.jsx | 4 +-
.../js/__test__/components/Lowongan-test.jsx | 16 ------
.../__test__/components/ModalAlert-test.jsx | 11 ++++
.../components/ModalPendaftaran-test.jsx | 17 ++++--
.../js/__test__/components/Vacancy-test.jsx | 52 +++++++++++++++++++
.../__test__/components/VacancyList-test.jsx | 38 ++++++++++----
assets/js/__test__/lib/Server-test.jsx | 19 ++++++-
assets/js/components/Lowongan.jsx | 34 ------------
assets/js/components/ModalAlert.jsx | 2 -
assets/js/components/ModalPendaftaran.jsx | 4 +-
assets/js/components/Vacancy.jsx | 31 +++++++++++
assets/js/components/VacancyList.jsx | 6 +--
12 files changed, 159 insertions(+), 75 deletions(-)
delete mode 100644 assets/js/__test__/components/Lowongan-test.jsx
create mode 100644 assets/js/__test__/components/ModalAlert-test.jsx
create mode 100644 assets/js/__test__/components/Vacancy-test.jsx
delete mode 100644 assets/js/components/Lowongan.jsx
create mode 100644 assets/js/components/Vacancy.jsx
diff --git a/assets/js/__test__/CompanyRegister-test.jsx b/assets/js/__test__/CompanyRegister-test.jsx
index ba9348cc..0a46e09a 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 8b20f193..00000000
--- 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 00000000..150c7f87
--- /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 f910a348..55d6bfca 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 00000000..7cf27c87
--- /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 46add096..011045ba 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 4c881818..2b3dd16f 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 76ebdb82..00000000
--- 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 6fb8e309..e324ab74 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 549dd0e8..1ced8744 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 00000000..505d80e3
--- /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 cae3def6..bc783ce4 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>
);
}
--
GitLab