chore: cypress tests cleanup

Author: codebender828

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

@@ -19,7 +19,7 @@ it('contains the correct role', () => {
     .should('exist')
 })
 
-it.only('renders its children', () => {
+it('renders its children', () => {
   cy.mount(
     <CAlert data-testid="alert" variant="left-accent" status="info" mb="3">
       <CAlertIcon mr="2" />

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

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, PropType } from 'vue'
+import { computed, ComputedRef, defineComponent, h, PropType } from 'vue'
 import {
   SystemCSSProperties,
   SystemStyleObject,
@@ -34,9 +34,9 @@ const props = {
   ...vueThemingProps,
 }
 
-type ButtonGroupContext = () => ThemingProps & {
+type ButtonGroupContext = ComputedRef<ThemingProps & {
   isDisabled?: boolean
-}
+}>
 
 const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
   {
@@ -49,34 +49,36 @@ const CButtonGroup = defineComponent({
   name: 'CButtonGroup',
   props,
   setup(props, { attrs, slots }) {
-    ButtonGroupProvider(() => ({
+    ButtonGroupProvider(computed(() => ({
       size: props.size,
       colorScheme: props.colorScheme,
       variant: props.variant,
       isDisabled: props.isDisabled,
-    }))
-    return () => {
-      const styles = computed(() => {
-        let groupStyles: SystemStyleObject = {
-          display: 'inline-flex',
-        }
+    })))
 
-        if (props.isAttached) {
-          groupStyles = {
-            ...groupStyles,
-            '> *:first-of-type:not(:last-of-type)': { borderRightRadius: 0 },
-            '> *:not(:first-of-type):not(:last-of-type)': { borderRadius: 0 },
-            '> *:not(:first-of-type):last-of-type': { borderLeftRadius: 0 },
-          }
-        } else {
-          groupStyles = {
-            ...groupStyles,
-            '& > *:not(style) ~ *:not(style)': { marginLeft: props.spacing },
-          }
+    const styles = computed(() => {
+      let groupStyles: SystemStyleObject = {
+        display: 'inline-flex',
+      }
+
+      if (props.isAttached) {
+        groupStyles = {
+          ...groupStyles,
+          '> *:first-of-type:not(:last-of-type)': { borderRightRadius: 0 },
+          '> *:not(:first-of-type):not(:last-of-type)': { borderRadius: 0 },
+          '> *:not(:first-of-type):last-of-type': { borderLeftRadius: 0 },
+        }
+      } else {
+        groupStyles = {
+          ...groupStyles,
+          '& > *:not(style) ~ *:not(style)': { marginLeft: props.spacing },
         }
+      }
 
-        return groupStyles
-      })
+      return groupStyles
+    })
+    
+    return () => {
 
       return h(
         chakra('div', { label: 'button__group' }),

packages/c-button/src/button.ts

@@ -21,13 +21,14 @@ const CButtonSpinner = defineComponent({
     >,
   },
   setup(props, { attrs }) {
+    const spinnerStyles = computed<SystemStyleObject>(() => ({
+      display: 'flex',
+      alignItems: 'center',
+      position: props.label ? 'relative' : 'absolute',
+      marginEnd: props.label ? props.spacing : 0,
+    }))
+
     return () => {
-      const spinnerStyles = computed<SystemStyleObject>(() => ({
-        display: 'flex',
-        alignItems: 'center',
-        position: props.label ? 'relative' : 'absolute',
-        marginEnd: props.label ? props.spacing : 0,
-      }))
       return h(
         chakra('div', {
           label: 'button__spinner',
@@ -80,41 +81,42 @@ const CButton = defineComponent({
   name: 'CButton',
   props: BUTTON_PROPS,
   setup(props, { attrs, slots }) {
-    return () => {
-      const themingProps = computed<ThemingProps>(() =>
-        filterUndefined({
-          colorScheme: props.colorScheme,
-          variant: props.variant,
-          size: props.size,
-          styleConfig: props.styleConfig,
-        })
-      )
-
-      const group = useButtonGroup()
-      const styles = useStyleConfig('Button', {
-        ...group?.(),
-        ...themingProps.value,
+    const themingProps = computed<ThemingProps>(() =>
+      filterUndefined({
+        colorScheme: props.colorScheme,
+        variant: props.variant,
+        size: props.size,
+        styleConfig: props.styleConfig,
       })
+    )
 
-      const _focus = mergeWith({}, styles.value?.['_focus'] ?? {}, {
-        zIndex: 1,
-      })
+    const group = useButtonGroup()
+    const styles = useStyleConfig('Button', {
+      ...group.value,
+      ...themingProps.value,
+    })
+    
+    const _focus = computed(() => mergeWith({}, styles.value?.['_focus'] ?? {}, {
+      zIndex: 1,
+    }))
+
+    const buttonStyles = computed<SystemStyleObject>(() => ({
+      display: 'inline-flex',
+      appearance: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'all 250ms',
+      userSelect: 'none',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      outline: 'none',
+      width: props.isFullWidth ? '100%' : 'auto',
+      ...styles.value,
+      ...(!!group.value && { _focus: _focus.value }),
+    }))
 
-      const buttonStyles = computed<SystemStyleObject>(() => ({
-        display: 'inline-flex',
-        appearance: 'none',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'all 250ms',
-        userSelect: 'none',
-        position: 'relative',
-        whiteSpace: 'nowrap',
-        verticalAlign: 'middle',
-        outline: 'none',
-        width: props.isFullWidth ? '100%' : 'auto',
-        ...styles.value,
-        ...(!!group && { _focus }),
-      }))
+    return () => {
 
       return h(
         chakra(props.as, {

tests/support.tsx

@@ -4,12 +4,13 @@ import { mount as cyMount } from '@cypress/vue'
 import { feActivity } from 'feather-icons-paths'
 import { MotionPlugin } from '@vueuse/motion'
 import { h, Fragment, Component } from 'vue'
-
-import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'
+import Chakra, { chakra, extendTheme } from '@chakra-ui/vue-next'
 import { domElements } from '@chakra-ui/vue-system'
 import { CReset } from '@chakra-ui/c-reset'
 
 
+const theme = extendTheme({})
+
 declare global {
   namespace Cypress {
     interface cy extends Chainable {
@@ -44,9 +45,9 @@ const globalComponents = domElements.reduce((acc, tag) => {
 const plugins = [
   MotionPlugin,
   [
-    ChakraUIVuePlugin,
+    Chakra,
     {
-      // TODO: import icons from the same place that Playground does
+      extendTheme: theme,
       icons: {
         library: { feActivity },
       },
@@ -56,13 +57,14 @@ const plugins = [
 
 // @ts-ignore
 Cypress.Commands.add('mount', (MyComponent, options?) => {
-  // createApp root element
-  const rootComponent = () => (
-    <>
-      <MyComponent />
-      <CReset />
-    </>
-  )
+  const rootComponent = () => {
+    return (
+      <>
+        <MyComponent />
+        <CReset />
+      </>
+    )
+  }
 
   return cyMount(
     {