feat(wip): server-side api mocks with express

examples/express/.gitignore

@@ -2,3 +2,4 @@
 /lib/
 /test-results/
 /playwright-report/
+/tests-out/

examples/express/e2e/login.spec.ts

@@ -1,6 +1,7 @@
 // Copyright © 2023 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 import { LoginMocks, LoginPage, test as base, UUIDv4 } from "@ory/elements-test"
+import { rest } from "msw"
 
 const test = base.extend<{ loginPage: LoginPage }>({
   loginPage: async ({ page, environment }, use) => {
@@ -31,6 +32,19 @@ test.describe.parallel("Login Page", () => {
         },
       })
     })
+    loginPage.server?.use(
+      rest.get(
+        "http://localhost:4000/self-service/login/flows",
+        async (_, res, ctx) => {
+          return res.once(
+            ctx.json({
+              id: UUIDv4(),
+              active: true,
+            }),
+          )
+        },
+      ),
+    )
 
     await LoginMocks.LoginSuccessTest(loginPage)
   })

examples/express/global-setup.ts

@@ -1,5 +1,7 @@
 // Copyright © 2023 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
+import { spawn } from "child_process"
+import path from "path"
 
 const globlSetup = async () => {
   process.env.APPLICATION_URL =
@@ -9,6 +11,51 @@ const globlSetup = async () => {
     process.env.ORY_PROJECT_URL || "http://localhost:4000"
 
   process.env.ORY_PROJECT_API_TOKEN = ""
+
+  const parentDirectory = path.join(__dirname, "../../")
+  console.log("using parent directory", parentDirectory)
+
+  // set env var for express server
+  const nodemon = spawn("ts-node", ["./src/index.ts"], {
+    cwd: __dirname,
+    stdio: ["inherit", "inherit", "inherit", "ipc"],
+    env: {
+      ORY_SDK_URL: "http://localhost:4000",
+      PORT: "3200",
+      PATH: process.env.PATH,
+      MOCK_SERVER: "true",
+    },
+  })
+
+  nodemon.stdout?.on("data", (data) => {
+    console.log(`stdout: ${data}`)
+  })
+
+  nodemon.stderr?.on("data", (data) => {
+    console.log(`stderr: ${data}`)
+  })
+
+  nodemon.on("error", (err) => {
+    console.error(`nodemon encountered an error ${err}`)
+  })
+
+  nodemon.on("close", (code) => {
+    console.log(`child process exited with code ${code}`)
+  })
+
+  let count = 10
+  while (count > 0) {
+    try {
+      const resp = await fetch("http://localhost:3200")
+      if (resp.ok) {
+        break
+      }
+    } catch (e) {
+      console.log("Trying to connect to service ", e)
+    }
+    count--
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  }
 }
 
 export default globlSetup

examples/express/global-teardown.ts

@@ -0,0 +1,27 @@
+import { spawn } from "child_process"
+
+const globalTeardown = async () => {
+  // Currently you can kill ports running on TCP or UDP protocols
+  const process = spawn("kill-port", ["3200"], {
+    cwd: __dirname,
+    shell: true,
+  })
+
+  process.stdout?.on("data", (data) => {
+    console.log(`stdout: ${data}`)
+  })
+
+  process.stderr?.on("data", (data) => {
+    console.log(`stderr: ${data}`)
+  })
+
+  process.on("error", (err) => {
+    console.error(`kill-port encountered an error ${err}`)
+  })
+
+  process.on("close", (code) => {
+    console.log(`child process exited with code ${code}`)
+  })
+}
+
+export default globalTeardown

examples/express/package.json

@@ -2,7 +2,6 @@
   "name": "express-example",
   "version": "0.0.0",
   "private": true,
-  "main": "src/index.ts",
   "files": [
     "lib/*",
     "views/*"
@@ -12,9 +11,11 @@
     "dev": "node lib/index.js",
     "start": "nodemon",
     "test": "playwright test",
-    "debug": "playwright test --ui"
+    "debug": "playwright test --ui",
+    "serve": "node lib/index.js"
   },
   "dependencies": {
+    "@mswjs/interceptors": "file:../../../interceptors/",
     "axios": "1.2.6",
     "body-parser": "1.20.2",
     "cookie-parser": "1.4.6",
@@ -30,9 +31,9 @@
     "@ory/elements-markup": "*",
     "@ory/elements-test": "*",
     "@ory/integrations": "*",
-    "autoprefixer": "10.4.2",
     "@playwright/test": "1.32.1",
     "@trivago/prettier-plugin-sort-imports": "4.0.0",
+    "@tsconfig/node18": "18.2.1",
     "@types/axios": "0.14.0",
     "@types/cookie-parser": "1.4.3",
     "@types/csurf": "1.11.2",
@@ -42,7 +43,10 @@
     "@types/jwt-decode": "3.1.0",
     "@types/next": "9.0.0",
     "@types/node": "18.16.19",
+    "autoprefixer": "10.4.2",
+    "kill-port": "2.0.1",
     "license-checker": "25.0.1",
+    "msw": "1.2.5",
     "nodemon": "2.0.20",
     "npm-run-all": "4.1.5",
     "ory-prettier-styles": "1.3.0",

examples/express/playwright.config.ts

@@ -15,13 +15,13 @@ import path from "path"
 export default defineConfig({
   testDir: path.join(__dirname, "e2e"),
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 10 * 1000,
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
+    timeout: 2000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -67,19 +67,19 @@ export default defineConfig({
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   // outputDir: 'test-results/',
 
-  globalSetup: "./global-setup",
-  //globalTeardown: "./global-teardown",
+  globalSetup: path.join(__dirname, "global-setup.ts"),
+  globalTeardown: path.join(__dirname, "global-teardown.ts"),
 
   /* Run your local dev server before starting the tests */
   webServer: [
-    {
-      env: {
-        ORY_SDK_URL: "http://localhost:4000",
-      },
-      command: "PORT=3200 npm run start",
-      timeout: 120 * 1000,
-      port: 3200,
-      reuseExistingServer: !process.env.CI,
-    },
+    // {
+    //   env: {
+    //     ORY_SDK_URL: "http://localhost:4000",
+    //   },
+    //   command: "PORT=3200 npm run start",
+    //   timeout: 120 * 1000,
+    //   port: 3200,
+    //   reuseExistingServer: !process.env.CI,
+    // },
   ],
 })

examples/express/src/index.ts

@@ -1,10 +1,5 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
-import cookieParser from "cookie-parser"
-import express, { Request, Response } from "express"
-import { engine } from "express-handlebars"
-import * as fs from "fs"
-import * as https from "https"
 import { handlebarsHelpers } from "./pkg"
 import { middleware as middlewareLogger } from "./pkg/logger"
 import {
@@ -23,6 +18,22 @@ import {
   registerVerificationRoute,
   registerWelcomeRoute,
 } from "./routes"
+import { RemoteHttpInterceptor } from "@mswjs/interceptors/RemoteHttpInterceptor"
+import cookieParser from "cookie-parser"
+import express, { Request, Response } from "express"
+import { engine } from "express-handlebars"
+import * as fs from "fs"
+import * as https from "https"
+
+if (process.env.MOCK_SERVER === "true") {
+  const interceptor = new RemoteHttpInterceptor()
+
+  interceptor.apply()
+
+  process.on("disconnect", () => {
+    interceptor.dispose()
+  })
+}
 
 const baseUrl = process.env.BASE_PATH || "/"
 

examples/express/src/pkg/sdk/index.ts

@@ -22,6 +22,7 @@ const sdk = {
   oauth2: new OAuth2Api(
     new Configuration({
       basePath: apiBaseUrl,
+      baseOptions: hydraBaseOptions,
     }),
   ),
   identity: new IdentityApi(

examples/express/tsconfig.json

@@ -1,26 +1,32 @@
 {
+  // Most ts-node options can be specified here using their programmatic names.
+  "ts-node": {
+    // It is faster to skip typechecking.
+    // Remove if you want ts-node to do typechecking.
+    "transpileOnly": false,
+
+    "files": true,
+
+    "compilerOptions": {
+      // compilerOptions specified here will override those declared below,
+      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
+      // different options with a single tsconfig.json.
+      "moduleResolution": "Node"
+    }
+  },
   "compilerOptions": {
     "declaration": true,
     "resolveJsonModule": true,
-    "target": "es5",
-    "module": "commonjs",
-    "lib": [
-      "es2019",
-      "dom"
-    ],
+    "moduleResolution": "Node",
+    "target": "esnext",
+    "module": "nodenext",
+    "lib": ["esnext"],
     "outDir": "./lib",
     "strict": true,
-    "typeRoots": [
-      "./types"
-    ],
+    "typeRoots": ["./types"],
     "esModuleInterop": true,
     "skipLibCheck": true
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "e2e"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "e2e"]
 }