groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add major data-test attributes

Browse Source
This commit is contained in:
Ali BARIN
2022-10-08 23:57:23 +02:00
parent 38bcf6ada0
commit e47c54b336
25 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/components/AccountDropdownMenu/index.tsx
View File

@@ -62,6 +62,7 @@ function AccountDropdownMenu(props: AccountDropdownMenuProps): React.ReactElemen
<MenuItem <MenuItem
onClick={logout} onClick={logout}
data-test="logout-item"
> >
{formatMessage('accountDropdownMenu.logout')} {formatMessage('accountDropdownMenu.logout')}
</MenuItem> </MenuItem>

3
packages/web/src/components/AddAppConnection/index.tsx
View File

@@ -84,7 +84,7 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
}, [connectionId, key, steps, onClose]); }, [connectionId, key, steps, onClose]);
return ( return (
<Dialog open={true} onClose={onClose}> <Dialog open={true} onClose={onClose} data-test="add-app-connection-dialog">
<DialogTitle>{hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')}</DialogTitle> <DialogTitle>{hasConnection ? formatMessage('app.reconnectConnection') : formatMessage('app.addConnection')}</DialogTitle>
<Alert severity="info" sx={{ fontWeight: 300 }}> <Alert severity="info" sx={{ fontWeight: 300 }}>
@@ -114,6 +114,7 @@ export default function AddAppConnection(props: AddAppConnectionProps): React.Re
color="primary" color="primary"
sx={{ boxShadow: 2 }} sx={{ boxShadow: 2 }}
loading={inProgress} loading={inProgress}
data-test="create-connection-button"
> >
{formatMessage('addAppConnection.submit')} {formatMessage('addAppConnection.submit')}
</LoadingButton> </LoadingButton>

3
packages/web/src/components/AddNewAppConnection/index.tsx
View File

@@ -95,6 +95,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
</InputAdornment> </InputAdornment>
} }
label={formatMessage('apps.searchApp')} label={formatMessage('apps.searchApp')}
data-test="search-for-app-text-field"
/> />
</FormControl> </FormControl>
@@ -102,7 +103,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />} {loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />}
{!loading && data?.getApps?.map((app: IApp) => ( {!loading && data?.getApps?.map((app: IApp) => (
<ListItem disablePadding key={app.name}> <ListItem disablePadding key={app.name} data-test="app-list-item">
<ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}> <ListItemButton component={Link} to={createConnectionOrFlow(app.name.toLowerCase(), app.supportsConnections)}>
<ListItemIcon sx={{ minWidth: 74 }}> <ListItemIcon sx={{ minWidth: 74 }}>
<AppIcon color="transparent" url={app.iconUrl} name={app.name} /> <AppIcon color="transparent" url={app.iconUrl} name={app.name} />

1
packages/web/src/components/AppBar/index.tsx
View File

@@ -82,6 +82,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
onClick={handleAccountMenuOpen} onClick={handleAccountMenuOpen}
aria-controls={accountMenuId} aria-controls={accountMenuId}
aria-label="open profile menu" aria-label="open profile menu"
data-test="profile-menu-button"
> >
<AccountCircleIcon /> <AccountCircleIcon />
</IconButton> </IconButton>

2
packages/web/src/components/AppConnectionRow/index.tsx
View File

@@ -79,7 +79,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
return ( return (
<> <>
<Card sx={{ my: 2 }}> <Card sx={{ my: 2 }} data-test="app-connection-row">
<CardActionArea onClick={onContextMenuClick}> <CardActionArea onClick={onContextMenuClick}>
<CardContent> <CardContent>
<Stack <Stack

2
packages/web/src/components/AppRow/index.tsx
View File

@@ -30,7 +30,7 @@ function AppRow(props: AppRowProps): React.ReactElement {
const { name, primaryColor, iconUrl, connectionCount, flowCount } = props.application; const { name, primaryColor, iconUrl, connectionCount, flowCount } = props.application;
return ( return (
<Link to={URLS.APP(name.toLowerCase())}> <Link to={URLS.APP(name.toLowerCase())} data-test="app-row">
<Card sx={{ mb: 1 }}> <Card sx={{ mb: 1 }}>
<CardActionArea> <CardActionArea>
<CardContent> <CardContent>

3
packages/web/src/components/ChooseAppAndEventSubstep/index.tsx
View File

@@ -152,6 +152,7 @@ function ChooseAppAndEventSubstep(
)} )}
value={getOption(appOptions, step.appKey)} value={getOption(appOptions, step.appKey)}
onChange={onAppChange} onChange={onAppChange}
data-test="choose-app-autocomplete"
/> />
{step.appKey && ( {step.appKey && (
@@ -175,6 +176,7 @@ function ChooseAppAndEventSubstep(
)} )}
value={getOption(actionOptions, step.key)} value={getOption(actionOptions, step.key)}
onChange={onEventChange} onChange={onEventChange}
data-test="choose-event-autocomplete"
/> />
</Box> </Box>
)} )}
@@ -197,6 +199,7 @@ function ChooseAppAndEventSubstep(
onClick={onSubmit} onClick={onSubmit}
sx={{ mt: 2 }} sx={{ mt: 2 }}
disabled={!valid || editorContext.readOnly} disabled={!valid || editorContext.readOnly}
data-test="flow-substep-continue-button"
> >
Continue Continue
</Button> </Button>

3
packages/web/src/components/ChooseConnectionSubstep/index.tsx
View File

@@ -126,6 +126,7 @@ function ChooseConnectionSubstep(props: ChooseConnectionSubstepProps): React.Rea
value={getOption(connectionOptions, connection?.id)} value={getOption(connectionOptions, connection?.id)}
onChange={handleChange} onChange={handleChange}
loading={loading} loading={loading}
data-test="choose-connection-autocomplete"
/> />
<Button <Button
@@ -133,7 +134,7 @@ function ChooseConnectionSubstep(props: ChooseConnectionSubstepProps): React.Rea
variant="contained" variant="contained"
onClick={onSubmit} onClick={onSubmit}
sx={{ mt: 2 }} sx={{ mt: 2 }}
disabled={testResultLoading || !connection?.verified || editorContext.readOnly} disabled={testResultLoading || !connection?.verified || editorContext.readOnly}data-test="flow-substep-continue-button"
> >
Continue Continue
</Button> </Button>

1
packages/web/src/components/ControlledAutocomplete/index.tsx
View File

@@ -55,6 +55,7 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
}} }}
onBlur={(...args) => { controllerOnBlur(); onBlur?.(...args); }} onBlur={(...args) => { controllerOnBlur(); onBlur?.(...args); }}
ref={ref} ref={ref}
data-test={`${name}-autocomplete`}
/> />
<FormHelperText <FormHelperText

4
packages/web/src/components/Drawer/index.tsx
View File

@@ -18,6 +18,7 @@ type DrawerLink = {
primary: string; primary: string;
to: string; to: string;
badgeContent?: React.ReactNode; badgeContent?: React.ReactNode;
dataTest?: string;
}; };
type DrawerProps = { type DrawerProps = {
@@ -49,13 +50,14 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
<Toolbar /> <Toolbar />
<List sx={{ py: 0, mt: 3 }}> <List sx={{ py: 0, mt: 3 }}>
{links.map(({ Icon, primary, to }, index) => ( {links.map(({ Icon, primary, to, dataTest }, index) => (
<ListItemLink <ListItemLink
key={`${to}-${index}`} key={`${to}-${index}`}
icon={<Icon htmlColor={theme.palette.primary.main} />} icon={<Icon htmlColor={theme.palette.primary.main} />}
primary={formatMessage(primary)} primary={formatMessage(primary)}
to={to} to={to}
onClick={closeOnClick} onClick={closeOnClick}
data-test={dataTest}
/> />
))} ))}
</List> </List>

18
packages/web/src/components/EditorLayout/index.tsx
View File

@@ -74,6 +74,7 @@ export default function EditorLayout(): React.ReactElement {
size="small" size="small"
component={Link} component={Link}
to={URLS.FLOWS} to={URLS.FLOWS}
data-test="editor-go-back-button"
> >
<ArrowBackIosNewIcon fontSize="small" /> <ArrowBackIosNewIcon fontSize="small" />
</IconButton> </IconButton>
@@ -92,7 +93,12 @@ export default function EditorLayout(): React.ReactElement {
</Box> </Box>
<Box pr={1}> <Box pr={1}>
<Button variant="contained" size="small" onClick={() => onFlowStatusUpdate(!flow.active)}> <Button
variant="contained"
size="small"
onClick={() => onFlowStatusUpdate(!flow.active)}
data-test={flow?.active ? 'unpublish-flow-button' : 'publish-flow-button'}
>
{flow?.active ? formatMessage('flowEditor.unpublish') : formatMessage('flowEditor.publish')} {flow?.active ? formatMessage('flowEditor.unpublish') : formatMessage('flowEditor.publish')}
</Button> </Button>
</Box> </Box>
@@ -108,13 +114,19 @@ export default function EditorLayout(): React.ReactElement {
</Stack> </Stack>
<Snackbar <Snackbar
data-test="flow-cannot-edit-info-snackbar"
open={!!flow?.active} open={!!flow?.active}
message={formatMessage('flowEditor.publishedFlowCannotBeUpdated')} message={formatMessage('flowEditor.publishedFlowCannotBeUpdated')}
anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }} anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
ContentProps={{ sx: { fontWeight: 300 }}} ContentProps={{ sx: { fontWeight: 300 }}}
action={( action={(
<Button variant="contained" size="small" onClick={() => onFlowStatusUpdate(!flow.active)}> <Button
{flow?.active ? formatMessage('flowEditor.unpublish') : formatMessage('flowEditor.publish')} variant="contained"
size="small"
onClick={() => onFlowStatusUpdate(!flow.active)}
data-test="unpublish-flow-from-snackbar"
>
{formatMessage('flowEditor.unpublish')}
</Button> </Button>
)} )}
/> />

2
packages/web/src/components/ExecutionRow/index.tsx
View File

@@ -25,7 +25,7 @@ export default function ExecutionRow(props: ExecutionRowProps): React.ReactEleme
const relativeCreatedAt = createdAt.toRelative(); const relativeCreatedAt = createdAt.toRelative();
return ( return (
<Link to={URLS.EXECUTION(execution.id)}> <Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
<Card sx={{ mb: 1 }}> <Card sx={{ mb: 1 }}>
<CardActionArea> <CardActionArea>
<CardContent> <CardContent>

8
packages/web/src/components/ExecutionStep/index.tsx
View File

@@ -41,7 +41,7 @@ export default function ExecutionStep(props: ExecutionStepProps): React.ReactEle
const validationStatusIcon = executionStep.status === 'success' ? validIcon : errorIcon; const validationStatusIcon = executionStep.status === 'success' ? validIcon : errorIcon;
return ( return (
<Wrapper elevation={1}> <Wrapper elevation={1} data-test="execution-step">
<Header> <Header>
<Stack direction="row" alignItems="center" gap={2}> <Stack direction="row" alignItems="center" gap={2}>
<AppIconWrapper> <AppIconWrapper>
@@ -71,9 +71,9 @@ export default function ExecutionStep(props: ExecutionStepProps): React.ReactEle
<Content sx={{ px: 2 }}> <Content sx={{ px: 2 }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={activeTabIndex} onChange={(event, tabIndex) => setActiveTabIndex(tabIndex)}> <Tabs value={activeTabIndex} onChange={(event, tabIndex) => setActiveTabIndex(tabIndex)}>
<Tab label="Data in" /> <Tab label="Data in" data-test="data-in-tab" />
<Tab label="Data out" /> <Tab label="Data out" data-test="data-out-tab" />
<Tab label="Error" /> <Tab label="Error" data-test="error-tab" />
<Tab label="Execution step" /> <Tab label="Execution step" />
</Tabs> </Tabs>
</Box> </Box>

2
packages/web/src/components/FlowStep/index.tsx
View File

@@ -182,7 +182,7 @@ export default function FlowStep(
step.status === 'completed' ? validIcon : errorIcon; step.status === 'completed' ? validIcon : errorIcon;
return ( return (
<Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}> <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen} data-test="flow-step">
<Header collapsed={collapsed}> <Header collapsed={collapsed}>
<Stack direction="row" alignItems="center" gap={2}> <Stack direction="row" alignItems="center" gap={2}>
<AppIconWrapper> <AppIconWrapper>

1
packages/web/src/components/FlowSubstep/index.tsx
View File

@@ -100,6 +100,7 @@ function FlowSubstep(props: FlowSubstepProps): React.ReactElement {
sx={{ mt: 2 }} sx={{ mt: 2 }}
disabled={!validationStatus || editorContext.readOnly} disabled={!validationStatus || editorContext.readOnly}
type="submit" type="submit"
data-test="flow-substep-continue-button"
> >
Continue Continue
</Button> </Button>

3
packages/web/src/components/Layout/index.tsx
View File

@@ -22,16 +22,19 @@ const drawerLinks = [
Icon: SwapCallsIcon, Icon: SwapCallsIcon,
primary: 'drawer.flows', primary: 'drawer.flows',
to: URLS.FLOWS, to: URLS.FLOWS,
dataTest: 'flows-page-drawer-link',
}, },
{ {
Icon: AppsIcon, Icon: AppsIcon,
primary: 'drawer.apps', primary: 'drawer.apps',
to: URLS.APPS, to: URLS.APPS,
dataTest: 'apps-page-drawer-link',
}, },
{ {
Icon: HistoryIcon, Icon: HistoryIcon,
primary: 'drawer.executions', primary: 'drawer.executions',
to: URLS.EXECUTIONS, to: URLS.EXECUTIONS,
dataTest: 'executions-page-drawer-link',
}, },
]; ];

4
packages/web/src/components/ListItemLink/index.tsx
View File

@@ -10,10 +10,11 @@ type ListItemLinkProps = {
primary: string; primary: string;
to: string; to: string;
onClick?: (event: React.SyntheticEvent) => void; onClick?: (event: React.SyntheticEvent) => void;
'data-test'?: string;
} }
export default function ListItemLink(props: ListItemLinkProps): React.ReactElement { export default function ListItemLink(props: ListItemLinkProps): React.ReactElement {
const { icon, primary, to, onClick } = props; const { icon, primary, to, onClick, 'data-test': dataTest } = props;
const selected = useMatch({ path: to, end: true }); const selected = useMatch({ path: to, end: true });
const CustomLink = React.useMemo( const CustomLink = React.useMemo(
@@ -34,6 +35,7 @@ export default function ListItemLink(props: ListItemLinkProps): React.ReactEleme
sx={{ pl: { xs: 2, sm: 3 } }} sx={{ pl: { xs: 2, sm: 3 } }}
selected={!!selected} selected={!!selected}
onClick={onClick} onClick={onClick}
data-test={dataTest}
> >
<ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon> <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
<ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} /> <ListItemText primary={primary} primaryTypographyProps={{ variant: 'body1', }} />

3
packages/web/src/components/LoginForm/index.tsx
View File

@@ -25,6 +25,7 @@ function renderFields(props: { loading: boolean }) {
fullWidth fullWidth
margin="dense" margin="dense"
autoComplete="username" autoComplete="username"
data-test="email-text-field"
/> />
<TextField <TextField
@@ -35,6 +36,7 @@ function renderFields(props: { loading: boolean }) {
fullWidth fullWidth
margin="dense" margin="dense"
autoComplete="current-password" autoComplete="current-password"
data-test="password-text-field"
/> />
<LoadingButton <LoadingButton
@@ -44,6 +46,7 @@ function renderFields(props: { loading: boolean }) {
sx={{ boxShadow: 2, mt: 3 }} sx={{ boxShadow: 2, mt: 3 }}
loading={loading} loading={loading}
fullWidth fullWidth
data-test="login-button"
> >
Login Login
</LoadingButton> </LoadingButton>

3
packages/web/src/components/PowerInput/Suggestions.tsx
View File

@@ -71,6 +71,7 @@ const Suggestions = (props: SuggestionsProps) => {
component="div" component="div"
disablePadding disablePadding
sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }} sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
data-test="power-input-suggestion-group"
> >
{getPartialArray((option.output as any) || [], listLength).map( {getPartialArray((option.output as any) || [], listLength).map(
(suboption: any, index: number) => ( (suboption: any, index: number) => (
@@ -78,6 +79,8 @@ const Suggestions = (props: SuggestionsProps) => {
sx={{ pl: 4 }} sx={{ pl: 4 }}
divider divider
onClick={() => onSuggestionClick(suboption)} onClick={() => onSuggestionClick(suboption)}
data-test="power-input-suggestion-item"
key={`suggestion-${suboption.name}`}
> >
<ListItemText <ListItemText
primary={suboption.name} primary={suboption.name}

2
packages/web/src/components/PowerInput/index.tsx
View File

@@ -93,7 +93,7 @@ const PowerInput = (props: PowerInputProps) => {
onClickAway={() => { setShowVariableSuggestions(false); }} onClickAway={() => { setShowVariableSuggestions(false); }}
> >
{/* ref-able single child for ClickAwayListener */} {/* ref-able single child for ClickAwayListener */}
<div style={{ width: '100%' }}> <div style={{ width: '100%' }} data-test="power-input">
<FakeInput disabled={disabled}> <FakeInput disabled={disabled}>
<InputLabelWrapper> <InputLabelWrapper>
<InputLabel <InputLabel

3
packages/web/src/components/TestSubstep/index.tsx
View File

@@ -106,7 +106,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
)} )}
{response && ( {response && (
<Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}> <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }} data-test="flow-test-substep-output">
<JSONViewer data={response} /> <JSONViewer data={response} />
</Box> </Box>
)} )}
@@ -119,6 +119,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
loading={loading} loading={loading}
disabled={editorContext.readOnly} disabled={editorContext.readOnly}
color="primary" color="primary"
data-test="flow-substep-continue-button"
> >
{isCompleted && formatMessage('flowEditor.continue')} {isCompleted && formatMessage('flowEditor.continue')}
{!isCompleted && formatMessage('flowEditor.testAndContinue')} {!isCompleted && formatMessage('flowEditor.testAndContinue')}

1
packages/web/src/pages/Application/index.tsx
View File

@@ -126,6 +126,7 @@ export default function Application(): React.ReactElement | null {
component={NewConnectionLink} component={NewConnectionLink}
fullWidth fullWidth
icon={<AddIcon />} icon={<AddIcon />}
data-test="add-connection-button"
> >
{formatMessage('app.addConnection')} {formatMessage('app.addConnection')}
</ConditionalIconButton> </ConditionalIconButton>

3
packages/web/src/pages/Applications/index.tsx
View File

@@ -69,6 +69,7 @@ export default function Applications(): React.ReactElement {
component={NewAppConnectionLink} component={NewAppConnectionLink}
fullWidth fullWidth
icon={<AddIcon />} icon={<AddIcon />}
data-test="add-connection-button"
> >
{formatMessage('apps.addConnection')} {formatMessage('apps.addConnection')}
</ConditionalIconButton> </ConditionalIconButton>
@@ -77,7 +78,7 @@ export default function Applications(): React.ReactElement {
<Divider sx={{ mt: [2, 0], mb: 2 }} /> <Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />} {loading && <CircularProgress data-test="apps-loader" sx={{ display: 'block', margin: '20px auto' }} />}
{!loading && !hasApps && (<NoResultFound {!loading && !hasApps && (<NoResultFound
text={formatMessage('apps.noConnections')} text={formatMessage('apps.noConnections')}

2
packages/web/src/pages/Executions/index.tsx
View File

@@ -54,7 +54,7 @@ export default function Executions(): React.ReactElement {
<Divider sx={{ mt: [2, 0], mb: 2 }} /> <Divider sx={{ mt: [2, 0], mb: 2 }} />
{loading && <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />} {loading && <CircularProgress data-test="executions-loader" sx={{ display: 'block', margin: '20px auto' }} />}
{!loading && !hasExecutions && (<NoResultFound {!loading && !hasExecutions && (<NoResultFound
text={formatMessage('executions.noExecutions')} text={formatMessage('executions.noExecutions')}

1
packages/web/src/pages/Flows/index.tsx
View File

@@ -110,6 +110,7 @@ export default function Flows(): React.ReactElement {
component={CreateFlowLink} component={CreateFlowLink}
fullWidth fullWidth
icon={<AddIcon />} icon={<AddIcon />}
data-test="create-flow-button"
> >
{formatMessage('flows.create')} {formatMessage('flows.create')}
</ConditionalIconButton> </ConditionalIconButton>