PLT-5884 added compile contract and simulation of contract

input-output-hk · May 30, 2023 · db31768 · db31768
1 parent d5cfae7
commit db31768
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 101 deletions.
diff --git a/e2e/config/pages.json b/e2e/config/pages.json
@@ -18,6 +18,9 @@
   "blockly editor": {
     "route": "/#/blockly",
     "regex": "^/#/blockly$"
+  },
+  "contract simulation": {
+    "route": "/#/simulation",
+    "regex": "^/#/simulation$"
   }
-
 }
diff --git a/e2e/shell.nix b/e2e/shell.nix
diff --git a/e2e/src/env/global.ts b/e2e/src/env/global.ts
@@ -1,7 +1,7 @@
 export type PageId = string;
 export type PagesConfig = Record<PageId, Record<string, string>>;
 export type HostsConfig = Record<string, string>;
-export type ValidAccessibilityRoles = "link" | "button" | "heading";
+export type ValidAccessibilityRoles = "link" | "button" | "group" | "heading";
 export type ElementKey = string;
 export type ElementLocator = Record<string, string>;
 export type PageElementMappings = Record<PageId, Record<ElementKey, ElementLocator>>;

diff --git a/e2e/src/features/compile-valid-contract.feature b/e2e/src/features/compile-valid-contract.feature
@@ -0,0 +1,17 @@
+Feature: Compile a valid contract
+
+    As a user I expect to be able to compile a valid contract and see the generated code
+    Scenario: As a user I want to compile a valid contract and see the generated code
+
+      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
+      # And I should see a "link" with "Generated code" text within the "javascript-editor-container" "heading"
+
+      # When I click the "link" with "Generated code" text
+      # Then I should see a "heading" with "Generated code content" text
diff --git a/e2e/src/features/contract-simulation.feature b/e2e/src/features/contract-simulation.feature
@@ -0,0 +1,19 @@
+Feature: Simulated a contract
+
+    As a user I expect to be able to simulate a contract
+
+    @wip
+    Scenario: As a user I want to simulate a contract
+
+      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
diff --git a/e2e/src/features/switching-editors.feature b/e2e/src/features/switching-editors.feature
@@ -2,7 +2,6 @@ Feature: Switching text editors
 
     As a user I expect to be able to switch between text editors
 
-    @wip
     Scenario: As a user I want to switch from Haskell, to Javascript, to Marlowe, to Blockly
 
       Given I am on the "home" page

diff --git a/e2e/src/step-definitions/assertions/verify-elements-visibility.ts b/e2e/src/step-definitions/assertions/verify-elements-visibility.ts
@@ -12,12 +12,30 @@ Then(
       screen: { page },
     } = this;
 
-    await waitFor(async() => {
-      // NOTE: This locator uses html accessibility roles and names to find elements.
-      // If your test is not finding an element, please verify that the role and name are correct.
+    await waitFor(async () => {
       const locator = await page.getByRole(role, { name, exact: true });
       const isElementVisible = await locator.isVisible();
       return isElementVisible;
-    })
+    });
+  }
+);
+
+Then(
+  /^I should see a "([^"]*)" with "([^"]*)" text within the "([^"]*)" "([^"]*)"$/,
+  async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string, parentName: string, parentRole: ValidAccessibilityRoles) {
+
+    const {
+      screen: { page },
+    } = this;
+
+
+    // NOTE: This locator uses html accessibility roles and names to find elements.
+    // If your test is not finding an element, please verify that the role and name are correct.
+    await waitFor(async () => {
+      await page.pause();
+      const locator = await page.getByRole(parentRole, {name: parentName, exact: true}).getByRole(role, { name, exact: true });
+      const isElementVisible = await locator.isVisible();
+      return isElementVisible;
+    });
   }
 );
diff --git a/e2e/src/step-definitions/click.ts b/e2e/src/step-definitions/click.ts
@@ -1,8 +1,7 @@
 import { When } from '@cucumber/cucumber';
 import { ScenarioWorld } from './setup/world';
-import { clickElement } from '../support/html-behavior';
-import { waitFor } from '../support/wait-for-behavior';
 import { ValidAccessibilityRoles } from '../env/global';
+import { waitFor } from '../support/wait-for-behavior';
 
 When(
   /^I click the "([^"]*)" with "([^"]*)" text$/,
@@ -12,18 +11,22 @@ When(
       globalConfig
     } = this;
 
-    try {
+    const locator = await page.getByRole(role, { name, exact: true });
+    const result = await locator.isVisible();
+    if (result) await locator.click();
+  }
+);
 
-    await waitFor(async() => {
-      // NOTE: This locator uses html accessibility roles and names to find elements.
-      // If your test is not finding an element, please verify that the role and name are correct.
-      const locator = await page.getByRole(role, { name, exact: true });
-      const result = await locator.isVisible();
+When(
+  /^I click the "([^"]*)" (?:button|link)$/,
+  async function(this: ScenarioWorld, name: string, role: ValidAccessibilityRoles) {
+    const {
+      screen: { page },
+      globalConfig
+    } = this;
 
-      if (result) await clickElement(locator);
-    })
-    } catch (e) {
-      console.log("error: ", e);
-    }
+    const locator = await page.getByRole(role, { name, exact: true });
+    const result = await locator.isVisible();
+    if (result) await locator.click();
   }
 )
