From 660e791c13bbd6952074ae985f87985798806720 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Wed, 5 Oct 2022 02:26:21 +0100 Subject: [PATCH] fix workspaces e2e tests --- .../remix-ide-e2e/src/tests/workspace.test.ts | 90 +++++++++++++------ .../src/lib/components/custom-dropdown.tsx | 7 +- .../workspace/src/lib/remix-ui-workspace.tsx | 25 +++--- 3 files changed, 79 insertions(+), 43 deletions(-) diff --git a/apps/remix-ide-e2e/src/tests/workspace.test.ts b/apps/remix-ide-e2e/src/tests/workspace.test.ts index 6b0c78290c..4bbed6a37c 100644 --- a/apps/remix-ide-e2e/src/tests/workspace.test.ts +++ b/apps/remix-ide-e2e/src/tests/workspace.test.ts @@ -130,28 +130,28 @@ module.exports = { // check js and ts files are not transformed .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, from?: string, gas?: number): Promise => {`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, accountIndex?: number): Promise => {`) !== -1, 'Incorrect content') }) @@ -178,28 +178,28 @@ module.exports = { // check js and ts files are not transformed .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, from?: string, gas?: number): Promise => {`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, accountIndex?: number): Promise => {`) !== -1, 'Incorrect content') }) @@ -226,28 +226,28 @@ module.exports = { // check js and ts files are not transformed .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]') .pause(1000) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, from?: string, gas?: number): Promise => {`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, accountIndex?: number): Promise => {`) !== -1, 'Incorrect content') }) @@ -274,7 +274,7 @@ module.exports = { .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts/MyToken.sol"]') .click('*[data-id="treeViewLitreeViewItemcontracts/MyToken.sol"]') .pause(1000) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`contract MyToken is Initializable, ERC1155Upgradeable, OwnableUpgradeable, PausableUpgradeable, ERC1155BurnableUpgradeable, UUPSUpgradeable {`) !== -1, 'Incorrect content') }) @@ -283,21 +283,21 @@ module.exports = { // check js and ts files are not transformed .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_web3.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './web3-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/deploy_with_ethers.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`import { deploy } from './ethers-lib'`) !== -1, 'Incorrect content') }) .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/web3-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, from?: string, gas?: number): Promise => {`) !== -1, 'Incorrect content') browser.assert.ok(content.indexOf(`gas: gas || 3600000`) !== -1, @@ -306,7 +306,7 @@ module.exports = { .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .click('*[data-id="treeViewLitreeViewItemscripts/ethers-lib.ts"]') .pause(100) - .getEditorValue((content) => { + .getEditorValue((content) => { browser.assert.ok(content.indexOf(`export const deploy = async (contractName: string, args: Array, accountIndex?: number): Promise => {`) !== -1, 'Incorrect content') }) @@ -345,7 +345,15 @@ module.exports = { 'Should rename a workspace #group1': function (browser: NightwatchBrowser) { browser - .click('*[data-id="workspaceRename"]') // rename workspace_name + .useXpath() + .waitForElementPresent({ + selector: '//i[@data-icon="workspaceDropdownMenuIcon"]', + locateStrategy: 'xpath', + }) + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul') + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[1]') // rename workspace_name + .useCss() .waitForElementVisible('*[data-id="treeViewLitreeViewItemtests"]') .waitForElementVisible('*[data-id="modalDialogCustomPromptTextRename"]') .click('*[data-id="modalDialogCustomPromptTextRename"]') @@ -366,7 +374,10 @@ module.exports = { 'Should delete a workspace #group1': function (browser: NightwatchBrowser) { browser .switchWorkspace('workspace_name_1') - .click('*[data-id="workspaceDelete"]') // delete workspace_name_1 + .useXpath() + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[2]') // delete workspace_name_1 + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') .click('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') .waitForElementVisible('[data-id="workspacesSelect"]') @@ -379,8 +390,12 @@ module.exports = { 'Should clone a repository #group2': function (browser: NightwatchBrowser) { browser .clickLaunchIcon('filePanel') - .waitForElementVisible('[data-id="cloneGitRepository"]') - .click('[data-id="cloneGitRepository"]') + .useXpath() + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + // .waitForElementVisible('[data-id="cloneGitRepository"]') + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]') .click('[data-id="fileSystemModalDialogModalBody-react"]') .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]') @@ -403,8 +418,13 @@ module.exports = { 'Should display non-clashing names for duplicate clone #group2': '' + function (browser: NightwatchBrowser) { browser - .waitForElementVisible('[data-id="cloneGitRepository"]') - .click('[data-id="cloneGitRepository"]') + .useXpath() + // .waitForElementVisible('[data-id="cloneGitRepository"]') + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + // .click('[data-id="cloneGitRepository"]') + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]') .click('[data-id="fileSystemModalDialogModalBody-react"]') .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]') @@ -412,8 +432,11 @@ module.exports = { .click('[data-id="fileSystem-modal-footer-ok-react"]') .pause(5000) .waitForElementContainsText('[data-id="workspacesSelect"]', 'awesome-remix1') - .waitForElementVisible('[data-id="cloneGitRepository"]') - .click('[data-id="cloneGitRepository"]') + .useXpath() + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]') .click('[data-id="fileSystemModalDialogModalBody-react"]') .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]') @@ -421,8 +444,12 @@ module.exports = { .click('[data-id="fileSystem-modal-footer-ok-react"]') .pause(5000) .waitForElementContainsText('[data-id="workspacesSelect"]', 'awesome-remix2') - .waitForElementVisible('[data-id="cloneGitRepository"]') - .click('[data-id="cloneGitRepository"]') + // .waitForElementVisible('[data-id="cloneGitRepository"]') + // .click('[data-id="cloneGitRepository"]') + .useXpath() + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]') .click('[data-id="fileSystemModalDialogModalBody-react"]') .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]') @@ -438,8 +465,13 @@ module.exports = { 'Should display error message in modal for failed clone #group2': function (browser: NightwatchBrowser) { browser - .waitForElementVisible('[data-id="cloneGitRepository"]') - .click('[data-id="cloneGitRepository"]') + // .waitForElementVisible('[data-id="cloneGitRepository"]') + // .click('[data-id="cloneGitRepository"]') + .useXpath() + .moveToElement('//*[@id="workspacesMenuDropdown"]/span/i', 0, 0) + .waitForElementVisible('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .click('//*[@id="workspacesMenuDropdown"]/div/ul/a[5]') + .useCss() .waitForElementVisible('[data-id="fileSystemModalDialogModalBody-react"]') .click('[data-id="fileSystemModalDialogModalBody-react"]') .waitForElementVisible('[data-id="modalDialogCustomPromptTextClone"]') diff --git a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx index c96ef75824..4f3d285f91 100644 --- a/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx +++ b/libs/remix-ui/helper/src/lib/components/custom-dropdown.tsx @@ -1,6 +1,6 @@ // The forwardRef is important!! -import React, { Ref } from "react" +import React, { Ref, SyntheticEvent } from "react" // Dropdown needs access to the DOM node in order to position the Menu export const CustomToggle = React.forwardRef(({ children, onClick, icon, className = '' }: { children: React.ReactNode, onClick: (e) => void, icon: string, className: string }, ref: Ref) => ( @@ -20,7 +20,7 @@ export const CustomToggle = React.forwardRef(({ children, onClick, icon, classNa )) -export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, icon, className = '' }: { children: React.ReactNode, mouseOverAction: () => void, icon: string, className: string }, ref: Ref) => ( +export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, icon, className = '' }: { children: React.ReactNode, mouseOverAction: (e: SyntheticEvent) => void, icon: string, className: string }, ref: Ref) => ( { @@ -28,8 +28,9 @@ export const CustomIconsToggle = React.forwardRef(({ children, mouseOverAction, }} onMouseOver={mouseOverAction} className={`${className.replace('dropdown-toggle', '')} mb-0 pb-0 d-flex justify-content-end align-items-end remixuimenuicon_shadow`} + data-id="workspaceMenuDropdown" > - { icon && } + { icon && } )) diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx index e2abf7b1ad..7088c04670 100644 --- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx +++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line +import React, { useState, useEffect, useRef, useContext, SyntheticEvent } from 'react' // eslint-disable-line import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap' import { CustomIconsToggle, CustomMenu, CustomToggle } from '@remix-ui/helper' import { FileExplorer } from './components/file-explorer' // eslint-disable-line @@ -298,7 +298,7 @@ export function Workspace () { placement='right-start' overlay={ - Rename + Rename Workspace } > @@ -313,14 +313,14 @@ export function Workspace () { hideIconsMenu(!showIconsMenu) }} className='far fa-edit w-100'> - {' Rename Workspace'} + {' Rename'} , - Delete + Delete Workspace } > @@ -336,7 +336,7 @@ export function Workspace () { }} className='far fa-trash w-100' > - {' Delete Workspace'} + {' Delete'} , - {' Download Workspace'} + {' Download'} , - {' Restore Workspace'} + {' Restore'} , - {' Clone Git Repository'} + {' Clone'} ] @@ -444,13 +444,16 @@ export function Workspace () { > - hideIconsMenu(!showIconsMenu)} show={showIconsMenu}> + hideIconsMenu(!showIconsMenu)} show={showIconsMenu}> hideIconsMenu(!showIconsMenu)} + mouseOverAction={(e: SyntheticEvent) => { + hideIconsMenu(!showIconsMenu) + console.log({ e }) + }} icon={'fas fa-bars'} > - + { workspaceMenuIcons.map(m => (