Network Form Design and switch to full screen enhancements (#12302)
Niranjana Binoy
3 years ago
committed by
GitHub
parent
e951fe6a64
commit
532927368d
|
After Width: | Height: | Size: 586 B |
@ -0,0 +1,76 @@ |
||||
.add-network-form { |
||||
&__body { |
||||
padding-right: 24px; |
||||
} |
||||
|
||||
&__subheader { |
||||
@include H4; |
||||
|
||||
padding: 16px 4px; |
||||
border-bottom: 1px solid $alto; |
||||
height: 72px; |
||||
align-items: center; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
} |
||||
|
||||
&__subheader--break { |
||||
margin-inline-start: 10px; |
||||
} |
||||
|
||||
&__sub-header-text { |
||||
@include H4; |
||||
|
||||
color: $ui-4; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
&__content { |
||||
justify-content: space-between; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
&--warning { |
||||
@include H7; |
||||
|
||||
background-color: $Yellow-000; |
||||
border: 1px solid $alert-1; |
||||
border-radius: 5px; |
||||
box-sizing: border-box; |
||||
padding: 12px; |
||||
margin: 12px 0; |
||||
} |
||||
} |
||||
|
||||
&__form-column { |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin-top: 12px; |
||||
} |
||||
|
||||
&__form-row { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
&__network-form-row { |
||||
padding-bottom: 30px; |
||||
width: 48%; |
||||
} |
||||
|
||||
&__footer { |
||||
display: flex; |
||||
flex-flow: row; |
||||
padding: 0 0 0.75rem 0; |
||||
width: 60%; |
||||
|
||||
&-cancel-button { |
||||
margin-right: 1.25rem; |
||||
} |
||||
|
||||
&-submit-button { |
||||
margin-left: 1.25rem; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,98 @@ |
||||
import React from 'react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import { renderWithProvider } from '../../../../../test/jest/rendering'; |
||||
import { defaultNetworksData } from '../networks-tab.constants'; |
||||
import NetworkForm from '.'; |
||||
|
||||
const renderComponent = (props) => { |
||||
const store = configureMockStore([])({ metamask: {} }); |
||||
return renderWithProvider(<NetworkForm {...props} />, store); |
||||
}; |
||||
|
||||
const defaultNetworks = defaultNetworksData.map((network) => ({ |
||||
...network, |
||||
viewOnly: true, |
||||
})); |
||||
|
||||
const propNewNetwork = { |
||||
onClear: () => undefined, |
||||
setRpcTarget: () => undefined, |
||||
networksToRender: defaultNetworks, |
||||
onAddNetwork: () => undefined, |
||||
setNewNetworkAdded: () => undefined, |
||||
addNewNetwork: true, |
||||
}; |
||||
|
||||
const propNetworkDisplay = { |
||||
editRpc: () => undefined, |
||||
showConfirmDeleteNetworkModal: () => undefined, |
||||
rpcUrl: 'http://localhost:8545', |
||||
chainId: '1337', |
||||
ticker: 'ETH', |
||||
viewOnly: false, |
||||
networkName: 'LocalHost', |
||||
onClear: () => undefined, |
||||
setRpcTarget: () => undefined, |
||||
isCurrentRpcTarget: false, |
||||
blockExplorerUrl: '', |
||||
rpcPrefs: {}, |
||||
networksToRender: defaultNetworks, |
||||
onAddNetwork: () => undefined, |
||||
setNewNetworkAdded: () => undefined, |
||||
addNewNetwork: false, |
||||
}; |
||||
|
||||
describe('NetworkForm Component', () => { |
||||
it('should render Add new network form correctly', () => { |
||||
const { queryByText } = renderComponent(propNewNetwork); |
||||
expect(queryByText('Network Name')).toBeInTheDocument(); |
||||
expect(queryByText('New RPC URL')).toBeInTheDocument(); |
||||
expect(queryByText('Chain ID')).toBeInTheDocument(); |
||||
expect(queryByText('Currency Symbol (optional)')).toBeInTheDocument(); |
||||
expect(queryByText('Block Explorer URL (optional)')).toBeInTheDocument(); |
||||
expect(queryByText('Cancel')).toBeInTheDocument(); |
||||
expect(queryByText('Save')).toBeInTheDocument(); |
||||
}); |
||||
|
||||
it('should render network form correctly', () => { |
||||
const { queryByText, getByDisplayValue } = renderComponent( |
||||
propNetworkDisplay, |
||||
); |
||||
expect(queryByText('Network Name')).toBeInTheDocument(); |
||||
expect(queryByText('New RPC URL')).toBeInTheDocument(); |
||||
expect(queryByText('Chain ID')).toBeInTheDocument(); |
||||
expect(queryByText('Currency Symbol (optional)')).toBeInTheDocument(); |
||||
expect(queryByText('Block Explorer URL (optional)')).toBeInTheDocument(); |
||||
expect(queryByText('Delete')).toBeInTheDocument(); |
||||
expect(queryByText('Cancel')).toBeInTheDocument(); |
||||
expect(queryByText('Save')).toBeInTheDocument(); |
||||
|
||||
expect( |
||||
getByDisplayValue(propNetworkDisplay.networkName), |
||||
).toBeInTheDocument(); |
||||
expect(getByDisplayValue(propNetworkDisplay.rpcUrl)).toBeInTheDocument(); |
||||
expect(getByDisplayValue(propNetworkDisplay.chainId)).toBeInTheDocument(); |
||||
expect(getByDisplayValue(propNetworkDisplay.ticker)).toBeInTheDocument(); |
||||
expect( |
||||
getByDisplayValue(propNetworkDisplay.blockExplorerUrl), |
||||
).toBeInTheDocument(); |
||||
fireEvent.change(getByDisplayValue(propNetworkDisplay.networkName), { |
||||
target: { value: 'LocalHost 8545' }, |
||||
}); |
||||
expect(getByDisplayValue('LocalHost 8545')).toBeInTheDocument(); |
||||
fireEvent.change(getByDisplayValue(propNetworkDisplay.chainId), { |
||||
target: { value: '1' }, |
||||
}); |
||||
expect( |
||||
queryByText('This Chain ID is currently used by the mainnet network.'), |
||||
).toBeInTheDocument(); |
||||
|
||||
fireEvent.change(getByDisplayValue(propNetworkDisplay.rpcUrl), { |
||||
target: { value: 'test' }, |
||||
}); |
||||
expect( |
||||
queryByText('URLs require the appropriate HTTP/HTTPS prefix.'), |
||||
).toBeInTheDocument(); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue