fix: registration via code and verification/recovery card stretches (#…

…145)

* feat: show registration with code in storybook

* chore: cleanup auth code section logic and tests

* test: recovery and verification snapshots

* feat: eslint config & playwright eslint

* style: format

* fix: strict package versions

* feat: support webkit in linux

* chore: update snapshots

* chore: update snapshot threshold

* chore: update preact snapshot

Makefile

@@ -1,4 +1,4 @@
-SHELL=/bin/bash -euo pipefail
+SHELL=/bin/bash -o pipefail
 
 export GO111MODULE        := on
 export PATH               := .bin:${PATH}
@@ -10,6 +10,11 @@ install:
 test:
 	npm run test
 
+test-containerized: 
+	# https://github.com/microsoft/playwright/issues/26482
+	# For unsupported distros, use the `test-containerized` target instead of `test`
+	sh -c ./playwright-docker.sh
+
 format: .bin/ory node_modules
 	.bin/ory dev headers copyright --type=open-source
 	npm exec -- prettier --write .

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

@@ -23,6 +23,9 @@ export default defineConfig({
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 5000,
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.02,
+    },
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -57,12 +60,10 @@ export default defineConfig({
       name: "firefox",
       use: { ...devices["Desktop Firefox"] },
     },
-
-    // disabling for now as it cancels reloading the page on the same URL
-    // {
-    //   name: "webkit",
-    //   use: { ...devices["Desktop Safari"] },
-    // },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
   ],
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
@@ -77,7 +78,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/playwright.config.ts

@@ -22,6 +22,9 @@ export default defineConfig({
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 5000,
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.02,
+    },
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -51,12 +54,10 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
-
     {
       name: "firefox",
       use: { ...devices["Desktop Firefox"] },
     },
-
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] },

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/playwright.config.ts

@@ -22,6 +22,9 @@ export default defineConfig({
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 5000,
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.02,
+    },
   },
   /* Run tests in files in parallel */
   fullyParallel: true,

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)
   }