E2e tests for lambdatest

.gitignore

@@ -4,6 +4,8 @@
 
 # dependencies
 /node_modules
+/e2e-lambdatest/node_modules/
+/e2e-lambdatest/.yarn/
 /.pnp
 .pnp.js
 

e2e-lambdatest/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};

e2e-lambdatest/e2e-dl-zkp.test.ts

@@ -0,0 +1,102 @@
+import puppeteer, { Page } from "puppeteer";
+import fs from "fs";
+import path from "path";
+
+const pageUrl = "https://dev.zkemail.xyz/";
+
+const testEthAddress = "0x00000000000000000000";
+const testEmailFilePath = path.join(__dirname, "..", "src", "__fixtures__/email/zktestemail.test-eml");
+const testEmailText = fs.readFileSync(testEmailFilePath, "utf8"); 
+
+// puppeteer test helpers
+const emailInputSelector = "textarea[aria-label='Full Email with Headers']";
+const ethInputSelector = "input[placeholder='Ethereum Address']";
+const proofTextareaSelector = "textarea[aria-label='Proof Output']";
+
+const downloadTimeout = 10000000;
+const proofTimeout = 10000000;
+
+const setTextAreaValue = async (page: Page, selector: string, value: string) => {
+    // This is a workaround for the fact that page.keyboard.type() is too slow.
+    return await page.$eval(selector, async (element: any, value: string) => {
+      function setNativeValue(element: any, value: string) {
+        // @ts-ignore
+        const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
+        const prototype = Object.getPrototypeOf(element);
+        // @ts-ignore
+        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
+        if (valueSetter && valueSetter !== prototypeValueSetter) {
+          // @ts-ignore
+        	prototypeValueSetter.call(element, value);
+        } else {
+          // @ts-ignore
+          valueSetter.call(element, value);
+        }
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      setNativeValue(element, value);
+    }, value);
+};
+
+const gotToPageAndEnterInputs = async (page: Page, emailInputSelector: string, ethInputSelector: string, testEmailText: string, testEthAddress: string) => {
+    await page.goto(pageUrl);
+    await page.waitForSelector(emailInputSelector);
+    // 'page.keyboard.type()' takes too long. Use workaround.
+    // await page.focus(emailInputSelector);
+    // await page.keyboard.type(testEmailText); 
+    await setTextAreaValue(page, emailInputSelector, testEmailText);
+    await page.waitForSelector(ethInputSelector);
+    await page.focus(ethInputSelector);
+    await page.keyboard.type(testEthAddress);
+}
+
+describe("App.js", () => {
+
+  beforeAll(async () => {
+    await gotToPageAndEnterInputs(page, emailInputSelector, ethInputSelector, testEmailText, testEthAddress);
+  }, 60000);
+
+  it("should start download and run zkproof after entering inputs and click", async () => {
+    await page.waitForSelector("[data-testid='status-not-started']");
+    console.log("starting e2e test...this will take up to 10 minutes and consume bandwidth and cpu time")
+    const proveButtonSelector = "button[data-testid='prove-button']";
+    await page.click(proveButtonSelector);
+    // starting download
+    console.log("starting download...this will take up to 10 minutes and consume bandwidth");
+    const proveButtonIsDisabled = await page.$eval(proveButtonSelector, button => (button as HTMLButtonElement).disabled);
+    expect(proveButtonIsDisabled).toBe(true);
+
+    let status;
+    await page.waitForSelector("[data-testid='status-downloading-proof-files']");
+    status = await page.$eval("[data-testid='status-downloading-proof-files']", e => e.attributes['data-testid'].value);
+    expect(status).toBe("status-downloading-proof-files");
+
+    await page.waitForSelector("[data-testid='status-generating-proof']", {timeout: downloadTimeout});
+    console.log("finished download...starting proof");
+    console.log("starting proof...this will take up to 10 minutes and consume cpu time");
+    status = await page.$eval("[data-testid='status-generating-proof']", e => e.attributes['data-testid'].value);
+    expect(status).toBe("status-generating-proof");
+
+    await page.waitForSelector("[data-testid='status-done']", {timeout: proofTimeout});
+    status = await page.$eval("[data-testid='status-done']", e => e.attributes['data-testid'].value);
+    expect(status).toBe("status-done");
+
+    // check proof
+    const proofValue = await page.$eval(proofTextareaSelector, e => (e as HTMLInputElement).value);
+    const proofObj = JSON.parse(proofValue);
+    expect(proofObj["pi_a"]).toBeTruthy();
+    expect(proofObj["pi_b"]).toBeTruthy();
+    expect(proofObj["pi_c"]).toBeTruthy();
+    expect(proofObj["protocol"]).toBe("groth16");
+    expect(proofObj["curve"]).toBe("bn128");
+
+    // report times
+    const downloadTime = await page.$eval("[data-testid='download-time']", e => e.textContent);
+    const proofTime = await page.$eval("[data-testid='proof-time']", e => e.textContent);
+    console.log("Completed download and proof");
+    console.log("download in ms took", downloadTime);
+    console.log("proof in ms took", proofTime);
+  }, proofTimeout + downloadTimeout + 30000);
+
+});

e2e-lambdatest/e2e-ui-lambda.test.ts

@@ -0,0 +1,80 @@
+import puppeteer, { Page } from "puppeteer";
+import fs from "fs";
+import path from "path";
+
+const pageUrl = "https://dev.zkemail.xyz/";
+
+const testEthAddress = "0x00000000000000000000";
+const testEmailFilePath = path.join(__dirname, "..", "src", "__fixtures__/email/zktestemail.test-eml");
+const testEmailText = fs.readFileSync(testEmailFilePath, "utf8"); 
+// const testProofFile = "/__fixtures__/proofs/zktestemail.test-proof.json"
+// const testProofText = fs.readFileSync(__dirname + testProofFile, "utf8"); 
+
+// puppeteer test helpers
+const emailInputSelector = "textarea[aria-label='Full Email with Headers']";
+const ethInputSelector = "input[placeholder='Ethereum Address']";
+// const proofTextareaSelector = "textarea[aria-label='Proof Output']";
+
+// const downloadTimeout = 10000000;
+// const proofTimeout = 10000000;
+
+const setTextAreaValue = async (page: Page, selector: string, value: string) => {
+    // This is a workaround for the fact that page.keyboard.type() is too slow.
+    return await page.$eval(selector, async (element: any, value: string) => {
+      function setNativeValue(element: any, value: string) {
+        // @ts-ignore
+        const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
+        const prototype = Object.getPrototypeOf(element);
+        // @ts-ignore
+        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
+        if (valueSetter && valueSetter !== prototypeValueSetter) {
+          // @ts-ignore
+        	prototypeValueSetter.call(element, value);
+        } else {
+          // @ts-ignore
+          valueSetter.call(element, value);
+        }
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+      setNativeValue(element, value);
+    }, value);
+};
+
+const gotToPageAndEnterInputs = async (page: Page, emailInputSelector: string, ethInputSelector: string, testEmailText: string, testEthAddress: string) => {
+    await page.goto(pageUrl);
+    await page.waitForSelector(emailInputSelector);
+    // 'page.keyboard.type()' takes too long. Use workaround.
+    // await page.focus(emailInputSelector);
+    // await page.keyboard.type(testEmailText); 
+    await setTextAreaValue(page, emailInputSelector, testEmailText);
+    await page.waitForSelector(ethInputSelector);
+    await page.focus(ethInputSelector);
+    await page.keyboard.type(testEthAddress);
+}
+
+describe("App.js", () => {
+
+  beforeAll(async () => {
+    await gotToPageAndEnterInputs(page, emailInputSelector, ethInputSelector, testEmailText, testEthAddress);
+  }, 60000);
+
+  it("should allow email and eth addr to be entered into inputs", async () => {
+    await page.waitForSelector("[data-testid='status-not-started']");
+    const emailValue = await page.$eval(emailInputSelector, e => (e as HTMLInputElement).value);
+    expect(emailValue).toBe(testEmailText);
+    const ethValue = await page.$eval(ethInputSelector, e => (e as HTMLInputElement).value);
+    expect(ethValue).toBe(testEthAddress);
+  });
+
+  it("should start with an enabled prove button and status should be 'not-started'", async () => {
+    await page.waitForSelector("[data-testid='status-not-started']");
+    const proveButtonSelector = "button[data-testid='prove-button']";
+    const proveButtonIsDisabled = await page.$eval(proveButtonSelector, button => (button as HTMLButtonElement).disabled);
+    expect(proveButtonIsDisabled).toBe(false);
+
+    const status = await page.$eval("[data-testid='status-not-started']", e => e.attributes['data-testid'].value);
+    expect(status).toBe("status-not-started");
+  });
+
+});

e2e-lambdatest/jest-puppeteer.config.js

@@ -0,0 +1,35 @@
+const caps_chrome = {
+    browserName    : 'Chrome',
+    browserVersion : 'latest',
+    'LT:Options'   : {
+        platform   : 'Windows 10',
+        build      : 'ZK Email Puppeteer-Jest',
+        name       : 'ZK Email Puppeteer-jest test on Chrome',
+        resolution : '1366x768',
+        user       : process.env.LT_USERNAME,
+        accessKey  : process.env.LT_ACCESS_KEY,
+        network    : true
+    }
+};
+
+const caps_edge = {
+    browserName    : 'MicrosoftEdge',
+    browserVersion : 'latest',
+    'LT:Options'   : {
+        platform   : 'Windows 10',
+        build      : 'Sample Puppeteer-Jest',
+        name       : 'Puppeteer-jest test on Edge',
+        resolution : '1366x768',
+        user       : process.env.LT_USERNAME,
+        accessKey  : process.env.LT_ACCESS_KEY,
+        network    : true
+    }
+};
+
+module.exports = {
+    connect : {
+        browserWSEndpoint : `wss://cdp.lambdatest.com/puppeteer?capabilities=${encodeURIComponent(
+            JSON.stringify(caps_chrome)
+        )}`
+    }
+};

e2e-lambdatest/jest.config.ts

@@ -0,0 +1,9 @@
+import type {Config} from 'jest';
+
+
+export default async (): Promise<Config> => {
+  return {
+    verbose: true,
+    preset: "jest-puppeteer"
+  };
+};

e2e-lambdatest/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "zk-email-verify-e2e-lambdatest",
+  "version": "1.0.0",
+  "description": "Tests for ZK Email on LambdaTest",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.21.0",
+    "@jest/globals": "^29.4.3",
+    "jest": "^29.4.3",
+    "jest-puppeteer": "^7.0.1"
+  }
+}