Fakultas Ilmu Komputer UI

Commit 2fa8314f authored by Syahrul Findi's avatar Syahrul Findi
Browse files

Merge branch 'fix-frontend-test' into 'master'

Fix frontend test

See merge request !161
parents 67bd0903 35758398
Pipeline #25152 passed with stages
in 11 minutes and 57 seconds
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Grid, Segment, Header, Card, Image, Button } from 'semantic-ui-react';
import LoginForm from './components/LoginForm';
......@@ -6,87 +6,61 @@ import CompanyRegisterModal from './components/CompanyRegisterModal';
import Footer from './components/Footer';
import InfoModal from './components/InfoModal';
export default class Login extends React.Component {
constructor() {
super();
this.state = {
activeForm: 'user',
};
}
const CompanyForm = ({ children, onChange }) => (
<Segment basic>
<LoginForm
type="company"
header="Company Login"
imgSrc="logo.png"
imgSize="small"
usernameLabel="Email"
/>
{children}
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: '5px',
}}
>
<Button primary onClick={() => onChange('user')}>
{' '}
Login as User{' '}
</Button>
</div>
</Segment>
);
static defaultProps = {
children: null,
};
const UserForm = ({ children, onChange }) => (
<Segment basic>
<LoginForm
type="sso-ui"
header="SSO Login"
imgSrc="UI.png"
imgSize="tiny"
/>
{children}
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: '5px',
}}
>
<Button primary onClick={() => onChange('company')}>
{' '}
Login as Company{' '}
</Button>
</div>
</Segment>
);
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
const Login = ({ children }) => {
const [activeForm, setActiveForm] = useState('user');
renderForm() {
if (this.state.activeForm == 'company') {
return (
<Segment basic>
<LoginForm
type="company"
header="Company Login"
imgSrc="logo.png"
imgSize="small"
usernameLabel="Email"
/>
{this.props.children}
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: '5px',
}}
>
<Button
primary
onClick={() => this.setState({ activeForm: 'user' })}
>
{' '}
Login as User{' '}
</Button>
</div>
</Segment>
);
} else if (this.state.activeForm == 'user') {
return (
<Segment basic>
<LoginForm
type="sso-ui"
header="SSO Login"
imgSrc="UI.png"
imgSize="tiny"
/>
{this.props.children}
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: '5px',
}}
>
<Button
primary
onClick={() => this.setState({ activeForm: 'company' })}
>
{' '}
Login as Company{' '}
</Button>
</div>
</Segment>
);
}
}
render = () => (
return (
<div className="halamanLogin">
<div className="headerLogin">
<Header as="h2" icon textAlign="center">
......@@ -103,8 +77,15 @@ export default class Login extends React.Component {
style={{ display: 'flex', justifyContent: 'center' }}
>
<Grid.Column width="seven">
{this.renderForm()}
{activeForm === 'user' ? (
<UserForm onChange={(role) => setActiveForm(role)}>
{children}
</UserForm>
) : (
<CompanyForm onChange={(role) => setActiveForm(role)}>
{children}
</CompanyForm>
)}
<div className="register">
<Card centered className="register">
<Card.Content>
......@@ -124,4 +105,32 @@ export default class Login extends React.Component {
<Footer />
</div>
);
}
};
CompanyForm.propTypes = {
children: PropTypes.node,
onChange: PropTypes.func.isRequired,
};
CompanyForm.defaultProps = {
children: null,
};
UserForm.propTypes = {
children: PropTypes.node,
onChange: PropTypes.func.isRequired,
};
UserForm.defaultProps = {
children: null,
};
Login.propTypes = {
children: PropTypes.node,
};
Login.defaultProps = {
children: null,
};
export default Login;
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import ReactTestUtils from 'react-dom/test-utils';
import Notification from '../../components/Notification';
describe('Notification', () => {
it('renders for notification without problem', () => {
const notification = ReactTestUtils.renderIntoDocument(
<Notification
title="This is a title"
text="This is a notification info"
timestamp="2019-11-11T00:00:00"
/>,
);
expect(notification).to.exist;
});
it('renders for notification without problem', () => {
const notification = ReactTestUtils.renderIntoDocument(
<Notification title="This is a title" text="This is a notification info" timestamp="2019-11-11T00:00:00" />);
expect(notification).to.exist;
});
it('renders for notification gives the correct elapsed time', () => {
const notification = ReactTestUtils.renderIntoDocument(
<Notification title="This is a title" text="This is a notification info" timestamp="2019-11-11T00:00:00" />);
expect(notification.getElapsedTime("2019-11-15T00:00:00")).to.equal("4 days ago");
});
it('renders for notification gives the correct elapsed time', () => {
const notification = ReactTestUtils.renderIntoDocument(
<Notification
title="This is a title"
text="This is a notification info"
timestamp="2019-11-11T00:00:00"
/>,
);
expect(notification.getElapsedTime('2019-11-15T00:00:00')).to.equal(
'4 days ago',
);
});
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment