chore: update test setup (#202)

.deps/ory.version

@@ -0,0 +1 @@
+v0.3.4

.github/workflows/format.yml

@@ -2,7 +2,6 @@ name: Format
 
 on:
   pull_request:
-  push:
 
 jobs:
   format:

.prettierrc

@@ -1,6 +1,5 @@
 {
   "proseWrap": "always",
-  "singleQuote": true,
-  "trailingComma": "none",
-  "parser": "typescript"
+  "trailingComma": "all",
+  "semi": false
 }

Makefile

@@ -15,18 +15,23 @@ test-containerized:
 	# For unsupported distros, use the `test-containerized` target instead of `test`
 	sh -c ./playwright-docker.sh
 
-format: .bin/ory node_modules
+
+PRETTIER_VERSION=$(shell cat package.json | jq -r '.devDependencies["prettier"] // .dependencies["prettier"]')
+
+format: .bin/ory
 	.bin/ory dev headers copyright --type=open-source
-	npm exec -- prettier --write .
+	@echo "Prettier Version: $(PRETTIER_VERSION)"
+	npx prettier@$$PRETTIER_VERSION --write .
+
 
 licenses: .bin/licenses node_modules  # checks open-source licenses
 	.bin/licenses
 
 .bin/licenses: Makefile
 	curl https://raw.githubusercontent.com/ory/ci/master/licenses/install | sh
 
-.bin/ory: Makefile
-	curl https://raw.githubusercontent.com/ory/meta/master/install.sh | bash -s -- -b .bin ory v0.2.2
+.bin/ory: .deps/ory.version
+	curl https://raw.githubusercontent.com/ory/meta/master/install.sh | bash -s -- -b .bin ory $(cat .deps/ory.version)
 	touch .bin/ory
 
 node_modules: package-lock.json

examples/nextjs-spa/global-setup.ts

@@ -3,7 +3,7 @@
 
 const globlSetup = async () => {
   process.env.APPLICATION_URL =
-    process.env.APPLICATION_URL || "http://localhost:3100"
+    process.env.APPLICATION_URL || "http://localhost:3300"
 
   process.env.ORY_PROJECT_URL =
     process.env.ORY_PROJECT_URL || "http://localhost:4000"

examples/nextjs-spa/package.json

@@ -11,21 +11,19 @@
   },
   "dependencies": {
     "@next/font": "13.4.13",
-    "@types/node": "18.16.19",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "eslint": "8.32.0",
-    "eslint-config-next": "13.1.5",
     "next": "14.2.5",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "typescript": "5.2.2",
-    "vite": "4.5.2"
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@ory/elements": "*",
     "@ory/elements-test": "*",
-    "@playwright/test": "1.38.0",
-    "autoprefixer": "10.4.2"
+    "autoprefixer": "10.4.2",
+    "@types/node": "18.16.19",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "eslint-config-next": "13.1.5",
+    "typescript": "5.2.2",
+    "vite": "4.5.2"
   }
 }

examples/nextjs-spa/playwright.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
   testDir: path.join(__dirname, "e2e"),
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
+  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
@@ -36,7 +37,9 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? [["github"], ["html"], ["list"]] : "html",
+  reporter: process.env.CI
+    ? [["github"], ["html", { open: "never" }], ["list"]]
+    : "html",
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -52,16 +55,16 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: "chromium",
+      name: "nextjs-spa-chromium",
       use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: "firefox",
+      name: "nextjs-spa-firefox",
       use: { ...devices["Desktop Firefox"] },
     },
     {
-      name: "webkit",
+      name: "nextjs-spa-webkit",
       use: { ...devices["Desktop Safari"] },
     },
   ],

examples/nextjs-spa/src/middleware.ts

@@ -16,78 +16,80 @@ export const middleware = async (request: NextRequest) =>
   !["/", "/settings"].includes(new URL(request.url).pathname)
     ? NextResponse.next()
     : process.env.NEXT_PUBLIC_ORY_SDK_URL
