add test for changing safe name

src/components/layout/Heading/index.jsx

@@ -6,7 +6,7 @@ import styles from './index.scss'
 
 const cx = classNames.bind(styles)
 
-type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4'
 
 type Props = {
   align?: 'left' | 'center' | 'right',
@@ -15,24 +15,18 @@ type Props = {
   tag: HeadingTag,
   truncate?: boolean,
   children: React.Node,
+  testId?: string,
 }
 
 class Heading extends React.PureComponent<Props> {
   render() {
     const {
-      align, tag, truncate, margin, color, children, ...props
+      align, tag, truncate, margin, color, children, testId, ...props
     } = this.props
 
-    const className = cx(
+    const className = cx('heading', align, tag, margin ? capitalize(margin, 'margin') : undefined, color, { truncate })
-      'heading',
-      align,
-      tag,
-      margin ? capitalize(margin, 'margin') : undefined,
-      color,
-      { truncate },
-    )
 
-    return React.createElement(tag, { ...props, className }, children)
+    return React.createElement(tag, { ...props, className, 'data-testid': testId || '' }, children)
   }
 }
 

src/routes/safe/components/Layout.jsx

@@ -3,10 +3,10 @@ import * as React from 'react'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
+import { withStyles } from '@material-ui/core/styles'
 import Hairline from '~/components/layout/Hairline'
 import Block from '~/components/layout/Block'
 import Identicon from '~/components/Identicon'
-import { withStyles } from '@material-ui/core/styles'
 import Heading from '~/components/layout/Heading'
 import Row from '~/components/layout/Row'
 import Link from '~/components/layout/Link'
@@ -21,6 +21,9 @@ import { copyToClipboard } from '~/utils/clipboard'
 import Balances from './Balances'
 import Settings from './Settings'
 
+export const SETTINGS_TAB_BTN_TESTID = 'settings-tab-btn'
+export const SAFE_VIEW_NAME_HEADING_TESTID = 'safe-name-heading'
+
 type Props = SelectorProps & {
   classes: Object,
   granted: boolean,
@@ -91,7 +94,15 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, updateSafe,
+      safe,
+      provider,
+      network,
+      classes,
+      granted,
+      tokens,
+      activeTokens,
+      createTransaction,
+      updateSafe,
     } = this.props
     const { tabIndex } = this.state
 
@@ -108,7 +119,7 @@ class Layout extends React.Component<Props, State> {
           <Identicon address={address} diameter={50} />
           <Block className={classes.name}>
             <Row>
-              <Heading tag="h2" color="secondary">
+              <Heading tag="h2" color="secondary" testId={SAFE_VIEW_NAME_HEADING_TESTID}>
                 {name}
               </Heading>
               {!granted && <Block className={classes.readonly}>Read Only</Block>}
@@ -127,7 +138,7 @@ class Layout extends React.Component<Props, State> {
           <Tabs value={tabIndex} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">
             <Tab label="Balances" />
             <Tab label="Transactions" />
-            <Tab label="Settings" />
+            <Tab label="Settings" data-testid={SETTINGS_TAB_BTN_TESTID} />
           </Tabs>
         </Row>
         <Hairline color="#c8ced4" />

src/routes/safe/components/Settings/ChangeSafeName/index.jsx

@@ -24,6 +24,9 @@ const saveButtonStyle = {
   fontWeight: boldFont,
 }
 
+export const SAFE_NAME_INPUT_TESTID = 'safe-name-input'
+export const SAFE_NAME_SUBMIT_BTN_TESTID = 'change-safe-name-btn'
+
 type Props = {
   classes: Object,
   safeAddress: string,
@@ -49,6 +52,10 @@ const ChangeSafeName = (props: Props) => {
               <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
                 Modify Safe name
               </Paragraph>
+              <Paragraph size="sm">
+                You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or
+                any third parties.
+              </Paragraph>
               <Block className={classes.root}>
                 <Field
                   name="safeName"
@@ -58,13 +65,21 @@ const ChangeSafeName = (props: Props) => {
                   placeholder="Safe name*"
                   text="Safe name*"
                   defaultValue={safeName}
+                  testId={SAFE_NAME_INPUT_TESTID}
                 />
               </Block>
             </Block>
             <Hairline />
             <Row style={controlsStyle} align="end" grow>
               <Col end="xs">
-                <Button type="submit" style={saveButtonStyle} size="small" variant="contained" color="primary">
+                <Button
+                  type="submit"
+                  style={saveButtonStyle}
+                  size="small"
+                  variant="contained"
+                  color="primary"
+                  testId={SAFE_NAME_SUBMIT_BTN_TESTID}
+                >
                   SAVE
                 </Button>
               </Col>

src/test/safe.dom.settings.test.js

@@ -0,0 +1,46 @@
+// @flow
+import { fireEvent, cleanup } from '@testing-library/react'
+import { aNewStore } from '~/store'
+import { aMinedSafe } from '~/test/builder/safe.redux.builder'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
+import { sleep } from '~/utils/timer'
+import 'jest-dom/extend-expect'
+import { SETTINGS_TAB_BTN_TESTID, SAFE_VIEW_NAME_HEADING_TESTID } from '~/routes/safe/components/Layout'
+import { SAFE_NAME_INPUT_TESTID, SAFE_NAME_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ChangeSafeName'
+
+afterEach(cleanup)
+
+describe('DOM > Feature > Settings', () => {
+  let store
+  let safeAddress
+  beforeEach(async () => {
+    store = aNewStore()
+    // using 4th account because other accounts were used in other tests and paid gas
+    safeAddress = await aMinedSafe(store)
+  })
+
+  it('Changes safe name', async () => {
+    const INITIAL_NAME = 'Safe Name'
+    const NEW_NAME = 'NEW SAFE NAME'
+
+    const SafeDom = renderSafeView(store, safeAddress)
+    await sleep(1300)
+
+    const safeNameHeading = SafeDom.getByTestId(SAFE_VIEW_NAME_HEADING_TESTID)
+    expect(safeNameHeading).toHaveTextContent(INITIAL_NAME)
+
+    // Open settings tab
+    // Safe name setting screen should be pre-selected
+    const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID)
+    fireEvent.click(settingsBtn)
+
+    // Change the name
+    const safeNameInput = SafeDom.getByTestId(SAFE_NAME_INPUT_TESTID)
+    const submitBtn = SafeDom.getByTestId(SAFE_NAME_SUBMIT_BTN_TESTID)
+    fireEvent.change(safeNameInput, { target: { value: NEW_NAME } })
+    fireEvent.click(submitBtn)
+
+    // Check if the name changed
+    expect(safeNameHeading).toHaveTextContent(NEW_NAME)
+  })
+})