Template Explorer Modal

apps/remix-ide-e2e/src/commands/openTemplateExplorer.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import EventEmitter from 'events'
+import { NightwatchBrowser } from 'nightwatch'
+
+class OpenTemplateExplorer extends EventEmitter {
+
+  command (this: NightwatchBrowser) {
+    this.api.perform((done) => {
+      openTemplateExplorer(this.api, () => {
+        done()
+        this.api.pause(2000).perform(() => this.emit('complete'))
+      })
+    })
+    return this
+  }
+}
+
+function openTemplateExplorer (browser: NightwatchBrowser, done: VoidFunction) {
+  browser.perform((done) => {
+    browser
+      .click('*[data-id="workspacesSelect"]')
+      .pause(3000)
+      .click('*[data-id="workspacecreate"]')
+      .waitForElementVisible('*[data-id="template-explorer-modal-react"]')
+      .waitForElementVisible('*[data-id="template-explorer-template-container"]')
+      .click('*[data-id="template-explorer-template-container"]')
+      .perform(() => {
+        done()
+      })
+  })
+}
+
+module.exports = OpenTemplateExplorer

apps/remix-ide-e2e/src/tests/template_exp_modal.test.ts

@@ -0,0 +1,170 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+  'Create blank workspace': function (browser: NightwatchBrowser) {
+    browser
+      .refreshPage()
+      .openTemplateExplorer()
+      .waitForElementVisible('*[data-id="template-card-blank-1"]')
+      .click('*[data-id="template-card-blank-1"]')
+      .waitForElementVisible('*[data-id="workspace-name-blank-input"]')
+      .click('*[data-id="workspace-name-blank-input"]')
+      .pause(1000)
+      .setValue('*[data-id="workspace-name-blank-input"]', 'Test Blank Workspace')
+      .click('*[data-id="validate-blankworkspace-button"]')
+      .pause(1000)
+      .assert.textContains('*[data-id="workspacesSelect-togglerText"]', 'Test Blank Workspace', 'Workspace name is correct')
+      .isVisible('*[data-id="treeViewDivDraggableItemremix.config.json"]')
+      .isVisible('*[data-id="treeViewDivDraggableItem.prettierrc.json"]')
+      .waitForElementNotPresent('*[data-id="treeViewDivDraggableItemcontracts"]')
+  },
+  'Create Pectra 7702 based workspace': function (browser: NightwatchBrowser) {
+    browser
+      .openTemplateExplorer()
+      .waitForElementVisible('*[data-id="template-card-simpleEip7702-2"]')
+      .click('*[data-id="template-card-simpleEip7702-2"]')
+      .waitForElementVisible('*[data-id="workspace-name-simpleEip7702-input"]')
+      .click('*[data-id="workspace-name-simpleEip7702-input"]')
+      .setValue('*[data-id="workspace-name-simpleEip7702-input"]', 'Test Pectra 7702 Workspace')
+      .click('*[data-id="validate-simpleEip7702workspace-button"]')
+      .pause(1000)
+      .assert.textContains('*[data-id="workspacesSelect-togglerText"]', 'Test Pectra 7702 Workspace', 'Workspace name is correct')
+      .isVisible('*[data-id="treeViewDivDraggableItemremix.config.json"]')
+      .waitForElementVisible('*[data-id="treeViewDivDraggableItemcontracts"]')
+      .isVisible('*[data-id="treeViewDivDraggableItemcontracts/Example7702.sol"]')
+      .waitForElementNotPresent('*[data-id="treeViewDivDraggableItemtests"]')
+  },
+  'Create Semaphore based workspace': function (browser: NightwatchBrowser) {
+    browser
+      .openTemplateExplorer()
+      .scrollInto('*[data-id="template-category-Circom ZKP"]')
+      .waitForElementVisible('*[data-id="template-card-semaphore-0"]')
+      .click('*[data-id="template-card-semaphore-0"]')
+      .waitForElementVisible('*[data-id="workspace-name-semaphore-input"]')
+      .click('*[data-id="workspace-name-semaphore-input"]')
+      .setValue('*[data-id="workspace-name-semaphore-input"]', 'Test Semaphore Workspace')
+      .click('*[data-id="validate-semaphoreworkspace-button"]')
+      .pause(1000)
+      .assert.textContains('*[data-id="workspacesSelect-togglerText"]', 'Test Semaphore Workspace', 'Workspace name is correct')
+      .isVisible('*[data-id="treeViewDivDraggableItemremix.config.json"]')
+      .waitForElementVisible('*[data-id="treeViewDivDraggableItemcircuits"]')
+      .isVisible('*[data-id="treeViewDivDraggableItemcircuits/semaphore.circom"]')
+      .waitForElementNotPresent('*[data-id="treeViewDivDraggableItemtests"]')
+      .click('*[data-id="treeViewDivDraggableItemcircuits/semaphore.circom"]')
+      .waitForElementVisible('*[data-id="compile-action"]')
+      .click('*[data-id="compile-action"]')
+      .pause(3000)
+      .waitForElementContainsText('*[data-id="terminalJournal"]', 'Everything went okay', 60000)
+      .clickLaunchIcon('filePanel')
+      .waitForElementVisible('*[data-id="treeViewDivDraggableItemcircuits/.bin/semaphore_js"]')
+  },
+  'Search for Noir Simple Multiplier template': function (browser: NightwatchBrowser) {
+    browser
+      .openTemplateExplorer()
+      .waitForElementVisible('*[data-id="template-explorer-search-input"]')
+      .click('*[data-id="template-explorer-search-input"]')
+      .setValue('*[data-id="template-explorer-search-input"]', 'Simple Multiplier')
+      .pause(1000)
+      .waitForElementVisible('*[data-id="template-card-multNr-0"]')
+      .click('*[data-id="template-card-multNr-0"]')
+      .waitForElementVisible('*[data-id="workspace-name-multNr-input"]')
+      .click('*[data-id="workspace-name-multNr-input"]')
+      .setValue('*[data-id="workspace-name-multNr-input"]', 'Test Simple Multiplier Workspace')
+      .click('*[data-id="validate-multNrworkspace-button"]')
+      .waitForElementVisible('*[data-id="treeViewDivDraggableItemNargo.toml"]')
+      .isVisible('*[data-id="treeViewDivDraggableItemsrc"]')
+      .isVisible('*[data-id="treeViewDivDraggableItemsrc/main.nr"]')
+      .click('*[data-id="treeViewDivDraggableItemsrc/main.nr"]')
+      .waitForElementVisible('*[data-id="compile-action"]')
+  },
+  'Create OpenZeppelin ERC20 template with Contract Wizard': function (browser: NightwatchBrowser) {
+    browser
+      .openTemplateExplorer()
+      .waitForElementVisible('*[data-id="contract-wizard-topcard"]')
+      .click('*[data-id="contract-wizard-topcard"]')
+      .waitForElementVisible('*[data-id="contract-wizard-container"]')
+      .waitForElementVisible('*[data-id="contract-wizard-edit-icon"]')
+      .click('*[data-id="contract-wizard-edit-icon"]')
+      .waitForElementVisible('*[data-id="contract-wizard-token-name-input"]')
+      .setValue('*[data-id="contract-wizard-token-name-input"]', 'TestToken')
+      .click('*[data-id="contract-wizard-edit-icon"]')
+      .assert.textContains('*[data-id="contract-wizard-token-name-span"]', 'TestToken', 'Token name is correct')
+      .waitForElementVisible('*[data-id="contract-wizard-token-TestToken-input"]')
+      .assert.attributeMatches('#contractWizardTokenNameReadOnlyInput', 'data-id', 'contract-wizard-token-TestToken-input', 'Token name is correct')
+      .click('*[data-id="contract-wizard-mintable-checkbox"]')
+      .click('*[data-id="contract-wizard-burnable-checkbox"]')
+      .click('*[data-id="contract-wizard-pausable-checkbox"]')
+      .assert.selected('*[data-id="contract-wizard-access-ownable-radio"]', 'checked')
+      .click('*[data-id="contract-wizard-validate-workspace-button"]')
+      .waitForElementVisible('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .click('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .waitForElementVisible('*[data-id="finalize-contract-wizard-workspaceName-input"]')
+      .setValue('*[data-id="finalize-contract-wizard-workspaceName-input"]', 'Test ERC20 Workspace')
+      .click('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .assert.textContains('*[data-id="finalize-contract-wizard-workspaceName-span"]', 'Test ERC20 Workspace', 'Workspace name is correct')
+      .click('*[data-id="validateWorkspaceButton"]')
+      .assert.textContains('*[data-id="workspacesSelect-togglerText"]', 'Test ERC20 Workspace', 'Workspace name is correct')
+      .isVisible('*[data-id="treeViewDivDraggableItemremix.config.json"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .isVisible('*[data-id="treeViewLitreeViewItemcontracts/TestToken.sol"]')
+      .click('*[data-id="treeViewLitreeViewItemcontracts/TestToken.sol"]')
+      .getEditorValue((content) => {
+        browser.assert.ok(content.indexOf(`contract TestToken is ERC20, ERC20Burnable, ERC20Pausable, Ownable {`) !== -1,
+          'Incorrect content')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
+      .click('*[data-id="compile-action"]')
+      .waitForElementVisible('#verticalIconsKindsolidity > i.remixui_status.fas.fa-check-circle.text-success.remixui_statusCheck')
+      .pause(2000)
+  },
+  'Create OpenZeppelin ERC721 template with Contract Wizard': function (browser: NightwatchBrowser) {
+    browser
+      .openTemplateExplorer()
+      .waitForElementVisible('*[data-id="contract-wizard-topcard"]')
+      .click('*[data-id="contract-wizard-topcard"]')
+      .waitForElementVisible('*[data-id="contract-wizard-container"]')
+      .waitForElementVisible('*[data-id="contract-wizard-edit-icon"]')
+      .click('*[data-id="contract-wizard-edit-icon"]')
+      .waitForElementVisible('*[data-id="contract-wizard-token-name-input"]')
+      .setValue('*[data-id="contract-wizard-token-name-input"]', 'Test721Token')
+      .click('*[data-id="contract-wizard-edit-icon"]')
+      .assert.textContains('*[data-id="contract-wizard-token-name-span"]', 'Test721Token', 'Token name is correct')
+      .waitForElementVisible('*[data-id="contract-wizard-token-Test721Token-input"]')
+      .assert.attributeMatches('#contractWizardTokenNameReadOnlyInput', 'data-id', 'contract-wizard-token-Test721Token-input', 'Token name is correct')
+      .setValue('#contractWizardContractTagSelect', 'erc721')
+      // .click('*[data-id="contract-wizard-contract-tag-select-option-ERC721"]')
+      .click('*[data-id="contract-wizard-mintable-checkbox"]')
+      .click('*[data-id="contract-wizard-burnable-checkbox"]')
+      .click('*[data-id="contract-wizard-pausable-checkbox"]')
+      .assert.selected('*[data-id="contract-wizard-access-ownable-radio"]', 'checked')
+      .click('*[data-id="contract-wizard-validate-workspace-button"]')
+      .waitForElementVisible('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .click('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .waitForElementVisible('*[data-id="finalize-contract-wizard-workspaceName-input"]')
+      .setValue('*[data-id="finalize-contract-wizard-workspaceName-input"]', 'Test ERC721 Workspace')
+      .click('*[data-id="finalize-contractWizard-workspace-edit-icon"]')
+      .assert.textContains('*[data-id="finalize-contract-wizard-workspaceName-span"]', 'Test ERC721 Workspace', 'Workspace name is correct')
+      .click('*[data-id="validateWorkspaceButton"]')
+      .assert.textContains('*[data-id="workspacesSelect-togglerText"]', 'Test ERC721 Workspace', 'Workspace name is correct')
+      .pause(2000)
+      // .clickLaunchIcon('filePanel')
+      .isVisible('*[data-id="treeViewDivDraggableItemremix.config.json"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcontracts"]')
+      .isVisible('*[data-id="treeViewLitreeViewItemcontracts/Test721Token.sol"]')
+      .click('*[data-id="treeViewLitreeViewItemcontracts/Test721Token.sol"]')
+      .getEditorValue((content) => {
+        browser.assert.ok(content.indexOf(`contract Test721Token is ERC721, ERC721Pausable, Ownable, ERC721Burnable {`) !== -1,
+          'Incorrect content')
+      })
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
+      .click('*[data-id="compile-action"]')
+      .waitForElementVisible('#verticalIconsKindsolidity > i.remixui_status.fas.fa-check-circle.text-success.remixui_statusCheck')
+      .clickLaunchIcon('solidity')
+      .isVisible('*[data-id="compilation-details"]')
+  }
+}

apps/remix-ide-e2e/src/tests/templates.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 'use strict'
 
 import { NightwatchBrowser } from 'nightwatch'
@@ -132,8 +133,7 @@ function setTemplateOptions(browser: NightwatchBrowser, opts: { [key: string]: a
 
 function openTemplatesExplorer(browser: NightwatchBrowser) {
   browser
-    .click('*[data-id="workspacesSelect"]')
-    .click('*[data-id="workspacecreate"]')
+    .openTemplateExplorer()
     .waitForElementPresent('*[data-id="create-remixDefault"]')
 }
 
@@ -231,6 +231,7 @@ function testTemplateOptions(browser: NightwatchBrowser, mode: 'create' | 'add')
     })
 }
 
+//@ts-ignore
 const tests = {
   '@disabled': true,
   before: function (browser: NightwatchBrowser, done: VoidFunction) {