Commit f04af966 authored by Maxime Chaillet's avatar Maxime Chaillet

implement the first test on newEvent. Remove connect from presentational...

implement the first test on newEvent. Remove connect from presentational component such as myEditor, NewEvent and others. Instead, pass user object as props.
parent e7eaedf0
{
"presets": ["env", "react"]
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -50,10 +50,13 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test": "jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"jest": "^23.5.0",
"react-doc-generator": "^1.2.5"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
......@@ -37,7 +37,7 @@ class EditEvent extends React.Component {
inputRef={(FormControl) => this.inputTitle = FormControl}
/>
<br />
{displayContent(this.props.event.content, true, this.props.investigationId)}
{displayContent(this.props.event.content, true, this.props.investigationId, this.props.user)}
</Panel.Body>
<EventFooter mode='edit' onCancelButtonClicked={this.onCancelButtonClicked} onSaveButtonClicked={this.updateEvent} />
......@@ -94,15 +94,19 @@ EditEvent.propTypes = {
/** the event object as received from the ICAT+ server */
event: PropTypes.object.isRequired,
/** TRUE when the expended event is displayed in fullscreen. FALSE by default */
isFullPage: PropTypes.bool
isFullPage: PropTypes.bool,
/** the user who is currently logged in */
user: PropTypes.string.isRequired,
}
function mapStateToProps(state) {
return {
user: state.user,
};
}
// function mapStateToProps(state) {
// return {
// user: state.user,
// };
// }
// export default connect(
// mapStateToProps,
// )(EditEvent);
export default connect(
mapStateToProps,
)(EditEvent);
export default EditEvent;
\ No newline at end of file
......@@ -178,15 +178,19 @@ MyEditor.propTypes = {
text: PropTypes.string,
/** the investigationId of the event being edited. */
investigationId: PropTypes.string,
/** the user who is currently logged in */
user: PropTypes.object.isRequired,
}
function mapStateToProps(state) {
return {
user: state.user,
};
}
// function mapStateToProps(state) {
// return {
// user: state.user,
// };
// }
// export default connect()
// mapStateToProps,
// )(MyEditor);
export default connect(
mapStateToProps,
)(MyEditor);
\ No newline at end of file
export default MyEditor;
\ No newline at end of file
......@@ -52,17 +52,20 @@ class Event extends React.Component {
} else if (this.state.mode === EXPANDED_VIEW_MODE) {
displayed = <ExpandedEvent
event={event}
user={this.props.user}
toggleMode={this.toggleMode} />
} else if (this.state.mode === EDITION_MODE) {
displayed = <EditEvent
event={event}
investigationId={this.props.investigationId}
user={this.props.user}
isEditionMode={true}
toggleMode={this.toggleMode}
refreshList={this.props.refreshList} />
} else if (this.state.mode === HISTORY_MODE) {
displayed = <EventHistory
event={event}
user = {this.props.user}
investigationId={this.props.investigationId}
toggleMode={this.toggleMode}
/>
......@@ -78,7 +81,9 @@ class Event extends React.Component {
Event.propTypes = {
/** the event object as received from the ICAT+ server */
event: PropTypes.object.isRequired
event: PropTypes.object.isRequired,
/** the user who is currently logged in */
user: PropTypes.string.isRequired,
}
export default Event
\ No newline at end of file
......@@ -27,7 +27,7 @@ class EventHeader extends React.Component {
return (
<span>
<Glyphicon glyph='tag' style={{ marginRight: '2px' }} />
<span class='text-italic'> No tags </span>
<span className='text-italic'> No tags </span>
<span > &nbsp; &nbsp; </span>
</span>
)
......@@ -95,7 +95,7 @@ class EventHeader extends React.Component {
<Col xs={8}>
<span style={{ cursor: 'pointer', color: '#007bff' }} onClick={() => { this.props.toggleMode(COLLAPSED_MODE) }}> <b> {event.title || "User comment"} </b> </span>
</Col>
<div class="pull-right">
<div className="pull-right">
{this.showTags(event)}
{this.displayHeaderRightSide('expanded', this.props.isFullPage || false)}
</div>
......@@ -133,7 +133,7 @@ class EventHeader extends React.Component {
<Col xs={8}>
<b> {this.props.event.title || "User comment"} </b>
</Col>
<div class="pull-right">
<div className="pull-right">
{this.showTags(this.props.event)}
{this.displayHeaderRightSide('edition', this.props.isFullPage || false, this.props.toggleMode)}
</div>
......@@ -143,7 +143,7 @@ class EventHeader extends React.Component {
} else if (this.props.mode === 'previousVersion') {
return (<Panel.Heading >
<Row>
<div class="pull-right">
<div className="pull-right">
{this.showTags(this.props.event)}
</div>
<div> {eventCategoryIcon("previousVersion")}
......@@ -156,7 +156,7 @@ class EventHeader extends React.Component {
if (this.props.mode === 'new') {
return (<Panel.Heading >
<b> New comment </b>
<div class="pull-right">
<div className="pull-right">
{this.showTags()}
</div>
</Panel.Heading>)
......@@ -164,7 +164,7 @@ class EventHeader extends React.Component {
}
}
}
EventHeader.PropTypes = {
EventHeader.propTypes = {
/** the event object as received from the ICAT+ server */
event: PropTypes.object,
/** TRUE when the expended event is displayed in fullscreen. FALSE by default */
......
......@@ -32,7 +32,7 @@ class ExpandedEvent extends React.Component {
<Panel.Body >
<Row>
<Col xs={12}>
{displayContent(this.props.event.content, false)}
{displayContent(this.props.event.content, false, this.props.user)}
</Col>
</Row>
</Panel.Body>
......
import React from 'react'
import PropTypes from 'prop-types';
import { Row, Col, Panel, Glyphicon } from 'react-bootstrap'
import ExpandedEvent from "./ExpandedEvent"
import { displayContent, eventCategoryIcon, getEventHistoryCreationDate } from './helper.js'
import { eventCategoryIcon, getEventHistoryCreationDate } from './helper.js'
import EventProperty from './EventProperty'
import Popup from 'reactjs-popup'
import SingleEventHistory from './SingleEventHistory';
......@@ -51,10 +52,16 @@ const EventHistoryItem = (props) => {
<Row>
<Col xs={1}> </Col>
<Col xs={11}>
<SingleEventHistory event={props.event} />
<SingleEventHistory event={props.event} user={this.props.user} />
</Col>
</Row>
</div>)
}
FullEventHistory.propTypes = {
/** the user who is currently logged in */
user: PropTypes.string.isRequired,
}
export default FullEventHistory
\ No newline at end of file
......@@ -67,7 +67,7 @@ class List extends React.Component {
<TimeAxisMarks value={propertyName} />
{groupedSortedEvents[propertyName].map(
(event) => {
return <Event event={event} investigationId={this.props.investigationId} refreshList={this.props.refreshList} />
return <Event user={this.props.user} event={event} investigationId={this.props.investigationId} refreshList={this.props.refreshList} />
}
)}
</div>
......@@ -90,6 +90,7 @@ class List extends React.Component {
investigationId={investigationId}
cancelNewEventClicked={this.cancelNewEventClicked}
onSaveEvent={this.props.refreshList}
user={this.props.user}
/>
</Grid>
......@@ -162,6 +163,8 @@ List.propTypes = {
eventList: PropTypes.array,
/** the investigationId the provided events belong to. */
investigationId: PropTypes.string,
/** the user who is currently logged in */
user: PropTypes.string,
}
......
//React components
import React from 'react'
import PropTypes from 'prop-types';
import { Grid, Row, Col, Button, ButtonGroup, ButtonToolbar, FormControl, Panel, Glyphicon, Collapse } from "react-bootstrap"
import { connect } from 'react-redux'
......@@ -10,7 +11,7 @@ import EventHeader from './EventHeader'
import EventFooter from './EventFooter'
class NewEvent extends React.Component {
export class NewEvent extends React.Component {
constructor(props) {
super(props)
this.state = {
......@@ -55,7 +56,7 @@ class NewEvent extends React.Component {
<Row style={{ height: '55%' }}>
<Col style={{ height: '100%' }}>
<MyEditor investigationId={investigationId} isEditionMode={true} />
<MyEditor user={this.props.user} investigationId={investigationId} isEditionMode={true} />
</Col>
</Row>
</Grid>
......@@ -99,12 +100,19 @@ class NewEvent extends React.Component {
}
}
function mapStateToProps(state) {
return {
user: state.user,
};
NewEvent.propTypes = {
/** the user who is currently logged in */
user: PropTypes.object.isRequired,
}
export default connect(
mapStateToProps,
)(NewEvent);
\ No newline at end of file
// function mapStateToProps(state) {
// return {
// user: state.user,
// };
// }
// export default connect(
// mapStateToProps,
// )(NewEvent);
export default NewEvent;
\ No newline at end of file
import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {NewEvent} from './NewEvent.jsx';
import {Collapse} from 'react-bootstrap';
//let React = require('react');
//let NewEvent = require('../src/components/Event/NewEvent.jsx')
it('collapse component in property is provided ', () => {
Enzyme.configure({ adapter: new Adapter() })
const myUser={
sessionId:"testSessionId",
username:'testUsername'
}
const myNewEvent = Enzyme.mount(<NewEvent user={myUser} expanded={true} investigationId="0123" cancelNewEventClicked={() => null} onSaveEvent={() => null} />)
expect(myNewEvent.find(Collapse).length).toBe(1);
})
import React from 'react'
import PropTypes from 'prop-types';
import { Row, Col, Panel, Glyphicon } from 'react-bootstrap'
import ExpandedEvent from "./ExpandedEvent"
......@@ -23,21 +24,25 @@ class SingleEventHistory extends React.Component {
return (
<div class='margin-bottom-10'>
<Panel>
<EventHeader event={event} mode='previousVersion'/>
<EventHeader event={event} mode='previousVersion' />
<Panel.Body>
<Row>
<Col xs={12}>
{displayContent(event.content, false)}
{displayContent(event.content, false, this.props.user)}
</Col>
</Row>
</Panel.Body>
<Panel.Footer>
<EventProperty propertyName='historyAuthorship' propertyValue={event.username} />
</Panel.Footer>
</Panel>
</div>)
}
}
SingleEventHistory.PropTypes = {
/** the user who is currently logged in */
user: PropTypes.string.isRequired,
}
export default SingleEventHistory
\ No newline at end of file
......@@ -78,17 +78,18 @@ export function getNumberOfPreviousEventVersion(event) {
* Choose the proper viewer and display the event using it.
* @param {Array} content the content of the event to be displayed
* @param {string} investigationId the investitagationId the content corresponds to.
* @param {string} user the user who is currently logged in.
*/
export function displayContent(content, isEditionMode, investigationId) {
export function displayContent(content, isEditionMode, investigationId, user) {
let draftjsContent = _.find(content, function (item) {
return item.format === 'draftjs'
})
if (draftjsContent != undefined) {
if (isEditionMode) {
return (<div style={{ height: '100%' }}> <MyEditor text={draftjsContent.text} isEditionMode={true} investigationId={investigationId} /> </div >)
return (<div style={{ height: '100%' }}> <MyEditor user={user} text={draftjsContent.text} isEditionMode={true} investigationId={investigationId} /> </div >)
} else {
return (<div> <MyEditor text={draftjsContent.text} /> </div >)
return (<div> <MyEditor user={user} text={draftjsContent.text} /> </div >)
}
}
......
......@@ -63,7 +63,8 @@ class EventContainer extends React.Component {
sessionId={sessionId}
investigationId={this.props.investigationId}
eventList={this.state.eventList}
refreshList={this.refreshList} />
refreshList={this.refreshList}
user={this.props.user} />
</div >
)
} else {
......
// import React from 'react';
// import ReactDOM from 'react-dom';
// import App from './App';
// it('renders without crashing', () => {
// const div = document.createElement('div');
// ReactDOM.render(<App />, div);
// ReactDOM.unmountComponentAtNode(div);
// });
it('fake test ', () => {
expect(true).toBe(true)
})
\ No newline at end of file
Markdown is supported
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