Skip to content

Commit

Permalink
PLT-5884 change editor tests
Browse files Browse the repository at this point in the history
  • Loading branch information
ladamesny committed May 30, 2023
1 parent 08829d5 commit d5cfae7
Show file tree
Hide file tree
Showing 17 changed files with 270 additions and 311 deletions.
15 changes: 14 additions & 1 deletion e2e/config/pages.json
Expand Up @@ -3,8 +3,21 @@
"route": "/",
"regex": "^/#/$"
},
"marlowe-playground-js": {
"javascript editor": {
"route": "/#/javascript",
"regex": "^/#/javascript$"
},
"haskell editor": {
"route": "/#/haskell",
"regex": "^/#/haskell$"
},
"marlowe editor": {
"route": "/#/marlowe",
"regex": "^/#/marlowe$"
},
"blockly editor": {
"route": "/#/blockly",
"regex": "^/#/blockly$"
}

}
2 changes: 1 addition & 1 deletion e2e/env/common.env
@@ -1,5 +1,5 @@
UI_AUTOMATION_BROWSER='chromium'
HEADLESS=true
HEADLESS=false
SCREENSHOT_PATH="./reports/screenshots/"
VIDEO_PATH="./reports/videos/"
JSON_REPORT_FILE="./reports/reports.json"
Expand Down
36 changes: 18 additions & 18 deletions e2e/src/features/home-page.feature
@@ -1,38 +1,38 @@
@dev
@smoke
@regression

Feature: As a user I should be able to see the Marlowe Playground home page

As a user I should be able to navigate to the marlowe playground home page and
see all the starting point options available

@smoke
@regression
Scenario: As a user I expect to be able to see the available languages

Given I am on the "home" page
Then I should see "Start in Javascript" text
And I should see "Start in Haskell" text
And I should see "Start in Marlowe" text
And I should see "Start in Blockly" text
And I should see "Start in Haskell" text
And I should see a button with "Open existing project" text
And I should see a button with "Open an example" text
Then I should see a "link" with "Start in Javascript" text
Then I should see a "link" with "Start in Haskell" text
And I should see a "link" with "Start in Marlowe" text
And I should see a "link" with "Start in Blockly" text
And I should see a "link" with "Start in Haskell" text
And I should see a "button" with "Open existing project" text
And I should see a "button" with "Open an example" text

When I click the "Open existing project" button
Then I should see "Login with github" text
Then I should see a "heading" with "Login with github" text

@dev
Scenario Outline: As a user, I would like to see a list of example contracts by language
Given I am on the "home" page
When I click the "Open an example" button
Then I should see "<Contract Name> header" text
And I should see "<Contract Name> Haskell" text
And I should see "<Contract Name> Javascript" text
And I should see "<Contract Name> Marlowe" text
And I should see "<Contract Name> Blockly" text
Then I should see a "heading" with "<Contract Name>" text
And I should see a "button" with "<Contract Name> Haskell" text
And I should see a "button" with "<Contract Name> Javascript" text
And I should see a "button" with "<Contract Name> Marlowe" text
And I should see a "button" with "<Contract Name> Blockly" text

Examples:
| Contract Name |
| Escrow |
| Escrow with Collateral |
| Escrow With Collateral |
| Zero Coupon Bond |
| Coupon Bond Guaranteed |
| Swap |
Expand Down
26 changes: 26 additions & 0 deletions e2e/src/features/switching-editors.feature
@@ -0,0 +1,26 @@
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
When I click the "link" with "Start in Haskell" text
Then I should be on the "haskell editor" page
And the "heading" for "project-title" should contain "New Project" text

When I click the "link" with "New Project" text
And I click the "button" with "JS Editor" text
And I click the "button" with "Don't Save" text
Then I should be on the "javascript editor" page

When I click the "link" with "New Project" text
And I click the "button" with "Marlowe" text
And I click the "button" with "Don't Save" text
Then I should be on the "marlowe editor" page

