diff --git a/apps/remix-ide-e2e/.eslintrc b/apps/remix-ide-e2e/.eslintrc index 27f5b55914..0868946880 100644 --- a/apps/remix-ide-e2e/.eslintrc +++ b/apps/remix-ide-e2e/.eslintrc @@ -9,5 +9,6 @@ } } ], + "extends": ["../../.eslintrc"], "ignorePatterns": ["!**/*"] } \ No newline at end of file diff --git a/apps/remix-ide-e2e/src/commands/checkElementStyle.ts b/apps/remix-ide-e2e/src/commands/checkElementStyle.ts new file mode 100644 index 0000000000..14c2be55d6 --- /dev/null +++ b/apps/remix-ide-e2e/src/commands/checkElementStyle.ts @@ -0,0 +1,31 @@ +import EventEmitter from "events" +import { NightwatchBrowser } from 'nightwatch' + +class checkElementStyle extends EventEmitter { + command (this: NightwatchBrowser, cssSelector: string, styleProperty: string, expectedResult: string): NightwatchBrowser { + this.api.perform((done) => { + checkStyle(this.api, cssSelector, styleProperty, expectedResult, () => { + done() + this.emit('complete') + }) + }) + return this + } +} + +function checkStyle (browser: NightwatchBrowser, cssSelector: string, styleProperty: string, expectedResult: string, callback: VoidFunction) { + browser.execute(function (cssSelector, styleProperty) { + return window.getComputedStyle(document.querySelector(cssSelector)).getPropertyValue(styleProperty) + }, [cssSelector, styleProperty], function (result) { + const value = result.value + + if (typeof value === 'string') { + browser.assert.equal(value.trim(), expectedResult) + } else { + browser.assert.fail('Failed with error info :', result.value.toString()) + } + callback() + }) +} + +module.exports = checkElementStyle diff --git a/apps/remix-ide-e2e/src/commands/openFile.ts b/apps/remix-ide-e2e/src/commands/openFile.ts new file mode 100644 index 0000000000..05971583ef --- /dev/null +++ b/apps/remix-ide-e2e/src/commands/openFile.ts @@ -0,0 +1,27 @@ +import { NightwatchBrowser } from 'nightwatch' +import EventEmitter from "events" + +class OpenFile extends EventEmitter { + command (this: NightwatchBrowser, name: string) { + this.api.perform((done) => { + openFile(this.api, name, () => { + done() + this.emit('complete') + }) + }) + return this + } +} + +// click on fileExplorer can toggle it. We go through settings to be sure FE is open +function openFile (browser: NightwatchBrowser, name: string, done: VoidFunction) { + browser.clickLaunchIcon('settings').clickLaunchIcon('fileExplorers') + .waitForElementVisible('li[key="' + name + '"]') + .click('li[key="' + name + '"]') + .pause(2000) + .perform(() => { + done() + }) +} + +module.exports = OpenFile diff --git a/apps/remix-ide-e2e/src/tests/defaultLayout.test.ts b/apps/remix-ide-e2e/src/tests/defaultLayout.test.ts new file mode 100644 index 0000000000..22ad99fa1d --- /dev/null +++ b/apps/remix-ide-e2e/src/tests/defaultLayout.test.ts @@ -0,0 +1,80 @@ +'use strict' +import { NightwatchBrowser } from 'nightwatch' +import init from '../helpers/init' +import sauce from './sauce' + +module.exports = { + before: function (browser: NightwatchBrowser, done: VoidFunction) { + init(browser, done, 'http://127.0.0.1:8080', false) + }, + + 'Loads Icon\'s Panel': function (browser: NightwatchBrowser) { + browser.waitForElementVisible('div[data-id="remixIdeIconPanel"]', 10000) + .waitForElementVisible('div[data-id="verticalIconsHomeIcon"]') + .waitForElementVisible('div[plugin="fileExplorers"]') + .waitForElementVisible('div[plugin="pluginManager"]') + .waitForElementVisible('div[plugin="settings"]') + }, + + 'Loads Side Panel': function (browser: NightwatchBrowser) { + browser.waitForElementVisible('div[data-id="remixIdeSidePanel"]') + .assert.containsText('h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORERS') + .waitForElementVisible('div[data-id="filePanelFileExplorerTree"]') + .waitForElementVisible('li[key="browser/3_Ballot.sol"]') + }, + + 'Loads Main View': function (browser: NightwatchBrowser) { + browser.waitForElementVisible('div[data-id="mainPanelPluginsContainer"]') + .waitForElementVisible('div[data-id="landingPageHomeContainer"]') + .waitForElementVisible('div[data-id="landingPageHpSections"]') + .waitForElementVisible('div[data-id="terminalContainer"]') + }, + + 'Loads terminal': function (browser: NightwatchBrowser) { + browser + .waitForElementVisible('div[data-id="terminalCli"]', 10000) + .journalLastChildIncludes('Welcome to Remix') + }, + + 'Toggles Side Panel': function (browser: NightwatchBrowser) { + browser.waitForElementVisible('div[data-id="remixIdeSidePanel"]') + .assert.containsText('h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORERS') + .clickLaunchIcon('fileExplorers') + .assert.hidden('div[data-id="remixIdeSidePanel"]') + .clickLaunchIcon('fileExplorers') + .assert.visible('div[data-id="remixIdeSidePanel"]') + .assert.containsText('h6[data-id="sidePanelSwapitTitle"]', 'FILE EXPLORERS') + }, + + 'Toggles Terminal': function (browser: NightwatchBrowser) { + browser.waitForElementVisible('div[data-id="terminalContainer"]') + .assert.visible('div[data-id="terminalContainerDisplay"]') + .click('i[data-id="terminalToggleIcon"]') + .checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px') + .click('i[data-id="terminalToggleIcon"]') + .assert.visible('div[data-id="terminalContainerDisplay"]') + }, + + 'Toggles File Explorer Browser': function (browser: NightwatchBrowser) { + browser + .waitForElementVisible('div[data-id="filePanelFileExplorerTree"]') + .assert.visible('ul[key="browser"]') + .click('div[data-id="treeViewTogglebrowser"]') + .assert.hidden('ul[key="browser"]') + .click('div[data-id="treeViewTogglebrowser"]') + .assert.visible('ul[key="browser"]') + }, + + 'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) { + browser + .waitForElementVisible('div[data-id="filePanelFileExplorerTree"]') + .openFile('browser/3_Ballot.sol') + .assert.containsText('div[title="browser/3_Ballot.sol"]', '3_Ballot.sol') + .click('span[class^=dropdownCaret]') + .click('#homeItem') + .assert.containsText('div[title="home"]', 'Home') + .end() + }, + + tearDown: sauce +} diff --git a/apps/remix-ide-e2e/src/types/index.d.ts b/apps/remix-ide-e2e/src/types/index.d.ts index 2a5c02ac0b..2e5bcc16e8 100644 --- a/apps/remix-ide-e2e/src/types/index.d.ts +++ b/apps/remix-ide-e2e/src/types/index.d.ts @@ -24,7 +24,9 @@ declare module "nightwatch" { executeScript(script: string): NightwatchBrowser, clearEditableContent(cssSelector: string): NightwatchBrowser, journalChildIncludes(val: string): NightwatchBrowser, - debugTransaction(index: number): NightwatchBrowser + debugTransaction(index: number): NightwatchBrowser, + checkElementStyle(cssSelector: string, styleProperty: string, expectedResult: string): NightwatchBrowser, + openFile(name: string): NightwatchBrowser } export interface NightwatchBrowser { diff --git a/apps/remix-ide-e2e/tsconfig.json b/apps/remix-ide-e2e/tsconfig.json index 00194881f7..abd2e3b893 100644 --- a/apps/remix-ide-e2e/tsconfig.json +++ b/apps/remix-ide-e2e/tsconfig.json @@ -3,6 +3,7 @@ "compilerOptions": { "types": ["node", "nightwatch"], "esModuleInterop": true, + "strict": true }, "include": ["**/*.ts", "**/*.js"] }