test: recovery and verification snapshots

examples/nextjs-spa/package.json

@@ -20,12 +20,12 @@
     "next": "13.4.13",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   },
   "devDependencies": {
     "@ory/elements": "*",
     "@ory/elements-test": "*",
-    "autoprefixer": "10.4.2",
-    "@playwright/test": "1.32.1"
+    "@playwright/test": "1.38.0",
+    "autoprefixer": "10.4.2"
   }
 }

examples/nextjs-spa/playwright.config.ts

@@ -77,7 +77,7 @@ export default defineConfig({
       env: {
         NEXT_PUBLIC_ORY_SDK_URL: "http://localhost:4000",
       },
-      command: "npm run dev -- --port 3100",
+      command: "npm run build && npm run start -- --port 3100",
       timeout: 120 * 1000,
       port: 3100,
       reuseExistingServer: !process.env.CI,

examples/nextjs-spa/src/pages/recovery.tsx

@@ -20,7 +20,7 @@ import { SetUriFlow } from "@/pkg/helpers"
 import { NextPageWithLayout } from "./_app"
 
 const Recovery: NextPageWithLayout = () => {
-  const [flow, setFlow] = useState<RecoveryFlow>()
+  const [flow, setFlow] = useState<RecoveryFlow | null>()
 
   // Get flow information from the URL
   const router = useRouter()
@@ -84,8 +84,10 @@ const Recovery: NextPageWithLayout = () => {
         updateRecoveryFlowBody: values,
       })
       .then(({ data }) => {
+        // reset the form data completely
+        setFlow(null)
         // Form submission was successful, show the message to the user!
-        setFlow(data)
+        getFlow(data.id)
       })
       .catch(handleError)
 

examples/nextjs-spa/src/pages/verification.tsx

@@ -81,8 +81,10 @@ const Verification: NextPageWithLayout = () => {
         updateVerificationFlowBody: values,
       })
       .then(({ data }) => {
+        // reset the input fields
+        setFlow(null)
         // Form submission was successful, show the message to the user!
-        setFlow(data)
+        getFlow(data.id)
       })
       .catch(handleError)
 

examples/preact-spa/package.json

@@ -17,11 +17,11 @@
   "devDependencies": {
     "@ory/elements-preact": "*",
     "@ory/elements-test": "*",
-    "@playwright/test": "1.32.1",
     "@preact/preset-vite": "2.5.0",
     "eslint": "8.32.0",
     "eslint-config-preact": "1.3.0",
-    "typescript": "4.9.4",
+    "typescript": "5.2.2",
+    "@playwright/test": "1.38.0",
     "vite": "4.0.5"
   },
   "eslintConfig": {

examples/preact-spa/src/recovery.tsx

@@ -42,7 +42,8 @@ export const Recovery = () => {
       })
       .then(({ data: flow }) => {
         // Form submission was successful, show the message to the user!
-        setFlow(flow)
+        setFlow(null)
+        getFlow(flow.id)
       })
       .catch(sdkErrorHandler)
   }

examples/preact-spa/src/verification.tsx

@@ -42,7 +42,8 @@ export const Verification = () => {
         updateVerificationFlowBody: body,
       })
       .then(({ data: flow }) => {
-        setFlow(flow)
+        setFlow(null)
+        getFlow(flow.id)
       })
       .catch(sdkErrorHandler)
   }

examples/react-spa/package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "@ory/elements": "*",
     "@ory/elements-test": "*",
-    "@playwright/test": "1.32.1",
+    "@playwright/test": "1.38.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@typescript-eslint/eslint-plugin": "5.49.0",
@@ -29,7 +29,7 @@
     "eslint-plugin-n": "15.6.1",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.32.2",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "vite": "4.4.2"
   }
 }

examples/react-spa/src/Recovery.tsx

@@ -44,7 +44,8 @@ export const Recovery = () => {
       .updateRecoveryFlow({ flow: flow.id, updateRecoveryFlowBody: body })
       .then(({ data: flow }) => {
         // Form submission was successful, show the message to the user!
-        setFlow(flow)
+        setFlow(null)
+        getFlow(flow.id)
       })
       .catch(sdkErrorHandler)
   }

examples/react-spa/src/Verification.tsx

@@ -49,7 +49,8 @@ export const Verification = (): JSX.Element => {
         updateVerificationFlowBody: body,
       })
       .then(({ data: flow }) => {
-        setFlow(flow)
+        setFlow(null)
+        getFlow(flow.id)
       })
       .catch(sdkErrorHandler)
   }

package.json

@@ -29,10 +29,10 @@
   "homepage": "https://github.com/ory/elements#readme",
   "devDependencies": {
     "@babel/core": "7.18.10",
-    "@ory/client": "1.2.4",
+    "@ory/client": "1.2.8",
     "@ory/integrations": "1.1.5",
-    "@playwright/experimental-ct-react": "1.32.1",
-    "@playwright/test": "1.32.1",
+    "@playwright/experimental-ct-react": "1.38.0",
+    "@playwright/test": "1.38.0",
     "@preact/preset-vite": "2.5.0",
     "@storybook/addon-docs": "7.4.0",
     "@storybook/addon-essentials": "7.4.0",