Test create semaphore template and test 2 compile options

apps/circuit-compiler/src/app/components/compileBtn.tsx

@@ -9,20 +9,21 @@ export function CompileBtn () {
 
   return (
     <CustomTooltip
-        placement="auto"
+      placement="auto"
-        tooltipId="overlay-tooltip-compile"
+      tooltipId="overlay-tooltip-compile"
-        tooltipText={
+      tooltipText={
-          <div className="text-left">
+        <div className="text-left">
-            <div>
+          <div>
-              <b>Ctrl+S</b> to compile {appState.filePath}
+            <b>Ctrl+S</b> to compile {appState.filePath}
-            </div>
           </div>
-        }
+        </div>
-      >
+      }
+    >
       <button
         className="btn btn-primary btn-block d-block w-100 text-break mb-1 mt-3"
         onClick={() => { compileCircuit(plugin, appState) }}
         disabled={(appState.filePath === "") || (appState.status === "compiling") || (appState.status === "generating")}
+        data-id="compile_circuit_btn"
       >
         <div className="d-flex align-items-center justify-content-center">
           <RenderIf condition={appState.status === 'compiling'}>

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

@@ -0,0 +1,55 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+  '@disabled': true,
+  before: function (browser: NightwatchBrowser, done: VoidFunction) {
+    init(browser, done)
+  },
+
+  'Should create semaphore workspace template #group1 #group2': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('filePanel')
+      .click('*[data-id="workspacesMenuDropdown"]')
+      .click('*[data-id="workspacecreate"]')
+      .waitForElementVisible('*[data-id="modalDialogCustomPromptTextCreate"]')
+      .waitForElementVisible('[data-id="fileSystemModalDialogModalFooter-react"] > button')
+      .click('select[id="wstemplate"]')
+      .click('select[id="wstemplate"] option[value=semaphore]')
+      .waitForElementPresent('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok')
+      .execute(function () { (document.querySelector('[data-id="fileSystemModalDialogModalFooter-react"] .modal-ok') as HTMLElement).click() })
+      .pause(100)
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/semaphore.circom"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemscripts/run_setup.ts"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemtemplates"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemtemplates/groth16_verifier.sol.ejs"]')
+  },
+  'Should compile a simple circuit using editor play button #group1': function (browser: NightwatchBrowser) {
+    browser
+      .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
+      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .click('[data-id="play-editor"]')
+      .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
+      .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
+  },
+  'Should compile a simple circuit using compile button in circom plugin #group2': function (browser: NightwatchBrowser) {
+    browser
+      .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')
+      .waitForElementPresent('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .waitForElementVisible('[data-path="Semaphore - 1/circuits/simple.circom"]')
+      .clickLaunchIcon('circuit-compiler')
+      .frame(0)
+      .waitForElementPresent('button[data-id="compile_circuit_btn"]', 60000)
+      .waitForElementVisible('button[data-id="compile_circuit_btn"]')
+      .click('button[data-id="compile_circuit_btn"]')
+      .frameParent()
+      .clickLaunchIcon('filePanel')
+      .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
+      .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
+      .end()
+  }
+}