From 8165534bb61314ea596a8e0884b5ce61063952c4 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Fri, 14 Sep 2018 20:48:33 +0200
Subject: [PATCH] Add css identifiers to all components for testing

---
 ui/src/component/ConfirmDialog.tsx           | 17 ++++++++++++++---
 ui/src/component/DefaultPage.tsx             |  3 +++
 ui/src/component/Header.tsx                  | 10 +++++-----
 ui/src/component/Message.tsx                 | 12 +++++++-----
 ui/src/component/Navigation.tsx              | 12 +++++++++---
 ui/src/component/SettingsDialog.tsx          |  8 +++++++-
 ui/src/component/ToggleVisibility.tsx        |  2 +-
 ui/src/pages/Applications.tsx                |  5 +++--
 ui/src/pages/Clients.tsx                     |  5 +++--
 ui/src/pages/Login.tsx                       |  7 ++++---
 ui/src/pages/Messages.tsx                    |  3 ++-
 ui/src/pages/Users.tsx                       | 12 ++++++++----
 ui/src/pages/dialog/AddApplicationDialog.tsx | 11 ++++++++---
 ui/src/pages/dialog/AddClientDialog.tsx      |  9 +++++++--
 ui/src/pages/dialog/AddEditUserDialog.tsx    | 12 +++++++++---
 15 files changed, 90 insertions(+), 38 deletions(-)

