From 1eaa072c92d86e8b3565aa034e233637b422d294 Mon Sep 17 00:00:00 2001
From: Demetriad Sinzeanu <demetriad.sinzeanu@thinslices.com>
Date: Tue, 16 Oct 2018 15:46:39 +0300
Subject: [PATCH] feat: Add data-test-id's for automation testing
BREAKING CHANGE: changed id's on conponents for testing
---
packages/component-faraday-ui/src/AppBar.js | 2 +-
.../component-faraday-ui/src/AppBarMenu.js | 8 +++++--
.../component-faraday-ui/src/AuthorTag.js | 3 ++-
.../component-faraday-ui/src/AuthorTagList.js | 1 +
packages/component-faraday-ui/src/Footer.js | 23 +++++++++++++++----
packages/component-faraday-ui/src/Logo.js | 11 +++++++--
.../manuscriptDetails/ManuscriptAssignHE.js | 1 +
.../ManuscriptEicDecision.js | 6 ++++-
.../src/manuscriptDetails/ManuscriptHeader.js | 21 ++++++++++++++---
.../manuscriptDetails/ManuscriptMetadata.js | 19 ++++++++++++---
.../components/Dashboard/DashboardFilters.js | 8 ++++++-
.../src/components/SignUp/SignUpStep0.js | 18 +++++++++------
.../src/components/SignUp/SignUpStep1.js | 19 +++++++++++----
13 files changed, 109 insertions(+), 31 deletions(-)
diff --git a/packages/component-faraday-ui/src/AppBar.js b/packages/component-faraday-ui/src/AppBar.js
index f1eef4177..80dc030cc 100644
--- a/packages/component-faraday-ui/src/AppBar.js
+++ b/packages/component-faraday-ui/src/AppBar.js
@@ -31,7 +31,7 @@ const AppBar = ({
!isSubmit &&
currentUser.user && (
<Button
- data-test="new-manuscript"
+ data-test-id="new-manuscript"
disabled={!canCreateDraft}
ml={2}
mr={5}
diff --git a/packages/component-faraday-ui/src/AppBarMenu.js b/packages/component-faraday-ui/src/AppBarMenu.js
index 48952b453..a01680262 100644
--- a/packages/component-faraday-ui/src/AppBarMenu.js
+++ b/packages/component-faraday-ui/src/AppBarMenu.js
@@ -75,7 +75,9 @@ const User = styled.div`
display: flex;
cursor: pointer;
`
-const Dropdown = styled.div`
+const Dropdown = styled.div.attrs({
+ 'data-test-id': props => props['data-test-id'] || 'admin-dropdown',
+})`
background-color: ${th('appBar.colorBackground')};
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
@@ -86,7 +88,9 @@ const Dropdown = styled.div`
z-index: 10;
`
-const DropdownOption = styled.div`
+const DropdownOption = styled.div.attrs({
+ 'data-teast-id': props => props['data-test-id'] || 'dropdown-option',
+})`
align-items: center;
color: ${th('colorText')};
cursor: pointer;
diff --git a/packages/component-faraday-ui/src/AuthorTag.js b/packages/component-faraday-ui/src/AuthorTag.js
index de77649af..1ac2a56a9 100644
--- a/packages/component-faraday-ui/src/AuthorTag.js
+++ b/packages/component-faraday-ui/src/AuthorTag.js
@@ -7,6 +7,7 @@ import Text from './Text'
const AuthorTag = ({
author: {
+ id,
firstName,
lastName,
isCorresponding,
@@ -14,7 +15,7 @@ const AuthorTag = ({
affiliationNumber,
},
}) => (
- <Root>
+ <Root data-test-id={`author-tag-${id}`}>
<Text>{`${firstName} ${lastName}`}</Text>
{isSubmitting && <Tag>SA</Tag>}
{isCorresponding && <Tag>CA</Tag>}
diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 4e9cd757a..afa4067c1 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.js
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -69,6 +69,7 @@ const AuthorTagList = ({
{withAffiliations && (
<Item flex={0} ml={1}>
<ActionLink
+ data-test-id="affiliations-id"
icon={showAffiliation ? 'minus' : 'plus'}
onClick={toggleAffiliation}
>
diff --git a/packages/component-faraday-ui/src/Footer.js b/packages/component-faraday-ui/src/Footer.js
index 4a237f254..15c2d7588 100644
--- a/packages/component-faraday-ui/src/Footer.js
+++ b/packages/component-faraday-ui/src/Footer.js
@@ -7,17 +7,30 @@ import { withJournal } from 'xpub-journal'
import { ActionLink, Row, Text } from './'
const Footer = ({ journal }) => (
- <Root alignItems="center" justify="center">
- <ActionLink to="https://hindawi.com">Hindawi</ActionLink>
- <ActionLink ml={3} to="https://www.hindawi.com/privacy/">
+ <Root alignItems="center" data-test-id="footer-row-id" justify="center">
+ <ActionLink data-test-id="hindawi-redirect" to="https://hindawi.com">
+ Hindawi
+ </ActionLink>
+ <ActionLink
+ data-test-id="privacy-policy"
+ ml={3}
+ to="https://www.hindawi.com/privacy/"
+ >
Privacy Policy
</ActionLink>
- <ActionLink ml={3} to="https://www.hindawi.com/terms/">
+ <ActionLink
+ data-test-id="terms-of-service"
+ ml={3}
+ to="https://www.hindawi.com/terms/"
+ >
Terms of Service
</ActionLink>
<Text ml={4} secondary>
{`Support: `}
- <ActionLink to={`mailto:${get(journal, 'metadata.email')}`}>
+ <ActionLink
+ data-test-id="email-support"
+ to={`mailto:${get(journal, 'metadata.email')}`}
+ >
{get(journal, 'metadata.email')}
</ActionLink>
</Text>
diff --git a/packages/component-faraday-ui/src/Logo.js b/packages/component-faraday-ui/src/Logo.js
index 655780803..906faa2a5 100644
--- a/packages/component-faraday-ui/src/Logo.js
+++ b/packages/component-faraday-ui/src/Logo.js
@@ -2,8 +2,15 @@
import React from 'react'
-const Logo = ({ src, onClick, title, height = 36 }) => (
- <img alt={title} height={height} onClick={onClick} src={src} title={title} />
+const Logo = ({ src, onClick, title, height = 36, ...rest }) => (
+ <img
+ alt={title}
+ data-test-id={rest['data-test-id'] || 'journal-logo'}
+ height={height}
+ onClick={onClick}
+ src={src}
+ title={title}
+ />
)
export default Logo
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptAssignHE.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptAssignHE.js
index b30f045ad..1aa83869b 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptAssignHE.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptAssignHE.js
@@ -11,6 +11,7 @@ const ManuscriptAssignHE = ({
}) =>
canAssignHE ? (
<ContextualBox
+ data-test-id="assign-handling-editor-id"
expanded={expanded}
label="Assign Handling Editor"
scrollIntoView
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptEicDecision.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptEicDecision.js
index a6f66d373..610e87d7e 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptEicDecision.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptEicDecision.js
@@ -27,7 +27,11 @@ const ManuscriptEicDecision = ({
options = [],
...rest
}) => (
- <ContextualBox label="Your Editorial Decision" {...rest}>
+ <ContextualBox
+ data-test-id="your-editorial-decision-id"
+ label="Your Editorial Decision"
+ {...rest}
+ >
<Root>
<Row justify="flex-start">
<ItemOverrideAlert flex={0} vertical>
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptHeader.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptHeader.js
index cc7976660..3d992b50e 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptHeader.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptHeader.js
@@ -28,19 +28,34 @@ const ManuscriptHeader = ({
const { title = 'No title', journal = '', type = '' } = metadata
return (
<Fragment>
- <Row alignItems="baseline" justify="space-between">
+ <Row
+ alignItems="baseline"
+ data-test-id="manuscript-title-id"
+ justify="space-between"
+ >
<H2 mb={1}>{title}</H2>
<Tag data-test-id="fragment-status" status>
{visibleStatus}
</Tag>
</Row>
{authors.length > 0 && (
- <Row alignItems="center" justify="flex-start" mb={1}>
+ <Row
+ alignItems="center"
+ data-test-id="authors-row-id"
+ justify="flex-start"
+ mb={1}
+ >
<AuthorTagList authors={authors} withAffiliations withTooltip />
</Row>
)}
<Row alignItems="center" justify="flex-start" mb={1}>
- {customId && <Text customId mr={1}>{`ID ${customId}`}</Text>}
+ {customId && (
+ <Text
+ customId
+ data-test-id="manuscript-id"
+ mr={1}
+ >{`ID ${customId}`}</Text>
+ )}
{submitted && (
<DateParser durationThreshold={0} timestamp={submitted}>
{timestamp => <Text mr={3}>Submitted on {timestamp}</Text>}
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
index 205719b95..96df2724c 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
@@ -18,7 +18,12 @@ const ManuscriptMetadata = ({
<Fragment>
{!!abstract && (
<Item mb={1}>
- <ContextualBox label="Abstract" startExpanded transparent>
+ <ContextualBox
+ data-test-id="abstract-tab-id"
+ label="Abstract"
+ startExpanded
+ transparent
+ >
<Text mb={1} mt={1}>
{abstract}
</Text>
@@ -27,7 +32,11 @@ const ManuscriptMetadata = ({
)}
{conflicts.hasConflicts === 'yes' && (
<Item mb={1}>
- <ContextualBox label="Conflict of Interest" transparent>
+ <ContextualBox
+ data-test-id="conflict-of-interest-tab-id"
+ label="Conflict of Interest"
+ transparent
+ >
<Text mb={1} mt={1}>
{get(conflicts, 'message', '')}
</Text>
@@ -36,7 +45,11 @@ const ManuscriptMetadata = ({
)}
{!isEmpty(files) && (
<Item mb={1}>
- <ContextualBox label={filesLabel} transparent>
+ <ContextualBox
+ data-test-id="files-tab-id"
+ label={filesLabel}
+ transparent
+ >
<ManuscriptFileList
files={files}
getSignedUrl={getSignedUrl}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index f9b3bab6f..2f1794281 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -8,7 +8,13 @@ const DashboardFilters = ({
changeFilterValue,
getDefaultFilterValue,
}) => (
- <Row alignItems="flex-end" justify="flex-start" mb={1} mt={2}>
+ <Row
+ alignItems="flex-end"
+ data-test-id="dashboard-filters"
+ justify="flex-start"
+ mb={1}
+ mt={2}
+ >
<Text mr={1} pb={1} secondary>
Filters
</Text>
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 51edb75af..36116c1cb 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -42,7 +42,7 @@ const Step0 = ({
!isUndefined(initialValues) ? (
<Fragment>
<Row mb={2} mt={3}>
- <Item mr={1} vertical>
+ <Item data-test-id="sign-up-first-name-id" mr={1} vertical>
<Label required>First Name</Label>
<ValidatedField
component={TextField}
@@ -50,7 +50,7 @@ const Step0 = ({
validate={[requiredValidator]}
/>
</Item>
- <Item ml={1} vertical>
+ <Item data-test-id="sign-up-last-name-id" ml={1} vertical>
<Label required>Last Name</Label>
<ValidatedField
component={TextField}
@@ -61,7 +61,7 @@ const Step0 = ({
</Row>
<Row mb={2}>
- <ItemOverrideAlert mr={1} vertical>
+ <ItemOverrideAlert data-test-id="sign-up-title-id" mr={1} vertical>
<Label required>Title</Label>
<ValidatedField
component={input => (
@@ -75,7 +75,7 @@ const Step0 = ({
validate={[requiredValidator]}
/>
</ItemOverrideAlert>
- <ItemOverrideAlert ml={1} vertical>
+ <ItemOverrideAlert data-test-id="sign-up-country-id" ml={1} vertical>
<Label required>Country</Label>
<ValidatedField
component={input => (
@@ -92,7 +92,7 @@ const Step0 = ({
</Row>
<Row>
- <Item vertical>
+ <Item data-test-id="sign-up-affiliation-id" vertical>
<Label required>Affiliation</Label>
<ValidatedField
component={TextField}
@@ -102,7 +102,7 @@ const Step0 = ({
</Item>
</Row>
- <ValidationRow mb={2}>
+ <ValidationRow data-test-id="sign-up-agree-TC-id" mb={2}>
<ValidatedField
component={AgreeCheckbox}
name="agreeTC"
@@ -123,7 +123,11 @@ const Step0 = ({
</Text>
</Row>
- <Button mt={4} onClick={handleSubmit}>
+ <Button
+ data-test-id="sign-up-proceed-to-set-email-and-password-id"
+ mt={4}
+ onClick={handleSubmit}
+ >
PROCEED TO SET {type === 'signup' && 'EMAIL AND'} PASSWORD
</Button>
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index a9d6d4625..ef2404d87 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -12,7 +12,7 @@ const EmailField = input => <TextField {...input} type="email" />
const SignUpForm = () => (
<Fragment>
<Row mb={2}>
- <Item vertical>
+ <Item data-test-id="sign-up-email-id" vertical>
<Label required>Email</Label>
<ValidatedField
component={EmailField}
@@ -22,7 +22,7 @@ const SignUpForm = () => (
</Item>
</Row>
<Row mb={2}>
- <Item vertical>
+ <Item data-test-id="sign-up-password-id" vertical>
<Label required>Password</Label>
<ValidatedField
component={PasswordField}
@@ -32,7 +32,7 @@ const SignUpForm = () => (
</Item>
</Row>
<Row mb={2}>
- <Item vertical>
+ <Item data-test-id="sign-up-confirm-password-id" vertical>
<Label required>Confirm password</Label>
<ValidatedField
component={PasswordField}
@@ -106,8 +106,17 @@ const Step1 = ({
<Row />
<Row justify={!withoutBack.includes(type) ? 'space-between' : 'center'}>
- {!withoutBack.includes(type) && <Button onClick={onBack}>BACK</Button>}
- <Button disabled={submitting} onClick={handleSubmit} primary>
+ {!withoutBack.includes(type) && (
+ <Button data-test-id="sign-up-back-button-id" onClick={onBack}>
+ BACK
+ </Button>
+ )}
+ <Button
+ data-test-id="sign-up-confirm-button-id"
+ disabled={submitting}
+ onClick={handleSubmit}
+ primary
+ >
{onSubmitText}
</Button>
</Row>
--
GitLab