e2e test: receive coins (#810)

* e2e test: receive coins * Add receive test flow * test redirect link * Test clipboard refacto * Test clipboard refacto
massalabs · Oct 26, 2023 · 1c52754 · 1c52754
1 parent 16fb793
commit 1c52754
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 5 deletions.
diff --git a/web-frontend/cypress/downloads/downloads.html b/web-frontend/cypress/downloads/downloads.html
diff --git a/web-frontend/cypress/e2e/acceptance/home/receive.cy.tsx b/web-frontend/cypress/e2e/acceptance/home/receive.cy.tsx
@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+import { mockServer } from '../../../../src/mirage';
+import { AccountObject } from '@/models/AccountModel';
+
+describe('E2E | Acceptance | Home | Receive', () => {
+  let server: any;
+  const baseUrl = Cypress.config().baseUrl;
+
+  beforeEach(() => {
+    server = mockServer('test');
+  });
+
+  afterEach(() => {
+    server.shutdown();
+  });
+
+  describe('receive', () => {
+    let mockedAccounts;
+
+    function mockAccounts() {
+      const mockedAccounts = server.createList('account', 2);
+      mockedAccounts.forEach((account) => {
+        server.createList('asset', 3, { account });
+      });
+      const account = {
+        nickname: 'Mario',
+        address: 'AUHdadXyJZUeINwiUVMtXZXJRTFXtYdihRWitUcAJSBwAHgcKAjtxx',
+      };
+      mockedAccounts.push(server.create('account', { ...account }));
+
+      return mockedAccounts;
+    }
+
+    beforeEach(() => {
+      mockedAccounts = mockAccounts();
+    });
+
+    function navigateToReceivePage() {
+      cy.visit('/');
+
+      cy.get('[data-testid="account-2"]').click();
+      cy.get('[data-testid="receive-button"]').click();
+    }
+
+    function generateLink(amount) {
+      cy.get('[data-testid="button"]')
+        .should('exist')
+        .contains('Generate link')
+        .click();
+
+      cy.get('[data-testid="amount-to-send"]').type(amount);
+
+      cy.get('[data-testid="generate-link-button"]').click();
+
+      cy.on('window:confirm', () => true);
+
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt');
+      });
+
+      cy.get('[data-testid="clipboard-link"]').click();
+    }
+
+    function customFormatNumber(number) {
+      let numberString = number.toString();
+      let [integerPart, decimalPart] = numberString.split('.');
+      integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      if (decimalPart !== undefined) {
+        return `${integerPart}.${decimalPart} MAS`;
+      } else {
+        return `${integerPart} MAS`;
+      }
+    }
+
+    it('should land on receive page when receive CTA is clicked', () => {
+      const account = mockedAccounts.at(2);
+
+      cy.visit('/');
+
+      cy.get('[data-testid="account-2"]').click();
+
+      cy.get('[data-testid="receive-button"]').click();
+      cy.url().should('eq', `${baseUrl}/${account.nickname}/transfer-coins`);
+
+      cy.get('[data-testid="send-coins"]').should('not.be.visible');
+      cy.get('[data-testid="receive-coins"]').should('be.visible');
+    });
+
+    it('clipboard field should contain user address', () => {
+      const account = mockedAccounts.at(2);
+
+      navigateToReceivePage();
+      cy.get('[data-testid="clipboard-field"]').contains(account.address);
+    });
+
+    it('should copy from clipboard', () => {
+      const account = mockedAccounts.at(2);
+      navigateToReceivePage();
+      cy.on('window:confirm', () => true);
+
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt');
+      });
+
+      cy.get('[data-testid="clipboard-field"]').click();
+      cy.get('@copyToClipboardPrompt').should('be.called');
+
+      cy.get('@copyToClipboardPrompt').should((prompt) => {
+        expect(prompt.args[0][1]).to.equal(account.address);
+      });
+    });
+
+    it('should generate and copy link', () => {
+      const amount = 5000;
+      const account = mockedAccounts.at(2);
+
+      const generatedLink = `http://localhost:8080/send-redirect/?to=${account.address}&amount=${amount}`;
+
+      navigateToReceivePage();
+      cy.get('[data-testid="button"]').contains('Generate link').click();
+
+      cy.get('[data-testid="popup-modal"]').should('be.visible');
+
+      cy.get('[data-testid="amount-to-send"]')
+        .should('have.attr', 'placeholder', 'Amount to ask')
+        .type(amount);
+
+      cy.get('[data-testid="clipboard-field"]').should('contain', '');
+
+      cy.get('[data-testid="generate-link-button"]').click();
+
+      cy.on('window:confirm', () => true);
+
+      cy.window().then((win) => {
+        cy.stub(win, 'prompt').returns(win.prompt).as('copyToClipboardPrompt');
+      });
+
+      cy.get('[data-testid="clipboard-link"]')
+        .should('contain', generatedLink)
+        .click();
+
+      cy.get('@copyToClipboardPrompt').should('be.called');
+
+      cy.get('@copyToClipboardPrompt').should((prompt) => {
+        expect(prompt.args[0][1]).to.equal(generatedLink);
+      });
+    });
+
+    it('should redirect to generated link and fill input fields', () => {
+      const account = mockedAccounts.at(2);
+      const amount = 5000;
+
+      const generatedLink = `http://localhost:8080/send-redirect/?to=${account.address}&amount=${amount}`;
+
+      navigateToReceivePage();
+
+      generateLink(amount);
+
+      cy.visit(generatedLink);
+
+      cy.get('[data-testid="currency-field"').should(
+        'have.value',
+        customFormatNumber(amount),
+      );
+
+      cy.get('[data-testid="input-field"').should(
+        'have.value',
+        account.address,
+      );
+    });
+  });
+});
diff --git a/web-frontend/src/i18n/en_US.json b/web-frontend/src/i18n/en_US.json
@@ -181,7 +181,7 @@
     "send-confirmation": "Amount ({amount}) + fees ({fees} nMAS)"
   },
   "receive-coins": {
-    "receive-account": "Generate link",
+    "generate-link": "Generate link",
     "receive-amount": "Amount",
     "account-address": "Account address: ",
     "amount-to-ask": "Amount to ask",

diff --git a/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx b/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx
@@ -91,6 +91,7 @@ function GenerateLink(props: GenerateLinkProps) {
                 {Intl.t('receive-coins.receive-amount')}
               </p>
               <Currency
+                data-testid="amount-to-send"
                 placeholder={Intl.t('receive-coins.amount-to-ask')}
                 name="amount"
                 value={amount}
@@ -114,14 +115,15 @@ function GenerateLink(props: GenerateLinkProps) {
               </p>
               <div className="h-16">
                 <Clipboard
+                  data-testid="clipboard-link"
                   rawContent={link}
                   error={Intl.t('errors.no-content-to-copy')}
                 />
               </div>
             </div>
             <div className="pb-3">
-              <Button type="submit">
-                {Intl.t('receive-coins.receive-account')}
+              <Button data-testid="generate-link-button" type="submit">
+                {Intl.t('receive-coins.generate-link')}
               </Button>
             </div>
           </div>

diff --git a/web-frontend/src/pages/TransferCoins/ReceiveCoins/ReceiveCoins.tsx b/web-frontend/src/pages/TransferCoins/ReceiveCoins/ReceiveCoins.tsx
@@ -43,7 +43,7 @@ function ReceiveCoins({ ...props }) {
           />
         </div>
         <Button onClick={() => setModal(!modal)} preIcon={<FiLink size={24} />}>
-          {Intl.t('receive-coins.receive-account')}
+          {Intl.t('receive-coins.generate-link')}
         </Button>
       </div>
       {modal ? <GenerateLink {...modalArgs} /> : null}