Merge pull request #4 from jordanpowell88/fix-cypress-ct-qwik

feat(cypress-ct-qwik): add 3rd party support

Author: shairez

.all-contributorsrc

@@ -24,6 +24,19 @@
         "review",
         "ideas"
       ]
+    },
+    {
+      "login": "jordanpowell88",
+      "name": "Jordan Powell",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3605268?v=4",
+      "profile": "https://github.com/jordanpowell88",
+      "contributions": [
+        "code",
+        "test",
+        "infra",
+        "review",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/actions/setup/action.yml

@@ -41,4 +41,4 @@ runs:
 
     - name: Install dependencies
       shell: bash
-      run: pnpm install --frozen-lockfile
+      run: pnpm install --frozen-lockfile --config.auto-install-peers=false

.npmrc

@@ -1 +1,2 @@
-save-exact = true
+save-exact = true
+auto-install-peers=false

README.md

@@ -43,42 +43,46 @@ npm install -D cypress-ct-qwik
 
 ## Configuring Cypress
 
+1. Run cypress (in watch mode) after installation
+2. Follow the configuration wizard
+3. Add `addQwikLoader` to the `component.ts` file -
+
 ```ts
-// cypress.config.ts
+// component.ts
 
-import { defineConfig } from 'cypress';
+import { addQwikLoader } from 'cypress-ct-qwik';
 
-export default defineConfig({
-  component: {
-    devServer: {
-      mode: 'test',
-      bundler: 'vite',
-    } as any,
-  },
-});
+addQwikLoader();
 ```
 
-Add `addQwikLoader` to the `component.ts` file -
+4. Add the `mount` command to `support/commands.ts` -
 
 ```ts
-// component.ts
+// commands.ts
 
-import { addQwikLoader } from 'cypress-ct-qwik';
+import { mount } from 'cypress-ct-qwik';
 
-addQwikLoader();
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    mount: typeof mount;
+  }
+}
+//
+
+Cypress.Commands.add('mount', mount);
 ```
 
 ## Usage
 
 ```ts
 // some-test.cy.ts
 
-import { mount } from 'cypress-ct-qwik';
 import MyComp from './my-comp';
 
 describe(`Qwik Component Test`, () => {
   it('should find my link', () => {
-    mount(<MyComp />);
+    cy.mount(<MyComp />);
 
     cy.contains('myLink').should('exist');
   });

apps/qwik-app/cypress.config.ts

@@ -1,3 +1,10 @@
-import { defineConfig } from 'cypress';
+import { defineConfig } from "cypress";
 
-export default defineConfig({});
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "cypress-ct-qwik",
+      bundler: "vite",
+    },
+  },
+});

apps/qwik-app/cypress/support/commands.ts

@@ -1,4 +1,7 @@
 /// <reference types="cypress" />
+
+import { mount } from "cypress-ct-qwik";
+
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite
@@ -14,13 +17,16 @@ declare namespace Cypress {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Chainable<Subject> {
     login(email: string, password: string): void;
+    mount: typeof mount
   }
 }
 //
 // -- This is a parent command --
 Cypress.Commands.add('login', (email, password) => {
   console.log('Custom command example: Login', email, password);
 });
+
+Cypress.Commands.add('mount', mount)
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })

apps/qwik-app/src/components/header/header.cy.tsx

@@ -1,15 +1,14 @@
-import { mount } from 'cypress-ct-qwik';
 import Header from './header';
 
 describe(`header component test`, () => {
   it('should find a link', () => {
-    mount(<Header />);
+    cy.mount(<Header />);
 
     cy.contains(/docs/i).should('exist');
   });
 
   it('should click on a button', () => {
-    mount(<Header />);
+    cy.mount(<Header />);
 
     cy.contains(/opened/i).should('not.exist');
     cy.contains(/click me/i).click();

packages/cypress-ct-qwik/definition.ts

@@ -1,21 +1,21 @@
 import { defineComponentFramework } from 'cypress';
 
 const qwik: Cypress.CypressComponentDependency = {
-  type: 'cypress-ct-qwik',
+  type: 'qwik',
   name: 'Qwik',
   package: '@builder.io/qwik',
   installer: '@builder.io/qwik',
   description: 'The HTML-first framework',
-  minVersion: '^0.19.2',
+  minVersion: '>0.19.2',
 };
 
 const qwikCity: Cypress.CypressComponentDependency = {
-  type: 'cypress-ct-qwik',
+  type: 'qwik-ct',
   name: 'Qwik City',
   package: '@builder.io/qwik-city',
   installer: '@builder.io/qwik-city',
   description: 'The meta-framework for Qwik',
-  minVersion: '^0.4.0',
+  minVersion: '>0.4.0',
 };
 
 export default defineComponentFramework({
@@ -54,4 +54,18 @@ export default defineComponentFramework({
   dependencies: (bundler) => {
     return [qwik, qwikCity];
   },
+
+  icon: `<svg style="height: auto; width: 100%" viewBox="0 0 52 60"
+  fill="none" xmlns="http://www.w3.org/2000/svg">
+
+  <path
+    d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z"
+    fill="#18B6F6" />
+  <path
+    d="M45.8232 20.5411L44.038 17.2468L43.1066 15.5609L42.738 14.902L42.6992 14.9408L37.8094 6.47238C36.587 4.34075 34.2974 3.02301 31.8137 3.04239L27.5255 3.15865L14.7384 3.19741C12.313 3.21679 10.101 4.49577 8.87853 6.56927L1.09766 21.9945L15.0101 4.72831L33.2496 24.7656L30.0091 28.0406L31.9495 43.7178L31.9689 43.679V43.7178H31.9301L31.9689 43.7565L33.4824 45.2293L40.8364 52.4187C41.1469 52.7094 41.6514 52.3606 41.4379 51.9924L36.8975 43.0589L44.8142 28.4282L45.0664 28.1375C45.1634 28.0212 45.2604 27.905 45.3381 27.7887C46.8904 25.6764 47.1038 22.8472 45.8232 20.5411Z"
+    fill="#AC7EF4" />
+  <path
+    d="M33.3076 24.6882L15.0099 4.74774L17.61 20.3668L12.9531 24.882L31.9105 43.6985L30.203 28.0794L33.3076 24.6882Z"
+    fill="white" />
+</svg>`
 });

packages/cypress-ct-qwik/package.json

@@ -1,17 +1,23 @@
 {
   "name": "cypress-ct-qwik",
   "version": "0.0.6",
-  "type": "module",
   "exports": {
-    "node": "definition.js",
-    "require": "definition.js",
+    "node": "./definition.js",
     "default": "./src/index.js"
   },
+  "files": [
+    "package.json",
+    "definition.js",
+    "definition.d.ts",
+    "src/index.js",
+    "src/index.d.ts",
+    "src/lib"
+  ],
   "dependencies": {
     "@cypress/mount-utils": "^4.0.0"
   },
   "peerDependencies": {
-    "cypress": ">=10.6.0",
-    "@builder.io/qwik": "^0.16.0"
+    "cypress": ">=12.8.1",
+    "@builder.io/qwik": ">0.23.0"
   }
 }

packages/cypress-ct-qwik/project.json

@@ -4,14 +4,14 @@
   "sourceRoot": "packages/cypress-ct-qwik/src",
   "projectType": "library",
   "targets": {
-    "build": {
-      "dependsOn": ["build-definition"],
+    "build-mount": {
       "executor": "@nrwl/js:tsc",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/cypress-ct-qwik",
         "main": "packages/cypress-ct-qwik/src/index.ts",
         "tsConfig": "packages/cypress-ct-qwik/tsconfig.lib.json",
+        "clean": false,
 
         "assets": [
           "README.md",
@@ -32,9 +32,26 @@
       "options": {
         "outputPath": "dist/packages/cypress-ct-qwik",
         "main": "packages/cypress-ct-qwik/definition.ts",
-        "tsConfig": "packages/cypress-ct-qwik/tsconfig.definition.json"
+        "tsConfig": "packages/cypress-ct-qwik/tsconfig.definition.json",
+        "clean": false
+      }
+    },
+    "copy": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cp -r dist/packages/cypress-ct-qwik node_modules"
       }
     },
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "nx run cypress-ct-qwik:build-mount --skip-nx-cache && nx run cypress-ct-qwik:build-definition --skip-nx-cache"
+        ]
+      },
+      "outputPath": "node_modules/cypress-ct-qwik",
+      "outputs": ["{options.outputPath}"]
+    },
     "lint": {
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],