upgrade to Next.js 12 (#1109)

.github/workflows/e2e.yml

@@ -51,7 +51,7 @@ jobs:
         uses: actions/cache@v2
         with:
           path: ${{ github.workspace }}/.next/cache
-          key: ${{ runner.os }}-nextjs
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-nextjs
 
       - run: yarn test
       - run: yarn prisma migrate deploy
@@ -59,7 +59,20 @@ jobs:
       - run: yarn build
       - run: yarn start &
       - run: npx wait-port 3000 --timeout 10000
-      - run: yarn playwright install-deps
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v2
+        id: playwright-cache
+        with:
+          path: |
+            ~/Library/Caches/ms-playwright
+            ~/.cache/ms-playwright
+            **/node_modules/playwright
+          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+      - name: Install playwright deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install-deps
+
       - run: yarn test-playwright
 
       - name: Upload videos

babel.config.js

@@ -1,13 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  const plugins = [];
-  if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
-    console.log("------ 💯 Adding test coverage support 💯 ------");
-    plugins.push("istanbul");
-  }
-
-  return {
-    presets: ["next/babel"],
-    plugins,
-  };
-};

jest.playwright.config.js

@@ -1,7 +1,7 @@
 const opts = {
   // launch headless on CI, in browser locally
   headless: !!process.env.CI || !!process.env.PLAYWRIGHT_HEADLESS,
-  collectCoverage: !!process.env.PLAYWRIGHT_HEADLESS,
+  collectCoverage: false, // not possible in Next.js 12
   executablePath: process.env.PLAYWRIGHT_CHROME_EXECUTABLE_PATH,
 };
 

next.config.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const withTM = require("next-transpile-modules")(["react-timezone-select"]);
+const withTM = require("@vercel/edge-functions-ui/transpile")(["react-timezone-select"]);
 const { i18n } = require("./next-i18next.config");
 
 // So we can test deploy previews preview

package.json

@@ -14,7 +14,6 @@
     "dx": "cross-env BASE_URL=http://localhost:3000 JWT_SECRET=secret DATABASE_URL=postgresql://postgres:@localhost:5450/calendso run-s db-up db-migrate db-seed dev",
     "test": "jest",
     "test-playwright": "jest --config jest.playwright.config.js",
-    "test-playwright-lcov": "cross-env PLAYWRIGHT_HEADLESS=1 PLAYWRIGHT_COVERAGE=1 yarn test-playwright && nyc report --reporter=lcov",
     "test-codegen": "yarn playwright codegen http://localhost:3000",
     "type-check": "tsc --pretty --noEmit",
     "build": "next build",
@@ -53,6 +52,7 @@
     "@trpc/next": "^9.10.1",
     "@trpc/react": "^9.10.1",
     "@trpc/server": "^9.10.1",
+    "@vercel/edge-functions-ui": "^0.2.1",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.1",
@@ -67,11 +67,11 @@
     "jimp": "^0.16.1",
     "lodash": "^4.17.21",
     "micro": "^9.3.4",
-    "next": "^11.1.1",
-    "next-auth": "^3.28.0",
-    "next-i18next": "^8.8.0",
+    "next": "^12.0.2",
+    "next-auth": "^3.29.0",
+    "next-i18next": "^8.9.0",
     "next-seo": "^4.26.0",
-    "next-transpile-modules": "^8.0.0",
+    "next-transpile-modules": "^9.0.0",
     "nodemailer": "^6.6.3",
     "otplib": "^12.0.1",
     "qrcode": "^1.4.4",
@@ -86,7 +86,7 @@
     "react-query": "^3.30.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^4.3.1",
-    "react-timezone-select": "^1.1.12",
+    "react-timezone-select": "^1.1.13",
     "react-use-intercom": "1.4.0",
     "short-uuid": "^4.2.0",
     "stripe": "^8.168.0",
@@ -116,9 +116,7 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.29.2",
     "autoprefixer": "^10.3.1",
-    "babel": "^6.23.0",
-    "babel-jest": "^27.2.4",
-    "babel-plugin-istanbul": "^6.1.1",
+    "babel-jest": "^27.3.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -133,7 +131,6 @@
     "lint-staged": "^11.1.2",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
     "playwright": "^1.16.2",
     "postcss": "^8.3.11",
     "prettier": "^2.3.2",

playwright/integrations.test.ts

@@ -69,7 +69,7 @@ describe("webhooks", () => {
     body.payload.uid = dynamic;
 
     // if we change the shape of our webhooks, we can simply update this by clicking `u`
-    console.log("BODY", body);
+    // console.log("BODY", body);
     expect(body).toMatchInlineSnapshot(`
     Object {
       "createdAt": "[redacted/dynamic]",

playwright/login.test.ts

@@ -0,0 +1,21 @@
+jest.setTimeout(60e3);
+
+test("login with pro@example.com", async () => {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+  await page.goto("http://localhost:3000/auth/login");
+  // Click input[name="email"]
+  await page.click('input[name="email"]');
+  // Fill input[name="email"]
+  await page.fill('input[name="email"]', `pro@example.com`);
+  // Press Tab
+  await page.press('input[name="email"]', "Tab");
+  // Fill input[name="password"]
+  await page.fill('input[name="password"]', `pro`);
+  // Press Enter
+  await page.press('input[name="password"]', "Enter");
+
+  await page.waitForSelector("[data-testid=event-types]");
+});
+
+export {};