rewrite existing cypress tests to playwright (calcom#931)

.eslintrc.json

@@ -25,9 +25,10 @@
   },
   "overrides": [
     {
-      "files": ["cypress/**/*.js"],
+      "files": ["playwright/**/*.{js,jsx,tsx,ts}"],
       "rules": {
-        "no-undef": "off"
+        "no-undef": "off",
+        "@typescript-eslint/no-non-null-assertion": "off"
       }
     }
   ],

.github/workflows/e2e.yml

@@ -59,7 +59,6 @@ jobs:
       - run: yarn build
       - run: yarn start &
       - run: npx wait-port 3000 --timeout 10000
-      - run: yarn cypress run
       - run: yarn playwright install-deps
       - run: yarn test-playwright
 
@@ -69,6 +68,5 @@ jobs:
         with:
           name: videos
           path: |
-            cypress/videos
-            cypress/screenshots
             playwright/screenshots
+            playwright/videos

.gitignore

@@ -12,8 +12,6 @@
 # testing
 /coverage
 .nyc_output
-cypress/videos
-cypress/screenshots
 playwright/videos
 playwright/screenshots
 

babel.config.js

@@ -0,0 +1,13 @@
+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.config.ts

@@ -4,7 +4,7 @@ const config: Config.InitialOptions = {
   verbose: true,
   roots: ["<rootDir>"],
   testMatch: ["**/tests/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
-  testPathIgnorePatterns: ["<rootDir>/.next", "<rootDir>/playwright/", "<rootDir>/cypress/"],
+  testPathIgnorePatterns: ["<rootDir>/.next", "<rootDir>/playwright/"],
   transform: {
     "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
   },

jest.playwright.config.js

@@ -1,3 +1,12 @@
+const opts = {
+  // launch headless on CI, in browser locally
+  headless: !!process.env.CI || !!process.env.PLAYWRIGHT_HEADLESS,
+  executablePath: process.env.PLAYWRIGHT_CHROME_EXECUTABLE_PATH,
+  collectCoverage: !!process.env.PLAYWRIGHT_HEADLESS,
+};
+
+console.log("⚙️ Playwright options:", opts);
+
 module.exports = {
   verbose: true,
   preset: "jest-playwright-preset",
@@ -10,16 +19,15 @@ module.exports = {
       browsers: ["chromium" /*, 'firefox', 'webkit'*/],
       exitOnPageError: false,
       launchOptions: {
-        // launch headless on CI, in browser locally
-        headless: !!process.env.CI,
-        executablePath: process.env.PLAYWRIGHT_CHROME_EXECUTABLE_PATH,
+        headless: opts.headless,
+        executablePath: opts.executablePath,
       },
       contextOptions: {
         recordVideo: {
-          dir: "playwright/videos/",
+          dir: "playwright/videos",
         },
       },
-      collectCoverage: true,
+      collectCoverage: opts.collectCoverage,
     },
   },
 };

package.json

@@ -13,7 +13,8 @@
     "db-nuke": "docker-compose down --volumes --remove-orphans",
     "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 --maxWorkers=2 --config jest.playwright.config.js && nyc report --reporter=lcov",
+    "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",
     "build": "next build",
     "start": "next start",
     "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\"",
@@ -113,7 +114,6 @@
     "babel-jest": "^27.2.4",
     "babel-plugin-istanbul": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cypress": "^8.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -123,6 +123,7 @@
     "jest": "^27.2.2",
     "jest-playwright": "^0.0.1",
     "jest-playwright-preset": "^1.7.0",
+    "kont": "^0.5.1",
     "lint-staged": "^11.1.2",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",

playwright/booking-pages.test.ts

@@ -0,0 +1,34 @@
+import { kont } from "kont";
+
+import { pageProvider } from "./lib/pageProvider";
+
+jest.setTimeout(60e3);
+
+describe("free user", () => {
+  const ctx = kont()
+    .useBeforeEach(pageProvider({ path: "/free" }))
+    .done();
+
+  test("only one visible event", async () => {
+    const { page } = ctx;
+    await expect(page).toHaveSelector(`[href="/free/30min"]`);
+    await expect(page).not.toHaveSelector(`[href="/free/60min"]`);
+  });
+
+  // TODO: make sure `/free/30min` is bookable and that `/free/60min` is not
+});
+
+describe("pro user", () => {
+  const ctx = kont()
+    .useBeforeEach(pageProvider({ path: "/pro" }))
+    .done();
+
+  test("pro user's page has at least 2 visible events", async () => {
+    const { page } = ctx;
+    const $eventTypes = await page.$$("[data-testid=event-types] > *");
+
+    expect($eventTypes.length).toBeGreaterThanOrEqual(2);
+  });
+
+  // TODO: make sure `/free/30min` is bookable and that `/free/60min` is not
+});