1506722765 69 Sebagai User Saya ingin melihat tanggal saat ini secara real time di TopMenu web

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

@@ -3,6 +3,7 @@ import React from 'react';
 import ReactTestUtils from 'react-addons-test-utils';
 import fetchMock from 'fetch-mock';
 import TopMenu from '../../components/TopMenu';
+import moment from 'moment';
 
 describe('TopMenu', () => {
   fetchMock.restore();
@@ -214,5 +215,16 @@ describe('TopMenu', () => {
     topmenu.handleItemClick(new Event('click'), 'undefined');
     expect(topmenu.state.activeItem).to.equal(undefined);
   });
+
+  it('TopMenu state contain right current date time', () => {
+    moment.locale('id');
+    const date = new Date();
+    const expectedDate = moment(date).format('dddd') + ', ' + moment(date).format('LL');
+    const topMenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser2}>
+        <div> test </div>
+      </TopMenu>);
+    expect(topMenu.state.currentDate).to.equal(expectedDate);
+  });
 });
 

assets/js/components/TopMenu.jsx

@@ -3,6 +3,7 @@ import { Menu, Image, Popup, Button, Card } from 'semantic-ui-react';
 import { Link, browserHistory } from 'react-router';
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
+import moment from 'moment';
 
 const defaultPicture = 'https://semantic-ui.com/images/avatar/small/elliot.jpg';
 
@@ -35,7 +36,12 @@ export default class TopMenu extends React.Component {
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = { activeItem: 'Beranda', logoutLoading: false };
+    moment.locale('id');
+    this.state = {
+      activeItem: 'Beranda',
+      logoutLoading: false,
+      currentDate: moment(new Date()).format('dddd') + ', ' + moment(new Date()).format('LL'),
+    };
     this.logout = this.logout.bind(this);
     this.logoutCompany = this.logoutCompany.bind(this);
   }
@@ -76,6 +82,9 @@ export default class TopMenu extends React.Component {
         <Menu color="blue" pointing secondary>
           <Image as={Link} size="small" src="/assets/img/logo.png" to="/home" />
           <Menu.Menu position="right">
+            <Menu.Item style={{ margin: '3px' }}>
+              { this.state.currentDate }
+            </Menu.Item>
             <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
             { this.props.user.role === 'student' &&
             <Menu.Item as={Link} to="/profil-mahasiswa" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }