chore: add cypress and fix tests

Author: lmiller1990

cypress/screenshots/c-button/tests/c-button-group.cy.tsx/renders WithButtonGroup successfully (failed).png

@@ -21,7 +21,11 @@
     "build": "lerna run build --no-private --stream",
     "dev": "NODE_ENV=development vite serve playground --config ./vite.config.ts",
     "playground:build": "yarn install && yarn build && yarn bootstrap && NODE_ENV=production vite build playground --config ./vite.config.ts",
-    "test": "cross-env NODE_ENV=test jest --config jest.config.js",
+    "cy:open": "cypress open-ct",
+    "cy:run": "cypress run-ct --quiet",
+    "test:component": "cy:run",
+    "test": "jest && yarn cy:run",
+    "test:unit": "cross-env NODE_ENV=test jest --config jest.config.js",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "docs:dev:legacy": "vitepress dev docs",
     "docs:build:legacy": "vitepress build docs",
@@ -119,6 +123,8 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "^2.1.7",
+    "@cypress/vite-dev-server": "^1.2.6",
+    "@cypress/vue": "^3.0.1",
     "@vue/test-utils": "^2.0.0-rc.6",
     "cypress": "^7.2.0"
   }

cypress/screenshots/c-button/tests/c-button-group.cy.tsx/renders WithButtonGroup successfully -- after each hook (failed).png

@@ -13,10 +13,10 @@ Object.entries(ButtonGroup).map(([name, example]) => {
 })
 
 it('with a color scheme', () => {
-  cy.mount(
+  cy.mount(h(() => 
     <CButtonGroup>
       <CButton colorScheme="blue">Save</CButton>
       <CButton>Cancel</CButton>
     </CButtonGroup>
-  )
+  ))
 })

package.json

@@ -1,4 +1,7 @@
-export * as BaseBadge from './base-badge.vue'
-export * as OutlineBadges from './outline-badges.vue'
-export * as SolidBadge from './solid-badge.vue'
-export * as SubtleBadges from './subtle-badges.vue'
+// export * as BaseBadge from './base-badge.vue'
+// export * as OutlineBadges from './outline-badges.vue'
+// export * as SolidBadge from './solid-badge.vue'
+// export * as SubtleBadges from './subtle-badges.vue'
+
+export * as BaseCode from './base-code.vue'
+export * as WithColor from './with-color.vue'

packages/c-button/tests/c-button-group.cy.tsx

@@ -20,7 +20,7 @@ const isAccessible = (_chai, utils) => {
   _chai.Assertion.addProperty('accessible', function () {
     let _this = this
 
-    return cy.get('#cypress-root', { log: false }).then(async ($root) => {
+    return cy.get('#__cy_root', { log: false }).then(async ($root) => {
       const result = await axeCore.run($root[0])
       console.log(`A11y results: `, result)
       const { passes, violations } = result

packages/c-code/examples/index.ts

@@ -3,14 +3,14 @@
 import { mount } from '@cypress/vue'
 
 declare namespace Cypress {
-  interface Chainable<Subject> {
+  export interface Chainable {
     mount(): ReturnType<typeof mount>
     /**
      * Run a11y tests or only a subset of all tests
      * @see https://github.com/avanslaars/cypress-axe
      * @example
      *  cy.checkA11y()
      */
-    checkA11y(any, object): Chainable<any>
+    checkA11y(any, object): Chainable
   }
 }

packages/tests/a11y.ts

@@ -1,5 +1,5 @@
 module.exports = {
-  __version: '6.9.0',
+  __version: '7.2.0',
   '<Portal />': {
     'Portal Examples': {
       'renders SimplePortal successfully': {

packages/tests/index.d.ts

@@ -4,7 +4,7 @@
     "module": "esnext",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "resolveJsonModule": true,
     "lib": [ "esnext", "dom" ],
-    "types": ["node", "jest", "vite/client", "vite-plugin-pages/client", "cypress"],
+    "types": ["node", "jest", "vite/client", "vite-plugin-pages/client", "cypress", "./packages/tests"],
     "declaration": true,
     "allowJs": true,
     "sourceMap": true,

snapshots.js

@@ -1469,6 +1469,21 @@
     snap-shot-compare "2.8.3"
     snap-shot-store "1.2.3"
 
+"@cypress/vite-dev-server@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@cypress/vite-dev-server/-/vite-dev-server-1.2.6.tgz#237604d8ab8a50a62ced6b12a1454db44c98614b"
+  integrity sha512-M1Uv3cVH8aQPLARY7ezTYevInryVw3NT1bhJDBqtnO2b6KPBXXUbIS8AmYptZxBUBM4z+eBcD8W2SQRVLYCw6g==
+  dependencies:
+    debug "^4.3.2"
+    get-port "^5.1.1"
+
+"@cypress/vue@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress/vue/-/vue-3.0.1.tgz#9899718dfb8608f98c343fe35a7cfc0a50376011"
+  integrity sha512-7aSdwbtvCJnKR7MDZdJs3TB718LNo44JXvIidrtcZacOSPXjahvkZ8nQCyLIt/owKBFFaV4dvSn267Lq4ZIbzQ==
+  dependencies:
+    "@vue/test-utils" "^2.0.0-rc.4"
+
 "@cypress/xvfb@^1.2.4":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
@@ -3430,7 +3445,7 @@
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.4.tgz#536175be968e7c5741e9c95f117024d5053ea54c"
   integrity sha512-DocrrFP28M7NO7y7iGiX9sf9n1AKEqkxXO5wedtp5FkHiAkc0xfmD4lvxgi4re5+xw7Zzb9U/vrhXKQZ0I4Q9g==
 
-"@vue/test-utils@^2.0.0-rc.6":
+"@vue/test-utils@^2.0.0-rc.4", "@vue/test-utils@^2.0.0-rc.6":
   version "2.0.0-rc.6"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.6.tgz#d0aac24d20450d379e183f70542c0822670b8783"
   integrity sha512-0cnQBVH589PwgqWpyv1fgCAz+9Ram/MsvN3ZEAEVXi1aPuhUa22EudGc0WezQ9PKwR+L40NrBmt3JBXE2tSRRQ==
@@ -7099,6 +7114,11 @@ get-port@^4.2.0:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
   integrity sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==
 
+get-port@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193"
+  integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==
+
 [email protected]:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"