diff --git a/e2e/src/step-definitions/form.ts b/e2e/src/step-definitions/form.ts
@@ -1,42 +1,42 @@
-// import { When } from "@cucumber/cucumber";
-// import { waitFor } from "../support/wait-for-behavior";
-// import { queries, getDocument } from 'playwright-testing-library';
-// import { ScenarioWorld } from './setup/world';
-// import { getElementLocator } from '../support/web-element-helper';
-// import { getFixtureText } from '../support/fixture-helper';
-// import { ElementKey, FixtureKey } from '../env/global';
-// import { Locator } from 'playwright';
-// import {
-//   inputValue,
-//   selectValue
-// } from '../support/html-behavior';
-
-// When(
-//   /^I fill in the "([^"]*)" input with "([^"]*)"$/,
-//   async function(this: ScenarioWorld, elementKey: ElementKey, input: string) {
-//     const {
-//       screen: { page },
-//       globalConfig
-//     } = this;
-
-
-//     console.log(`I fill in the ${elementKey} input with ${input}`);
-
-//     const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
-//     const { role, name } = elementIdentifier;
-//     const document = await getDocument(page);
-
-//     await waitFor(async() => {
-//       const locator = await queries.getByRole(document, role, { name })
-//       const result = await locator.isVisible();
-
-//       if (result) {
-//         await inputValue(locator, input)
-//         return result;
-//       }
-//     });
-//   }
-// )
+import { When } from "@cucumber/cucumber";
+import { waitFor } from "../support/wait-for-behavior";
+import { queries, getDocument } from 'playwright-testing-library';
+import { ScenarioWorld } from './setup/world';
+import { getElementLocator } from '../support/web-element-helper';
+import { getFixtureText } from '../support/fixture-helper';
+import { ElementKey, FixtureKey } from '../env/global';
+import { Locator } from 'playwright';
+import {
+  inputValue,
+  selectValue
+} from '../support/html-behavior';
+
+When(
+  /^I fill in the "([^"]*)" input with "([^"]*)"$/,
+  async function(this: ScenarioWorld, elementKey: ElementKey, input: string) {
+    const {
+      screen: { page },
+      globalConfig
+    } = this;
+
+
+    console.log(`I fill in the ${elementKey} input with ${input}`);
+
+    const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
+    const { role, name } = elementIdentifier;
+    const document = await getDocument(page);
+
+    await waitFor(async() => {
+      const locator = await queries.getByRole(document, role, { name })
+      const result = await locator.isVisible();
+
+      if (result) {
+        await inputValue(locator, input)
+        return result;
+      }
+    });
+  }
+)
 
 // When(
 //   /^I fill in the "playground editor" input with "([^"]*)" contract code$/,

diff --git a/e2e/src/support/html-behavior.ts b/e2e/src/support/html-behavior.ts
@@ -3,21 +3,21 @@ import { Locator } from 'playwright';
 export const clickElement = async(
   locator: Locator,
 ): Promise<void> => {
-  await locator.click()
+  locator.click()
 }
 
 export const inputValue = async (
   locator: Locator,
   input: string,
 ): Promise<void> => {
   await locator.focus();
-  await locator.fill(input);
+  locator.fill(input);
 }
 
 export const selectValue = async(
   locator: Locator,
   option: string,
 ): Promise<void> => {
   await locator.focus();
-  await locator.selectOption(option);
+  locator.selectOption(option);
 }
diff --git a/marlowe-playground-client/src/Page/JavascriptEditor/View.purs b/marlowe-playground-client/src/Page/JavascriptEditor/View.purs
@@ -78,14 +78,22 @@ render
   -> State
   -> ComponentHTML Action ChildSlots m
 render metadata state =
-  div [ HP.classes [ flex, flexCol, fullHeight ] ]
+  div
+    [ HP.classes [ flex, flexCol, fullHeight ]
+    , role "heading"
+    , label "javascript-editor-container"
+    ]
     [ section
         [ HP.classes [ paddingX, minH0, flexGrow, overflowHidden ]
         , role "heading"
         , label "javascript-editor"
         ]
         [ jsEditor ]
-    , section [ HP.classes [ paddingX, maxH70p ] ]
+    , section
+        [ HP.classes [ paddingX, maxH70p ]
+        , role "heading"
+        , label "bottom-panel"
+        ]
         [ renderSubmodule
             _bottomPanelState
             BottomPanelAction
@@ -185,16 +193,21 @@ panelContents
   -> BottomPanelView
   -> ComponentHTML Action ChildSlots m
 panelContents state _ GeneratedOutputView =
-  section [ classNames [ "py-4" ] ] case view _compilationResult state of
-    JS.CompiledSuccessfully (InterpreterResult result) ->
-      [ div [ HP.classes [ bgWhite, spaceBottom, ClassName "code" ] ]
-          numberedText
-      ]
-      where
-      numberedText = (code_ <<< Array.singleton <<< text) <$> split
-        (Pattern "\n")
-        (show $ pretty (toTerm result.result :: T.Term T.Contract))
-    _ -> [ text "There is no generated code" ]
+  section
+    [ classNames [ "py-4" ]
+    , role "heading"
+    , label "Generated code content"
+    ]
+    case view _compilationResult state of
+      JS.CompiledSuccessfully (InterpreterResult result) ->
+        [ div [ HP.classes [ bgWhite, spaceBottom, ClassName "code" ] ]
+            numberedText
+        ]
+        where
+        numberedText = (code_ <<< Array.singleton <<< text) <$> split
+          (Pattern "\n")
+          (show $ pretty (toTerm result.result :: T.Term T.Contract))
+      _ -> [ text "There is no generated code" ]
 
 panelContents state metadata StaticAnalysisView =
   section_

diff --git a/marlowe-playground-client/src/Page/Simulation/View.purs b/marlowe-playground-client/src/Page/Simulation/View.purs
@@ -96,6 +96,7 @@ import Halogen.HTML
   )
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Properties (class_, classes, disabled, enabled, id)
+import Halogen.HTML.Properties.ARIA (label, role)
 import Halogen.Monaco (monacoComponent)
 import Humanize
   ( formatInstant