status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding test (feature) (#1030) 

* data-testid for load and create safe

* fix connect button id

* removed buttons data-testid property
This commit is contained in:
francovenica 2020-06-19 19:06:53 -03:00 committed by GitHub
parent a5b4585049
commit b02924f5ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 110 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CookiesBanner/index.tsx
View File

@ -144,6 +144,7 @@ const CookiesBanner = () => {
onKeyDown={closeCookiesBannerHandler}
role="button"
tabIndex={0}
data-testid="accept-preferences"
>
Accept preferences >
</span>

2
src/components/Header/components/Layout.tsx
View File

@ -61,7 +61,7 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
<Row className={classes.summary}>
<Col className={classes.logo} middle="xs" start="xs">
<Link to="/">
<Img alt="Gnosis Team Safe" height={32} src={logo} />
<Img alt="Gnosis Team Safe" height={32} src={logo} testId="heading-gnosis-logo" />
</Link>
</Col>
<Divider />

2
src/components/Header/components/ProviderDetails/ConnectDetails.tsx
View File

@ -45,7 +45,7 @@ const ConnectDetails = ({ classes }) => (
<CircleDot center circleSize={75} dotRight={25} dotSize={25} dotTop={50} keySize={32} mode="error" />
</Row>
<Block className={classes.connect}>
<ConnectButton />
<ConnectButton data-testid="heading-connect-btn" />
</Block>
</>
)

9
src/components/Header/components/ProviderDetails/UserDetails.tsx
View File

@ -163,7 +163,14 @@ const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard,
</Row>
)}
<Row className={classes.disconnect}>
<Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained">
<Button
color="primary"
fullWidth
onClick={onDisconnect}
size="medium"
variant="contained"
data-testid="disconnect-btn"
>
<Paragraph className={classes.disconnectText} color="white" noMargin size="md">
Disconnect
</Paragraph>

9
src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
View File

@ -62,7 +62,14 @@ const ProviderInfo = ({ classes, connected, network, provider, userAddress }) =>
)}
{!connected && <CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={14} mode="warning" />}
<Col className={classes.account} layout="column" start="sm">
<Paragraph className={classes.network} noMargin size="xs" transform="capitalize" weight="bolder">
<Paragraph
className={classes.network}
noMargin
size="xs"
transform="capitalize"
weight="bolder"
data-testid="connected-wallet"
>
{providerText}
</Paragraph>
<Paragraph className={classes.address} color={color} noMargin size="xs">

9
src/components/Header/components/ProviderInfo/ProviderDisconnected.tsx
View File

