Added request token test for when there is a message and amount is sp…

…ecifically 0

e2e/features/account/AddAccount.feature

@@ -1,6 +1,7 @@
 Feature: AddAccount
   Background: Navigate to add account options
     Given I go to page "wallet"
+    And I wait for "2 seconds"
     Then I should see "Welcome to Lisk"
     And I should see "If you are new to the Lisk ecosystem, create an account by clicking on the “Create account”. If you have an account, then add it to your wallet by clicking on “Add account”."
     Given I click on a button with text "Add account"

e2e/features/requestToken/RequestToken.feature

@@ -1,16 +1,32 @@
 Feature: Request Token
   Background: Add an account and navigate to wallet
     Given I add an account with passphrase "peanut hundred pen hawk invite exclude brain chunk gadget wait wrong ready" password "Password1$" name 'test_acc'
-    Then I go to page "wallet"
-
-  Scenario: Request token should generate a copy link
-    Given I click on a button with text "Request"
+    And I go to page "wallet"
+    And I wait for "2 seconds"
+    And I click on a button with text "Request"
     Then I should see "Request tokens"
     And "lisk_mainchain" should be selected in "Recipient application" dropdown
     And "Lisk" should be selected in "Token" dropdown
     And button with text 'Copy link' should be disabled
+    And Element 'qrContainer' should contain class 'disabled'
+
+  Scenario: Request token should not generate a copy link if amount is 0
+    Given I type "0" in "amount"
+    Then button with text 'Copy link' should be disabled
+    And Element 'qrContainer' should contain class 'disabled'
+
+  Scenario: Request token should generate a copy link
     Given I type "10" in "amount"
     Then button with text "Copy link" should be enabled
-    And I click on a button with text "Copy link"
+    And Element 'qrContainer' should not contain class 'disabled'
+    Given I click on a button with text "Copy link"
     Then Clipboard should contain "lisk://wallet?modal=send&recipient=lskm9syv4wrjcjczpegz65zqxhk2cp9dkejs5wbjb&amount=10&token=0400000000000000&recipientChain=04000000"
 
+  Scenario: Request token should generate a copy link with message
+    Given I type "10" in "amount"
+    Then button with text "Copy link" should be enabled
+    And Element 'qrContainer' should not contain class 'disabled'
+    Given I click on a button with text "Add message (Optional)"
+    And I type "hello" in "reference-field"
+    And I click on a button with text "Copy link"
+    Then Clipboard should contain "lisk://wallet?modal=send&recipient=lskm9syv4wrjcjczpegz65zqxhk2cp9dkejs5wbjb&amount=10&reference=hello&token=0400000000000000&recipientChain=04000000"

e2e/fixtures/page.mjs

@@ -1,3 +1,3 @@
 export const fixture = {
-  page: undefined,
+  page: null,
 }

e2e/steps/common.mjs

@@ -160,3 +160,29 @@ Given(
     await fixture.page.getByTestId('add-network-button').click();
   }
 );
+
+Then(
+  '{string} should be selected in {string} dropdown',
+  async function (selectedText, dropdownTitle) {
+    const title = fixture.page
+      .getByText(dropdownTitle, { exact: true })
+      .locator('..')
+      .getByTestId('selected-menu-item')
+      .getByText(selectedText, { exact: true });
+    const content = await title.textContent();
+    expect(content).toBeTruthy();
+  }
+);
+
+Then('Element {string} should contain class {string}', async function (testId, className) {
+  const regex = new RegExp(className);
+  await expect(fixture.page.getByTestId(testId)).toHaveClass(regex);
+});
+
+Then('Element {string} should not contain class {string}', async function (testId, className) {
+  const selector = await fixture.page.getByTestId(testId);
+  const classList = await selector.evaluate(el => [...el.classList]);
+  const hasClassname = classList.find((classItem) => classItem.includes(className));
+
+  await expect(hasClassname).toBeFalsy();
+});

src/modules/wallet/components/request/requestWrapper.js

@@ -27,7 +27,10 @@ const RequestWrapper = ({ t, children, copyLabel, copyValue, title, className, d
         <span className={`${styles.label}`}>
           {t('Simply scan the QR code using the Lisk Mobile app or any other QR code reader.')}
         </span>
-        <div className={classNames(styles.qrCodeContainer, { [styles.disabled]: disabled })}>
+        <div
+          data-testid="qrContainer"
+          className={classNames(styles.qrCodeContainer, { [styles.disabled]: disabled })}
+        >
           <QRCode value={copyValue} size={176} />
         </div>
       </section>