test(cypress): testing workflow in ci

Author: codebender828

CONTRIBUTING.md

@@ -235,16 +235,19 @@ with [Jest](), which is mostly used for black-box testing.
 
 #### Testing with Cypress
 
-1. Create your `<COMPONENT>.cy.tsx` file in the `packages/<COMPONENT>/tests/`
-   directory; where `<COMPONENT>` is the name of the component you are testing.
+1. Create your `<COMPONENT>.cy.tsx` file in the
+   `packages/<COMPONENT>/tests/component/` directory; where `<COMPONENT>` is the
+   name of the component you are testing. **Please take note that the Cypress
+   tests are to be put under the `tests/component/**` directory. This is to
+   prevent type conflicts between Jest and Cypress globals.
 2. Add the Cypress type references at the top of the file as shown in the
    example below. This will allow typescript to correctly reference the Cypress
    globals.
 
 ```tsx
-/// <reference types="../../../@types/cypress" />
+/// <reference types="../../../../@types/cypress" />
 
-import { MyComponent } from "../src/my-component"
+import { MyComponent } from "../../src/my-component"
 
 it("<MyComponent /> is accessible", () => {
   cy.mount(() => <MyComponent>Hello World</MyComponent>)

cypress.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "cypress"
 
 export default defineConfig({
+  projectId: 'rb8e7m',
   video: false,
   fixturesFolder: false,
   reporter: "spec",

cypress/support/commands.ts

@@ -4,6 +4,7 @@
  * This file should be replaced with cypress-axe
  * once that package becomes esm-compatible
  */
+// @ts-ignore
 import axeCore from "axe-core"
 
 axeCore.configure({

cypress/tsconfig.json

@@ -1,8 +1,9 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["node"]
   },
   "include": ["**/*.ts", "**/*.cy.tsx", "support/types.ts"]
 }

packages/c-accordion/tests/c-accordion.cy.tsx renamed to packages/c-accordion/tests/component/c-accordion.cy.tsx

@@ -1,6 +1,6 @@
-/// <reference types="../../../@types/cypress" />
+/// <reference types="../../../../@types/cypress" />
 
-import { CAccordion } from "../src"
+import { CAccordion } from "../../src"
 import { h } from "vue"
 
 it("should render properly", () => {

packages/c-alert/tests/c-alert.cy.tsx renamed to packages/c-alert/tests/component/c-alert.cy.tsx

@@ -1,8 +1,8 @@
-/// <reference types="../../../@types/cypress" />
+/// <reference types="../../../../@types/cypress" />
 
-import * as Examples from "../examples"
+import * as Examples from "../../examples"
 import { h } from "vue"
-import { CAlert, CAlertDescription, CAlertIcon, CAlertTitle } from "../src"
+import { CAlert, CAlertDescription, CAlertIcon, CAlertTitle } from "../../src"
 
 describe("Alert Examples", () => {
   Object.entries(Examples).map(([name, example]) => {

packages/c-avatar/tests/c-avatar-badge.test.ts

@@ -1,4 +1,4 @@
-import { render, waitMs } from "../../test-utils/src"
+import { render, waitMs } from "@chakra-ui/vue-test-utils"
 import { CAvatar, CAvatarBadge, avatarProps } from "../src"
 
 const renderAvatar = (props?: any) => {

packages/c-avatar/tests/c-avatar-group.test.ts

@@ -1,4 +1,4 @@
-import { render } from "../../test-utils/src"
+import { render } from "@chakra-ui/vue-test-utils"
 import { CAvatar, CAvatarGroup, avatarGroupProps } from "../src"
 
 interface AvatarOptions {

packages/c-avatar/tests/c-avatar.test.ts

@@ -1,4 +1,4 @@
-import { render, waitMs } from "../../test-utils/src"
+import { render, waitMs } from "@chakra-ui/vue-test-utils"
 import { CAvatar, avatarProps } from "../src"
 
 const renderAvatar = (props?: any) => {

packages/c-avatar/tests/c-avatar.cy.tsx renamed to packages/c-avatar/tests/component/c-avatar.cy.tsx

@@ -1,8 +1,8 @@
-/// <reference types="../../../@types/cypress" />
+/// <reference types="../../../../@types/cypress" />
 import { h, ref } from "vue"
 
-import { CAvatar } from "../src"
-import * as Examples from "../examples"
+import { CAvatar } from "../../src"
+import * as Examples from "../../examples"
 
 describe("CAvatar", () => {
   it("has no accessibility violation", () => {
@@ -15,13 +15,11 @@ describe("CAvatar", () => {
 
   it("renders with default svg", () => {
     cy.mount(() => h(CAvatar))
-
     cy.get("svg")
   })
 
   it("render initials by default when name is specified", () => {
     cy.mount(() => h(() => <CAvatar name="Hello World" />))
-
     cy.contains("HW")
   })
 
@@ -36,18 +34,11 @@ describe("CAvatar", () => {
     )
 
     cy.contains("HW")
-
     cy.get("img:visible")
   })
 
   it("renders default svg when name is not specified", () => {
-    cy.mount(() =>
-      h(() => (
-        <CAvatar src="https://avatars.githubusercontent.com/u/21237954?v=4" />
-      ))
-    )
-
+    cy.mount(() => h(() => <CAvatar />))
     cy.get("svg")
-    cy.get("img:visible")
   })
 })