diff --git a/ui/src/component/ConfirmDialog.tsx b/ui/src/component/ConfirmDialog.tsx
index bf85fcf..20cf895 100644
--- a/ui/src/component/ConfirmDialog.tsx
+++ b/ui/src/component/ConfirmDialog.tsx
@@ -19,14 +19,25 @@ export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps)
         fClose();
     };
     return (
-        <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+        <Dialog
+            open={true}
+            onClose={fClose}
+            aria-labelledby="form-dialog-title"
+            className="confirm-dialog">
             <DialogTitle id="form-dialog-title">{title}</DialogTitle>
             <DialogContent>
                 <DialogContentText>{text}</DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button onClick={fClose}>No</Button>
-                <Button onClick={submitAndClose} autoFocus color="primary" variant="raised">
+                <Button onClick={fClose} className="cancel">
+                    No
+                </Button>
+                <Button
+                    onClick={submitAndClose}
+                    autoFocus
+                    color="primary"
+                    variant="raised"
+                    className="confirm">
                     Yes
                 </Button>
             </DialogActions>
diff --git a/ui/src/component/DefaultPage.tsx b/ui/src/component/DefaultPage.tsx
index b66b17a..536e930 100644
--- a/ui/src/component/DefaultPage.tsx
+++ b/ui/src/component/DefaultPage.tsx
@@ -10,11 +10,13 @@ interface IProps {
     buttonDisabled?: boolean;
     maxWidth?: number;
     hideButton?: boolean;
+    buttonId?: string;
 }
 
 const DefaultPage: SFC<IProps> = ({
     title,
     buttonTitle,
+    buttonId,
     fButton,
     buttonDisabled = false,
     maxWidth = 700,
@@ -29,6 +31,7 @@ const DefaultPage: SFC<IProps> = ({
                 </Typography>
                 {hideButton ? null : (
                     <Button
+                        id={buttonId}
                         variant="raised"
                         color="primary"
                         disabled={buttonDisabled}
diff --git a/ui/src/component/Header.tsx b/ui/src/component/Header.tsx
index ca1f4dc..3d8b8d3 100644
--- a/ui/src/component/Header.tsx
+++ b/ui/src/component/Header.tsx
@@ -81,7 +81,7 @@ class Header extends Component<IProps & Styles> {
         return (
             <div>
                 {admin ? (
-                    <Link className={classes.link} to="/users">
+                    <Link className={classes.link} to="/users" id="navigate-users">
                         <Button color="inherit">
                             <SupervisorAccount />
                             &nbsp;users
@@ -90,24 +90,24 @@ class Header extends Component<IProps & Styles> {
                 ) : (
                     ''
                 )}
-                <Link className={classes.link} to="/applications">
+                <Link className={classes.link} to="/applications" id="navigate-apps">
                     <Button color="inherit">
                         <Chat />
                         &nbsp;apps
                     </Button>
                 </Link>
-                <Link className={classes.link} to="/clients">
+                <Link className={classes.link} to="/clients" id="navigate-clients">
                     <Button color="inherit">
                         <DevicesOther />
                         &nbsp;clients
                     </Button>
                 </Link>
-                <Button color="inherit" onClick={showSettings}>
+                <Button color="inherit" onClick={showSettings} id="changepw">
                     <AccountCircle />
                     &nbsp;
                     {name}
                 </Button>
-                <Button color="inherit" onClick={UserAction.logout}>
+                <Button color="inherit" onClick={UserAction.logout} id="logout">
                     <ExitToApp />
                     &nbsp;Logout
                 </Button>
diff --git a/ui/src/component/Message.tsx b/ui/src/component/Message.tsx
index da76db0..daeb79e 100644
--- a/ui/src/component/Message.tsx
+++ b/ui/src/component/Message.tsx
@@ -51,7 +51,7 @@ interface IProps {
 
 function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
     return (
-        <div className={classes.wrapperPadding}>
+        <div className={`${classes.wrapperPadding} message`}>
             <Container style={{display: 'flex'}}>
                 <div className={classes.imageWrapper}>
                     <img
@@ -64,17 +64,19 @@ function Message({fDelete, classes, title, date, content, image}: IProps & Style
                 </div>
                 <div className={classes.messageContentWrapper}>
                     <div className={classes.header}>
-                        <Typography className={classes.headerTitle} variant="headline">
+                        <Typography className={`${classes.headerTitle} title`} variant="headline">
                             {title}
                         </Typography>
-                        <Typography variant="body1">
+                        <Typography variant="body1" className="date">
                             <TimeAgo date={date} />
                         </Typography>
                         <IconButton onClick={fDelete} className={classes.trash}>
-                            <Delete />
+                            <Delete className="delete" />
                         </IconButton>
                     </div>
-                    <Typography component="p">{content}</Typography>
+                    <Typography component="p" className="content">
+                        {content}
+                    </Typography>
                 </div>
             </Container>
         </div>
diff --git a/ui/src/component/Navigation.tsx b/ui/src/component/Navigation.tsx
index 5965f53..692b134 100644
--- a/ui/src/component/Navigation.tsx
+++ b/ui/src/component/Navigation.tsx
@@ -51,7 +51,10 @@ class Navigation extends Component<IProps & Styles, IState> {
                 ? null
                 : apps.map((app) => {
                       return (
-                          <Link className={classes.link} to={'/messages/' + app.id} key={app.id}>
+                          <Link
+                              className={`${classes.link} item`}
+                              to={'/messages/' + app.id}
+                              key={app.id}>
                               <ListItem button>
                                   <ListItemText primary={app.name} />
                               </ListItem>
@@ -69,10 +72,13 @@ class Navigation extends Component<IProps & Styles, IState> {
         ];
 
         return (
-            <Drawer variant="permanent" classes={{paper: classes.drawerPaper}}>
+            <Drawer
+                variant="permanent"
+                classes={{paper: classes.drawerPaper}}
+                id="message-navigation">
                 <div className={classes.toolbar} />
                 <Link className={classes.link} to="/">
-                    <ListItem button disabled={!loggedIn}>
+                    <ListItem button disabled={!loggedIn} className="all">
                         <ListItemText primary="All Messages" />
                     </ListItem>
                 </Link>
diff --git a/ui/src/component/SettingsDialog.tsx b/ui/src/component/SettingsDialog.tsx
index eb6e8a8..05683db 100644
--- a/ui/src/component/SettingsDialog.tsx
+++ b/ui/src/component/SettingsDialog.tsx
@@ -27,10 +27,15 @@ export default class SettingsDialog extends Component<IProps, IState> {
             fClose();
         };
         return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+            <Dialog
+                open={true}
+                onClose={fClose}
+                aria-labelledby="form-dialog-title"
+                id="changepw-dialog">
                 <DialogTitle id="form-dialog-title">Change Password</DialogTitle>
                 <DialogContent>
                     <TextField
+                        className="newpass"
                         autoFocus
                         margin="dense"
                         type="password"
@@ -45,6 +50,7 @@ export default class SettingsDialog extends Component<IProps, IState> {
                     <Tooltip title={pass.length !== 0 ? '' : 'pass is required'}>
                         <div>
                             <Button
+                                className="change"
                                 disabled={pass.length === 0}
                                 onClick={submitAndClose}
                                 color="primary"
diff --git a/ui/src/component/ToggleVisibility.tsx b/ui/src/component/ToggleVisibility.tsx
index b3e3d38..e26dcc8 100644
--- a/ui/src/component/ToggleVisibility.tsx
+++ b/ui/src/component/ToggleVisibility.tsx
@@ -21,7 +21,7 @@ class ToggleVisibility extends Component<IProps, IState> {
         const text = this.state.visible ? value : '•••••••••••••••';
         return (
             <div style={style}>
-                <IconButton onClick={this.toggleVisibility}>
+                <IconButton onClick={this.toggleVisibility} className="toggle-visibility">
                     {this.state.visible ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
                 <Typography style={{fontFamily: "'Roboto Mono', monospace"}}>{text}</Typography>
diff --git a/ui/src/pages/Applications.tsx b/ui/src/pages/Applications.tsx
index fec9584..91eebbc 100644
--- a/ui/src/pages/Applications.tsx
+++ b/ui/src/pages/Applications.tsx
@@ -43,11 +43,12 @@ class Applications extends Component<{}, IState> {
             <DefaultPage
                 title="Applications"
                 buttonTitle="Create Application"
+                buttonId="create-app"
                 maxWidth={1000}
                 fButton={this.showCreateDialog}>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
-                        <Table>
+                        <Table id="app-table">
                             <TableHead>
                                 <TableRow>
                                     <TableCell padding="checkbox" style={{width: 80}} />
@@ -151,7 +152,7 @@ const Row: SFC<IRowProps> = ({name, value, description, fDelete, fUpload, image}
         </TableCell>
         <TableCell>{description}</TableCell>
         <TableCell numeric padding="none">
-            <IconButton onClick={fDelete}>
+            <IconButton onClick={fDelete} className="delete">
                 <Delete />
             </IconButton>
         </TableCell>
diff --git a/ui/src/pages/Clients.tsx b/ui/src/pages/Clients.tsx
index c498dc8..a70e4a5 100644
--- a/ui/src/pages/Clients.tsx
+++ b/ui/src/pages/Clients.tsx
@@ -39,10 +39,11 @@ class Clients extends Component<{}, IState> {
             <DefaultPage
                 title="Clients"
                 buttonTitle="Create Client"
+                buttonId="create-client"
                 fButton={this.showCreateDialog}>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
-                        <Table>
+                        <Table id="client-table">
                             <TableHead>
                                 <TableRow style={{textAlign: 'center'}}>
                                     <TableCell>Name</TableCell>
@@ -110,7 +111,7 @@ const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
             />
         </TableCell>
         <TableCell numeric padding="none">
-            <IconButton onClick={fDelete}>
+            <IconButton onClick={fDelete} className="delete">
                 <Delete />
             </IconButton>
         </TableCell>
diff --git a/ui/src/pages/Login.tsx b/ui/src/pages/Login.tsx
index 6775cd3..3fbdf16 100644
--- a/ui/src/pages/Login.tsx
+++ b/ui/src/pages/Login.tsx
@@ -20,10 +20,10 @@ class Login extends Component<{}, IState> {
             <DefaultPage title="Login" maxWidth={250} hideButton={true}>
                 <Grid item xs={12} style={{textAlign: 'center'}}>
                     <Container>
-                        <form onSubmit={this.preventDefault}>
+                        <form onSubmit={this.preventDefault} id="login-form">
                             <TextField
                                 autoFocus
-                                id="name"
+                                className="name"
                                 label="Username"
                                 margin="dense"
                                 value={username}
@@ -31,7 +31,7 @@ class Login extends Component<{}, IState> {
                             />
                             <TextField
                                 type="password"
-                                id="password"
+                                className="password"
                                 label="Password"
                                 margin="normal"
                                 value={password}
@@ -41,6 +41,7 @@ class Login extends Component<{}, IState> {
                                 type="submit"
                                 variant="raised"
                                 size="large"
+                                className="login"
                                 color="primary"
                                 style={{marginTop: 15, marginBottom: 5}}
                                 onClick={this.login}>
diff --git a/ui/src/pages/Messages.tsx b/ui/src/pages/Messages.tsx
index e57b4d9..f444fd2 100644
--- a/ui/src/pages/Messages.tsx
+++ b/ui/src/pages/Messages.tsx
@@ -58,10 +58,11 @@ class Messages extends Component<IProps, IState> {
             <DefaultPage
                 title={name}
                 buttonTitle="Delete All"
+                buttonId="delete-all"
                 fButton={deleteMessages}
                 buttonDisabled={!hasMessages}>
                 {hasMessages ? (
-                    <div style={{width: '100%'}}>
+                    <div style={{width: '100%'}} id="messages">
                         <ReactList
                             key={appId}
                             ref={(el: ReactList) => (this.list = el)}
diff --git a/ui/src/pages/Users.tsx b/ui/src/pages/Users.tsx
index c7ca9b1..6a594b7 100644
--- a/ui/src/pages/Users.tsx
+++ b/ui/src/pages/Users.tsx
@@ -35,10 +35,10 @@ const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
         <TableCell>{name}</TableCell>
         <TableCell>{admin ? 'Yes' : 'No'}</TableCell>
         <TableCell numeric padding="none">
-            <IconButton onClick={fEdit}>
+            <IconButton onClick={fEdit} className="edit">
                 <Edit />
             </IconButton>
-            <IconButton onClick={fDelete}>
+            <IconButton onClick={fDelete} className="delete">
                 <Delete />
             </IconButton>
         </TableCell>
@@ -67,10 +67,14 @@ class Users extends Component<WithStyles<'wrapper'>, IState> {
     public render() {
         const {users, deleteId, editId} = this.state;
         return (
-            <DefaultPage title="Users" buttonTitle="Create User" fButton={this.showCreateDialog}>
+            <DefaultPage
+                title="Users"
+                buttonTitle="Create User"
+                buttonId="create-user"
+                fButton={this.showCreateDialog}>
                 <Grid item xs={12}>
                     <Paper elevation={6}>
-                        <Table>
+                        <Table id="user-table">
                             <TableHead>
                                 <TableRow style={{textAlign: 'center'}}>
                                     <TableCell>Name</TableCell>
diff --git a/ui/src/pages/dialog/AddApplicationDialog.tsx b/ui/src/pages/dialog/AddApplicationDialog.tsx
index e0ae73e..9fbb39a 100644
--- a/ui/src/pages/dialog/AddApplicationDialog.tsx
+++ b/ui/src/pages/dialog/AddApplicationDialog.tsx
@@ -30,7 +30,11 @@ export default class AddDialog extends Component<IProps, IState> {
             fClose();
         };
         return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+            <Dialog
+                open={true}
+                onClose={fClose}
+                aria-labelledby="form-dialog-title"
+                id="app-dialog">
                 <DialogTitle id="form-dialog-title">Create an application</DialogTitle>
                 <DialogContent>
                     <DialogContentText>
@@ -39,7 +43,7 @@ export default class AddDialog extends Component<IProps, IState> {
                     <TextField
                         autoFocus
                         margin="dense"
-                        id="name"
+                        className="name"
                         label="Name *"
                         type="email"
                         value={name}
@@ -48,7 +52,7 @@ export default class AddDialog extends Component<IProps, IState> {
                     />
                     <TextField
                         margin="dense"
-                        id="description"
+                        className="description"
                         label="Short Description"
                         value={description}
                         onChange={this.handleChange.bind(this, 'description')}
@@ -61,6 +65,7 @@ export default class AddDialog extends Component<IProps, IState> {
                     <Tooltip title={submitEnabled ? '' : 'name is required'}>
                         <div>
                             <Button
+                                className="create"
                                 disabled={!submitEnabled}
                                 onClick={submitAndClose}
                                 color="primary"
diff --git a/ui/src/pages/dialog/AddClientDialog.tsx b/ui/src/pages/dialog/AddClientDialog.tsx
index 51fb5fd..98c5e05 100644
--- a/ui/src/pages/dialog/AddClientDialog.tsx
+++ b/ui/src/pages/dialog/AddClientDialog.tsx
@@ -24,13 +24,17 @@ export default class AddDialog extends Component<IProps, {name: string}> {
             fClose();
         };
         return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+            <Dialog
+                open={true}
+                onClose={fClose}
+                aria-labelledby="form-dialog-title"
+                id="client-dialog">
                 <DialogTitle id="form-dialog-title">Create a client</DialogTitle>
                 <DialogContent>
                     <TextField
                         autoFocus
                         margin="dense"
-                        id="name"
+                        className="name"
                         label="Name *"
                         type="email"
                         value={name}
@@ -45,6 +49,7 @@ export default class AddDialog extends Component<IProps, {name: string}> {
                         title={submitEnabled ? '' : 'name is required'}>
                         <div>
                             <Button
+                                className="create"
                                 disabled={!submitEnabled}
                                 onClick={submitAndClose}
                                 color="primary"
diff --git a/ui/src/pages/dialog/AddEditUserDialog.tsx b/ui/src/pages/dialog/AddEditUserDialog.tsx
index f394e08..97c5e31 100644
--- a/ui/src/pages/dialog/AddEditUserDialog.tsx
+++ b/ui/src/pages/dialog/AddEditUserDialog.tsx
@@ -40,7 +40,11 @@ export default class AddEditDialog extends Component<IProps, IState> {
             fClose();
         };
         return (
-            <Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
+            <Dialog
+                open={true}
+                onClose={fClose}
+                aria-labelledby="form-dialog-title"
+                id="add-edit-user-dialog">
                 <DialogTitle id="form-dialog-title">
                     {isEdit ? 'Edit ' + this.props.name : 'Add a user'}
                 </DialogTitle>
@@ -48,7 +52,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
                     <TextField
                         autoFocus
                         margin="dense"
-                        id="name"
+                        className="name"
                         label="Name *"
                         type="email"
                         value={name}
@@ -57,7 +61,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
                     />
                     <TextField
                         margin="dense"
-                        id="description"
+                        className="password"
                         type="password"
                         value={pass}
                         fullWidth
@@ -68,6 +72,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
                         control={
                             <Switch
                                 checked={admin}
+                                className="admin-rights"
                                 onChange={this.handleChecked.bind(this, 'admin')}
                                 value="admin"
                             />
@@ -88,6 +93,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
                         }>
                         <div>
                             <Button
+                                className="save-create"
                                 disabled={!passPresent || !namePresent}
                                 onClick={submitAndClose}
                                 color="primary"