test(receive): add e2e tests to receive view
This commit is contained in:
parent
79676ddc79
commit
0bdf809567
|
@ -0,0 +1,119 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import { getApp } from '../setup/utils';
|
||||||
|
|
||||||
|
const app = getApp();
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
await app.start();
|
||||||
|
await app.client.waitUntilWindowLoaded();
|
||||||
|
await app.client.waitUntilTextExists('#sidebar', 'Receive');
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(() => app.stop());
|
||||||
|
|
||||||
|
describe('Receive', () => {
|
||||||
|
test('should load "Receive Page"', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
expect(await app.client.getText('#header p:first-child')).toEqual('Receive');
|
||||||
|
|
||||||
|
expect(await app.client.getText('#receive-wrapper #shielded-address-label')).toEqual(
|
||||||
|
'SHIELDED ADDRESS',
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.getText('#receive-wrapper #wallet-address #wallet-address-text'),
|
||||||
|
).toEqual('zs1z7rejlpsa98s2rrrfkwmaxu53e4ue0ulcrw0h4x5g8jl04tak0d3mm47vdtahatqrlkngh9sly');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.getText('#receive-wrapper #wallet-address #wallet-address-balance'),
|
||||||
|
).toEqual('ZEC 5');
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.element('#receive-wrapper #wallet-address #wallet-address-copy').isVisible(),
|
||||||
|
).toEqual(true);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#receive-wrapper #wallet-address #wallet-address-see-qrcode')
|
||||||
|
.isVisible(),
|
||||||
|
).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should copy address on Copy click', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.isExisting('#receive-wrapper #wallet-address #wallet-address-copy-tooltip'),
|
||||||
|
).toEqual(false);
|
||||||
|
|
||||||
|
await app.client.element('#receive-wrapper #wallet-address #wallet-address-copy').click();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#receive-wrapper #wallet-address #wallet-address-copy-tooltip')
|
||||||
|
.isVisible(),
|
||||||
|
).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show the QRCode area', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.isExisting('#receive-wrapper #wallet-address #wallet-address-qr-code'),
|
||||||
|
).toEqual(false);
|
||||||
|
|
||||||
|
await app.client.element('#receive-wrapper #wallet-address #wallet-address-see-qrcode').click();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#receive-wrapper #wallet-address #wallet-address-qr-code')
|
||||||
|
.isVisible(),
|
||||||
|
).toEqual(true);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
await app.client.getHTML('#receive-wrapper #wallet-address #wallet-address-qr-code'),
|
||||||
|
).toEqual(expect.stringContaining('canvas'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create a new zAddress', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
await app.client.element('#receive-wrapper #receive-get-new-shielded').click();
|
||||||
|
expect((await app.client.elements('#receive-wrapper #wallet-address')).value.length).toEqual(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show other address types', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
await app.client.element('#receive-wrapper #receive-show-other').click();
|
||||||
|
expect(
|
||||||
|
await app.client
|
||||||
|
.element('#receive-wrapper #receive-transparent-addresses-wrapper')
|
||||||
|
.isVisible(),
|
||||||
|
).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should create new transparent addresses', async () => {
|
||||||
|
await app.client.element('#sidebar a:nth-child(1)').click();
|
||||||
|
await app.client.element('#sidebar a:nth-child(3)').click();
|
||||||
|
|
||||||
|
await app.client.element('#receive-wrapper #receive-show-other').click();
|
||||||
|
await app.client
|
||||||
|
.element(
|
||||||
|
'#receive-wrapper #receive-transparent-addresses-wrapper #receive-get-net-transparent',
|
||||||
|
)
|
||||||
|
.click();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
(await app.client.elements(
|
||||||
|
'#receive-wrapper #receive-transparent-addresses-wrapper #wallet-address',
|
||||||
|
)).value.length,
|
||||||
|
).toEqual(2);
|
||||||
|
});
|
||||||
|
});
|
|
@ -99,6 +99,14 @@ createTestServer({
|
||||||
return res.send({
|
return res.send({
|
||||||
result: 5,
|
result: 5,
|
||||||
});
|
});
|
||||||
|
case 'z_getnewaddress':
|
||||||
|
return res.send({
|
||||||
|
result: 'zs1z7rejlpsa98s2rrrfkwmaxu53e4ue0ulcrw0h4x5g8jl04tak0d3mm47vdtahatqrlkngh9soy',
|
||||||
|
});
|
||||||
|
case 'getnewaddress':
|
||||||
|
return res.send({
|
||||||
|
result: 't1VpYecBW4UudbGcy4ufh61eWxQCoFaUrPs',
|
||||||
|
});
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,32 +155,36 @@ class Component extends PureComponent<Props, State> {
|
||||||
const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
|
const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ColumnComponent width='100%'>
|
<ColumnComponent id='wallet-address' width='100%'>
|
||||||
<AddressWrapper>
|
<AddressWrapper>
|
||||||
<Address
|
<Address
|
||||||
|
id='wallet-address-text'
|
||||||
value={address}
|
value={address}
|
||||||
onClick={this.toggleMoreInfo}
|
onClick={this.toggleMoreInfo}
|
||||||
onDoubleClick={this.showMoreInfo}
|
onDoubleClick={this.showMoreInfo}
|
||||||
/>
|
/>
|
||||||
<ActionsWrapper>
|
<ActionsWrapper>
|
||||||
<TextComponent value={formatNumber({ append: 'ZEC ', value: balance })} />
|
<TextComponent
|
||||||
|
id='wallet-address-balance'
|
||||||
|
value={formatNumber({ append: 'ZEC ', value: balance })}
|
||||||
|
/>
|
||||||
<CopyToClipboard text={address} onCopy={this.copyAddress}>
|
<CopyToClipboard text={address} onCopy={this.copyAddress}>
|
||||||
<IconButton onClick={() => {}}>
|
<IconButton id='wallet-address-copy' onClick={() => {}}>
|
||||||
{!showCopiedTooltip ? null : (
|
{!showCopiedTooltip ? null : (
|
||||||
<CopyTooltip>
|
<CopyTooltip id='wallet-address-copy-tooltip'>
|
||||||
<TooltipText value='Copied!' />
|
<TooltipText value='Copied!' />
|
||||||
</CopyTooltip>
|
</CopyTooltip>
|
||||||
)}
|
)}
|
||||||
<IconImage src={copyIcon} alt='Copy Address' />
|
<IconImage src={copyIcon} alt='Copy Address' />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</CopyToClipboard>
|
</CopyToClipboard>
|
||||||
<IconButton onClick={this.toggleMoreInfo}>
|
<IconButton id='wallet-address-see-qrcode' onClick={this.toggleMoreInfo}>
|
||||||
<IconImage src={qrCodeIcon} alt='See QRCode' />
|
<IconImage src={qrCodeIcon} alt='See QRCode' />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</ActionsWrapper>
|
</ActionsWrapper>
|
||||||
</AddressWrapper>
|
</AddressWrapper>
|
||||||
{!showQRCode ? null : (
|
{!showQRCode ? null : (
|
||||||
<QRCodeContainer>
|
<QRCodeContainer id='wallet-address-qr-code'>
|
||||||
<QRCodeWrapper>
|
<QRCodeWrapper>
|
||||||
<QRCode value={address} />
|
<QRCode value={address} />
|
||||||
</QRCodeWrapper>
|
</QRCodeWrapper>
|
||||||
|
|
|
@ -118,17 +118,24 @@ class Component extends PureComponent<Props, State> {
|
||||||
const plusIcon = theme.mode === DARK ? PlusIconDark : PlusIconLight;
|
const plusIcon = theme.mode === DARK ? PlusIconDark : PlusIconLight;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div id='receive-wrapper'>
|
||||||
<Label value='Shielded Address' />
|
<Label value='Shielded Address' id='shielded-address-label' />
|
||||||
{shieldedAddresses.map(({ address, balance }) => (
|
{shieldedAddresses.map(({ address, balance }) => (
|
||||||
<WalletAddress key={address} address={address} balance={balance} />
|
<WalletAddress key={address} address={address} balance={balance} />
|
||||||
))}
|
))}
|
||||||
<Row justifyContent='space-between'>
|
<Row justifyContent='space-between'>
|
||||||
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
|
<ActionButton
|
||||||
|
id='receive-get-new-shielded'
|
||||||
|
onClick={() => this.generateNewAddress('shielded')}
|
||||||
|
>
|
||||||
<PlusIcon src={plusIcon} alt='New Shielded Address' />
|
<PlusIcon src={plusIcon} alt='New Shielded Address' />
|
||||||
<ActionText value='New Shielded Address' />
|
<ActionText value='New Shielded Address' />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
|
<ActionButton
|
||||||
|
id='receive-show-other'
|
||||||
|
onClick={this.toggleAdditionalOptions}
|
||||||
|
isActive={showAdditionalOptions}
|
||||||
|
>
|
||||||
<ActionIcon isActive={showAdditionalOptions} src={seeMoreIcon} alt='More Options' />
|
<ActionIcon isActive={showAdditionalOptions} src={seeMoreIcon} alt='More Options' />
|
||||||
<ActionText value={buttonText} />
|
<ActionText value={buttonText} />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
@ -149,6 +156,7 @@ class Component extends PureComponent<Props, State> {
|
||||||
{(show: boolean) => show
|
{(show: boolean) => show
|
||||||
&& ((props: Object) => (
|
&& ((props: Object) => (
|
||||||
<animated.div
|
<animated.div
|
||||||
|
id='receive-transparent-addresses-wrapper'
|
||||||
style={{
|
style={{
|
||||||
...props,
|
...props,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
@ -159,7 +167,10 @@ class Component extends PureComponent<Props, State> {
|
||||||
{transparentAddresses.map(({ address, balance }) => (
|
{transparentAddresses.map(({ address, balance }) => (
|
||||||
<WalletAddress key={address} address={address} balance={balance} />
|
<WalletAddress key={address} address={address} balance={balance} />
|
||||||
))}
|
))}
|
||||||
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
|
<ActionButton
|
||||||
|
id='receive-get-net-transparent'
|
||||||
|
onClick={() => this.generateNewAddress('transparent')}
|
||||||
|
>
|
||||||
<PlusIcon src={plusIcon} alt='New Transparent Address' />
|
<PlusIcon src={plusIcon} alt='New Transparent Address' />
|
||||||
<ActionText value='New Transparent Address' />
|
<ActionText value='New Transparent Address' />
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
|
Loading…
Reference in New Issue