-    ? fetch(`${process.env.NEXT_PUBLIC_ORY_SDK_URL}/sessions/whoami`, {
-        headers: {
-          cookie: request.headers.get("cookie") || "",
-        },
-      })
-        .then((resp) => {
-          // there must've been no response (invalid URL or something...)
-          if (!resp) {
-            return NextResponse.redirect(
-              new URL(
-                `/error?error=${JSON.stringify({
-                  message:
-                    "Network error - this could be related to CORS or an incorrect URL set on the `NEXT_PUBLIC_ORY_SDK_URL` environment variable. " +
-                    "Please check out the Ory documentation for more information: https://www.ory.sh/docs/getting-started/local-development",
-                })}`,
-                request.url,
-              ),
-            )
-          }
-
-          console.log(
-            `Global Session Middleware: ${JSON.stringify(resp.json())}`,
-          )
-
-          // the user is not signed in
-          if (resp.status === 401) {
-            return NextResponse.redirect(new URL("/login", request.url))
-          }
-
-          return NextResponse.next()
+      ? fetch(`${process.env.NEXT_PUBLIC_ORY_SDK_URL}/sessions/whoami`, {
+          headers: {
+            cookie: request.headers.get("cookie") || "",
+          },
         })
-        .catch((err) => {
-          console.log(`Global Session Middleware error: ${JSON.stringify(err)}`)
-          if (!err.response)
-            return NextResponse.redirect(
-              new URL(
-                `/error?error=${JSON.stringify({
-                  message:
-                    "Network error - this could be related to CORS or an incorrect URL set on the `NEXT_PUBLIC_ORY_SDK_URL` environment variable. " +
-                    "Please check out the Ory documentation for more information: https://www.ory.sh/docs/getting-started/local-development",
-                })}`,
-                request.url,
-              ),
-            )
-
-          switch (err.response?.status) {
-            // 422 we need to redirect the user to the location specified in the response
-            case 422:
+          .then((resp) => {
+            // there must've been no response (invalid URL or something...)
+            if (!resp) {
               return NextResponse.redirect(
-                err.response.data.redirect_browser_to,
+                new URL(
+                  `/error?error=${JSON.stringify({
+                    message:
+                      "Network error - this could be related to CORS or an incorrect URL set on the `NEXT_PUBLIC_ORY_SDK_URL` environment variable. " +
+                      "Please check out the Ory documentation for more information: https://www.ory.sh/docs/getting-started/local-development",
+                  })}`,
+                  request.url,
+                ),
               )
-            //return router.push("/login", { query: { aal: "aal2" } })
-            case 401:
-              // The user is not logged in, so we redirect them to the login page.
+            }
+
+            console.log(
+              `Global Session Middleware: ${JSON.stringify(resp.json())}`,
+            )
+
+            // the user is not signed in
+            if (resp.status === 401) {
               return NextResponse.redirect(new URL("/login", request.url))
-            case 404:
-              // the SDK is not configured correctly
-              // we set this up so you can debug the issue in the browser
-              return NextResponse.redirect(
-                new URL(`/error?error=${JSON.stringify(err)}`, request.url),
-              )
-            default:
+            }
+
+            return NextResponse.next()
+          })
+          .catch((err) => {
+            console.log(
+              `Global Session Middleware error: ${JSON.stringify(err)}`,
+            )
+            if (!err.response)
               return NextResponse.redirect(
-                new URL(`/error?error=${JSON.stringify(err)}`, request.url),
+                new URL(
+                  `/error?error=${JSON.stringify({
+                    message:
+                      "Network error - this could be related to CORS or an incorrect URL set on the `NEXT_PUBLIC_ORY_SDK_URL` environment variable. " +
+                      "Please check out the Ory documentation for more information: https://www.ory.sh/docs/getting-started/local-development",
+                  })}`,
+                  request.url,
+                ),
               )
-          }
-        })
-    : NextResponse.redirect(
-        new URL(
-          `/error?error=${JSON.stringify({
-            message: "NEXT_PUBLIC_ORY_SDK_URL env variable is not set",
-          })}`,
-          request.url,
-        ),
-      )
+
+            switch (err.response?.status) {
+              // 422 we need to redirect the user to the location specified in the response
+              case 422:
+                return NextResponse.redirect(
+                  err.response.data.redirect_browser_to,
+                )
+              //return router.push("/login", { query: { aal: "aal2" } })
+              case 401:
+                // The user is not logged in, so we redirect them to the login page.
+                return NextResponse.redirect(new URL("/login", request.url))
+              case 404:
+                // the SDK is not configured correctly
+                // we set this up so you can debug the issue in the browser
+                return NextResponse.redirect(
+                  new URL(`/error?error=${JSON.stringify(err)}`, request.url),
+                )
+              default:
+                return NextResponse.redirect(
+                  new URL(`/error?error=${JSON.stringify(err)}`, request.url),
+                )
+            }
+          })
+      : NextResponse.redirect(
+          new URL(
+            `/error?error=${JSON.stringify({
+              message: "NEXT_PUBLIC_ORY_SDK_URL env variable is not set",
+            })}`,
+            request.url,
+          ),
+        )

examples/nextjs-spa/tsconfig.json

@@ -9,8 +9,8 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

examples/preact-spa/package.json

@@ -5,9 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "playwright test",
     "debug": "playwright test --ui"
   },
   "dependencies": {
@@ -17,9 +15,8 @@
   "devDependencies": {
     "@ory/elements-preact": "*",
     "@ory/elements-test": "*",
-    "@playwright/test": "1.38.0",
+    "@playwright/test": "1.46.0",
     "@preact/preset-vite": "2.5.0",
-    "eslint": "8.32.0",
     "eslint-config-preact": "1.3.0",
     "typescript": "5.2.2",
     "vite": "4.5.2"

examples/preact-spa/playwright.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
   testDir: "./e2e",
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
+  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
@@ -35,7 +36,9 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? [["github"], ["html"], ["list"]] : "html",
+  reporter: process.env.CI
+    ? [["github"], ["html", { open: "never" }], ["list"]]
+    : "html",
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -51,15 +54,15 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: "chromium",
+      name: "preact-spa-chromium",
       use: { ...devices["Desktop Chrome"] },
     },
     {
-      name: "firefox",
+      name: "preact-spa-firefox",
       use: { ...devices["Desktop Firefox"] },
     },
     {
-      name: "webkit",
+      name: "preact-spa-webkit",
       use: { ...devices["Desktop Safari"] },
     },
   ],

examples/preact-spa/project.json

@@ -0,0 +1,17 @@
+{
+  "targets": {
+    "test": {
+      "command": "playwright test",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "examples/preact-spa"
+      }
+    },
+    "build": {
+      "command": "tsc && vite build",
+      "options": {
+        "cwd": "examples/preact-spa"
+      }
+    }
+  }
+}

examples/react-spa/package.json

@@ -18,17 +18,15 @@
   "devDependencies": {
     "@ory/elements": "*",
     "@ory/elements-test": "*",
-    "@playwright/test": "1.38.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "@vitejs/plugin-react": "4.0.3",
-    "eslint": "8.33.0",
     "eslint-config-standard-with-typescript": "33.0.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-n": "15.6.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.35.0",
     "typescript": "5.2.2",
     "vite": "4.5.2"
   }