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({ 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;
} }

View File

@ -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>

View File

@ -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>