test(closebutton): add tests for closebutton

Author: codebender828

packages/c-close-button/examples/base-c-close-button.vue

@@ -1,3 +1,7 @@
 <template>
-  <c-close-button />
+  <c-close-button @click="handleClose" />
 </template>
+
+<script lang="ts" setup>
+const handleClose = () => console.log('closing modal')
+</script>

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

@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType } from 'vue'
+import { h, defineComponent, PropType, computed } from 'vue'
 import {
   chakra,
   DOMElements,
@@ -53,10 +53,12 @@ export const CCloseButton = defineComponent({
   },
   setup(props, { slots, attrs }) {
     return () => {
-      const themingProps = filterUndefined({
-        size: props.size,
-        styleConfig: props.styleConfig,
-      })
+      const themingProps = computed(() =>
+        filterUndefined({
+          size: props.size,
+          styleConfig: props.styleConfig,
+        })
+      )
 
       const baseStyles: SystemStyleObject = {
         outline: 0,
@@ -66,7 +68,7 @@ export const CCloseButton = defineComponent({
         flexShrink: 0,
       }
 
-      const styles = useStyleConfig('CloseButton', themingProps)
+      const styles = useStyleConfig('CloseButton', themingProps.value)
 
       return h(
         chakra(props.as, {

packages/c-close-button/tests/__snapshots__/c-close-button.test.ts.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <button
+    aria-label="Close"
+    class="chakra-icon-button css-fdaoze"
+    data-testid="closebutton"
+    type="button"
+  >
+    <svg
+      aria-hidden=""
+      class="chakra-icon css-13otjrl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      
+    
+      <g
+        stroke="currentColor"
+        strokewidth="1.5"
+      >
+        
+      
+        <path
+          d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+          fill="none"
+          strokelinecap="round"
+        />
+        
+      
+        <path
+          d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+          fill="currentColor"
+          strokelinecap="round"
+        />
+        
+      
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="11.25"
+          strokemiterlimit="10"
+        />
+        
+    
+      </g>
+      
+  
+    </svg>
+  </button>
+</DocumentFragment>
+`;

packages/c-close-button/tests/c-close-button.test.ts

@@ -1,7 +1,49 @@
-import { render } from '../../test-utils/src'
 import { CCloseButton } from '../src'
+import { render, userEvent, testA11y } from '../../test-utils/src'
+import { nextTick } from '@vue/runtime-core'
+
+const renderComponent = (props?: any) => {
+  const base = {
+    components: {
+      CCloseButton,
+    },
+    template: '<CCloseButton data-testid="closebutton" />',
+    ...props,
+  }
+  return render(base)
+}
+
+it('should have no a11y violations', async () => {
+  await testA11y(renderComponent())
+})
 
 it('should render properly', () => {
-  const { asFragment } = render(CCloseButton)
+  const { asFragment } = renderComponent()
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should be in the DOM', () => {
+  const { getByTestId } = renderComponent()
+  expect(getByTestId('closebutton')).toBeInTheDocument()
+})
+
+it('should have correct aria-label attribute', () => {
+  const { getByTestId } = renderComponent()
+  expect(getByTestId('closebutton')).toHaveAttribute('aria-label', 'Close')
+})
+
+it('should emit click event on click', async () => {
+  const handleClick = jest.fn()
+  const { getByTestId } = renderComponent({
+    template: '<c-icon-button data-testid="close" @click="handleClick" />',
+    setup() {
+      return {
+        handleClick,
+      }
+    },
+  })
+
+  await userEvent.click(getByTestId('close'))
+  await nextTick()
+  expect(handleClick).toHaveBeenCalled()
+})