feat: updated tests

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-07-12T10:47:00.309Z
+ * This file was generated on 2022-07-16T13:14:29.609Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -52,6 +52,10 @@ declare module "@vue/runtime-core" {
     CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]
     CAccordionItem: typeof import("@chakra-ui/vue-next")["CAccordionItem"]
     CAccordionPanel: typeof import("@chakra-ui/vue-next")["CAccordionPanel"]
+    CAlert: typeof import("@chakra-ui/vue-next")["CAlert"]
+    CAlertDescription: typeof import("@chakra-ui/vue-next")["CAlertDescription"]
+    CAlertIcon: typeof import("@chakra-ui/vue-next")["CAlertIcon"]
+    CAlertTitle: typeof import("@chakra-ui/vue-next")["CAlertTitle"]
     CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]
     CBreadcrumbItem: typeof import("@chakra-ui/vue-next")["CBreadcrumbItem"]
     CBreadcrumbLink: typeof import("@chakra-ui/vue-next")["CBreadcrumbLink"]
@@ -64,6 +68,7 @@ declare module "@vue/runtime-core" {
     CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]
     CFormLabel: typeof import("@chakra-ui/vue-next")["CFormLabel"]
     CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
+    CIcon: typeof import("@chakra-ui/vue-next")["CIcon"]
     CInput: typeof import("@chakra-ui/vue-next")["CInput"]
     CInputAddon: typeof import("@chakra-ui/vue-next")["CInputAddon"]
     CInputGroup: typeof import("@chakra-ui/vue-next")["CInputGroup"]

jest.config.js

@@ -10,6 +10,7 @@ module.exports = {
       },
     ],
   },
+  setupFiles: ["./jest.setup.ts"],
   transformIgnorePatterns: ["/node_modules/(?!@popperjs/.*|lodash.)"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",

jest.setup.ts

@@ -0,0 +1,13 @@
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+})

package.json

@@ -150,6 +150,7 @@
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
+    "motion": "^10.12.0",
     "object-assign": "^4.1.1",
     "prettier": "^2.1.2",
     "pretty": "^2.0.0",

packages/c-accordion/examples/allow-multiple.vue

@@ -4,17 +4,17 @@
       <c-accordion-item id="poop">
         <c-accordion-button>
           <c-v-stack align="flex-start" w="full">
-            <chakra.p font-weight="bold"> Watercraft </chakra.p>
+            <chakra.p font-weight="bold"> Chakra UI </chakra.p>
             <chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
           </c-v-stack>
-          <c-accordion-icon />
+          <c-accordion-icon element="c-accordion-item" />
         </c-accordion-button>
         <c-accordion-panel> Sample accordion content </c-accordion-panel>
       </c-accordion-item>
       <c-accordion-item>
         <c-accordion-button>
           <c-v-stack align="flex-start" w="full">
-            <chakra.p font-weight="bold"> Automobiles </chakra.p>
+            <chakra.p font-weight="bold"> Mirror World </chakra.p>
             <chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
           </c-v-stack>
           <c-accordion-icon />
@@ -24,7 +24,7 @@
       <c-accordion-item>
         <c-accordion-button>
           <c-v-stack align="flex-start" w="full">
-            <chakra.p font-weight="bold"> Aircrafts </chakra.p>
+            <chakra.p font-weight="bold"> Xtellar </chakra.p>
             <chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
           </c-v-stack>
           <c-accordion-icon />

packages/c-accordion/examples/simple-accordion.vue

@@ -39,10 +39,25 @@ import {
   CAccordionButton,
   CAccordionPanel,
 } from "@chakra-ui/c-accordion"
+import { useId, useIds } from "@chakra-ui/vue-composables"
+import { watchEffect } from "vue"
 
 const data = [
   { title: "Watercraft", content: "Sample accordion content" },
   { title: "Automobiles", content: "Sample accordion content" },
   { title: "Aircrafts", content: "Sample accordion content" },
 ]
+
+const id = useId()
+const idWithName = useId("with-name")
+const ids = useIds("accordion", "button", "panel", "item")
+
+watchEffect(() => {
+  console.log("id", id.value)
+  console.log("idWithName", idWithName.value)
+  console.log(
+    "ids",
+    ids.map((id) => id.value)
+  )
+})
 </script>

packages/c-accordion/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@chakra-ui/c-icon": "1.0.0-alpha.10",
+    "@chakra-ui/c-motion": "0.1.0-alpha.9",
     "@chakra-ui/utils": "^2.0.3",
     "@chakra-ui/vue-composables": "0.1.0-alpha.9",
     "@chakra-ui/vue-system": "0.1.0-alpha.10",