PLT-6037 E2E tests on navigation through simulation

e2e/package.json

@@ -26,6 +26,7 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "cucumber-html-reporter": "^6.0.0"
+    "cucumber-html-reporter": "^6.0.0",
+    "moment": "^2.29.4"
   }
 }

e2e/src/env/global.ts

@@ -8,10 +8,12 @@ export type PageElementMappings = Record<PageId, Record<ElementKey, ElementLocat
 export type FixtureKey = string;
 export type FixtureId= string;
 export type FixtureMappings = Record<FixtureId, string>;
+export type DateTimeFormat = string;
 
 export type GlobalConfig = {
   hostsConfig: HostsConfig;
   pagesConfig: PagesConfig;
   pageElementMappings: PageElementMappings;
   fixtureMappings: FixtureMappings;
+  simulatorDateFormat: DateTimeFormat;
 }

e2e/src/features/compile-new-project.feature

@@ -1,7 +1,6 @@
 @dev
 @smoke
 @regression
-@wip
 Feature: Open a new project and comiple
 
     As a user I should be able to open a new project

e2e/src/features/contract-simulation.feature

@@ -1,12 +1,12 @@
 @dev
 @smoke
 @regression
-Feature: Custom text box for currency value inputs
+Feature: Contract Simulation
 
     As a user I should be able to enter currency values
     that round appropriately
 
-    Scenario: As a user I to enter valid currency values
+    Scenario: As a user I to enter valid currency values in currency inputs
 
       Given I am on the "home" page
 
@@ -33,3 +33,55 @@ Feature: Custom text box for currency value inputs
       When I fill in the "Currency Amount" input with "123456789012345678901234567890"
       And I unblur the "Currency Amount" input
       When I fill in the "Currency Amount" input with "123456789012345678901234567890.000000"
+
+@wip
+    Scenario: As a user who is simulating a contract, I would like to see a transaction log
+
+      Given I am on the "home" page
+
+      When I click the "button" with "Open an example" text
+      When I click the "button" with "Escrow Javascript" text
+      Then I should be on the "javascript-editor" page
+
+      When I click the "button" with "Compile" text
+      Then I should see a "button" with "Compiled" text
+
+      When I click the "button" with "Send To Simulator" text
+      Then I should be on the "contract-simulation" page
+      And I should see a "heading" with "Simulation has not started yet" text
+
+      When I fill in the "Currency Amount" input with "100"
+      And I click the "button" with "Start simulation" text
+      Then I should see a "heading" with "Transaction log" text
+      And I should see a "heading" with "Contract started" text
+
+      When I observe the "current" time
+      And I observe the "expiration" time
+      Then the "expiration" time should be greater than the "current" time
+
+      When I click the "button" with "next minute" text
+      And I observe the "current" time
+      And I observe the "expiration" time
+      Then I expect the "current" time to increase by "1" minutes
+      And I expect the "expiration" time to increase by "0" minutes
+
+      When I click the "button" with "next minute" text
+      And I click the "button" with "next minute" text
+      And I observe the "current" time
+      And I observe the "expiration" time
+      Then I expect the "current" time to increase by "2" minutes
+      And I expect the "expiration" time to increase by "0" minutes
+
+      When I click the "button" with "Undo" text
+      And I observe the "current" time
+      And I observe the "expiration" time
+      Then I expect the "current" time to decrease by "1" minutes
+      And I expect the "expiration" time to increase by "0" minutes
+
+      When I click the "button" with "next timeout" text
+      Then I should see a "heading" with "Contract ended" text
+
+      When I click the "button" with "Undo" text
+      And I observe the "current" time
+      Then I expect the "current" time to match it's previous value
+

e2e/src/index.ts

@@ -9,6 +9,7 @@ import {
   PagesConfig,
   PageElementMappings,
   FixtureMappings,
+  DateTimeFormat,
 } from './env/global';
 import * as fs from 'fs';
 
@@ -36,11 +37,14 @@ const fixtureMappings: FixtureMappings = fixtureMappingFiles.reduce(
   {}
 );
 
