Add recovery email related helpers and init test

Author: deepjyoti30-st

examples/for-tests/src/App.js

@@ -1154,11 +1154,6 @@ function setIsNewUserToStorage(recipeName, isNewRecipeUser) {
 
 function getWebauthnConfigs({ throwWebauthnError, webauthnErrorStatus }) {
     return Webauthn.init({
-        style: `          
-            [data-supertokens~=container] {
-                font-family: cursive;
-            }
-        `,
         override: {
             functions: (implementation) => {
                 const log = logWithPrefix(`ST_LOGS WEBAUTHN OVERRIDE`);

lib/build/webauthnprebuiltui.js

@@ -1,5 +1,5 @@
 import { TEST_CLIENT_BASE_URL } from "../constants";
-import { toggleSignInSignUp, setInputValues, submitForm } from "../helpers";
+import { toggleSignInSignUp, setInputValues, submitForm, waitForSTElement } from "../helpers";
 
 export async function tryWebauthnSignUp(page, email) {
     await Promise.all([
@@ -24,3 +24,16 @@ export async function tryWebauthnSignIn(page) {
     await submitForm(page);
     await new Promise((res) => setTimeout(res, 1000));
 }
+
+export async function openRecoveryAccountPage(page) {
+    await Promise.all([
+        page.goto(`${TEST_CLIENT_BASE_URL}/auth?authRecipe=webauthn`),
+        page.waitForNavigation({ waitUntil: "networkidle0" }),
+    ]);
+
+    await toggleSignInSignUp(page);
+
+    const recoverAccountLink = await waitForSTElement(page, "[data-supertokens~='recoverAccountTrigger']");
+    await recoverAccountLink.click();
+    await new Promise((res) => setTimeout(res, 1000));
+}

test/end-to-end/webauthn.helpers.js

@@ -0,0 +1,76 @@
+import fetch from "isomorphic-fetch";
+import { TEST_SERVER_BASE_URL } from "../constants";
+import {
+    backendBeforeEach,
+    setupBrowser,
+    screenshotOnFailure,
+    clearBrowserCookiesWithoutAffectingConsole,
+    toggleSignInSignUp,
+    setEnabledRecipes,
+    waitForSTElement,
+    submitForm,
+} from "../helpers";
+import { tryWebauthnSignIn, openRecoveryAccountPage } from "./webauthn.helpers";
+import assert from "assert";
+
+describe("SuperTokens Webauthn Recovery Email", () => {
+    let browser;
+    let page;
+    let consoleLogs = [];
+
+    before(async function () {
+        await backendBeforeEach();
+
+        await fetch(`${TEST_SERVER_BASE_URL}/startst`, {
+            method: "POST",
+        }).catch(console.error);
+
+        browser = await setupBrowser();
+        page = await browser.newPage();
+        page.on("console", (consoleObj) => {
+            const log = consoleObj.text();
+            if (log.startsWith("ST_LOGS")) {
+                consoleLogs.push(log);
+            }
+        });
+    });
+
+    after(async function () {
+        await browser.close();
+        await fetch(`${TEST_SERVER_BASE_URL}/after`, {
+            method: "POST",
+        }).catch(console.error);
+
+        await fetch(`${TEST_SERVER_BASE_URL}/stopst`, {
+            method: "POST",
+        }).catch(console.error);
+    });
+
+    afterEach(function () {
+        return screenshotOnFailure(this, browser);
+    });
+
+    beforeEach(async function () {
+        consoleLogs = [];
+        consoleLogs = await clearBrowserCookiesWithoutAffectingConsole(page, consoleLogs);
+        await toggleSignInSignUp(page);
+    });
+
+    describe("Recovery Email Test", () => {
+        it("should show the recovery email page", async () => {
+            await openRecoveryAccountPage(page);
+
+            const headerTextContainer = await waitForSTElement(
+                page,
+                "[data-supertokens~='passkeyRecoverAccountFormHeader']"
+            );
+            const headerText = await headerTextContainer.evaluate((el) => el.textContent);
+            assert.strictEqual(headerText, "Recover Account");
+            assert.deepStrictEqual(consoleLogs, [
+                "ST_LOGS SESSION OVERRIDE ADD_FETCH_INTERCEPTORS_AND_RETURN_MODIFIED_FETCH",
+                "ST_LOGS SESSION OVERRIDE ADD_AXIOS_INTERCEPTORS",
+                "ST_LOGS WEBAUTHN GET_REDIRECTION_URL SEND_RECOVERY_EMAIL",
+            ]);
+        });
+    });
+});