When I click the "link" with "New Project" text
And I click the "button" with "Blockly" text
And I click the "button" with "Don't Save" text
Then I should be on the "blockly editor" page
3 changes: 2 additions & 1 deletion e2e/src/index.ts
Expand Up @@ -53,5 +53,6 @@ const common = `./src/features/**/*.feature \
const dev = `${common} --tags '@dev'`;
const smoke = `${common} --tags '@smoke'`;
const regression = `${common} --tags '@regression'`;
const wip = `${common} --tags '@wip'`;

export { dev, smoke, regression }
export { dev, smoke, regression , wip }
81 changes: 9 additions & 72 deletions e2e/src/step-definitions/assertions/verify-element-value.ts
@@ -1,97 +1,34 @@
import { Then } from '@cucumber/cucumber';
import { ElementKey, FixtureKey } from '../../env/global';
import { queries, getDocument } from 'playwright-testing-library';
import { getElementLocator } from '../../support/web-element-helper';
import { getFixtureText } from '../../support/fixture-helper';
import { ValidAccessibilityRoles } from '../../env/global';
import { ScenarioWorld } from '../setup/world'
import { waitFor } from '../../support/wait-for-behavior';

Then(
/^I should see a button with "([^"]*)" text$/,
async function(this: ScenarioWorld, elementKey: ElementKey) {
const {
screen: { page },
globalConfig
} = this;
const document = await getDocument(page);

const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
const { role, name } = elementIdentifier;
await waitFor(async() => {
try {
const locator = await queries.getByRole(document, role, { name })
const isElementVisible = await locator.isVisible();
return isElementVisible;
} catch {
return false;
}
})
}
);

Then(
/^the "([^"]*)" should contain "([^"]*)" text$/,
async function(this: ScenarioWorld, elementKey: ElementKey, expectedElementText: string) {
async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string) {
const {
screen: { page },
globalConfig
} = this;
const document = await getDocument(page);
const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
const { role, name } = elementIdentifier;
await waitFor(async() => {
const locator = await queries.getByRole(document, role, { name })
const locator = await page.getByRole(role, { name, exact: true });
const elementText = await locator.textContent();
return elementText?.includes(expectedElementText);
return elementText?.includes(name);
})
}
);

Then(
/^the "playground editor" should contain "([^"]*)" contract code$/,
async function(this: ScenarioWorld, contractFixtureKey: FixtureKey) {
/^the "([^"]*)" for "([^"]*)" should contain "([^"]*)" text$/,
async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string, expectedText: string) {
const {
screen: { page },
globalConfig
} = this;
const document = await getDocument(page);
// const elementIdentifier = getElementLocator(page, "playground editor", globalConfig);
// const { role, name } = elementIdentifier;
const fixture = getFixtureText(contractFixtureKey, globalConfig);
await waitFor(async() => {

const locator = await page.locator('.monaco-scrollable-element');
const elementText = await locator.textContent()
// const locator = await queries.getByRole(document, role, { name })
// console.log("LOCATOR: ", locator)
// const elementText = await locator.innerText()
// console.log("Text Length: ", elementText.length)
console.log("VALUE: ", elementText)

return elementText?.includes(fixture);
const locator = await page.getByRole(role, { name, exact: true });
const elementText = await locator.textContent();
return elementText?.includes(expectedText);
})
}
);

Then(
/^I should see the "([^"]*)"$/,
async function(this: ScenarioWorld, elementKey: ElementKey) {
const {
screen: { page },
globalConfig
} = this;

const document = await getDocument(page);
const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
const { role, name } = elementIdentifier;
await waitFor(async() => {
try {
const locator = await queries.getByRole(document, role, { name })
const isElementVisible = await locator.isVisible();
return isElementVisible;
} catch {
return false;
}
})
}
)
20 changes: 7 additions & 13 deletions e2e/src/step-definitions/assertions/verify-elements-visibility.ts
@@ -1,28 +1,22 @@
import { Then } from '@cucumber/cucumber';
import { ElementKey, ValidAccessibilityRoles } from '../../env/global';
import { getElementLocator } from '../../support/web-element-helper';
import { ValidAccessibilityRoles } from '../../env/global';
import { ScenarioWorld } from '../setup/world'
import { waitFor } from '../../support/wait-for-behavior';


Then(
/^I should see "([^"]*)" text$/,
async function(this: ScenarioWorld, elementKey: ElementKey) {
/^I should see a "([^"]*)" with "([^"]*)" text$/,
async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string) {

const {
screen: { page },
globalConfig
} = this;

const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
const { role, name } = elementIdentifier;

await waitFor(async() => {
const locator = await page.getByRole(
role as ValidAccessibilityRoles,
{ name, exact: true }
);
const isElementVisible = await locator.isVisible()
// 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 isElementVisible = await locator.isVisible();
return isElementVisible;
})
}
Expand Down
16 changes: 11 additions & 5 deletions e2e/src/step-definitions/assertions/verify-page-navigation.ts
@@ -1,12 +1,18 @@
import { Then } from '@cucumber/cucumber';
import { ElementKey } from '../../env/global';
import { getElementLocator } from '../../support/web-element-helper';
import { PageId } from '../../env/global';
import { ScenarioWorld } from '../setup/world'
import { waitFor } from '../../support/wait-for-behavior';
import {
currentPathMatchesPageId,
} from '../../support/navigation-behavior';

Then(
/^I should be on the "([^"]*)" page$/,
async function (string) {
// Write code here that turns the phrase above into concrete actions
return 'pending';
async function(this: ScenarioWorld, pageId: PageId) {
const {
screen: { page },
globalConfig,
} = this;

await waitFor(() => currentPathMatchesPageId(page, pageId, globalConfig))
});
30 changes: 12 additions & 18 deletions e2e/src/step-definitions/click.ts
@@ -1,35 +1,29 @@
import { When } from '@cucumber/cucumber';
import { ScenarioWorld } from './setup/world';
import { queries, getDocument } from 'playwright-testing-library';
import {
clickElement
} from '../support/html-behavior';
import { clickElement } from '../support/html-behavior';
import { waitFor } from '../support/wait-for-behavior';
import { getElementLocator } from '../support/web-element-helper';
import { ElementKey } from '../env/global';
import { ValidAccessibilityRoles } from '../env/global';

When(
/^I click the "([^"]*)" (?:button|link|icon|element)$/,
async function(this: ScenarioWorld, elementKey: ElementKey) {
/^I click the "([^"]*)" with "([^"]*)" text$/,
async function(this: ScenarioWorld, role: ValidAccessibilityRoles, name: string) {
const {
screen: { page },
globalConfig
} = this;

console.log(`I click the ${elementKey} (?:button|link|icon|element|text)`);
const document = await getDocument(page);

const elementIdentifier = getElementLocator(page, elementKey, globalConfig);
const { role, name } = elementIdentifier;
const locator = await queries.getByRole(document, role, { name })
try {

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();
if (result) {
await clickElement(locator);
}

return result;
if (result) await clickElement(locator);
})
} catch (e) {
console.log("error: ", e);
}
}
)

0 comments on commit d5cfae7

Please sign in to comment.