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',

packages/c-button/src/button.ts

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

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

@@ -5,4 +5,4 @@ Object.entries(Button).map(([name, example]) => {
   it(`renders ${name} successfully`, () => {
     cy.mount(example.default).checkA11y()
   })
-})
+})

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

@@ -4,4 +4,4 @@
 // export * as SubtleBadges from './subtle-badges.vue'
 
 export * as BaseCode from './base-code.vue'
-export * as WithColor from './with-color.vue'
+export * as WithColor from './with-color.vue'

packages/c-code/examples/index.ts

@@ -1,2 +1,2 @@
 export * as BaseFlex from './base-flex.vue'
-export * as DirectionFlex from './direction-flex.vue'
+export * as DirectionFlex from './direction-flex.vue'

packages/c-flex/examples/index.ts

@@ -1,4 +1,4 @@
 export * as BaseIcon from './base-icon.vue'
 export * as WithColor from './with-color.vue'
 export * as WithIconLibrary from './with-icon-library.vue'
-export * as WithSize from './with-size.vue'
+export * as WithSize from './with-size.vue'

packages/c-icon/examples/index.ts

@@ -0,0 +1,43 @@
+<template>
+  <chakra.div
+    d="flex"
+    justify-content="center"
+    align-items="center"
+    h="full"
+    w="100%"
+  >
+    <c-button
+      color-scheme="blue"
+      data-testid="open-modal"
+      @click="isOpen = true"
+      >Open modal</c-button
+    >
+    <!-- eslint-disable-next-line -->
+    <c-modal v-model="isOpen">
+      <c-modal-overlay />
+      <c-modal-content>
+        <c-modal-header>Modal header</c-modal-header>
+        <c-modal-close-button data-testid="close-button" />
+        <c-modal-body>
+          <chakra.p>
+            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
+            ullamco deserunt aute id consequat veniam incididunt duis in sint
+            irure nisi.
+          </chakra.p>
+        </c-modal-body>
+
+        <c-modal-footer>
+          <c-button @click="isOpen = false" mr="3"> Close </c-button>
+          <c-button id="initialFocus" ref="initialFocus"
+            >Secondary action</c-button
+          >
+        </c-modal-footer>
+      </c-modal-content>
+    </c-modal>
+  </chakra.div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const isOpen = ref(false)
+</script>

packages/c-modal/examples/return-focus-on-close.vue

@@ -6,14 +6,21 @@
     h="full"
     w="100%"
   >
-    <c-button color-scheme="blue" @click="isOpen = true">Open modal</c-button>
-    <c-button ref="finalFocus" ml="3">Other button</c-button>
+    <c-button
+      color-scheme="blue"
+      data-testid="open-modal"
+      @click="isOpen = true"
+      >Open modal</c-button
+    >
+    <c-button ref="finalFocus" data-testid="final-focus" ml="3"
+      >Other button</c-button
+    >
     <!-- eslint-disable-next-line -->
     <c-modal v-model="isOpen" :initial-focus-ref="'#initialFocus'" :blockScrollOnMount="false" :final-focus-ref="() => $refs.finalFocus">
       <c-modal-overlay />
       <c-modal-content>
         <c-modal-header>Modal header</c-modal-header>
-        <c-modal-close-button />
+        <c-modal-close-button data-testid="close-button" />
         <c-modal-body>
           <chakra.p>
             Sit nulla est ex deserunt exercitation anim occaecat. Nostrud

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

@@ -38,6 +38,7 @@ import { CCloseButton } from '@chakra-ui/c-close-button'
 import { MotionDirective, useMotions } from '@vueuse/motion'
 import { useModal, UseModalOptions, UseModalReturn } from './use-modal'
 import { DialogMotionPreset, dialogMotionPresets } from './modal-transitions'
+import { useId } from '@chakra-ui/vue-composables'
 
 type ScrollBehavior = 'inside' | 'outside'
 
@@ -203,14 +204,16 @@ export const CModal = defineComponent({
       default: 'slideInBottom',
     },
   },
-  emits: ['update:modelValue', 'escape', 'close'],
+  emits: ['update:modelValue', 'escape', 'closeModal'],
   setup(props, { slots, attrs, emit }) {
     const closeModal = () => {
+      emit('closeModal', false)
       emit('update:modelValue', false)
     }
 
     const handleEscape = (event: KeyboardEvent) => {
       emit('escape', event)
+      emit('closeModal', false)
     }
 
     const styles = useMultiStyleConfig('Modal', mergeProps(props, attrs))
@@ -256,12 +259,12 @@ export const CModalContent = defineComponent({
       motionPreset,
     } = unref(useModalContext())
     const styles = useStyles()
-    const transitionId = 'modal-content'
+    const transitionId = useId('modal-content')
 
     /** Handles exit transition */
     const leave = (done: VoidFunction) => {
       const motions = useMotions()
-      const instance = motions[transitionId]
+      const instance = motions[transitionId.value]
       instance?.leave(() => {
         done()
       })

packages/c-modal/src/c-modal.ts

@@ -244,7 +244,6 @@ export function useModal(options: UseModalOptions) {
   }
 
   const onKeyDown = (event: KeyboardEvent) => {
-    console.log('onKeyDown', event)
     if (event.key === 'Escape') {
       event.stopPropagation()
 
@@ -262,14 +261,14 @@ export function useModal(options: UseModalOptions) {
       ref: overlayRef as any,
       onClick: (event: MouseEvent) => {
         instance?.emit('update:modelValue', !modelValue.value)
-        instance?.emit('close')
+        instance?.emit('closeModal')
         handleOverlayClick(event)
       },
-      onKeyDown: (event: KeyboardEvent) => {
+      onKeydown: (event: KeyboardEvent) => {
         emit('keydown', event)
         onKeyDown(event)
       },
-      onMouseDown: (event: MouseEvent) => {
+      onMousedown: (event: MouseEvent) => {
         mouseDownTarget.value = event.target
         emit('mousedown', event)
       },