@ -29,7 +29,14 @@ const ProviderDisconnected = ({ classes }) => (
<>
<CircleDot circleSize={35} dotRight={11} dotSize={16} dotTop={24} keySize={17} mode="error" />
<Col className={classes.account} end="sm" layout="column" middle="xs">
<Paragraph className={classes.network} noMargin size="sm" transform="capitalize" weight="bold">
<Paragraph
className={classes.network}
noMargin
size="sm"
transform="capitalize"
weight="bold"
data-testid="not-connected-wallet"
>
Not Connected
</Paragraph>
<Paragraph className={classes.connect} color="fancy" noMargin size="sm">

2
src/components/Header/components/SafeListHeader/index.tsx
View File

@ -44,7 +44,7 @@ const SafeListHeader = ({ safesCount }) => {
return (
<Col className={classes.container} middle="xs" start="xs">
Safes
<Paragraph className={classes.counter} size="xs">
<Paragraph className={classes.counter} size="xs" data-testid="safe-counter-heading">
{safesCount}
</Paragraph>
<IconButton

1
src/components/ScanQRModal/ScanQRWrapper/index.tsx
View File

@ -39,6 +39,7 @@ export const ScanQRWrapper = (props) => {
}}
role="button"
src={QRIcon}
testId="qr-icon"
/>
{qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} onScan={onScanFinished} />}
</>

4
src/routes/load/components/DetailsForm/index.tsx
View File

@ -100,6 +100,7 @@ const Details = ({ classes, errors, form }) => {
text="Safe name"
type="text"
validate={required}
testId="load-safe-name-field"
/>
</Col>
</Block>
@ -114,7 +115,7 @@ const Details = ({ classes, errors, form }) => {
noErrorsOn(FIELD_LOAD_ADDRESS, errors) && {
endAdornment: (
<InputAdornment position="end">
<CheckCircle className={classes.check} />
<CheckCircle className={classes.check} data-testid="valid-address" />
</InputAdornment>
),
}
@ -123,6 +124,7 @@ const Details = ({ classes, errors, form }) => {
placeholder="Safe Address*"
text="Safe Address"
type="text"
testId="load-safe-address-field"
/>
</Col>
<Col center="xs" className={classes} middle="xs" xs={1}>

5
src/routes/load/components/OwnerList/index.tsx
View File

@ -109,7 +109,7 @@ const OwnerListComponent = (props) => {
return (
<>
<Block className={classes.title}>
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="md" data-testid="load-safe-step-two">
{`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
</Paragraph>
</Block>
@ -122,7 +122,7 @@ const OwnerListComponent = (props) => {
<Hairline />
<Block margin="md" padding="md">
{owners.map((address, index) => (
<Row className={classes.owner} key={address}>
<Row className={classes.owner} key={address} data-testid="owner-row">
<Col className={classes.ownerName} xs={4}>
<Field
className={classes.name}
@ -133,6 +133,7 @@ const OwnerListComponent = (props) => {
text="Owner Name"
type="text"
validate={required}
testId={`load-safe-owner-name-${index}`}
/>
</Col>
<Col xs={8}>

13
src/routes/load/components/ReviewInformation/index.tsx
View File

@ -109,7 +109,7 @@ class ReviewComponent extends React.PureComponent<any> {
<Col className={classes.detailsColumn} layout="column" xs={4}>
<Block className={classes.details}>
<Block margin="lg">
<Paragraph color="primary" noMargin size="lg">
<Paragraph color="primary" noMargin size="lg" data-testid="load-safe-step-three">
Review details
</Paragraph>
</Block>
@ -117,7 +117,14 @@ class ReviewComponent extends React.PureComponent<any> {
<Paragraph color="disabled" noMargin size="sm">
Name of the Safe
</Paragraph>
<Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
<Paragraph
className={classes.name}
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid="load-form-review-safe-name"
>
{values[FIELD_LOAD_NAME]}
</Paragraph>
</Block>
@ -168,7 +175,7 @@ class ReviewComponent extends React.PureComponent<any> {
</Col>
<Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}>
<Paragraph noMargin size="lg">
<Paragraph noMargin size="lg" data-testid="load-safe-review-owner-name">
{values[getOwnerNameBy(index)]}
</Paragraph>
<Block className={classes.user} justify="center">

4
src/routes/open/components/Layout.tsx
View File

@ -87,7 +87,9 @@ const Layout = (props) => {
<IconButton disableRipple onClick={back} style={iconStyle}>
<ChevronLeft />
</IconButton>
<Heading tag="h2">Create New Safe</Heading>
<Heading tag="h2" testId="create-safe-form-title">
Create New Safe
</Heading>
</Row>
<Stepper
initialValues={initialValues}

28
src/routes/open/components/ReviewInformation/index.tsx
View File

@ -112,7 +112,7 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Col className={classes.detailsColumn} layout="column" xs={4}>
<Block className={classes.details}>
<Block margin="lg">
<Paragraph color="primary" noMargin size="lg">
<Paragraph color="primary" noMargin size="lg" data-testid="create-safe-step-three">
Details
</Paragraph>
</Block>
@ -120,7 +120,14 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Paragraph color="disabled" noMargin size="sm">
Name of new Safe
</Paragraph>
<Paragraph className={classes.name} color="primary" noMargin size="lg" weight="bolder">
<Paragraph
className={classes.name}
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid="create-safe-review-name"
>
{values[FIELD_NAME]}
</Paragraph>
</Block>
@ -128,7 +135,13 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
<Paragraph color="disabled" noMargin size="sm">
Any transaction requires the confirmation of:
</Paragraph>
<Paragraph color="primary" noMargin size="lg" weight="bolder">
<Paragraph
color="primary"
noMargin
size="lg"
weight="bolder"
data-testid={`create-safe-review-req-owners-${values[FIELD_CONFIRMATIONS]}`}
>
{`${values[FIELD_CONFIRMATIONS]} out of ${numOwners} owners`}
</Paragraph>
</Block>
@ -150,11 +163,16 @@ const ReviewComponent = ({ classes, userAccount, values }: any) => {
</Col>
<Col xs={11}>
<Block className={classNames(classes.name, classes.userName)}>
<Paragraph noMargin size="lg">
<Paragraph noMargin size="lg" data-testid={`create-safe-owner-name-${index}`}>
{name}
</Paragraph>
<Block className={classes.user} justify="center">
<Paragraph color="disabled" noMargin size="md">
<Paragraph
color="disabled"
noMargin
size="md"
data-testid={`create-safe-owner-address-${index}`}
>
{addresses[index]}
</Paragraph>
<CopyBtn content={addresses[index]} />

1
src/routes/open/components/SafeNameForm/index.tsx
View File

@ -45,6 +45,7 @@ const SafeName = ({ classes, safeName }) => (
text="Safe name"
type="text"
validate={required}
testId="create-safe-name-field"
/>
</Block>
<Block margin="lg">

18
src/routes/open/components/SafeOwnersConfirmationsForm/index.tsx
View File

@ -99,7 +99,7 @@ const SafeOwners = (props) => {
return (
<>
<Block className={classes.title}>
<Paragraph color="primary" noMargin size="md">
<Paragraph color="primary" noMargin size="md" data-testid="create-safe-step-two">
Your Safe will have one or more owners. We have prefilled the first owner with your connected wallet details,
but you are free to change this to a different owner.
<br />
@ -120,7 +120,7 @@ const SafeOwners = (props) => {
const addressName = getOwnerAddressBy(index)
return (
<Row className={classes.owner} key={`owner${index}`}>
<Row className={classes.owner} key={`owner${index}`} data-testid={`create-safe-owner-row`}>
<Col className={classes.ownerName} xs={4}>
<Field
className={classes.name}
@ -130,6 +130,7 @@ const SafeOwners = (props) => {
text="Owner Name"
type="text"
validate={required}
testId={`create-safe-owner-name-field-${index}`}
/>
</Col>
<Col className={classes.ownerAddress} xs={6}>
@ -142,7 +143,7 @@ const SafeOwners = (props) => {
noErrorsOn(addressName, errors) && {
endAdornment: (
<InputAdornment position="end">
<CheckCircle className={classes.check} />
<CheckCircle className={classes.check} data-testid={`valid-address-${index}`} />
</InputAdornment>
),
}
@ -152,6 +153,7 @@ const SafeOwners = (props) => {
text="Owner Address"
type="text"
validators={[getAddressValidator(otherAccounts, index)]}
testId={`create-safe-address-field-${index}`}
/>
</Col>
<Col center="xs" className={classes.remove} middle="xs" xs={1}>
@ -191,14 +193,20 @@ const SafeOwners = (props) => {
validate={composeValidators(required, mustBeInteger, minValue(1))}
>
{[...Array(Number(validOwners))].map((x, index) => (
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`} data-testid={`input-${index + 1}`}>
{index + 1}
</MenuItem>
))}
</Field>
</Col>
<Col className={classes.ownersAmountItem} xs={10}>
<Paragraph className={classes.owners} color="primary" noMargin size="lg">
<Paragraph
className={classes.owners}
color="primary"
noMargin
size="lg"
data-testid={`create-safe-req-conf-${validOwners}`}
>
out of {validOwners} owner(s)
</Paragraph>
</Col>

8
src/routes/opening/components/Footer.tsx
View File

@ -38,7 +38,13 @@ export const ContinueFooter = ({
continueButtonDisabled: boolean
onContinue: (event: SyntheticEvent) => void
}) => (
<Button color="primary" disabled={continueButtonDisabled} onClick={onContinue} variant="contained">
<Button
color="primary"
disabled={continueButtonDisabled}
onClick={onContinue}
variant="contained"
data-testid="continue-btn"
>
Continue
</Button>
)

6
src/routes/opening/index.tsx
View File

@ -302,7 +302,9 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
return (
<Wrapper>
<Title tag="h2">Safe creation process</Title>
<Title tag="h2" testId="safe-creation-process-title">
Safe creation process
</Title>
<Nav>
<Stepper activeStepIndex={stepIndex} error={error} orientation="vertical" steps={steps} />
</Nav>
@ -336,7 +338,7 @@ const SafeDeployment = ({ creationTxHash, onCancel, onRetry, onSuccess, provider
) : null}
</BodyFooter>
</Body>
<BackButton color="primary" minWidth={140} onClick={onCancel}>
<BackButton color="primary" minWidth={140} onClick={onCancel} data-testid="safe-creation-back-btn">
Back
</BackButton>
</Wrapper>

9
src/routes/safe/components/Layout/Header/index.tsx
View File

@ -38,7 +38,13 @@ const LayoutHeader = (props) => {
{!granted && <Block className={classes.readonly}>Read Only</Block>}
</Row>
<Block className={classes.user} justify="center">
<Paragraph className={classes.address} color="disabled" noMargin size="md">
<Paragraph
className={classes.address}
color="disabled"
noMargin
size="md"
data-testid="safe-address-heading"
>
{address}
</Paragraph>
<CopyBtn content={address} />
@ -54,6 +60,7 @@ const LayoutHeader = (props) => {
onClick={() => showSendFunds('')}
size="small"
variant="contained"
testId="main-send-btn"
>
<CallMade
alt="Send Transaction"

3
src/routes/safe/components/Layout/Tabs/index.tsx
View File

@ -10,6 +10,7 @@ import {
ADDRESS_BOOK_TAB_BTN_TEST_ID,
BALANCES_TAB_BTN_TEST_ID,
SETTINGS_TAB_BTN_TEST_ID,
APPS_TAB_BTN_TEST_ID,
TRANSACTIONS_TAB_BTN_TEST_ID,
} from 'src/routes/safe/components/Layout'
import SettingsTab from 'src/routes/safe/components/Layout/Tabs/SettingsTab'
@ -105,7 +106,7 @@ const TabsComponent = (props: Props) => {
selected: classes.tabWrapperSelected,
wrapper: classes.tabWrapper,
}}
data-testid={TRANSACTIONS_TAB_BTN_TEST_ID}
data-testid={APPS_TAB_BTN_TEST_ID}
label={AppsLabel}
value={`${match.url}/apps`}
/>

1
src/routes/safe/components/Layout/index.tsx
View File

@ -21,6 +21,7 @@ import { wrapInSuspense } from 'src/utils/wrapInSuspense'
export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
export const APPS_TAB_BTN_TEST_ID = 'apps-tab-btn'
export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'

4
src/routes/welcome/components/Layout.tsx
View File

@ -35,6 +35,7 @@ export const CreateSafe = ({ provider, size }: any) => (
size={size || 'medium'}
to={OPEN_ADDRESS}
variant="contained"
testId="create-new-safe-btn"
>
<Img alt="Safe" height={14} src={plus} />
<div style={buttonStyle}>Create new Safe</div>
@ -50,6 +51,7 @@ export const LoadSafe = ({ provider, size }) => (
size={size || 'medium'}
to={LOAD_ADDRESS}
variant="outlined"
testId="load-existing-safe-btn"
>
<Img alt="Safe" height={14} src={safe} />
<div style={buttonStyle}>Load existing Safe</div>
@ -108,7 +110,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: any) => {
<Heading align="center" margin="md" tag="h3">
Get Started by Connecting a Wallet
</Heading>
<ConnectButton minHeight={42} minWidth={240} />
<ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
</Block>
)}
</Block>