fix actions and reducers doc

gia8789 · gia8789 · commit 585d16e6e052 · 2019-05-17T16:11:56.000+02:00
diff --git a/docs/developer-guide/writing-actions-reducers.md b/docs/developer-guide/writing-actions-reducers.md
@@ -158,7 +158,7 @@ for example `'/js/actions'` for custom/standard project or `'../web/client/actio
 `npm run continuoustest`
 
 This allows to run only the tests contained to the specified path.
-**Note:** When all tests are successfully passing remember to restore it to its orignal value '../web'
+**Note:** When all tests are successfully passing remember to restore it to its original value.
 
 ## How to test a reducer
 Here things can become more complicated depending on your reducer but in general you want to test all cases
@@ -179,7 +179,7 @@ describe('Test correctness of the map reducers', () => {
 ```
 
 Here for speedup testing you can again modify the tests.webpack.js (custom/standard project) or build\tests.webpack.js (framework)
-in order to point to the reducers folder and then runnning
+in order to point to the reducers folder and then running
 `npm run continuoustest`
 
 ## Actions and epics
diff --git a/web/client/components/manager/users/UserCard.jsx b/web/client/components/manager/users/UserCard.jsx
@@ -13,7 +13,6 @@ const GridCard = require('../../misc/GridCard');
 const {Button, Glyphicon} = require('react-bootstrap');
 const Message = require('../../../components/I18N/Message');
 
-
 // const ConfirmModal = require('./modals/ConfirmModal');
 
 require('./style/usercard.css');
@@ -24,6 +23,8 @@ class UserCard extends React.Component {
         style: PropTypes.object,
         user: PropTypes.object,
         innerItemStyle: PropTypes.object,
+        avatarStyle: PropTypes.object,
+        nameStyle: PropTypes.object,
         actions: PropTypes.array
     };
 
@@ -34,8 +35,24 @@ class UserCard extends React.Component {
             backgroundPosition: "center",
             backgroundRepeat: "repeat-x"
         },
-        innerItemStyle: {"float": "left",
+        innerItemStyle: {
+            position: "relative",
+            marginTop: "35px",
+            marginLeft: "10px",
+            marginRight: "10px",
+            maxHeight: "85px"
+        },
+        avatarStyle: {
             margin: "10px"
+        },
+        nameStyle: {
+            position: "absolute",
+            left: "80px",
+            top: "30px",
+            width: "75%",
+            borderBottom: "1px solid #ddd",
+            fontSize: 18,
+            fontWeight: "bold"
         }
     };
 
@@ -65,25 +82,29 @@ class UserCard extends React.Component {
     };
 
     renderAvatar = () => {
-        return (<div key="avatar" className="avatar-containter" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
+        return (<div key="avatar" className="avatar-containter" style={this.props.avatarStyle} ><Button bsStyle="primary" type="button" className="square-button">
             <Glyphicon glyph="user" />
             </Button></div>);
     };
 
+    renderName = () => {
+        return (<div key="name" style={this.props.nameStyle}>{this.props.user.name}</div>);
+    };
+
     render() {
         return (
            <GridCard className="user-thumb" style={this.props.style} header={this.props.user.name}
                 actions={this.props.actions}
                >
             <div className="user-data-container">
                 {this.renderAvatar()}
+                {this.renderName()}
                 {this.renderRole()}
                 {this.renderGroups()}
             </div>
-             {this.renderStatus()}
+            {this.renderStatus()}
            </GridCard>
         );
     }
 }
-
 module.exports = UserCard;
diff --git a/web/client/components/manager/users/__tests__/UserCard-test.jsx b/web/client/components/manager/users/__tests__/UserCard-test.jsx
@@ -68,6 +68,13 @@ describe("Test UserCard Component", () => {
             <UserCard user={{...enabledUser, groups: [undefined]}} />, document.getElementById("container"));
         expect(comp).toExist();
         expect(document.querySelector('#container .gridcard')).toExist();
-
+    });
+    it('Test username rendering inside the card', () => {
+        let comp = ReactDOM.render(
+            <UserCard user={enabledUser} />, document.getElementById("container"));
+        expect(comp).toExist();
+        let items = document.querySelectorAll('#container .gridcard .user-data-container > div');
+        let renderName = items[1];
+        expect(renderName.innerHTML).toBe(enabledUser.name);
     });
 });
