test(input): add tests for input components

Author: codebender828

.eslintrc.yml

@@ -15,7 +15,7 @@ parserOptions:
   sourceType: module
 plugins:
   - '@typescript-eslint'
-rules: 
+rules:
   '@typescript-eslint/member-delimiter-style':
     - error
     - multiline:

.prettierrc.yml

@@ -1,5 +1,5 @@
 # .prettierrc or .prettierrc.yaml
-trailingComma: "es5"
+trailingComma: 'es5'
 tabWidth: 2
 semi: false
-singleQuote: true
+singleQuote: false

components.d.ts

@@ -1,11 +1,11 @@
-import App from './App.vue'
-import viteSSR from 'vite-ssr'
-import { createHead } from '@vueuse/head'
-import routes from 'virtual:generated-pages'
-import Chakra, { chakra } from '@chakra-ui/vue-next'
-import { hydrate } from '@emotion/css'
-import { domElements } from '@chakra-ui/vue-system'
-import { extractCritical } from '@emotion/server'
+import App from "./App.vue"
+import viteSSR from "vite-ssr"
+import { createHead } from "@vueuse/head"
+import routes from "virtual:generated-pages"
+import Chakra, { chakra } from "@chakra-ui/vue-next"
+import { hydrate } from "@emotion/css"
+import { domElements } from "@chakra-ui/vue-system"
+import { extractCritical } from "@emotion/server"
 
 /**
  *
@@ -16,12 +16,12 @@ import { extractCritical } from '@emotion/server'
 const injectCritical = (html: string, ids: string[], css: string) =>
   html
     .replace(
-      '</title>\n',
+      "</title>\n",
       `</title>\n<script>window.$emotionSSRIds=${JSON.stringify(
         ids
       )}</script>\n`
     )
-    .replace('</head>\n', `<style>${css}</style>\n</head>\n`)
+    .replace("</head>\n", `<style>${css}</style>\n</head>\n`)
 
 export default viteSSR(App, { routes }, ({ app, isClient }) => {
   /* custom logic */

examples/vue-ssr/src/main.ts

@@ -1,11 +1,11 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
   const component: DefineComponent<{}, {}, any>
   export default component
 }
 
