Merge pull request #2923 from Emurgo/e2e-test-support-2

E2e test support 2

.github/workflows/tests.yml

@@ -38,7 +38,6 @@ jobs:
       - name: tests
         run: |
           npm run test
-
   E2E_tests_dApp_Chrome:
     if: github.event.review && (github.event.review.state == 'approved' || contains(github.event.review.body, '/check'))
     runs-on: macos-10.15
@@ -96,6 +95,8 @@ jobs:
           touch ./reports/cucumberReports.json
       - name: Run dapp connector tests
         working-directory: ./packages/yoroi-extension
+        env:
+          MAILSAC_API_KEY: ${{ secrets.MAILSAC_API_KEY }}
         run: npm run test:run:e2e:dApp:chrome
       - name: Archive tests screenshots and logs
         if: ${{ failure() }}
@@ -165,6 +166,8 @@ jobs:
           touch ./reports/cucumberReports.json
       - name: Run dapp connector tests
         working-directory: ./packages/yoroi-extension
+        env:
+          MAILSAC_API_KEY: ${{ secrets.MAILSAC_API_KEY }}
         run: npm run test:run:e2e:dApp:firefox
       - name: Archive tests screenshots and logs
         if: ${{ failure() }}

packages/yoroi-extension/features/pages/supportPage.js

@@ -0,0 +1,52 @@
+// @flow
+
+import type { LocatorObject } from '../support/webdriver';
+
+export const iframe: LocatorObject = { locator: '#webWidget', method: 'css' };
+
+export const supportButton: LocatorObject = {
+  locator: '.MuiButtonBase-root',
+  method: 'css',
+};
+
+export const emailInput: LocatorObject = {
+  locator: '//input[@name="email"]',
+  method: 'xpath',
+};
+
+export const descriptionTextArea: LocatorObject = {
+  locator: '//textarea[@name="description"]',
+  method: 'xpath',
+};
+
+export const submitButton: LocatorObject = {
+  locator: '//button[@type="submit"]',
+  method: 'xpath',
+};
+
+export const platformSelector: LocatorObject = {
+  locator: '//main/div[1]/div[2]/div/div[1]/div/div',
+  method: 'xpath',
+};
+
+export const acceptCheckbox: LocatorObject = {
+  locator: '//main/div[1]/div[5]/div/div/label',
+  method: 'xpath',
+};
+
+export const getPlatformLocator = (platform: string): LocatorObject => {
+  return {
+    locator: `//li[contains(text(), "${platform}")]`,
+    method: 'xpath',
+  };
+};
+
+export const successText: LocatorObject = {
+  locator: 'h2',
+  method: 'css',
+};
+
+export const frameTitle: LocatorObject = {
+  locator: 'h1',
+  method: 'css',
+};

packages/yoroi-extension/features/step_definitions/support-steps.js

