Fix frontend test

assets/js/Login.jsx

-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;

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

 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',
+    );
+  });
 });
-