-declare module 'virtual:generated-pages' {
-  import { RouteRecordRaw } from 'vue-router'
+declare module "virtual:generated-pages" {
+  import { RouteRecordRaw } from "vue-router"
   const routes: RouteRecordRaw[]
   export default routes
 }

examples/vue-ssr/src/shims-vue.d.ts

@@ -1,18 +1,18 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import viteSSR from 'vite-ssr/plugin.js'
-import Pages from 'vite-plugin-pages'
-import Components from 'unplugin-vue-components'
-import { componentResolver } from '@chakra-ui/vue-auto-import'
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import viteSSR from "vite-ssr/plugin.js"
+import Pages from "vite-plugin-pages"
+import Components from "unplugin-vue-components"
+import { componentResolver } from "@chakra-ui/vue-auto-import"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     viteSSR(),
     Pages({
-      pagesDir: 'src/pages',
-      extensions: ['vue', 'ts', 'tsx'],
+      pagesDir: "src/pages",
+      extensions: ["vue", "ts", "tsx"],
     }),
     Components({
       customComponentResolvers: [componentResolver],

examples/vue-ssr/vite.config.ts

@@ -150,9 +150,9 @@
     "tinycolor2": "^1.4.2",
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
-    "typescript": "^4.4.3",
+    "typescript": "^4.5.4",
     "unplugin-vue-components": "^0.14.0",
-    "vite": "^2.7.1",
+    "vite": "^2.7.4",
     "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.18.2",
     "vite-plugin-vue-layouts": "^0.3.1",

package.json

@@ -1 +1 @@
-export * from './src'
+export * from "./src"

packages/c-accordion/index.ts

@@ -1,16 +1,16 @@
-import { h, defineComponent, PropType } from 'vue'
-import { chakra, DOMElements } from '@chakra-ui/vue-system'
+import { h, defineComponent, PropType } from "vue"
+import { chakra, DOMElements } from "@chakra-ui/vue-system"
 
 const CAccordion = defineComponent({
   props: {
     as: {
       type: [String] as PropType<DOMElements>,
-      default: 'div',
+      default: "div",
     },
   },
   setup(props, { slots, attrs }) {
     return () =>
-      h(chakra(props.as, { label: 'accordion' }), { ...attrs }, slots)
+      h(chakra(props.as, { label: "accordion" }), { ...attrs }, slots)
   },
 })
 

packages/c-accordion/src/index.ts

@@ -1,6 +1,6 @@
-import CAccordion from '../src'
-import { h } from 'vue'
+import CAccordion from "../src"
+import { h } from "vue"
 
-it('should render properly', () => {
+it("should render properly", () => {
   cy.mount(<CAccordion></CAccordion>)
 })

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

@@ -1,5 +1,5 @@
-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 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"

packages/c-alert/examples/index.ts

@@ -1 +1 @@
-export * from './src'
+export * from "./src"

packages/c-alert/index.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType, computed, ComputedRef } from 'vue'
+import { h, defineComponent, PropType, computed, ComputedRef } from "vue"
 import {
   chakra,
   ThemingProps,
@@ -7,40 +7,40 @@ import {
   StylesProvider,
   DOMElements,
   SystemStyleObject,
-} from '@chakra-ui/vue-system'
-import { createContext } from '@chakra-ui/vue-utils'
-import { CIcon } from '@chakra-ui/c-icon'
+} from "@chakra-ui/vue-system"
+import { createContext } from "@chakra-ui/vue-utils"
+import { CIcon } from "@chakra-ui/c-icon"
 
 const STATUSES = {
   info: {
-    colorScheme: 'blue',
-    icon: 'info',
+    colorScheme: "blue",
+    icon: "info",
   },
   success: {
-    colorScheme: 'green',
-    icon: 'check-circle',
+    colorScheme: "green",
+    icon: "check-circle",
   },
   warning: {
-    colorScheme: 'orange',
-    icon: 'warning-alt',
+    colorScheme: "orange",
+    icon: "warning-alt",
   },
   error: {
-    colorScheme: 'red',
-    icon: 'warning',
+    colorScheme: "red",
+    icon: "warning",
   },
 }
 
 type AlertStatus = keyof typeof STATUSES
-export type AlertVariant = 'solid' | 'subtle' | 'left-accent' | 'top-accent'
+export type AlertVariant = "solid" | "subtle" | "left-accent" | "top-accent"
 
 interface AlertContext {
   status: ComputedRef<AlertStatus>
 }
 
 const [AlertProvider, useAlertContext] = createContext<AlertContext>({
-  name: 'AlertContext',
+  name: "AlertContext",
   errorMessage:
-    'useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<c-alert />`',
+    "useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<c-alert />`",
 })
 
 /**
@@ -50,15 +50,15 @@ const [AlertProvider, useAlertContext] = createContext<AlertContext>({
  * It also provides state and context to it's compound components
  */
 export const CAlert = defineComponent({
-  name: 'CAlert',
+  name: "CAlert",
   props: {
     as: {
       type: [String, Object] as PropType<DOMElements>,
-      default: 'div',
+      default: "div",
     },
     status: {
       type: [String] as PropType<AlertStatus>,
-      default: 'info',
+      default: "info",
     },
     colorScheme: {
       type: [String] as PropType<string>,
@@ -68,7 +68,7 @@ export const CAlert = defineComponent({
     },
     variant: {
       type: [String] as PropType<AlertVariant>,
-      default: 'solid',
+      default: "solid",
     },
   },
   setup(props, { slots, attrs }) {
@@ -82,23 +82,23 @@ export const CAlert = defineComponent({
     }))
 
     AlertProvider({ status: computed(() => props.status) })
-    const styles = useMultiStyleConfig('Alert', themingProps.value)
+    const styles = useMultiStyleConfig("Alert", themingProps.value)
     StylesProvider(styles)
 
     const alertStyles = computed<SystemStyleObject>(() => ({
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      position: 'relative',
-      overflow: 'hidden',
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      overflow: "hidden",
       ...styles.value.container,
     }))
 
     return () => {
       return h(
-        chakra(props.as, { label: 'alert' }),
+        chakra(props.as, { label: "alert" }),
         {
-          role: 'alert',
+          role: "alert",
           ...alertStyles.value,
           ...attrs,
         },
@@ -114,13 +114,13 @@ export const CAlert = defineComponent({
  * The title component for alerts
  */
 export const CAlertTitle = defineComponent({
-  name: 'CAlertTitle',
+  name: "CAlertTitle",
   setup(_, { attrs, slots }) {
     return () => {
       const styles = useStyles()
 
       return h(
-        chakra('div', { label: 'alert__title' }),
+        chakra("div", { label: "alert__title" }),
         {
           ...styles.value.title,
           ...attrs,
@@ -137,12 +137,12 @@ export const CAlertTitle = defineComponent({
  * The description component for alerts
  */
 export const CAlertDescription = defineComponent({
-  name: 'CAlertDescription',
+  name: "CAlertDescription",
   setup(_, { attrs, slots }) {
     const styles = useStyles()
     return () => {
       return h(
-        chakra('div', { label: 'alert__description' }),
+        chakra("div", { label: "alert__description" }),
         {
           ...styles.value.description,
           ...attrs,
@@ -159,7 +159,7 @@ export const CAlertDescription = defineComponent({
  * The Icon component for alerts
  */
 export const CAlertIcon = defineComponent({
-  name: 'CAlertIcon',
+  name: "CAlertIcon",
   props: {
     icon: {
       type: [String] as PropType<string>,
@@ -173,7 +173,7 @@ export const CAlertIcon = defineComponent({
 
     return () => {
       return h(CIcon, {
-        class: 'alert__icon',
+        class: "alert__icon",
         name: alertIcon.value,
         ...styles.value.icon,
         ...attrs,

packages/c-alert/src/alert.ts

@@ -1 +1 @@
-export * from './alert'
+export * from "./alert"

packages/c-alert/src/index.ts

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

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

@@ -1 +1 @@
-export * as SimpleBreadcrumb from './simple-breadcrumb.vue'
+export * as SimpleBreadcrumb from "./simple-breadcrumb.vue"

packages/c-breadcrumb/examples/index.tsx

@@ -1 +1 @@
-export * from './src'
+export * from "./src"