test(modal): add cypress tests for modal

Author: codebender828

.DS_Store

@@ -4,4 +4,5 @@ dist
 # At the time of writing this, I could not find any helpful
 # documentation for adding ESLint for Vue 3 projects running on Vite.
 # For this reason, we ignore the playground directory.
-playground
+playground
+snapshots.js

.eslintignore

@@ -8,8 +8,7 @@
   "workspaces": [
     "packages/*",
     "tooling/*",
-    "website",
-    "tests"
+    "website"
   ],
   "scripts": {
     "pkg": "manypkg run",
@@ -71,10 +70,10 @@
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
+    "@vueuse/core": "4.9.1",
     "@vueuse/integrations": "^4.8.1",
     "@vueuse/motion": "^1.5.4",
     "aria-hidden": "^1.1.2",
-    "@vueuse/core": "4.9.1",
     "axe-core": "^4.1.2",
     "babel-jest": "^26.6.3",
     "body-scroll-lock": "^3.1.5",
@@ -133,8 +132,11 @@
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@cypress/snapshot": "^2.1.7",
     "@cypress/vite-dev-server": "^1.2.6",
-    "@cypress/vue": "^3.0.1",
+    "@cypress/vue": "^3",
     "@vue/test-utils": "^2.0.0-rc.6",
-    "cypress": "^7.2.0"
+    "cypress": "^7.2.0",
+    "cypress-commands": "^1.1.0",
+    "cypress-plugin-tab": "^1.0.5",
+    "local-cypress": "^1.2.1"
   }
 }

package.json

@@ -2,4 +2,4 @@ export * as BaseAlert from './base-alert.vue'
 export * as WithAccent from './with-accent.vue'
 export * as WithIcon from './with-icon.vue'
 export * as WithStatus from './with-status.vue'
-export * as WithTitle from './with-title.vue'
+export * as WithTitle from './with-title.vue'

packages/c-alert/examples/index.ts

@@ -5,27 +5,24 @@ import { CAlert, CAlertDescription, CAlertIcon, CAlertTitle } from '../src'
 describe('Alert Examples', () => {
   Object.entries(Examples).map(([name, example]) => {
     it(`renders ${name} successfully`, () => {
-      cy.mount(example.default)
-      .then(() => {})
-      .checkA11y()
+      cy.mount(h(() => <example.default></example.default>)).checkA11y()
     })
   })
 })
 
 it('contains the correct role', () => {
-  cy.mount(Examples.BaseAlert.default)
-    .then(() => {})
-    .get('[role=alert]')
-    .should('exist')
+  cy.mount(Examples.BaseAlert.default).get('[role=alert]').should('exist')
 })
 
 it('renders its children', () => {
   cy.mount(
-    <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
-      <CAlertIcon mr="2" />
-      <CAlertTitle> Info alert </CAlertTitle>
-      <CAlertDescription> Something just happened </CAlertDescription>
-    </CAlert>
+    h(() => (
+      <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
+        <CAlertIcon mr="2" />
+        <CAlertTitle> Info alert </CAlertTitle>
+        <CAlertDescription> Something just happened </CAlertDescription>
+      </CAlert>
+    ))
   )
     .get('[data-testid=alert]')
     .should('contain', 'Info alert')

packages/c-alert/tests/c-alert.cy.tsx

@@ -1 +1 @@
-export * as WithButtonGroup from './with-button-group.vue'
+export * as WithButtonGroup from './with-button-group.vue'

packages/c-button/examples/button-group.ts

@@ -4,4 +4,4 @@ export * as WithAttachedButtons from './with-attached-buttons.vue'
 export * as WithButtonSize from '../examples/with-button-size.vue'
 export * as WithButtonIcon from '../examples/with-button-icon.vue'
 export * as WithButtonVariants from '../examples/with-button-variants.vue'
-export * as WithLoadingStatus from '../examples/with-loading-status.vue'
+export * as WithLoadingStatus from '../examples/with-loading-status.vue'

packages/c-button/examples/button.ts

@@ -1,2 +1,2 @@
 export * as Button from './button'
-export * as ButtonGroup from './button-group'
+export * as ButtonGroup from './button-group'

packages/c-button/examples/index.ts

@@ -34,9 +34,11 @@ const props = {
   ...vueThemingProps,
 }
 
-type ButtonGroupContext = ComputedRef<ThemingProps & {
-  isDisabled?: boolean
-}>
+type ButtonGroupContext = ComputedRef<
+  ThemingProps & {
+    isDisabled?: boolean
+  }
+>
 
 const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
   {
@@ -49,12 +51,14 @@ const CButtonGroup = defineComponent({
   name: 'CButtonGroup',
   props,
   setup(props, { attrs, slots }) {
-    ButtonGroupProvider(computed(() => ({
-      size: props.size,
-      colorScheme: props.colorScheme,
-      variant: props.variant,
-      isDisabled: props.isDisabled,
-    })))
+    ButtonGroupProvider(
+      computed(() => ({
+        size: props.size,
+        colorScheme: props.colorScheme,
+        variant: props.variant,
+        isDisabled: props.isDisabled,
+      }))
+    )
 
     const styles = computed(() => {
       let groupStyles: SystemStyleObject = {
@@ -77,9 +81,8 @@ const CButtonGroup = defineComponent({
 
       return groupStyles
     })
-    
-    return () => {
 
+    return () => {
       return h(
         chakra('div', { label: 'button__group' }),
         {

packages/c-button/src/button-group.ts

@@ -91,13 +91,15 @@ const CButton = defineComponent({
 
     const group = useButtonGroup()
     const styles = useStyleConfig('Button', {
-      ...group.value,
+      ...group?.value,
       ...themingProps.value,
     })
-    
-    const _focus = computed(() => mergeWith({}, styles.value?.['_focus'] ?? {}, {
-      zIndex: 1,
-    }))
+
+    const _focus = computed(() =>
+      mergeWith({}, styles.value?.['_focus'] ?? {}, {
+        zIndex: 1,
+      })
+    )
 
     const buttonStyles = computed<SystemStyleObject>(() => ({
       display: 'inline-flex',
@@ -112,11 +114,10 @@ const CButton = defineComponent({
       outline: 'none',
       width: props.isFullWidth ? '100%' : 'auto',
       ...styles.value,
-      ...(!!group.value && { _focus: _focus.value }),
+      ...(!!group?.value && { _focus: _focus.value }),
     }))
 
     return () => {
-
       return h(
         chakra(props.as, {
           label: 'button',