test: add tests for mode function

Author: codebender828

.storybook/config.js

@@ -29,8 +29,18 @@ import {
   feSend,
   feServer
 } from 'feather-icons-paths'
+import { mode } from '../packages/chakra-ui-core/src/utils/color-mode-observer';
 
 Vue.use(Chakra, {
+  extendTheme: {
+    baseStyle: {
+      CButton: ({ colorMode, theme }) => ({
+        bg: mode('tomato', 'hotpink'),
+        borderRadius: "lg",
+        shadow: 'xl'
+      })
+    }
+  },
   icons: {
     iconSet: {
       feAnchor,
@@ -60,7 +70,7 @@ Vue.use(Chakra, {
         path: `<path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" fa-key="3" fill="currentColor"></path>`,
         viewBox: '0 0 496 512'
       }
-    }
+    },
   }
 })
 

packages/chakra-ui-core/src/utils/__snapshots__/color-mode-observer.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`colorModeObserver \`colorModeObserver\` should provide and observe values 1`] = `
+Object {
+  "baseStyle": Object {
+    "CButton": Object {
+      "bg": "success",
+      "borderRadius": "200px",
+      "shadow": "inner",
+    },
+  },
+  "colors": Object {
+    "info": "#0000FF",
+  },
+  "shadows": Object {
+    "inner": "inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)",
+    "outline": "0 0 0 3px rgba(66, 153, 225, 0.6)",
+  },
+}
+`;

packages/chakra-ui-core/src/utils/color-mode-observer.js

@@ -1,11 +1,26 @@
 import Vue from 'vue'
 
+export const defineColorModeObserver = ({ colorMode, theme, icons } = {}) => Vue.observable({
+  colorMode,
+  theme,
+  icons
+})
+
+
 /**
  * This observed store object observed the colorMode and stores it in an
- * oberved object that other components can consume.
+ * observed object that other components can consume.
  */
-export const colorModeObserver = Vue.observable({
-  colorMode: undefined,
-  theme: undefined,
-  icons: undefined
-})
+export const colorModeObserver = defineColorModeObserver()
+
+/**
+ * Utility function that returns a value based on the colorMode
+ * @param {string | number | Array<string | number>} lightValue Value when colorMode is `light`
+ * @param {string | number | Array<string | number>} darkValue Value when colorMode is `dark`
+ * @param {import('Vue').ComponentOptions<Vue, { colorMode: 'light' | 'dark', theme: any, icons: any }>} observer Value when colorMode is `dark`
+ * @return {string | number | Array<string | number>}
+ */
+export const mode = (lightValue, darkValue, observer) => {
+  const { colorMode } = observer || colorModeObserver
+  return colorMode === 'dark' ? darkValue : lightValue
+}

packages/chakra-ui-core/src/utils/color-mode-observer.test.js

@@ -0,0 +1,63 @@
+import { mode, defineColorModeObserver } from './color-mode-observer'
+
+
+describe('colorModeObserver', () => {
+  it('`colorModeObserver` should provide and observe values', () => {
+    const baseTheme = {
+      colors: {
+        success: '#3ea76a',
+        warning: '#ffc61a',
+        error: '#dd3b4b'
+      },
+      shadows: {
+        outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
+        inner: 'inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)'
+      },
+      baseStyle: {
+        CButton: {
+          bg: 'success',
+          borderRadius: '200px',
+          shadow: 'inner'
+        }
+      }
+    }
+
+    const observer = defineColorModeObserver()
+
+    observer.theme = baseTheme
+    observer.colorMode = 'light'
+    expect(observer.theme).toEqual(baseTheme)
+    expect(observer.colorMode).toEqual('light')
+
+    // Mutate `colorMode`
+    observer.colorMode = 'dark'
+    const readColorMode = observer.colorMode
+    expect(readColorMode).toBe('dark')
+    expect(readColorMode).toEqual(observer.colorMode)
+
+    // Mutate `theme`
+    const newTheme = Object.assign(baseTheme, {
+      colors: {
+        info: '#0000FF'
+      }
+    })
+    observer.theme = newTheme
+    const readTheme = observer.theme
+    expect(readTheme).toMatchObject(newTheme)
+    expect(readTheme).toMatchSnapshot()
+  })
+
+  it('`mode` function should return current colorMode value', () => {
+    const observer = defineColorModeObserver({
+      colorMode: 'dark'
+    })
+
+    const bg = mode('red', 'blue', observer)
+    expect(bg).toBe('blue')
+    observer.colorMode = 'light'
+
+    // We invoke as a function since we are in a non-reactive context
+    const _bg = mode('red', 'blue', observer)
+    expect(_bg).toBe('red')
+  })
+})

packages/chakra-ui-core/src/utils/components.js

@@ -61,29 +61,28 @@ export const createStyledAttrsMixin = name => ({
     /** Split style attributes and native attributes */
     splitProps () {
       const $attrs = this.$data.attrs$
-      const styles = Object.assign({}, this.componentStyles || {}, $attrs)
+      const { styleAttrs, nativeAttrs } = extractChakraAttrs($attrs)
 
-      const { styleAttrs, nativeAttrs } = extractChakraAttrs(styles)
       return {
         styleAttrs,
         nativeAttrs
       }
     },
     baseStyle () {
-      const { nativeAttrs } = this.splitProps
-      const styleObjectOrFn = __get(this.theme, `baseStyle.${name}`)
-      return (
-        runIfFn(styleObjectOrFn, {
+      const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyle.${name}`)
+      return componentBaseStyleObjectOrFunction ? (
+        runIfFn(componentBaseStyleObjectOrFunction, {
           theme: this.theme,
-          colorMode: this.colorMode,
-          ...nativeAttrs
-        }) || {}
-      )
+          colorMode: this.colorMode
+        })
+      ) : {}
     },
     className () {
       const { styleAttrs } = this.splitProps
+
       const boxStylesObject = composeSystem(
         {
+          ...this.componentStyles || {},
           ...this.baseStyle,
           ...styleAttrs
         },