@@ -0,0 +1,112 @@
+// @flow
+
+import { When, Then } from 'cucumber';
+import { expect } from 'chai';
+import {
+  descriptionTextArea,
+  emailInput,
+  supportButton,
+  getPlatformLocator,
+  frameTitle,
+  successText,
+  submitButton,
+  platformSelector,
+  acceptCheckbox,
+} from '../pages/supportPage';
+import { By } from 'selenium-webdriver';
+
+import { mailsacEmail, emailOptions, mailsacAPIKey } from '../support/helpers/common-constants';
+
+const axios = require('axios');
+
+When(/^I click on Support button$/, async function () {
+  this.webDriverLogger.info(`Step: I click on Support button`);
+  await this.click(supportButton);
+});
+
+Then(/^I should see the Support button$/, async function () {
+  this.webDriverLogger.info(`Step: I should see Support button`);
+  await this.waitForElement(supportButton);
+});
+
+When(/^I send a new Support request with text "(.+)"$/, async function (text) {
+  this.webDriverLogger.info(
+    `Step: I send a new Support request with email address ${mailsacEmail} and text ${text}`
+  );
+
+  // Switch to iframe
+  await this.driver.switchTo().frame(this.driver.findElement(By.id('webWidget')));
+
+  // enter email address
+  await this.waitForElement(emailInput);
+  await this.input(emailInput, mailsacEmail);
+
+  // enter description text
+  await this.input(descriptionTextArea, text);
+
+  // select platform depending on test browser
+  await this.click(platformSelector);
+  const browser = this.getBrowser();
+  const capBrowser = browser.charAt(0).toUpperCase() + browser.slice(1);
+  const platformLocator = getPlatformLocator(capBrowser);
+  await this.click(platformLocator);
+
+  // check checkbox
+  await this.waitForElement(acceptCheckbox);
+  await this.click(acceptCheckbox);
+
+  // submit
+  await this.click(submitButton);
+});
+
+Then(/^I see the message was sent to support$/, async function () {
+  this.webDriverLogger.info(`Step: I see the message was sent to support`);
+  await this.driver.sleep(2000);
+  await this.waitForElement(frameTitle);
+  const frameTitleText = await this.getText(frameTitle);
+  expect(frameTitleText).to.be.equal('Message sent');
+
+  const successElemText = await this.getText(successText);
+  expect(successElemText).to.be.equal('Thanks for reaching out');
+});
+
+Then(/^I check the email inbox for validation$/, async function () {
+  this.webDriverLogger.info(`Step: I check the email inbox for validation`);
+  // wait for email to arrive
+  await this.driver.sleep(1000);
+
+  this.webDriverLogger.info(`Step: I get the last email received`);
+
+  this.webDriverLogger.info(`Get emails list`);
+  const resEmails = await axios(emailOptions);
+  this.webDriverLogger.info(`Data: ${JSON.stringify(resEmails.data)}`);
+
+  const lastEmail = resEmails.data[0];
+  expect(lastEmail.from[0].address).to.be.equal('[email protected]');
+  expect(lastEmail.subject).to.be.equal('[Request received]');
+
+  const emailId = lastEmail._id;
+
+  const resFirst = await axios({
+    method: 'get',
+    url: `https://mailsac.com/api/text/${mailsacEmail}/${emailId}`,
+    headers: { 'Mailsac-Key': mailsacAPIKey },
+  });
+  this.webDriverLogger.info(`Data: Get last email body: ${resFirst.data}`);
+
+  const bodyList = resFirst.data.split('\n');
+  expect(bodyList[0]).to.match(
+    /Your request (.+) has been received and is being reviewed by our support staff./
+  );
+  expect(bodyList[2]).to.equal('To add additional comments, reply to this email.');
+  expect(bodyList[5]).to.equal('This email is a service from EMURGO.');
+
+  this.webDriverLogger.info(`Delete email`);
+  const resDel = await axios.delete(
+    `https://mailsac.com/api/addresses/${mailsacEmail}/messages/${emailId}`,
+    {
+      headers: { 'Mailsac-Key': mailsacAPIKey },
+    }
+  );
+  this.webDriverLogger.info(`Data: ${JSON.stringify(resDel.data)}`);
+});

packages/yoroi-extension/features/support.feature

@@ -0,0 +1,16 @@
+Feature: Wallet UI Support
+
+  Background:
+    Given I have opened the extension
+    And I have completed the basic setup
+    Then I should see the Create wallet screen
+    Given There is a Shelley wallet stored named shelley-simple-15
+    Then Revamp. I switch to revamp version
+    And I should see the Support button
+
+@support-1
+  Scenario: Contact Support successful
+    When I click on Support button
+    And I send a new Support request with text "Autotests. This is the test message from the extension."
+    Then I see the message was sent to support
+    And I check the email inbox for validation

packages/yoroi-extension/features/support/helpers/common-constants.js

@@ -4,4 +4,12 @@ export const testRunsDataDir = './testRunsData/';
 export const snapshotsDir = './features/yoroi_snapshots/';
 export const testRunsLogsDir = `${testRunsDataDir}Logs/`;
 export const mockDAppLogsDir = `${testRunsLogsDir}mockDApp/`;
-export const windowManagerLogsDir = `${testRunsLogsDir}windowManager/`;
+export const windowManagerLogsDir = `${testRunsLogsDir}windowManager/`;
+
+export const mailsacAPIKey = process.env.MAILSAC_API_KEY;
+export const mailsacEmail = '[email protected]';
+export const emailOptions = {
+  method: 'get',
+  url: `https://mailsac.com/api/addresses/${mailsacEmail}/messages`,
+  headers: { 'Mailsac-Key': mailsacAPIKey },
+};