colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add css identifiers to all components for testing

This commit is contained in:
Jannis Mattheis 2018-09-14 20:48:33 +02:00
parent 7e7d13f3c1
commit 8165534bb6
15 changed files with 90 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/src/component/ConfirmDialog.tsx
View File

@ -19,14 +19,25 @@ export default function ConfirmDialog({title, text, fClose, fOnSubmit}: IProps)
fClose(); fClose();
}; };
return ( 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> <DialogTitle id="form-dialog-title">{title}</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText>{text}</DialogContentText> <DialogContentText>{text}</DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={fClose}>No</Button> <Button onClick={fClose} className="cancel">
<Button onClick={submitAndClose} autoFocus color="primary" variant="raised"> No
</Button>
<Button
onClick={submitAndClose}
autoFocus
color="primary"
variant="raised"
className="confirm">
Yes Yes
</Button> </Button>
</DialogActions> </DialogActions>

3
ui/src/component/DefaultPage.tsx
View File

@ -10,11 +10,13 @@ interface IProps {
buttonDisabled?: boolean; buttonDisabled?: boolean;
maxWidth?: number; maxWidth?: number;
hideButton?: boolean; hideButton?: boolean;
buttonId?: string;
} }
const DefaultPage: SFC<IProps> = ({ const DefaultPage: SFC<IProps> = ({
title, title,
buttonTitle, buttonTitle,
buttonId,
fButton, fButton,
buttonDisabled = false, buttonDisabled = false,
maxWidth = 700, maxWidth = 700,
@ -29,6 +31,7 @@ const DefaultPage: SFC<IProps> = ({
</Typography> </Typography>
{hideButton ? null : ( {hideButton ? null : (
<Button <Button
id={buttonId}
variant="raised" variant="raised"
color="primary" color="primary"
disabled={buttonDisabled} disabled={buttonDisabled}

10
ui/src/component/Header.tsx
View File

@ -81,7 +81,7 @@ class Header extends Component<IProps & Styles> {
return ( return (
<div> <div>
{admin ? ( {admin ? (
<Link className={classes.link} to="/users"> <Link className={classes.link} to="/users" id="navigate-users">
<Button color="inherit"> <Button color="inherit">
<SupervisorAccount /> <SupervisorAccount />
&nbsp;users &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"> <Button color="inherit">
<Chat /> <Chat />
&nbsp;apps &nbsp;apps
</Button> </Button>
</Link> </Link>
<Link className={classes.link} to="/clients"> <Link className={classes.link} to="/clients" id="navigate-clients">
<Button color="inherit"> <Button color="inherit">
<DevicesOther /> <DevicesOther />
&nbsp;clients &nbsp;clients
</Button> </Button>
</Link> </Link>
<Button color="inherit" onClick={showSettings}> <Button color="inherit" onClick={showSettings} id="changepw">
<AccountCircle /> <AccountCircle />
&nbsp; &nbsp;
{name} {name}
</Button> </Button>
<Button color="inherit" onClick={UserAction.logout}> <Button color="inherit" onClick={UserAction.logout} id="logout">
<ExitToApp /> <ExitToApp />
&nbsp;Logout &nbsp;Logout
</Button> </Button>

12
ui/src/component/Message.tsx
View File

@ -51,7 +51,7 @@ interface IProps {
function Message({fDelete, classes, title, date, content, image}: IProps & Style) { function Message({fDelete, classes, title, date, content, image}: IProps & Style) {
return ( return (
<div className={classes.wrapperPadding}> <div className={`${classes.wrapperPadding} message`}>
<Container style={{display: 'flex'}}> <Container style={{display: 'flex'}}>
<div className={classes.imageWrapper}> <div className={classes.imageWrapper}>
<img <img
@ -64,17 +64,19 @@ function Message({fDelete, classes, title, date, content, image}: IProps & Style
</div> </div>
<div className={classes.messageContentWrapper}> <div className={classes.messageContentWrapper}>
<div className={classes.header}> <div className={classes.header}>
<Typography className={classes.headerTitle} variant="headline"> <Typography className={`${classes.headerTitle} title`} variant="headline">
{title} {title}
</Typography> </Typography>
<Typography variant="body1"> <Typography variant="body1" className="date">
<TimeAgo date={date} /> <TimeAgo date={date} />
</Typography> </Typography>
<IconButton onClick={fDelete} className={classes.trash}> <IconButton onClick={fDelete} className={classes.trash}>
<Delete /> <Delete className="delete" />
</IconButton> </IconButton>
</div> </div>
<Typography component="p">{content}</Typography> <Typography component="p" className="content">
{content}
</Typography>
</div> </div>
</Container> </Container>
</div> </div>

12
ui/src/component/Navigation.tsx
View File

@ -51,7 +51,10 @@ class Navigation extends Component<IProps & Styles, IState> {
? null ? null
: apps.map((app) => { : apps.map((app) => {
return ( 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> <ListItem button>
<ListItemText primary={app.name} /> <ListItemText primary={app.name} />
</ListItem> </ListItem>
@ -69,10 +72,13 @@ class Navigation extends Component<IProps & Styles, IState> {
]; ];
return ( return (
<Drawer variant="permanent" classes={{paper: classes.drawerPaper}}> <Drawer
variant="permanent"
classes={{paper: classes.drawerPaper}}
id="message-navigation">
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<Link className={classes.link} to="/"> <Link className={classes.link} to="/">
<ListItem button disabled={!loggedIn}> <ListItem button disabled={!loggedIn} className="all">
<ListItemText primary="All Messages" /> <ListItemText primary="All Messages" />
</ListItem> </ListItem>
</Link> </Link>

8
ui/src/component/SettingsDialog.tsx
View File

@ -27,10 +27,15 @@ export default class SettingsDialog extends Component<IProps, IState> {
fClose(); fClose();
}; };
return ( 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> <DialogTitle id="form-dialog-title">Change Password</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
className="newpass"
autoFocus autoFocus
margin="dense" margin="dense"
type="password" type="password"
@ -45,6 +50,7 @@ export default class SettingsDialog extends Component<IProps, IState> {
<Tooltip title={pass.length !== 0 ? '' : 'pass is required'}> <Tooltip title={pass.length !== 0 ? '' : 'pass is required'}>
<div> <div>
<Button <Button
className="change"
disabled={pass.length === 0} disabled={pass.length === 0}
onClick={submitAndClose} onClick={submitAndClose}
color="primary" color="primary"

2
ui/src/component/ToggleVisibility.tsx
View File

@ -21,7 +21,7 @@ class ToggleVisibility extends Component<IProps, IState> {
const text = this.state.visible ? value : '•••••••••••••••'; const text = this.state.visible ? value : '•••••••••••••••';
return ( return (
<div style={style}> <div style={style}>
<IconButton onClick={this.toggleVisibility}> <IconButton onClick={this.toggleVisibility} className="toggle-visibility">
{this.state.visible ? <VisibilityOff /> : <Visibility />} {this.state.visible ? <VisibilityOff /> : <Visibility />}
</IconButton> </IconButton>
<Typography style={{fontFamily: "'Roboto Mono', monospace"}}>{text}</Typography> <Typography style={{fontFamily: "'Roboto Mono', monospace"}}>{text}</Typography>

5
ui/src/pages/Applications.tsx
View File

@ -43,11 +43,12 @@ class Applications extends Component<{}, IState> {
<DefaultPage <DefaultPage
title="Applications" title="Applications"
buttonTitle="Create Application" buttonTitle="Create Application"
buttonId="create-app"
maxWidth={1000} maxWidth={1000}
fButton={this.showCreateDialog}> fButton={this.showCreateDialog}>
<Grid item xs={12}> <Grid item xs={12}>
<Paper elevation={6}> <Paper elevation={6}>
<Table> <Table id="app-table">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell padding="checkbox" style={{width: 80}} /> <TableCell padding="checkbox" style={{width: 80}} />
@ -151,7 +152,7 @@ const Row: SFC<IRowProps> = ({name, value, description, fDelete, fUpload, image}
</TableCell> </TableCell>
<TableCell>{description}</TableCell> <TableCell>{description}</TableCell>
<TableCell numeric padding="none"> <TableCell numeric padding="none">
<IconButton onClick={fDelete}> <IconButton onClick={fDelete} className="delete">
<Delete /> <Delete />
</IconButton> </IconButton>
</TableCell> </TableCell>

5
ui/src/pages/Clients.tsx
View File

@ -39,10 +39,11 @@ class Clients extends Component<{}, IState> {
<DefaultPage <DefaultPage
title="Clients" title="Clients"
buttonTitle="Create Client" buttonTitle="Create Client"
buttonId="create-client"
fButton={this.showCreateDialog}> fButton={this.showCreateDialog}>
<Grid item xs={12}> <Grid item xs={12}>
<Paper elevation={6}> <Paper elevation={6}>
<Table> <Table id="client-table">
<TableHead> <TableHead>
<TableRow style={{textAlign: 'center'}}> <TableRow style={{textAlign: 'center'}}>
<TableCell>Name</TableCell> <TableCell>Name</TableCell>
@ -110,7 +111,7 @@ const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
/> />
</TableCell> </TableCell>
<TableCell numeric padding="none"> <TableCell numeric padding="none">
<IconButton onClick={fDelete}> <IconButton onClick={fDelete} className="delete">
<Delete /> <Delete />
</IconButton> </IconButton>
</TableCell> </TableCell>

7
ui/src/pages/Login.tsx
View File

@ -20,10 +20,10 @@ class Login extends Component<{}, IState> {
<DefaultPage title="Login" maxWidth={250} hideButton={true}> <DefaultPage title="Login" maxWidth={250} hideButton={true}>
<Grid item xs={12} style={{textAlign: 'center'}}> <Grid item xs={12} style={{textAlign: 'center'}}>
<Container> <Container>
<form onSubmit={this.preventDefault}> <form onSubmit={this.preventDefault} id="login-form">
<TextField <TextField
autoFocus autoFocus
id="name" className="name"
label="Username" label="Username"
margin="dense" margin="dense"
value={username} value={username}
@ -31,7 +31,7 @@ class Login extends Component<{}, IState> {
/> />
<TextField <TextField
type="password" type="password"
id="password" className="password"
label="Password" label="Password"
margin="normal" margin="normal"
value={password} value={password}
@ -41,6 +41,7 @@ class Login extends Component<{}, IState> {
type="submit" type="submit"
variant="raised" variant="raised"
size="large" size="large"
className="login"
color="primary" color="primary"
style={{marginTop: 15, marginBottom: 5}} style={{marginTop: 15, marginBottom: 5}}
onClick={this.login}> onClick={this.login}>

3
ui/src/pages/Messages.tsx
View File

@ -58,10 +58,11 @@ class Messages extends Component<IProps, IState> {
<DefaultPage <DefaultPage
title={name} title={name}
buttonTitle="Delete All" buttonTitle="Delete All"
buttonId="delete-all"
fButton={deleteMessages} fButton={deleteMessages}
buttonDisabled={!hasMessages}> buttonDisabled={!hasMessages}>
{hasMessages ? ( {hasMessages ? (
<div style={{width: '100%'}}> <div style={{width: '100%'}} id="messages">
<ReactList <ReactList
key={appId} key={appId}
ref={(el: ReactList) => (this.list = el)} ref={(el: ReactList) => (this.list = el)}

12
ui/src/pages/Users.tsx
View File

@ -35,10 +35,10 @@ const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
<TableCell>{name}</TableCell> <TableCell>{name}</TableCell>
<TableCell>{admin ? 'Yes' : 'No'}</TableCell> <TableCell>{admin ? 'Yes' : 'No'}</TableCell>
<TableCell numeric padding="none"> <TableCell numeric padding="none">
<IconButton onClick={fEdit}> <IconButton onClick={fEdit} className="edit">
<Edit /> <Edit />
</IconButton> </IconButton>
<IconButton onClick={fDelete}> <IconButton onClick={fDelete} className="delete">
<Delete /> <Delete />
</IconButton> </IconButton>
</TableCell> </TableCell>
@ -67,10 +67,14 @@ class Users extends Component<WithStyles<'wrapper'>, IState> {
public render() { public render() {
const {users, deleteId, editId} = this.state; const {users, deleteId, editId} = this.state;
return ( 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}> <Grid item xs={12}>
<Paper elevation={6}> <Paper elevation={6}>
<Table> <Table id="user-table">
<TableHead> <TableHead>
<TableRow style={{textAlign: 'center'}}> <TableRow style={{textAlign: 'center'}}>
<TableCell>Name</TableCell> <TableCell>Name</TableCell>

11
ui/src/pages/dialog/AddApplicationDialog.tsx
View File

@ -30,7 +30,11 @@ export default class AddDialog extends Component<IProps, IState> {
fClose(); fClose();
}; };
return ( 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> <DialogTitle id="form-dialog-title">Create an application</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText> <DialogContentText>
@ -39,7 +43,7 @@ export default class AddDialog extends Component<IProps, IState> {
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" className="name"
label="Name *" label="Name *"
type="email" type="email"
value={name} value={name}
@ -48,7 +52,7 @@ export default class AddDialog extends Component<IProps, IState> {
/> />
<TextField <TextField
margin="dense" margin="dense"
id="description" className="description"
label="Short Description" label="Short Description"
value={description} value={description}
onChange={this.handleChange.bind(this, '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'}> <Tooltip title={submitEnabled ? '' : 'name is required'}>
<div> <div>
<Button <Button
className="create"
disabled={!submitEnabled} disabled={!submitEnabled}
onClick={submitAndClose} onClick={submitAndClose}
color="primary" color="primary"

9
ui/src/pages/dialog/AddClientDialog.tsx
View File

@ -24,13 +24,17 @@ export default class AddDialog extends Component<IProps, {name: string}> {
fClose(); fClose();
}; };
return ( 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> <DialogTitle id="form-dialog-title">Create a client</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" className="name"
label="Name *" label="Name *"
type="email" type="email"
value={name} value={name}
@ -45,6 +49,7 @@ export default class AddDialog extends Component<IProps, {name: string}> {
title={submitEnabled ? '' : 'name is required'}> title={submitEnabled ? '' : 'name is required'}>
<div> <div>
<Button <Button
className="create"
disabled={!submitEnabled} disabled={!submitEnabled}
onClick={submitAndClose} onClick={submitAndClose}
color="primary" color="primary"

12
ui/src/pages/dialog/AddEditUserDialog.tsx
View File

@ -40,7 +40,11 @@ export default class AddEditDialog extends Component<IProps, IState> {
fClose(); fClose();
}; };
return ( 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"> <DialogTitle id="form-dialog-title">
{isEdit ? 'Edit ' + this.props.name : 'Add a user'} {isEdit ? 'Edit ' + this.props.name : 'Add a user'}
</DialogTitle> </DialogTitle>
@ -48,7 +52,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
<TextField <TextField
autoFocus autoFocus
margin="dense" margin="dense"
id="name" className="name"
label="Name *" label="Name *"
type="email" type="email"
value={name} value={name}
@ -57,7 +61,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
/> />
<TextField <TextField
margin="dense" margin="dense"
id="description" className="password"
type="password" type="password"
value={pass} value={pass}
fullWidth fullWidth
@ -68,6 +72,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
control={ control={
<Switch <Switch
checked={admin} checked={admin}
className="admin-rights"
onChange={this.handleChecked.bind(this, 'admin')} onChange={this.handleChecked.bind(this, 'admin')}
value="admin" value="admin"
/> />
@ -88,6 +93,7 @@ export default class AddEditDialog extends Component<IProps, IState> {
}> }>
<div> <div>
<Button <Button
className="save-create"
disabled={!passPresent || !namePresent} disabled={!passPresent || !namePresent}
onClick={submitAndClose} onClick={submitAndClose}
color="primary" color="primary"