add test for changing safe name
This commit is contained in:
parent
ff9448c4db
commit
8f519b7313
|
@ -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(
|
||||
'heading',
|
||||
align,
|
||||
tag,
|
||||
margin ? capitalize(margin, 'margin') : undefined,
|
||||
color,
|
||||
{ truncate },
|
||||
)
|
||||
const className = cx('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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue