From 0bdf80956749e778339792a597ec270a151e84c7 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Tue, 19 Mar 2019 22:25:56 -0300
Subject: [PATCH] test(receive): add e2e tests to receive view

---
 __tests__/e2e/receive.test.js    | 119 +++++++++++++++++++++++++++++++
 __tests__/setup/mockAPI.js       |   8 +++
 app/components/wallet-address.js |  16 +++--
 app/views/receive.js             |  21 ++++--
 4 files changed, 153 insertions(+), 11 deletions(-)
 create mode 100644 __tests__/e2e/receive.test.js

diff --git a/__tests__/e2e/receive.test.js b/__tests__/e2e/receive.test.js
new file mode 100644
index 0000000..668c240
--- /dev/null
+++ b/__tests__/e2e/receive.test.js
@@ -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);
+  });
+});
diff --git a/__tests__/setup/mockAPI.js b/__tests__/setup/mockAPI.js
index 359ad64..b5d3297 100644
--- a/__tests__/setup/mockAPI.js
+++ b/__tests__/setup/mockAPI.js
@@ -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;
     }
diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js
index a360e60..455e873 100644
--- a/app/components/wallet-address.js
+++ b/app/components/wallet-address.js
@@ -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>
diff --git a/app/views/receive.js b/app/views/receive.js
index 16bf19a..21661f6 100644
--- a/app/views/receive.js
+++ b/app/views/receive.js
@@ -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>