litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(litmus-portal): Added unique attributes in frontend for E2E testing and minor CSS changes (#2111) 

* Added the unique attributes for E2E testing

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

* Updated the LinearProgressBar component and minor css fixes

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

* Added keys to card components

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>
This commit is contained in:
Amit Kumar Das 2020-09-25 18:58:46 +05:30 committed by GitHub
parent 8ad6ecc9a8
commit 34e782390f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 321 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
View File

@ -5,7 +5,7 @@ import LinearProgressBar from '../../src/components/ProgressBar/LinearProgressBa
describe('Linear Progressbar Testing', () => { describe('Linear Progressbar Testing', () => {
it('Progressbar stroke for value 3', () => { it('Progressbar stroke for value 3', () => {
mount(<LinearProgressBar value={2} />); mount(<LinearProgressBar width={1.5} value={2} />);
cy.get('.rc-progress-line-path').should( cy.get('.rc-progress-line-path').should(
'have.css', 'have.css',
'stroke-dasharray', 'stroke-dasharray',
@ -13,7 +13,7 @@ describe('Linear Progressbar Testing', () => {
); );
}); });
it('Progressbar stroke for value 8', () => { it('Progressbar stroke for value 8', () => {
mount(<LinearProgressBar value={8} />); mount(<LinearProgressBar width={1.5} value={8} />);
cy.get('.rc-progress-line-path').should( cy.get('.rc-progress-line-path').should(
'have.css', 'have.css',
'stroke-dasharray', 'stroke-dasharray',
@ -21,7 +21,7 @@ describe('Linear Progressbar Testing', () => {
); );
}); });
it('Progressbar stroke for value 6', () => { it('Progressbar stroke for value 6', () => {
mount(<LinearProgressBar value={6} />); mount(<LinearProgressBar width={1.5} value={6} />);
cy.get('.rc-progress-line-path').should( cy.get('.rc-progress-line-path').should(
'have.css', 'have.css',
'stroke-dasharray', 'stroke-dasharray',
@ -29,7 +29,7 @@ describe('Linear Progressbar Testing', () => {
); );
}); });
it('Progressbar stroke if default', () => { it('Progressbar stroke if default', () => {
mount(<LinearProgressBar value={8} isDefault />); mount(<LinearProgressBar width={1.5} value={8} isDefault />);
cy.get('.rc-progress-line-path').should( cy.get('.rc-progress-line-path').should(
'have.css', 'have.css',
'stroke-dasharray', 'stroke-dasharray',

2
litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
View File

@ -66,7 +66,7 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
</div> </div>
<div> <div>
<LinearProgressBar value={testValue} /> <LinearProgressBar width={1} value={testValue} />
</div> </div>
</div> </div>
); );

5
litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
View File

@ -145,6 +145,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
<div className={classes.userInfo}> <div className={classes.userInfo}>
<Typography <Typography
data-cy="name-header"
className={classes.userName} className={classes.userName}
component="span" component="span"
color="textPrimary" color="textPrimary"
@ -152,6 +153,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
{name} {name}
</Typography> </Typography>
<Typography <Typography
data-cy="email-header"
className={classes.userEmail} className={classes.userEmail}
variant="body1" variant="body1"
component="span" component="span"
@ -175,6 +177,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
)} )}
<Button <Button
data-cy="logout"
disabled={loggedOut} disabled={loggedOut}
size="small" size="small"
onClick={logOut} onClick={logOut}
@ -187,7 +190,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
<Divider className={classes.dividerTop} /> <Divider className={classes.dividerTop} />
<List dense className={classes.tabContainerProfileDropdownItem}> <List dense className={classes.tabContainerProfileDropdownItem}>
{switchableProjects.length === 0 ? ( {switchableProjects.length === 0 ? (
<ListItem> <ListItem data-cy="project">
<ListItemText> <ListItemText>
{t('header.profileDropdown.noProjects')} {t('header.profileDropdown.noProjects')}
</ListItemText> </ListItemText>

3
litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
View File

@ -51,9 +51,10 @@ const ProfileDropdownSection: React.FC<ProfileInfoDropdownSectionProps> = ({
</Box> </Box>
<Box p={1}> <Box p={1}>
<Typography> <Typography data-cy="full-name">
{name}{' '} {name}{' '}
<IconButton <IconButton
data-cy="header-dropdown"
edge="end" edge="end"
ref={profileMenuRef} ref={profileMenuRef}
aria-label="account of current user" aria-label="account of current user"

1
litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
View File

@ -36,6 +36,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = ({
return ( return (
<ListItem <ListItem
data-cy="project"
divider={divider} divider={divider}
onClick={selectProject} onClick={selectProject}
style={{ backgroundColor: projSelected ? '#109B67' : 'white' }} style={{ backgroundColor: projSelected ? '#109B67' : 'white' }}

36
litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
View File

@ -19,23 +19,27 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
{workflows && {workflows &&
workflows.map((w: preDefinedWorkflowData, index: number) => workflows.map((w: preDefinedWorkflowData, index: number) =>
w.isCustom ? ( w.isCustom ? (
<CustomWorkflowCard <div key={w.workflowID} data-cy="templatesCard">
handleClick={() => callbackOnSelectWorkflow(index)} <CustomWorkflowCard
/> handleClick={() => callbackOnSelectWorkflow(index)}
/>
</div>
) : ( ) : (
<CustomCard <div key={w.workflowID} data-cy="templatesCard">
key={w.workflowID} <CustomCard
title={w.title} key={w.workflowID}
urlToIcon={w.urlToIcon} title={w.title}
provider={w.provider} urlToIcon={w.urlToIcon}
chaosWkfCRDLink={w.chaosWkfCRDLink} provider={w.provider}
selectedID={w.workflowID} chaosWkfCRDLink={w.chaosWkfCRDLink}
handleClick={() => callbackOnSelectWorkflow(index)} selectedID={w.workflowID}
description={w.description} handleClick={() => callbackOnSelectWorkflow(index)}
totalRuns={w.totalRuns} description={w.description}
gitLink={w.gitLink} totalRuns={w.totalRuns}
workflowID={w.workflowID} gitLink={w.gitLink}
/> workflowID={w.workflowID}
/>
</div>
) )
)} )}
</div> </div>

32
litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
View File

@ -1,41 +1,35 @@
import { Line } from 'rc-progress'; import { Line } from 'rc-progress';
import React, { useEffect, useState } from 'react'; import React from 'react';
import { useTheme } from '@material-ui/core/styles'; import { useTheme } from '@material-ui/core/styles';
interface LinearProgressBarProps { interface LinearProgressBarProps {
value: number | number[]; value: number | number[];
isDefault?: boolean; isDefault?: boolean;
width: number;
} }
const LinearProgressBar: React.FC<LinearProgressBarProps> = ({ const LinearProgressBar: React.FC<LinearProgressBarProps> = ({
value, value,
isDefault, isDefault,
width,
}) => { }) => {
const [color, setColor] = useState(' ');
const width: number = 2;
const resultValue = (value as number) * 10; const resultValue = (value as number) * 10;
const theme = useTheme(); const theme = useTheme();
const changeColor = () => {
if (resultValue <= 30) {
return setColor(theme.palette.error.dark);
}
if (resultValue <= 60) {
return setColor(theme.palette.warning.main);
}
return setColor(theme.palette.primary.dark);
};
useEffect(() => {
if (isDefault === true) {
return setColor(theme.palette.secondary.dark);
}
return changeColor();
}, [resultValue]);
return ( return (
<Line <Line
percent={resultValue} percent={resultValue}
strokeWidth={width} strokeWidth={width}
trailWidth={width} trailWidth={width}
strokeColor={color} strokeColor={
isDefault
? theme.palette.secondary.dark
: resultValue > 30 && resultValue <= 60
? theme.palette.warning.main
: resultValue > 60
? theme.palette.primary.dark
: theme.palette.error.dark
}
/> />
); );
}; };

40
litmus-portal/frontend/src/components/SideBar/index.tsx
View File

@ -72,15 +72,17 @@ const SideBar: React.FC = () => {
> >
<HomeIcon /> <HomeIcon />
</CustomisedListItem> </CustomisedListItem>
<CustomisedListItem <div data-cy="workflows">
key="workflow" <CustomisedListItem
handleClick={() => { key="workflow"
history.push('/workflows'); handleClick={() => {
}} history.push('/workflows');
label="Workflows" }}
> label="Workflows"
<WorkflowsIcon /> >
</CustomisedListItem> <WorkflowsIcon />
</CustomisedListItem>
</div>
<CustomisedListItem <CustomisedListItem
key="community" key="community"
handleClick={() => { handleClick={() => {
@ -91,15 +93,17 @@ const SideBar: React.FC = () => {
<CommunityIcon /> <CommunityIcon />
</CustomisedListItem> </CustomisedListItem>
{userRole === 'Owner' && ( {userRole === 'Owner' && (
<CustomisedListItem <div data-cy="settings">
key="settings" <CustomisedListItem
handleClick={() => { key="settings"
history.push('/settings'); handleClick={() => {
}} history.push('/settings');
label="Settings" }}
> label="Settings"
<SettingsIcon /> >
</CustomisedListItem> <SettingsIcon />
</CustomisedListItem>
</div>
)} )}
</List> </List>
</Drawer> </Drawer>

50
litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
View File

@ -203,6 +203,27 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
if (activeStep === 3) { if (activeStep === 3) {
return ( return (
<div className={classes.buttonDiv}> <div className={classes.buttonDiv}>
<div data-cy="backButton">
<ButtonOutline isDisabled={false} handleClick={handleBack}>
<>{t('welcomeModel.button.back')}</>
</ButtonOutline>
</div>
<div data-cy="startButton">
<ButtonFilled
isPrimary
isDisabled={isError.current}
handleClick={handleSubmit}
data-cy="Start"
>
<div>{t('welcomeModel.button.letsStart')}</div>
</ButtonFilled>
</div>
</div>
);
}
return (
<div className={classes.buttonDiv}>
<div data-cy="backButton">
<ButtonOutline <ButtonOutline
isDisabled={false} isDisabled={false}
handleClick={handleBack} handleClick={handleBack}
@ -210,34 +231,17 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
> >
<>{t('welcomeModel.button.back')}</> <>{t('welcomeModel.button.back')}</>
</ButtonOutline> </ButtonOutline>
</div>
<div data-cy="startButton">
<ButtonFilled <ButtonFilled
isPrimary isPrimary
isDisabled={isError.current} isDisabled={isError.current}
handleClick={handleSubmit} handleClick={handleNext}
data-cy="Start" data-cy="Continue"
> >
<div>{t('welcomeModel.button.letsStart')}</div> <div>{t('welcomeModel.button.continue')}</div>
</ButtonFilled> </ButtonFilled>
</div> </div>
);
}
return (
<div className={classes.buttonDiv}>
<ButtonOutline
isDisabled={false}
handleClick={handleBack}
data-cy="Back"
>
<>{t('welcomeModel.button.back')}</>
</ButtonOutline>
<ButtonFilled
isPrimary
isDisabled={isError.current}
handleClick={handleNext}
data-cy="Continue"
>
<div>{t('welcomeModel.button.continue')}</div>
</ButtonFilled>
</div> </div>
); );
}; };
@ -374,7 +378,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
<ModalPage <ModalPage
renderMenu={ renderMenu={
<div className={classes.passwordSetterDiv}> <div className={classes.passwordSetterDiv}>
<div className={classes.inputArea} data-cy="InputName"> <div className={classes.inputArea} data-cy="InputEmail">
<InputField <InputField
label={t('welcomeModel.case-3.label')} label={t('welcomeModel.case-3.label')}
required required

4
litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
View File

@ -98,7 +98,9 @@ const CardContent: React.FC<preDefinedWorkflowData> = ({
<div className={classes.noImage}>Image</div> <div className={classes.noImage}>Image</div>
)} )}
<div> <div>
<div className={classes.title}>{title}</div> <div data-cy="expName" className={classes.title}>
{title}
</div>
<div className={classes.provider}>Contributed by {provider}</div> <div className={classes.provider}>Contributed by {provider}</div>
</div> </div>
{description ? ( {description ? (

87
litmus-portal/frontend/src/pages/LoginPage/index.tsx
View File

@ -87,52 +87,51 @@ const LoginPage = () => {
</Typography> </Typography>
<form id="login-form" autoComplete="on" onSubmit={handleSubmit}> <form id="login-form" autoComplete="on" onSubmit={handleSubmit}>
<div className={classes.inputDiv}> <div className={classes.inputDiv}>
<InputField <div className={classes.inputValue} data-cy="inputName">
label="Username" <InputField
value={authData.username} label="Username"
helperText={ value={authData.username}
validateStartEmptySpacing(authData.username) helperText={
? 'Should not start with an empty space' validateStartEmptySpacing(authData.username)
: '' ? 'Should not start with an empty space'
} : ''
validationError={validateStartEmptySpacing(authData.username)} }
data-cy="inputEmail" validationError={validateStartEmptySpacing(authData.username)}
required required
handleChange={(e) => handleChange={(e) =>
setAuthData({ setAuthData({
username: e.target.value, username: e.target.value,
password: authData.password, password: authData.password,
}) })
} }
/> />
<InputField </div>
label="Password" <div className={classes.inputValue} data-cy="inputPassword">
type="password" <InputField
required label="Password"
value={authData.password} type="password"
helperText={ required
isError value={authData.password}
? 'Wrong Credentials - Try again with correct username or password' helperText={
: '' isError
} ? 'Wrong Credentials - Try again with correct username or password'
validationError={isError} : ''
data-cy="inputPassword" }
handleChange={(e) => validationError={isError}
setAuthData({ handleChange={(e) =>
username: authData.username, setAuthData({
password: e.target.value, username: authData.username,
}) password: e.target.value,
} })
/> }
/>
</div>
</div> </div>
<div className={classes.loginDiv}> <div className={classes.loginDiv}>
<ButtonFilled <ButtonFilled type="submit" isPrimary isDisabled={isLoading}>
type="submit" <div data-cy="loginButton">
isPrimary {isLoading ? <Loader size={loaderSize} /> : 'Login'}
data-cy="loginButton" </div>
isDisabled={isLoading}
>
{isLoading ? <Loader size={loaderSize} /> : 'Login'}
</ButtonFilled> </ButtonFilled>
</div> </div>
</form> </form>

6
litmus-portal/frontend/src/pages/LoginPage/styles.ts
View File

@ -59,7 +59,11 @@ const useStyles = makeStyles((theme) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
marginTop: theme.spacing(1), marginTop: theme.spacing(1),
marginLeft: theme.spacing(-2), marginLeft: theme.spacing(-2.1),
},
inputValue: {
width: '25rem',
}, },
linkForgotPass: { linkForgotPass: {

10
litmus-portal/frontend/src/pages/Settings/index.tsx
View File

@ -72,10 +72,14 @@ const Settings: React.FC = () => {
}, },
}} }}
> >
<Tab label="My Account" {...tabProps(0)} /> <Tab data-cy="my-account" label="My Account" {...tabProps(0)} />
<Tab label="Team" {...tabProps(1)} /> <Tab data-cy="teaming" label="Team" {...tabProps(1)} />
{userData.username === 'admin' ? ( {userData.username === 'admin' ? (
<Tab label="User Management" {...tabProps(2)} /> <Tab
data-cy="user-management"
label="User Management"
{...tabProps(2)}
/>
) : ( ) : (
<></> <></>
)} )}

2
litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
View File

@ -80,7 +80,7 @@ const WorkflowDetails: React.FC = () => {
{workflow ? ( {workflow ? (
<div className={classes.root}> <div className={classes.root}>
<div className={classes.workflowGraph}> <div className={classes.workflowGraph}>
<Typography className={classes.heading}> <Typography data-cy="wfName" className={classes.heading}>
{workflow.workflow_name} {workflow.workflow_name}
</Typography> </Typography>
<Typography>{t('workflowDetails.detailedLog')}</Typography> <Typography>{t('workflowDetails.detailedLog')}</Typography>

10
litmus-portal/frontend/src/pages/Workflows/index.tsx
View File

@ -39,7 +39,7 @@ const Workflows = () => {
isPrimary={false} isPrimary={false}
handleClick={() => history.push('/create-workflow')} handleClick={() => history.push('/create-workflow')}
> >
<>Schedule a workflow</> <Typography>Schedule a workflow</Typography>
</ButtonFilled> </ButtonFilled>
</div> </div>
</div> </div>
@ -55,10 +55,10 @@ const Workflows = () => {
}} }}
variant="fullWidth" variant="fullWidth"
> >
<StyledTab label="Browse workflows" /> <StyledTab label="Browse workflows" data-cy="browseWorkflow" />
<StyledTab label="Schedules" /> <StyledTab label="Schedules" data-cy="browseSchedule" />
<StyledTab label="Templates" /> <StyledTab label="Templates" data-cy="templates" />
<StyledTab label="Analytics" /> <StyledTab label="Analytics" data-cy="analyticsWorkflow" />
</Tabs> </Tabs>
</AppBar> </AppBar>
<TabPanel value={workflowTabValue} index={0}> <TabPanel value={workflowTabValue} index={0}>

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx
View File

@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
<div className={classes.reliabiltyData}> <div className={classes.reliabiltyData}>
<Typography>{data.resulting_points} Points</Typography> <Typography>{data.resulting_points} Points</Typography>
<div className={classes.progressBar}> <div className={classes.progressBar}>
<LinearProgressBar value={data.resulting_points ?? 0} /> <LinearProgressBar width={2} value={data.resulting_points ?? 0} />
</div> </div>
</div> </div>
</TableCell> </TableCell>

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
View File

@ -21,7 +21,7 @@ const ExperimentPoints: React.FC<ExperimentPointsProps> = ({
{weight === 1 || 0 ? `${weight} point` : `${weight} points`} {weight === 1 || 0 ? `${weight} point` : `${weight} points`}
</Typography> </Typography>
</div> </div>
<LinearProgressBar value={weight} /> <LinearProgressBar width={1} value={weight} />
</> </>
); );
}; };

3
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
View File

@ -134,6 +134,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
aria-haspopup="true" aria-haspopup="true"
onClick={handleClick} onClick={handleClick}
className={classes.optionBtn} className={classes.optionBtn}
data-cy="browseScheduleOptions"
> >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
@ -154,7 +155,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
alt="Delete Schedule" alt="Delete Schedule"
className={classes.btnImg} className={classes.btnImg}
/> />
<Typography className={classes.btnText}> <Typography data-cy="deleteSchedule" className={classes.btnText}>
Delete Schedule Delete Schedule
</Typography> </Typography>
</div> </div>

14
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
View File

@ -186,7 +186,10 @@ const BrowseSchedule = () => {
</section> </section>
<section className="table section"> <section className="table section">
{/* Table Header */} {/* Table Header */}
<TableContainer className={classes.tableMain}> <TableContainer
data-cy="browseScheduleTable"
className={classes.tableMain}
>
<Table stickyHeader aria-label="simple table"> <Table stickyHeader aria-label="simple table">
<TableHead> <TableHead>
<TableRow className={classes.tableHead}> <TableRow className={classes.tableHead}>
@ -296,7 +299,7 @@ const BrowseSchedule = () => {
</TableRow> </TableRow>
) : error ? ( ) : error ? (
<TableRow> <TableRow>
<TableCell colSpan={7}> <TableCell data-cy="browseScheduleError" colSpan={7}>
<Typography align="center">Unable to fetch data</Typography> <Typography align="center">Unable to fetch data</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -308,13 +311,16 @@ const BrowseSchedule = () => {
paginationData.rowsPerPage paginationData.rowsPerPage
) )
.map((data: ScheduleWorkflow) => ( .map((data: ScheduleWorkflow) => (
<TableRow key={data.workflow_id}> <TableRow
data-cy="browseScheduleData"
key={data.workflow_id}
>
<TableData data={data} deleteRow={deleteRow} /> <TableData data={data} deleteRow={deleteRow} />
</TableRow> </TableRow>
)) ))
) : ( ) : (
<TableRow> <TableRow>
<TableCell colSpan={7}> <TableCell data-cy="browseScheduleNoData" colSpan={7}>
<Typography align="center">No records available</Typography> <Typography align="center">No records available</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
View File

@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 13, fontSize: 13,
}, },
'& *': { '& th': {
backgroundColor: theme.palette.common.white, backgroundColor: theme.palette.common.white,
}, },
}, },

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
View File

@ -15,7 +15,7 @@ const Head: React.FC<HeadProps> = ({ image, title, details }) => {
<div className={classes.flexRow}> <div className={classes.flexRow}>
<img src={image} alt="workflowIcon" className={classes.bgIcon} /> <img src={image} alt="workflowIcon" className={classes.bgIcon} />
<div className={classes.body}> <div className={classes.body}>
<Typography className={classes.headerText}> <Typography data-cy="expName" className={classes.headerText}>
{/* Converting 'some-experiment' to 'Some Experiment' using capitalize utility */} {/* Converting 'some-experiment' to 'Some Experiment' using capitalize utility */}
{title?.split('-').map((text) => `${capitalize(text)} `)} {title?.split('-').map((text) => `${capitalize(text)} `)}
</Typography> </Typography>

11
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
View File

@ -49,7 +49,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
<CustomStatus status={exeData.phase} /> <CustomStatus status={exeData.phase} />
</TableCell> </TableCell>
<TableCell className={classes.workflowNameData}> <TableCell className={classes.workflowNameData}>
<Typography> <Typography data-cy="workflowName">
<strong>{data.workflow_name}</strong> <strong>{data.workflow_name}</strong>
</Typography> </Typography>
</TableCell> </TableCell>
@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
Overall RR: <span className={classes.failed}>0%</span> Overall RR: <span className={classes.failed}>0%</span>
</Typography> </Typography>
<div className={classes.progressBar}> <div className={classes.progressBar}>
<LinearProgressBar value={0} /> <LinearProgressBar width={2} value={0} />
</div> </div>
</> </>
) : ( ) : (
@ -75,7 +75,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
Overall RR: <span className={classes.success}>100%</span> Overall RR: <span className={classes.success}>100%</span>
</Typography> </Typography>
<div className={classes.progressBar}> <div className={classes.progressBar}>
<LinearProgressBar value={100} /> <LinearProgressBar width={2} value={100} />
</div> </div>
</> </>
)} )}
@ -96,6 +96,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
aria-haspopup="true" aria-haspopup="true"
onClick={handleClick} onClick={handleClick}
className={classes.optionBtn} className={classes.optionBtn}
data-cy="browseWorkflowOptions"
> >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
@ -112,7 +113,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
history.push(`/workflows/details/${data.workflow_run_id}`) history.push(`/workflows/details/${data.workflow_run_id}`)
} }
> >
<div className={classes.expDiv}> <div className={classes.expDiv} data-cy="workflowDetails">
<img <img
src="/icons/show-workflow.svg" src="/icons/show-workflow.svg"
alt="Display Workflow" alt="Display Workflow"
@ -129,7 +130,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
history.push(`/workflows/analytics/${data.workflow_id}`) history.push(`/workflows/analytics/${data.workflow_id}`)
} }
> >
<div className={classes.expDiv}> <div className={classes.expDiv} data-cy="workflowAnalytics">
<img <img
src="/icons/show-analytics.svg" src="/icons/show-analytics.svg"
alt="Display Analytics" alt="Display Analytics"

15
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
View File

@ -258,7 +258,7 @@ const BrowseWorkflow = () => {
return <></>; return <></>;
} }
return ( return (
<TableRow key={dataRow.workflow_run_id}> <TableRow data-cy="browseWorkflowData" key={dataRow.workflow_run_id}>
<TableData data={dataRow} exeData={exe_data} /> <TableData data={dataRow} exeData={exe_data} />
</TableRow> </TableRow>
); );
@ -285,7 +285,10 @@ const BrowseWorkflow = () => {
/> />
</section> </section>
<section className="table section"> <section className="table section">
<TableContainer className={classes.tableMain}> <TableContainer
data-cy="browseWorkflowTable"
className={classes.tableMain}
>
<Table stickyHeader aria-label="simple table"> <Table stickyHeader aria-label="simple table">
<TableHead className={classes.tableHead}> <TableHead className={classes.tableHead}>
<TableRow> <TableRow>
@ -423,7 +426,9 @@ const BrowseWorkflow = () => {
{error ? ( {error ? (
<TableRow> <TableRow>
<TableCell colSpan={7}> <TableCell colSpan={7}>
<Typography align="center">Unable to fetch data</Typography> <Typography data-cy="browseWorkflowError" align="center">
Unable to fetch data
</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
) : filteredData && filteredData.length ? ( ) : filteredData && filteredData.length ? (
@ -437,7 +442,9 @@ const BrowseWorkflow = () => {
) : ( ) : (
<TableRow> <TableRow>
<TableCell colSpan={7}> <TableCell colSpan={7}>
<Typography align="center">No records available</Typography> <Typography data-cy="browseWorkflowNoData" align="center">
No records available
</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
)} )}

2
litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
View File

@ -66,8 +66,6 @@ const useStyles = makeStyles((theme) => ({
'& th': { '& th': {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 13, fontSize: 13,
},
'& *': {
backgroundColor: theme.palette.common.white, backgroundColor: theme.palette.common.white,
}, },
}, },

2
litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
View File

@ -61,7 +61,7 @@ const Templates = () => {
</div> </div>
<Typography className={classes.headerSize}>Sort</Typography> <Typography className={classes.headerSize}>Sort</Typography>
</div> */} </div> */}
<div className={classes.predefinedCards}> <div data-cy="templatesPage" className={classes.predefinedCards}>
<PredifinedWorkflows <PredifinedWorkflows
callbackOnSelectWorkflow={(index: number) => { callbackOnSelectWorkflow={(index: number) => {
selectWorkflow(index); selectWorkflow(index);

4
litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
View File

@ -106,7 +106,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
&nbsp; points &nbsp; points
<br /> <br />
<div className={classes.progressBar}> <div className={classes.progressBar}>
<LinearProgressBar value={row.weight} /> <LinearProgressBar width={2} value={row.weight} />
</div> </div>
</TableCell> </TableCell>
<TableCell align="left" className={classes.tablePoints}> <TableCell align="left" className={classes.tablePoints}>
@ -114,7 +114,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
&nbsp; points &nbsp; points
<br /> <br />
<div className={classes.progressBar}> <div className={classes.progressBar}>
<LinearProgressBar value={row.points} /> <LinearProgressBar width={2} value={row.points} />
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>

98
litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
View File

@ -124,55 +124,59 @@ const AccountSettings: React.FC = () => {
<div className={classes.outerPass}> <div className={classes.outerPass}>
<form className={classes.innerPass}> <form className={classes.innerPass}>
{/* Current Password */} {/* Current Password */}
<InputField <div data-cy="currPassword">
required <InputField
value={password.currPassword} required
handleChange={handleCurrPassword('currPassword')} value={password.currPassword}
type="password" handleChange={handleCurrPassword('currPassword')}
label="Current Password" type="password"
validationError={false} label="Current Password"
/> validationError={false}
/>
</div>
{/* New Password */} {/* New Password */}
<InputField <div data-cy="newPassword">
required <InputField
type="password" required
handleChange={handleNewPassword('newPassword')} type="password"
success={isSuccess.current} handleChange={handleNewPassword('newPassword')}
helperText={ success={isSuccess.current}
validateStartEmptySpacing(password.newPassword) helperText={
? 'Should not start with empty space' validateStartEmptySpacing(password.newPassword)
: '' ? 'Should not start with empty space'
} : ''
label="New Password" }
validationError={validateStartEmptySpacing( label="New Password"
password.newPassword validationError={validateStartEmptySpacing(
)} password.newPassword
value={password.newPassword} )}
/> value={password.newPassword}
/>
</div>
{/* Confirm new password */} {/* Confirm new password */}
<InputField <div data-cy="confPassword">
helperText={ <InputField
validateConfirmPassword( helperText={
validateConfirmPassword(
password.newPassword,
password.confNewPassword
)
? 'Password is not same'
: ''
}
required
type="password"
handleChange={handleConfPassword('confNewPassword')}
success={isSuccess.current}
label="Confirm Password"
validationError={validateConfirmPassword(
password.newPassword, password.newPassword,
password.confNewPassword password.confNewPassword
) )}
? 'Password is not same' value={password.confNewPassword}
: '' />
} </div>
required <div data-cy="change-password" className={classes.buttonModal}>
type="password"
handleChange={handleConfPassword('confNewPassword')}
success={isSuccess.current}
label="Confirm Password"
validationError={validateConfirmPassword(
password.newPassword,
password.confNewPassword
)}
value={password.confNewPassword}
/>
<div className={classes.buttonModal}>
<ButtonFilled <ButtonFilled
data-cy="button" data-cy="button"
isPrimary isPrimary
@ -211,7 +215,7 @@ const AccountSettings: React.FC = () => {
Error: {error} Error: {error}
</Typography> </Typography>
</div> </div>
<div className={classes.buttonModal}> <div data-cy="done" className={classes.buttonModal}>
<ButtonFilled <ButtonFilled
isPrimary isPrimary
isDisabled={false} isDisabled={false}
@ -235,7 +239,7 @@ const AccountSettings: React.FC = () => {
account account
</Typography> </Typography>
</div> </div>
<div className={classes.buttonModal}> <div data-cy="done" className={classes.buttonModal}>
<ButtonFilled <ButtonFilled
isPrimary isPrimary
isDisabled={false} isDisabled={false}

1
litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
View File

@ -94,6 +94,7 @@ const useStyles = makeStyles((theme: Theme) => ({
buttonModal: { buttonModal: {
marginTop: theme.spacing(3.75), marginTop: theme.spacing(3.75),
width: '55%',
}, },
textSecondError: { textSecondError: {
width: '27.5rem', width: '27.5rem',

69
litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
View File

@ -1,5 +1,5 @@
import { useMutation, useQuery } from '@apollo/client'; import { useMutation, useQuery } from '@apollo/client';
import { Button, Typography } from '@material-ui/core'; import { Typography } from '@material-ui/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import ButtonFilled from '../../../../components/Button/ButtonFilled'; import ButtonFilled from '../../../../components/Button/ButtonFilled';
@ -102,30 +102,32 @@ const PersonalDetails: React.FC = () => {
/> />
<div className={classes.saveButton}> <div className={classes.saveButton}>
<ButtonFilled <div data-cy="save">
isDisabled={!(personaData.fullName.length && !loading)} <ButtonFilled
isPrimary isDisabled={!(personaData.fullName.length && !loading)}
handleClick={() => { isPrimary
setLoading(true); handleClick={() => {
updateDetails({ setLoading(true);
variables: { updateDetails({
user: { variables: {
id: data?.getUser.id, user: {
name: personaData.fullName, id: data?.getUser.id,
email: personaData.email, name: personaData.fullName,
email: personaData.email,
},
}, },
}, });
}); }}
}} >
> {loading ? (
{loading ? ( <div>
<div> <Loader size={20} />
<Loader size={20} /> </div>
</div> ) : (
) : ( <>Save Changes</>
<>Save Changes</> )}
)} </ButtonFilled>
</ButtonFilled> </div>
<Unimodal isOpen={open} handleClose={handleClose} hasCloseBtn> <Unimodal isOpen={open} handleClose={handleClose} hasCloseBtn>
{error.length ? ( {error.length ? (
<div className={classes.errDiv}> <div className={classes.errDiv}>
@ -141,7 +143,7 @@ const PersonalDetails: React.FC = () => {
Error: {error} Error: {error}
</Typography> </Typography>
</div> </div>
<div className={classes.buttonModal}> <div data-cy="done" className={classes.buttonModal}>
<ButtonFilled <ButtonFilled
isPrimary isPrimary
isDisabled={false} isDisabled={false}
@ -164,14 +166,15 @@ const PersonalDetails: React.FC = () => {
Changes took effect Changes took effect
</Typography> </Typography>
</div> </div>
<Button <div data-cy="done">
data-cy="closeButton" <ButtonFilled
variant="contained" isPrimary
className={classes.button} isDisabled={false}
onClick={handleClose} handleClick={handleClose}
> >
Done <Typography>Done</Typography>
</Button> </ButtonFilled>
</div>
</div> </div>
)} )}
</Unimodal> </Unimodal>

71
litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
View File

@ -56,40 +56,45 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
</div> </div>
{/* Fields for details including Full name, email, username */} {/* Fields for details including Full name, email, username */}
<div className={classes.details1}> <div className={classes.details1}>
<InputField <div data-cy="InputName">
required <InputField
helperText={ required
validateStartEmptySpacing(nameValue) helperText={
? 'Should not start with an empty space' validateStartEmptySpacing(nameValue)
: '' ? 'Should not start with an empty space'
} : ''
value={nameValue} }
disabled={nameIsDisabled} value={nameValue}
handleChange={handleNameChange} disabled={nameIsDisabled}
validationError={validateStartEmptySpacing(nameValue)} handleChange={handleNameChange}
label="Full Name" validationError={validateStartEmptySpacing(nameValue)}
/> label="Full Name"
/>
<InputField </div>
required <div data-cy="InputEmail">
helperText={ <InputField
validateEmail(emailValue) ? 'Should be a valid email' : '' required
} helperText={
type="email" validateEmail(emailValue) ? 'Should be a valid email' : ''
value={emailValue} }
disabled={emailIsDisabled} type="email"
handleChange={handleEmailChange} value={emailValue}
validationError={validateEmail(emailValue)} disabled={emailIsDisabled}
label="Email Address" handleChange={handleEmailChange}
/> validationError={validateEmail(emailValue)}
label="Email Address"
/>
</div>
{/* Username is not editable normal user */} {/* Username is not editable normal user */}
<InputField <div data-cy="username">
value={userValue} <InputField
handleChange={handleUserChange} value={userValue}
label="Username" handleChange={handleUserChange}
disabled={usernameIsDisabled} label="Username"
validationError={false} disabled={usernameIsDisabled}
/> validationError={false}
/>
</div>
</div> </div>
</div> </div>
</form> </form>

3
litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
View File

@ -213,12 +213,11 @@ const UserManagement: React.FC = () => {
</FormControl> </FormControl>
</div> </div>
</div> </div>
<div> <div data-cy="createUser">
<ButtonFilled <ButtonFilled
handleClick={() => { handleClick={() => {
setShowDiv(true); setShowDiv(true);
}} }}
data-cy="gotItButton"
isPrimary isPrimary
> >
<div>Create new user</div> <div>Create new user</div>