test: create load test example (#243)

.eslintrc.cjs

@@ -50,5 +50,6 @@ const config = {
       },
     ],
   },
+  ignorePatterns: ['webpack.config.js'],
 }
 module.exports = config

.gitignore

@@ -13,7 +13,7 @@
 /out/
 
 # production
-/build
+**/build
 
 # misc
 .DS_Store

package.json

@@ -22,6 +22,7 @@
     "migrate": "prisma migrate deploy",
     "test": "run-s test:*",
     "test:unit": "dotenv -e .env.test vitest run",
+    "test:load:build": "webpack --config tests/load/webpack.config.js",
     "test:e2e": "dotenv -e .env.test playwright test",
     "test-dev": "start-server-and-test dev http://127.0.0.1:3000 test",
     "test-dev:unit": "dotenv -e .env.test vitest",
@@ -55,10 +56,10 @@
     "@tiptap/pm": "2.0.3",
     "@tiptap/react": "2.1.12",
     "@tiptap/starter-kit": "2.1.11",
-    "@trpc/client": "^10.31.0",
-    "@trpc/next": "^10.31.0",
-    "@trpc/react-query": "^10.31.0",
-    "@trpc/server": "^10.31.0",
+    "@trpc/client": "^10.44.1",
+    "@trpc/next": "^10.44.1",
+    "@trpc/react-query": "^10.44.1",
+    "@trpc/server": "^10.44.1",
     "@types/validator": "^13.11.1",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
@@ -81,6 +82,10 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/plugin-transform-object-rest-spread": "^7.23.4",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-typescript": "^7.23.3",
     "@chakra-ui/cli": "^2.4.1",
     "@playwright/test": "^1.33.0",
     "@storybook/addon-a11y": "^7.5.2",
@@ -98,6 +103,7 @@
     "@types/testing-library__jest-dom": "^5.14.6",
     "@typescript-eslint/eslint-plugin": "6.7.2",
     "@typescript-eslint/parser": "6.7.2",
+    "clean-webpack-plugin": "^4.0.0",
     "dotenv-cli": "^7.2.1",
     "eslint": "^8.41.0",
     "eslint-config-next": "^13.2.1",
@@ -106,6 +112,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "0.6.15",
+    "k6-trpc": "^1.0.0",
     "mockdate": "^3.0.5",
     "msw": "^1.3.1",
     "msw-storybook-addon": "1.10.0",
@@ -119,7 +126,9 @@
     "typescript": "^5.2.2",
     "vite": "^4.1.5",
     "vitest": "^0.30.1",
-    "vitest-environment-vprisma": "^1.2.0"
+    "vitest-environment-vprisma": "^1.2.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-glob-entries": "^1.0.1"
   },
   "publishConfig": {
     "access": "restricted"

tests/load/README.md

@@ -0,0 +1,25 @@
+# Load Tests
+
+## Prerequisites
+
+- [`k6`](https://k6.io/)
+
+## Setting up the Environment
+
+1. Build the load test files.
+
+   ```
+   npm run test:load:build
+   ```
+
+1. Log in to the target environment with a test account and save the session cookie value.
+
+## Runing the Load Tests
+
+### Create Post Load Test
+
+```
+k6 run tests/load/build/create-post.test.js \
+  -e SESSION_COOKIE={{ session cookie }} \
+  -e BASE_URL={{ scheme }}://{{ hostname }}:{{ port }}
+```

tests/load/create-post.test.ts

@@ -0,0 +1,56 @@
+import { check } from 'k6'
+import { createClient, createOptions } from 'k6-trpc'
+import { type Options } from 'k6/options'
+import superjson from 'superjson'
+
+import { type AppRouter } from '~/server/modules/_app'
+
+const PARAMETERS = {
+  SESSION_COOKIE: __ENV.SESSION_COOKIE,
+  BASE_URL: __ENV.BASE_URL ?? 'http://localhost:3000',
+} as const
+
+const apiOptions = {
+  headers: {
+    'Content-Type': 'application/json',
+  },
+} as const
+
+const client = createClient<AppRouter>(
+  `${PARAMETERS.BASE_URL}/api/trpc/`,
+  superjson
+)
+
+export const options: Options = {
+  vus: 100,
+  duration: '60s',
+} as const
+
+export const setup = () => {
+  if (!PARAMETERS.SESSION_COOKIE) {
+    throw new Error('No session cookie provided.')
+  }
+
+  // For some reason, k6 will capitalize the first letter of object keys
+  return { session: PARAMETERS.SESSION_COOKIE }
+}
+
+export default function test({ session }: ReturnType<typeof setup>) {
+  const response = client.post.add.mutate(
+    {
+      content: `Hello World!
+
+This is a new post!`,
+      contentHtml:
+        '{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Hello World!"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"This is a new post!"}]}]}',
+    },
+    createOptions({
+      ...apiOptions,
+      cookies: { 'auth.session-token': session },
+    })
+  )
+
+  check(response, {
+    'Create post mutation is successful': () => response.status < 300,
+  })
+}

tests/load/webpack.config.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const GlobEntries = require('webpack-glob-entries')
+
+module.exports = {
+  mode: 'production',
+  entry: GlobEntries(path.join(__dirname, '*.test.ts')),
+  output: {
+    path: path.join(__dirname, 'build'),
+    libraryTarget: 'commonjs',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-typescript'],
+            plugins: [
+              '@babel/plugin-transform-class-properties',
+              '@babel/plugin-transform-object-rest-spread',
+            ],
+          },
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  externals: /^(k6|https?\:\/\/)(\/.*)?(?!-trpc)/,
+  stats: {
+    colors: true,
+  },
+  plugins: [new CleanWebpackPlugin()],
+  optimization: {
+    // Don't minimize, as it's not used in the browser
+    minimize: false,
+  },
+}

vitest.config.ts

@@ -4,7 +4,7 @@ import { configDefaults, defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     globals: true,
-    exclude: [...configDefaults.exclude, '**/playwright/**'],
+    exclude: [...configDefaults.exclude, '**/playwright/**', 'tests/load/**'],
     alias: {
       '~/': fileURLToPath(new URL('./src/', import.meta.url)),
     },