safe creation test wip

src/components/Stepper/index.jsx

@@ -21,6 +21,7 @@ type Props = {
   onReset?: () => void,
   initialValues?: Object,
   disabledWhenValidating?: boolean,
+  testId?: string,
 }
 
 type State = {
@@ -145,7 +146,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      steps, children, classes, disabledWhenValidating = false,
+      steps, children, classes, disabledWhenValidating = false, testId,
     } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
@@ -154,7 +155,7 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <GnoForm onSubmit={this.handleSubmit} initialValues={values} validation={this.validate}>
+        <GnoForm onSubmit={this.handleSubmit} initialValues={values} validation={this.validate} testId={testId}>
           {(submitting: boolean, validating: boolean, ...rest: any) => {
             const disabled = disabledWhenValidating ? submitting || validating : submitting
             const controls = (

src/components/forms/GnoForm/index.jsx

@@ -16,6 +16,7 @@ type Props = {
   validation?: (values: Object) => Object | Promise<Object>,
   initialValues?: Object,
   formMutators?: Object,
+  testId?: string,
 }
 
 const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
@@ -25,7 +26,7 @@ const stylesBasedOn = (padding: number): $Shape<CSSStyleDeclaration> => ({
 })
 
 const GnoForm = ({
-  onSubmit, validation, initialValues, children, padding = 0, formMutators,
+  onSubmit, validation, initialValues, children, padding = 0, formMutators, testId = '',
 }: Props) => (
   <Form
     validate={validation}
@@ -33,7 +34,7 @@ const GnoForm = ({
     initialValues={initialValues}
     mutators={formMutators}
     render={({ handleSubmit, ...rest }) => (
-      <form onSubmit={handleSubmit} style={stylesBasedOn(padding)}>
+      <form onSubmit={handleSubmit} style={stylesBasedOn(padding)} data-testid={testId}>
         {children(rest.submitting, rest.validating, rest, rest.form.mutators)}
       </form>
     )}

src/routes/open/components/Layout.jsx

@@ -14,9 +14,7 @@ import { getOwnerNameBy, getOwnerAddressBy, FIELD_CONFIRMATIONS } from '~/routes
 import { history } from '~/store'
 import { secondary } from '~/theme/variables'
 
-const getSteps = () => [
-  'Start', 'Owners', 'Confirmations', 'Review',
-]
+const getSteps = () => ['Start', 'Owners', 'Confirmations', 'Review']
 
 const initialValuesFrom = (userAccount: string) => ({
   [getOwnerNameBy(0)]: 'My Metamask (me)',
@@ -49,37 +47,24 @@ const Layout = ({
 
   return (
     <React.Fragment>
-      { provider
-        ? (
-          <Block>
-            <Row align="center">
-              <IconButton onClick={back} style={iconStyle} disableRipple>
-                <ChevronLeft />
-              </IconButton>
-              <Heading tag="h2">Create New Safe</Heading>
-            </Row>
-            <Stepper
-              onSubmit={onCallSafeContractSubmit}
-              steps={steps}
-              initialValues={initialValues}
-            >
-              <Stepper.Page>
-                { SafeNameField }
-              </Stepper.Page>
-              <Stepper.Page>
-                { SafeOwnersFields }
-              </Stepper.Page>
-              <Stepper.Page validate={safeFieldsValidation}>
-                { SafeThresholdField }
-              </Stepper.Page>
-              <Stepper.Page network={network}>
-                { Review }
-              </Stepper.Page>
-            </Stepper>
-          </Block>
-        )
-        : <div>No metamask detected</div>
-      }
+      {provider ? (
+        <Block>
+          <Row align="center">
+            <IconButton onClick={back} style={iconStyle} disableRipple>
+              <ChevronLeft />
+            </IconButton>
+            <Heading tag="h2">Create New Safe</Heading>
+          </Row>
+          <Stepper onSubmit={onCallSafeContractSubmit} steps={steps} initialValues={initialValues} testId="create-safe-form">
+            <Stepper.Page>{SafeNameField}</Stepper.Page>
+            <Stepper.Page>{SafeOwnersFields}</Stepper.Page>
+            <Stepper.Page validate={safeFieldsValidation}>{SafeThresholdField}</Stepper.Page>
+            <Stepper.Page network={network}>{Review}</Stepper.Page>
+          </Stepper>
+        </Block>
+      ) : (
+        <div>No metamask detected</div>
+      )}
     </React.Fragment>
   )
 }

src/test/safe.dom.create.test.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react'
 import { type Store } from 'redux'
-import TestUtils from 'react-dom/test-utils'
 import { render, fireEvent, cleanup } from 'react-testing-library'
 import Select from '@material-ui/core/Select'
 import { Provider } from 'react-redux'
@@ -32,12 +31,12 @@ const renderOpenSafeForm = async (localStore: Store<GlobalState>) => {
   )
 }
 
-const deploySafe = async (safe: React$Component<{}>, threshold: number, numOwners: number) => {
+const deploySafe = async (safe: any, threshold: number, numOwners: number) => {
   const web3 = getWeb3()
   const accounts = await web3.eth.getAccounts()
 
   expect(threshold).toBeLessThanOrEqual(numOwners)
-  const form = TestUtils.findRenderedDOMComponentWithTag(safe, 'form')
+  const form = safe.getByTestId('create-safe-form')
 
   // Fill Safe's name
   const inputs = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')