+const simulatorDateFormat: DateTimeFormat = "D MMM YYYY HH:mm [GMT]Z";
+
 const worldParameters: GlobalConfig = {
   hostsConfig,
   pagesConfig,
   pageElementMappings,
   fixtureMappings,
+  simulatorDateFormat,
 };
 
 const common = `./src/features/**/*.feature \

e2e/src/step-definitions/assertions/verify-element-value.ts

@@ -3,13 +3,13 @@ import { ElementKey, ValidAccessibilityRoles } from '../../env/global';
 import { ScenarioWorld } from '../setup/world'
 import { waitFor } from '../../support/wait-for-behavior';
 import { getElementLocator } from '../../support/web-element-helper';
+import moment from 'moment';
 
 Then(
   /^the "([^"]*)" should contain "([^"]*)" text$/,
   async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string) {
     const {
-      screen: { page },
-      globalConfig
+      screen: { page }
     } = this;
     await waitFor(async() => {
       const locator = await page.getByRole(role, { name, exact: true });
@@ -60,7 +60,6 @@ Then(
   async function (this: ScenarioWorld, role: ValidAccessibilityRoles, name: string, expectedClass: string) {
     const {
       screen: { page },
-      globalConfig
     } = this;
     await waitFor(async() => {
       const locator = await page.getByRole(role, { name, exact: true });
@@ -73,4 +72,68 @@ Then(
         }
       }
     })
-});
+});
+
+Then(
+  /^the "([^"]*)" time should be (greater\s+than|less\s+than|equal\s+to) the "([^"]*)" time$/, 
+  async function (this: ScenarioWorld, firstTimeLabel: string, operator: string, secondTimeLabel: string) {
+    const {
+      screen: { page },
+      globalConfig: { simulatorDateFormat },
+      globalStateManager
+    } = this;
+    const firstTimeName = `${firstTimeLabel} time`;
+    const secondTimeName = `${secondTimeLabel} time`;
+    await waitFor(async() => {
+      const firstTime = globalStateManager.getValue(firstTimeName);
+      const secondTime = globalStateManager.getValue(secondTimeName);
+      if(operator === "greater than") {
+        return firstTime > secondTime;
+      } else if(operator === "less than") {
+        return firstTime < secondTime;
+      } else if(operator === "equal to") {
+        return firstTime.getTime() === secondTime.getTime();
+      }
+      return false;
+    });
+});
+
+Then(
+  /^I expect the "([^"]*)" time to (increase|decrease) by "([^"]*)" minutes$/, 
+  async function (this: ScenarioWorld, timeLabel: string, operation: string, increment: string) {
+    const {
+      globalStateManager
+    } = this;
+
+    const timeName = `${timeLabel} time`;
+    await waitFor(async() => {
+      const timeValues = globalStateManager.get(timeName);
+      const valuesLength = timeValues.length;
+      const oldTime = timeValues[valuesLength - 2];
+      const newTime = timeValues[valuesLength - 1];
+      const diffMinutes = moment(newTime).diff(moment(oldTime), 'minutes');
+      if (operation === "increase") {
+        return diffMinutes === parseInt(increment);
+      } else if (operation === "decrease") {
+        return diffMinutes === -parseInt(increment);
+      }
+    });
+});
+
+Then(
+  /^I expect the "([^"]*)" time to match it's previous value$/, 
+  async function (this: ScenarioWorld, timeLabel: string) {
+    const {
+      globalStateManager
+    } = this;
+
+    const timeName = `${timeLabel} time`;
+    await waitFor(async() => {
+      const timeValues = globalStateManager.get(timeName);
+      const valuesLength = timeValues.length;
+      const oldTime = timeValues[valuesLength - 2];
+      const newTime = timeValues[valuesLength - 1];
+      return oldTime.getTime() === newTime.getTime();
+    });
+});
+

e2e/src/step-definitions/assertions/verify-elements-visibility.ts

@@ -2,20 +2,26 @@ import { Then } from '@cucumber/cucumber';
 import { ValidAccessibilityRoles } from '../../env/global';
 import { ScenarioWorld } from '../setup/world'
 import { waitFor } from '../../support/wait-for-behavior';
+import { expect } from '@playwright/test';
 
 
 Then(
-  /^I should see a "([^"]*)" with "([^"]*)" text$/,
-  async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string) {
+  /^I should (not |)see a "([^"]*)" with "([^"]*)" text$/,
+  async function(this: ScenarioWorld, negate: string, role: ValidAccessibilityRoles, name: string) {
 
     const {
       screen: { page },
     } = this;
 
     await waitFor(async () => {
-      const locator = await page.getByRole(role, { name, exact: true });
-      const isElementVisible = await locator.isVisible();
-      return isElementVisible;
+        const locator = await page.getByRole(role, { name, exact: true });
+      if (negate === "not") {
+        // TODO: need to figure out how to assert that an element is not visible
+        return expect(locator.count()).toEqual(0);
+      } else {
+        const isElementVisible = await locator.isVisible();
+        return isElementVisible;
+      }
     });
   }
 );

e2e/src/step-definitions/setup/hooks.ts

@@ -1,4 +1,4 @@
-import { Before, After, ITestCaseHookParameter, setDefaultTimeout } from '@cucumber/cucumber';
+import { Before, After, setDefaultTimeout } from '@cucumber/cucumber';
 import { ScenarioWorld } from './world';
 import { env, envNumber } from '../../env/parseEnv'
 

e2e/src/step-definitions/setup/world.ts

@@ -9,6 +9,7 @@ import playwright, {
 import { env } from '../../env/parseEnv'
 import { World, IWorldOptions, setWorldConstructor } from "@cucumber/cucumber";
 import { GlobalConfig } from '../../env/global';
+import GlobalStateManager from "../../support/globalStateManager";
 
 export type Screen = {
   browser: Browser;
@@ -26,6 +27,7 @@ export class ScenarioWorld extends World {
   globalConfig: GlobalConfig;
 
   screen!: Screen;
+  globalStateManager = new GlobalStateManager();
 
   async init(contextOptions?: BrowserContextOptions): Promise<Screen> {
     await this.screen?.page?.close();

e2e/src/step-definitions/state-observation.ts

@@ -0,0 +1,26 @@
+import { When } from '@cucumber/cucumber';
+import { ScenarioWorld } from './setup/world';
+import { waitFor } from '../support/wait-for-behavior';
+import moment from 'moment';
+
+When(/^I observe the "([^"]*)" time$/,
+async function (this: ScenarioWorld, timeLabel: string) {
+    const {
+      screen: { page },
+      globalConfig: { simulatorDateFormat },
+      globalStateManager 
+    } = this;
+
+    await waitFor(async() => {
+      const name = `${timeLabel} time`;
+      const locator = await page.getByRole("heading", { name, exact: true });
+      const dateString = await locator.textContent();
+      if (dateString) {
+        const originalTime = moment(dateString, simulatorDateFormat).toDate();
+        globalStateManager.appendValue(name, originalTime);
+        return true;
+      }
+
+      return false;
+    });
+});

e2e/src/support/globalStateManager.ts

@@ -0,0 +1,33 @@
+class GlobalStateManager {
+  private state: Record<string, any[]>;
+
+  constructor() {
+    this.state = {};
+  }
+
+  appendValue(key: string, incredmentalValue: any): void {
+    this.state[key] = this.state[key] || [];
+    this.state[key].push(incredmentalValue);
+  }
+
+  popValue(key: string): any {
+    return this.state[key].pop();
+  }
+
+  getValue(key: string): any {
+    const values = this.state[key];
+    return values[values.length - 1];
+  }
+
+  // method to get value by key
+  get(key: string): any[] {
+    return this.state[key];
+  }
+
+  // method to set value by key
+  set(key: string, value: any[]): void {
+    this.state[key] = value;
+  }
+}
+
+export default GlobalStateManager;

e2e/yarn.lock

@@ -1967,6 +1967,11 @@ mkdirp@^2.1.5:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz"
   integrity sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"