test(receive): add e2e tests to receive view

This commit is contained in:
George Lima 2019-03-19 22:25:56 -03:00
parent 79676ddc79
commit 0bdf809567
4 changed files with 153 additions and 11 deletions

View File

@ -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);
});
});

View File

@ -99,6 +99,14 @@ createTestServer({
return res.send({
result: 5,
});
case 'z_getnewaddress':
return res.send({
result: 'zs1z7rejlpsa98s2rrrfkwmaxu53e4ue0ulcrw0h4x5g8jl04tak0d3mm47vdtahatqrlkngh9soy',
});
case 'getnewaddress':
return res.send({
result: 't1VpYecBW4UudbGcy4ufh61eWxQCoFaUrPs',
});
default:
return null;
}

View File

@ -155,32 +155,36 @@ class Component extends PureComponent<Props, State> {
const copyIcon = theme.mode === DARK ? CopyIconDark : CopyIconLight;
return (
<ColumnComponent width='100%'>
<ColumnComponent id='wallet-address' width='100%'>
<AddressWrapper>
<Address
id='wallet-address-text'
value={address}
onClick={this.toggleMoreInfo}
onDoubleClick={this.showMoreInfo}
/>
<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}>
<IconButton onClick={() => {}}>
<IconButton id='wallet-address-copy' onClick={() => {}}>
{!showCopiedTooltip ? null : (
<CopyTooltip>
<CopyTooltip id='wallet-address-copy-tooltip'>
<TooltipText value='Copied!' />
</CopyTooltip>
)}
<IconImage src={copyIcon} alt='Copy Address' />
</IconButton>
</CopyToClipboard>
<IconButton onClick={this.toggleMoreInfo}>
<IconButton id='wallet-address-see-qrcode' onClick={this.toggleMoreInfo}>
<IconImage src={qrCodeIcon} alt='See QRCode' />
</IconButton>
</ActionsWrapper>
</AddressWrapper>
{!showQRCode ? null : (
<QRCodeContainer>
<QRCodeContainer id='wallet-address-qr-code'>
<QRCodeWrapper>
<QRCode value={address} />
</QRCodeWrapper>

View File

@ -118,17 +118,24 @@ class Component extends PureComponent<Props, State> {
const plusIcon = theme.mode === DARK ? PlusIconDark : PlusIconLight;
return (
<div>
<Label value='Shielded Address' />
<div id='receive-wrapper'>
<Label value='Shielded Address' id='shielded-address-label' />
{shieldedAddresses.map(({ address, balance }) => (
<WalletAddress key={address} address={address} balance={balance} />
))}
<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' />
<ActionText value='New Shielded Address' />
</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' />
<ActionText value={buttonText} />
</ActionButton>
@ -149,6 +156,7 @@ class Component extends PureComponent<Props, State> {
{(show: boolean) => show
&& ((props: Object) => (
<animated.div
id='receive-transparent-addresses-wrapper'
style={{
...props,
width: '100%',
@ -159,7 +167,10 @@ class Component extends PureComponent<Props, State> {
{transparentAddresses.map(({ address, 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' />
<ActionText value='New Transparent Address' />
</ActionButton>