From 0d47ef5c348325da0630d397391dd76061c51d89 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 7 Feb 2020 04:04:40 +0000 Subject: [PATCH 1/9] Homepage e2e tests --- package.json | 1 + test-browser/tests/homepage.js | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 test-browser/tests/homepage.js diff --git a/package.json b/package.json index c85a1146c9..3ee19f8ec0 100644 --- a/package.json +++ b/package.json @@ -175,6 +175,7 @@ "nightwatch_local_console": "nightwatch ./test-browser/tests/console.js --config nightwatch.js --env chrome ", "nightwatch_local_gist": "nightwatch ./test-browser/tests/gist.js --config nightwatch.js --env chrome ", "nightwatch_local_workspace": "nightwatch ./test-browser/tests/workspace.js --config nightwatch.js --env chrome ", + "nightwatch_local_homepage": "nightwatch ./test-browser/tests/homepage.js --config nightwatch.js --env chrome ", "onchange": "onchange build/app.js -- npm-run-all lint", "prepublish": "mkdirp build; npm-run-all -ls downloadsolc_root build", "remixd": "remixd -s ./contracts --remix-ide http://127.0.0.1:8080", diff --git a/test-browser/tests/homepage.js b/test-browser/tests/homepage.js new file mode 100644 index 0000000000..722a4a6646 --- /dev/null +++ b/test-browser/tests/homepage.js @@ -0,0 +1,26 @@ +'use strict' +const init = require('../helpers/init') +const sauce = require('./sauce') + +module.exports = { + before: function (browser, done) { + init(browser, done, 'http://127.0.0.1:8080', false) + }, + 'Loads Icon\'s Panel': function (browser) { + browser.waitForElementVisible('#icon-panel', 10000) + .waitForElementVisible('#icon-panel > div > div[class^="homeIcon"]') + .waitForElementVisible('#fileExplorerIcons > div:nth-child(1)') + .waitForElementVisible('#settingsIcons > div:nth-child(1)') + .waitForElementVisible('#settingsIcons > div:nth-child(2)') + }, + + 'Loads Side Panel': function (browser) { + browser.waitForElementVisible('#side-panel') + .assert.containsText('h6[class^="swapitTitle"]', 'FILE EXPLORERS') + .waitForElementVisible('div[class^="treeview"]') + .waitForElementVisible('ul[key="browser"] > li:nth-child(4)') + .end() + }, + + tearDown: sauce +} From 8930a042ca261f08cf92c4ac94cf2d06ade2b58e Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Sat, 8 Feb 2020 02:43:35 +0000 Subject: [PATCH 2/9] Created a custom command for testing DOM element styles and added more tests to homepage test --- test-browser/commands/checkElementStyle.js | 24 +++++++++ test-browser/tests/homepage.js | 59 +++++++++++++++++++--- 2 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 test-browser/commands/checkElementStyle.js diff --git a/test-browser/commands/checkElementStyle.js b/test-browser/commands/checkElementStyle.js new file mode 100644 index 0000000000..f4d28cdca8 --- /dev/null +++ b/test-browser/commands/checkElementStyle.js @@ -0,0 +1,24 @@ +const EventEmitter = require('events') + +class checkElementStyle extends EventEmitter { + command (cssSelector, styleProperty, expectedResult) { + this.api.perform((done) => { + checkStyle(this.api, cssSelector, styleProperty, expectedResult, () => { + done() + this.emit('complete') + }) + }) + return this + } +} + +function checkStyle (browser, cssSelector, styleProperty, expectedResult, callback) { + browser.execute(function (cssSelector, styleProperty) { + return window.getComputedStyle(document.querySelector(cssSelector)).getPropertyValue(styleProperty) + }, [cssSelector, styleProperty], function (result) { + browser.assert.equal(result.value, expectedResult) + callback() + }) +} + +module.exports = checkElementStyle diff --git a/test-browser/tests/homepage.js b/test-browser/tests/homepage.js index 722a4a6646..546c6be681 100644 --- a/test-browser/tests/homepage.js +++ b/test-browser/tests/homepage.js @@ -9,16 +9,63 @@ module.exports = { 'Loads Icon\'s Panel': function (browser) { browser.waitForElementVisible('#icon-panel', 10000) .waitForElementVisible('#icon-panel > div > div[class^="homeIcon"]') - .waitForElementVisible('#fileExplorerIcons > div:nth-child(1)') - .waitForElementVisible('#settingsIcons > div:nth-child(1)') - .waitForElementVisible('#settingsIcons > div:nth-child(2)') + .waitForElementVisible('#icon-panel #fileExplorerIcons > div:nth-child(1)') + .waitForElementVisible('#icon-panel #settingsIcons > div:nth-child(1)') + .waitForElementVisible('#icon-panel #settingsIcons > div:nth-child(2)') }, 'Loads Side Panel': function (browser) { browser.waitForElementVisible('#side-panel') - .assert.containsText('h6[class^="swapitTitle"]', 'FILE EXPLORERS') - .waitForElementVisible('div[class^="treeview"]') - .waitForElementVisible('ul[key="browser"] > li:nth-child(4)') + .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS') + .waitForElementVisible('#side-panel div[class^="treeview"]') + .waitForElementVisible('#side-panel ul[key="browser"] > li:nth-child(4)') + }, + + 'Loads Main View': function (browser) { + browser.waitForElementVisible('#main-panel > div[class^="mainview"] > div[class^="pluginsContainer"]') + .waitForElementVisible('#main-panel div[class^="homeContainer"] > div:nth-child(2)') + .waitForElementVisible('#main-panel div[class^="row hpSections"] > div:nth-child(1)') + .waitForElementVisible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)') + }, + + 'Toggles Side Panel': function (browser) { + browser.waitForElementVisible('#side-panel') + .assert.visible('#side-panel') + .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS') + .clickLaunchIcon('fileExplorers') + .assert.hidden('#side-panel') + .clickLaunchIcon('fileExplorers') + .assert.visible('#side-panel') + .assert.containsText('#side-panel h6[class^="swapitTitle"]', 'FILE EXPLORERS') + }, + + 'Toggles Terminal': function (browser) { + browser.waitForElementVisible('#main-panel div[class^="panel"] > div[class^="terminal_container"]') + .assert.visible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)') + .click('div[class^="bar"] > div[class^="menu"] > i') + .checkElementStyle('div[class^="bar"] > div[class^="menu"]', 'height', '35px') + .click('div[class^="bar"] > div[class^="menu"] > i') + .assert.visible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)') + }, + + 'Toggles File Explorer Browser': function (browser) { + browser + .waitForElementVisible('#side-panel div[class^="treeview"]') + .assert.visible('ul[key="browser"]') + .click('li[key="browser"] > div[key="browser"] > div.fas') + .assert.hidden('ul[key="browser"]') + .click('li[key="browser"] > div[key="browser"] > div.fas') + .assert.visible('ul[key="browser"]') + }, + + 'Switch Tabs using tabs icon': function (browser) { + browser + .waitForElementVisible('#side-panel div[class^="treeview"]') + .switchFile('browser/3_Ballot.sol') + .assert.containsText('div[title="browser/3_Ballot.sol"] > span', '3_Ballot.sol') + .click('div.dropdown.px-1 > span.dropdownCaret') + .click('#homeItem') + .assert.containsText('div[title="home"] > span', 'Home') .end() }, From f331d1a043976f14d500ae04856e0444609309fd Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 10 Feb 2020 07:55:19 +0000 Subject: [PATCH 3/9] Updated journalLastChildIncludes assertion and added loads terminal test. --- test-browser/commands/journalLastChildIncludes.js | 1 + test-browser/tests/homepage.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/test-browser/commands/journalLastChildIncludes.js b/test-browser/commands/journalLastChildIncludes.js index 765a2847d6..056d5dd45a 100644 --- a/test-browser/commands/journalLastChildIncludes.js +++ b/test-browser/commands/journalLastChildIncludes.js @@ -10,6 +10,7 @@ class JournalLastChildIncludes extends EventEmitter { .getText('#journal > div:last-child', (result) => { console.log('JournalLastChildIncludes', result.value) if (result.value.indexOf(val) === -1) return this.api.assert.fail(`wait for ${val} in ${result.value}`) + else this.api.assert.ok(`<#journal > div:last-child> contains ${val}.`) this.emit('complete') }) return this diff --git a/test-browser/tests/homepage.js b/test-browser/tests/homepage.js index 546c6be681..96aaa0886e 100644 --- a/test-browser/tests/homepage.js +++ b/test-browser/tests/homepage.js @@ -28,6 +28,12 @@ module.exports = { .waitForElementVisible('#main-panel div[class^="panel"] > div[class^="terminal_container"]:nth-child(2)') }, + 'Loads terminal': function (browser) { + browser + .waitForElementVisible('#terminalCli', 10000) + .journalLastChildIncludes('Welcome to Remix'); + }, + 'Toggles Side Panel': function (browser) { browser.waitForElementVisible('#side-panel') .assert.visible('#side-panel') From 3736bede1146eb3b9d37c564cb5d2773a1cabb46 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 10 Feb 2020 08:06:11 +0000 Subject: [PATCH 4/9] Fixed linting error --- test-browser/tests/homepage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-browser/tests/homepage.js b/test-browser/tests/homepage.js index 96aaa0886e..8a3e8975a2 100644 --- a/test-browser/tests/homepage.js +++ b/test-browser/tests/homepage.js @@ -31,7 +31,7 @@ module.exports = { 'Loads terminal': function (browser) { browser .waitForElementVisible('#terminalCli', 10000) - .journalLastChildIncludes('Welcome to Remix'); + .journalLastChildIncludes('Welcome to Remix') }, 'Toggles Side Panel': function (browser) { From cfbe3e2ff18a650dc83fb24c90b69f2794d2bfd5 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 11 Feb 2020 10:33:59 +0000 Subject: [PATCH 5/9] Update Homepage tests to use data-attributes --- src/app.js | 6 +-- src/app/components/main-panel.js | 2 +- src/app/components/side-panel.js | 2 +- src/app/components/vertical-icons.js | 5 +- src/app/panels/file-panel.js | 2 +- src/app/panels/terminal.js | 10 ++-- src/app/ui/TreeView.js | 1 + src/app/ui/landing-page/landing-page.js | 4 +- test-browser/tests/homepage.js | 65 ++++++++++++------------- 9 files changed, 49 insertions(+), 48 deletions(-) diff --git a/src/app.js b/src/app.js index 4c3fcbff44..6503f7590c 100644 --- a/src/app.js +++ b/src/app.js @@ -141,21 +141,21 @@ class App { if (self._view.el) return self._view.el // not resizable self._view.iconpanel = yo` -
+
${''}
` // center panel, resizable self._view.sidepanel = yo` -
+
${''}
` // handle the editor + terminal self._view.mainpanel = yo` -
+
${''}
` diff --git a/src/app/components/main-panel.js b/src/app/components/main-panel.js index fc63087a76..def2acc62e 100644 --- a/src/app/components/main-panel.js +++ b/src/app/components/main-panel.js @@ -26,7 +26,7 @@ export class MainPanel extends AbstractPanel { render () { return yo` -
+
${this.view}
` } diff --git a/src/app/components/side-panel.js b/src/app/components/side-panel.js index 24142cfafe..3a5f91853b 100644 --- a/src/app/components/side-panel.js +++ b/src/app/components/side-panel.js @@ -132,7 +132,7 @@ export class SidePanel extends AbstractPanel { return yo`
-
${name}
+
${name}
${docLink} ${versionWarning}
diff --git a/src/app/components/vertical-icons.js b/src/app/components/vertical-icons.js index cef410640d..aa804413f3 100644 --- a/src/app/components/vertical-icons.js +++ b/src/app/components/vertical-icons.js @@ -227,6 +227,7 @@ export class VerticalIcons extends Plugin { this.appManager.ensureActivated('home') }}" plugin="home" title="Home" + data-id="homeIcon" > remix_logo1 @@ -238,7 +239,7 @@ export class VerticalIcons extends Plugin {
` this.iconKind['fileexplorer'] = yo` -
+
` @@ -273,7 +274,7 @@ export class VerticalIcons extends Plugin { ` this.iconKind['settings'] = yo` -
+
` diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js index 5aacc97a87..ed1c98e71e 100644 --- a/src/app/panels/file-panel.js +++ b/src/app/panels/file-panel.js @@ -64,7 +64,7 @@ module.exports = class Filepanel extends ViewPlugin { const explorers = yo`
-
${fileExplorer.init()}
+
${fileExplorer.init()}
${fileSystemExplorer.init()}
` diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js index eabdbee0bd..529e56adc3 100644 --- a/src/app/panels/terminal.js +++ b/src/app/panels/terminal.js @@ -123,14 +123,14 @@ class Terminal extends Plugin { self._view.input.innerText = '\n' self._view.cli = yo` -
+
${'>'} ${self._view.input}
` self._view.icon = yo` ` + class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down" data-id="toggleTerminal">` self._view.dragbar = yo`
` @@ -146,7 +146,7 @@ class Terminal extends Plugin { self._view.bar = yo`
${self._view.dragbar} -
+
${self._view.icon}