Update e2e to test setup GUI

apps/circuit-compiler/src/app/actions/index.ts

@@ -51,6 +51,8 @@ export const runSetupAndExport = async (plugin: CircomPluginClient, appState: Ap
     if (appState.exportVerificationKey) {
       const vKey = await snarkjs.zKey.exportVerificationKey(zkey_final)
       await plugin.call('fileManager', 'writeFile', `${extractParentFromKey(appState.filePath)}/groth16/zk/keys/verification_key.json`, JSON.stringify(vKey, null, 2))
+      // @ts-ignore
+      await plugin.call('fileManager', 'writeFile', `${extractParentFromKey(appState.filePath)}/groth16/zk/keys/zkey_final.txt`, (zkey_final as any).data, { encoding: null })
     }
     if (appState.exportVerificationContract) {
       const templates = { groth16: GROTH16_VERIFIER }
@@ -63,6 +65,8 @@ export const runSetupAndExport = async (plugin: CircomPluginClient, appState: Ap
     if (appState.exportVerificationKey) {
       const vKey = await snarkjs.zKey.exportVerificationKey(zkey_final)
       await plugin.call('fileManager', 'writeFile', `${extractParentFromKey(appState.filePath)}/plonk/zk/keys/verification_key.json`, JSON.stringify(vKey, null, 2))
+      // @ts-ignore
+      await plugin.call('fileManager', 'writeFile', `${extractParentFromKey(appState.filePath)}/plonk/zk/keys/zkey_final.txt`, (zkey_final as any).data, { encoding: null })
     }
     if (appState.exportVerificationContract) {
       const templates = { plonk: PLONK_VERIFIER }

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

@@ -39,7 +39,7 @@ export function SetupExports () {
               checked={circuitApp.appState.provingScheme === 'groth16'}
               readOnly
             />
-            <label className="form-check-label custom-control-label" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
+            <label className="form-check-label custom-control-label" data-id="groth16ProvingScheme" htmlFor="groth16ProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Groth16
             </label>
           </div>
@@ -54,7 +54,7 @@ export function SetupExports () {
               checked={circuitApp.appState.provingScheme === 'plonk'}
               readOnly
             />
-            <label className="form-check-label custom-control-label" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
+            <label className="form-check-label custom-control-label" data-id="plonkProvingScheme" htmlFor="plonkProvingScheme" style={{ paddingTop: '0.125rem' }}>
               Plonk
             </label>
           </div>
@@ -77,11 +77,12 @@ export function SetupExports () {
                   pointerEvents: 'auto'
                 }}
                 onChange={(e) => circuitApp.dispatch({ type: 'SET_PTAU_VALUE', payload: e.target.value })}
+                data-id="circuitPtauSelect"
               >
                 {
                   circuitApp.appState.ptauList.map((ptau, index) => {
                     return (
-                      <option key={index} value={ptau.name}>{`${ptau.name} (${ptau.maxConstraint} max constr.)`}</option>
+                      <option key={index} value={ptau.name} data-id={`dropdown-item-${ptau.name}`}>{`${ptau.name} (${ptau.maxConstraint} max constr.)`}</option>
                     )
                   })
                 }

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

@@ -6,6 +6,7 @@ export function SetupExportsBtn ({ handleRunSetup, status }: { handleRunSetup: (
   return <button
     className="btn btn-secondary btn-block d-block w-100 text-break mt-2"
     onClick={handleRunSetup}
+    data-id="runSetupBtn"
   >
     <CustomTooltip
       placement="auto"

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

@@ -72,18 +72,39 @@ module.exports = {
       .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
       .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.wasm"]')
   },
-  // 'Should run setup and export for a simple circuit using the GUI #group2': function (browser: NightwatchBrowser) {
+  'Should run Groth16 setup and export for a simple circuit using the GUI #group2': function (browser: NightwatchBrowser) {
-  //   browser
+    browser
-  //     .clickLaunchIcon('circuit-compiler')
+      .clickLaunchIcon('circuit-compiler')
-  //     .frame(0)
+      .frame(0)
-  //     .waitForElementPresent('button[data-id="generate_r1cs_btn"]')
+      .waitForElementVisible('[data-id="setup_exports_toggler"]')
-  //     .waitForElementVisible('button[data-id="generate_r1cs_btn"]')
+      .waitForElementPresent('[data-id="groth16ProvingScheme"]')
-  //     .click('button[data-id="generate_r1cs_btn"]')
+      .click('[data-id="groth16ProvingScheme"]')
-  //     .frameParent()
+      .waitForElementVisible('[data-id="circuitPtauSelect"]')
-  //     .clickLaunchIcon('filePanel')
+      .click('[data-id="circuitPtauSelect"]')
-  //     .waitForElementPresent('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.r1cs"]')
+      .waitForElementVisible('[data-id="dropdown-item-final_8.ptau"]')
-  //     .waitForElementVisible('[data-id="treeViewLitreeViewItemcircuits/.bin/simple.r1cs"]')
+      .click('[data-id="dropdown-item-final_8.ptau"]')
-  // },
+      .click('[data-id="runSetupBtn"]')
+      .waitForElementVisible('[data-id="setup_exports_toggler"] .fa-check-circle')
+      .frameParent()
+      .clickLaunchIcon('filePanel')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/groth16/zk/keys/verification_key.json"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/groth16/zk/keys/zkey_final.txt"]')
+  },
+  'Should run Plonk setup and export for a simple circuit using the GUI #group2': function (browser: NightwatchBrowser) {
+    browser
+      .clickLaunchIcon('circuit-compiler')
+      .frame(0)
+      .waitForElementVisible('[data-id="setup_exports_toggler"]')
+      .click('[data-id="setup_exports_toggler"]')
+      .waitForElementPresent('[data-id="plonkProvingScheme"]')
+      .click('[data-id="plonkProvingScheme"]')
+      .click('[data-id="runSetupBtn"]')
+      .waitForElementVisible('[data-id="setup_exports_toggler"] .fa-check-circle')
+      .frameParent()
+      .clickLaunchIcon('filePanel')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/plonk/zk/keys/verification_key.json"]')
+      .waitForElementVisible('*[data-id="treeViewLitreeViewItemcircuits/plonk/zk/keys/zkey_final.txt"]')
+  },
   'Should compile a simple circuit using CTRL + S from the editor #group3': function (browser: NightwatchBrowser) {
     browser
       .click('[data-id="treeViewLitreeViewItemcircuits/simple.circom"]')