feat: added cypress framework api

Co-authored-by: Jordan <[email protected]>

Author: shairez

apps/qwik-app/cypress.config.ts

@@ -1,9 +1,3 @@
 import { defineConfig } from 'cypress';
 
-export default defineConfig({
-  component: {
-    devServer: {
-      bundler: 'vite',
-    } as any,
-  },
-});
+export default defineConfig({});

package.json

@@ -37,7 +37,7 @@
     "autoprefixer": "^10.4.13",
     "commitizen": "^4.3.0",
     "commitlint": "^17.4.3",
-    "cypress": "^12.5.1",
+    "cypress": "12.8.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "8.36.0",
     "eslint-config-prettier": "8.6.0",

packages/cypress-ct-qwik/definition.ts

@@ -0,0 +1,57 @@
+import { defineComponentFramework } from 'cypress';
+
+const qwik: Cypress.CypressComponentDependency = {
+  type: 'cypress-ct-qwik',
+  name: 'Qwik',
+  package: '@builder.io/qwik',
+  installer: '@builder.io/qwik',
+  description: 'The HTML-first framework',
+  minVersion: '^0.19.2',
+};
+
+const qwikCity: Cypress.CypressComponentDependency = {
+  type: 'cypress-ct-qwik',
+  name: 'Qwik City',
+  package: '@builder.io/qwik-city',
+  installer: '@builder.io/qwik-city',
+  description: 'The meta-framework for Qwik',
+  minVersion: '^0.4.0',
+};
+
+export default defineComponentFramework({
+  /**
+   * This should match the `npm` package name.
+   * The convention required to ensure your Definition is processed
+   * by Cypress is `cypress-ct-*` for global packages, or
+   * `@org/cypress-ct-*` for organization level packages.
+   */
+  type: 'cypress-ct-qwik',
+
+  /**
+   * The label that shows up when configuring Component Testing
+   * for the first time.
+   */
+  name: 'Qwik',
+
+  /**
+   * Supported bundlers. Can be "webpack" and/or "vite".
+   */
+  supportedBundlers: ['vite'],
+
+  /**
+   * Used by Cypress to automatically detect the correct Framework Definition
+   * based on the user's project.
+   * In this example, if a module matching `solidDep`
+   * is found in the user's project,
+   * Solid.js will automatically be selected when configuring Component Testing.
+   */
+  detectors: [qwik],
+
+  /**
+   * Optionally, some conditional logic, based on whether
+   * the user selected Vite or webpack.
+   */
+  dependencies: (bundler) => {
+    return [qwik, qwikCity];
+  },
+});

packages/cypress-ct-qwik/package.json

@@ -2,7 +2,11 @@
   "name": "cypress-ct-qwik",
   "version": "0.0.6",
   "type": "module",
-  "exports": "./src/index.js",
+  "exports": {
+    "node": "definition.js",
+    "require": "definition.js",
+    "default": "./src/index.js"
+  },
   "dependencies": {
     "@cypress/mount-utils": "^4.0.0"
   },

packages/cypress-ct-qwik/project.json

@@ -5,6 +5,7 @@
   "projectType": "library",
   "targets": {
     "build": {
+      "dependsOn": ["build-definition"],
       "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
@@ -25,6 +26,15 @@
         ]
       }
     },
+    "build-definition": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/cypress-ct-qwik",
+        "main": "packages/cypress-ct-qwik/definition.ts",
+        "tsConfig": "packages/cypress-ct-qwik/tsconfig.definition.json"
+      }
+    },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],

packages/cypress-ct-qwik/tsconfig.definition.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "cypress"],
+    "importHelpers": false
+  },
+  "include": ["definition.ts"]
+}

packages/cypress-ct-qwik/tsconfig.json

@@ -16,6 +16,9 @@
   "references": [
     {
       "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.definition.json"
     }
   ]
 }

packages/cypress-ct-qwik/tsconfig.lib.json

@@ -6,6 +6,6 @@
     "types": ["node", "cypress"],
     "importHelpers": false
   },
-  "include": ["src/**/*.ts", "src/lib/mount.tsx"],
+  "include": ["src/**/*.ts", "src/lib/mount.tsx", "definition.ts"],
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
 }