test(plugin-ring): test pass

packages/fower-plugin-ring/src/index.test.ts

@@ -1,21 +1,88 @@
+import { setConfig } from '@fower/core'
+import { store } from '@fower/store'
 import { Parser } from '@fower/parser'
+import { presetWeb } from '@fower/preset-web'
 import { Atom } from '@fower/atom'
 import plugin from '.'
 
+setConfig(presetWeb)
+
+const { colors } = store.config.theme
 const { isMatch, handleAtom } = plugin()
-const parser = {} as Parser
+const parser = new Parser({})
 
 test('isMatch', () => {
-  expect(isMatch!('scale')).toEqual(true)
+  expect(isMatch!('ring')).toEqual(true)
+  expect(isMatch!('ring-1')).toEqual(true)
+  expect(isMatch!('ring-2')).toEqual(true)
+  expect(isMatch!('ringRed100-1')).toEqual(true)
+  expect(isMatch!('ringRed100-2')).toEqual(true)
+})
+
+test('ring', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'ring',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.boxShadow).toEqual(`0 0 0 1px ${colors.brand500}`)
 })
 
-test('scale', () => {
+test('ring-1', () => {
   const atom = handleAtom!(
     new Atom({
-      propKey: 'scale',
-      propValue: '120',
+      propKey: 'ring-1',
+      propValue: true,
     }),
     parser,
   )
-  expect(atom.style).toBeFalsy()
+  expect(atom.style.boxShadow).toEqual(`0 0 0 1px ${colors.brand500}`)
+})
+
+test('ringRed100-1', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'ringRed100-1',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.boxShadow).toEqual(`0 0 0 1px ${colors.red100}`)
+})
+
+test('ringRed200-2', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'ringRed200-2',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.style.boxShadow).toEqual(`0 0 0 2px ${colors.red200}`)
+})
+
+test('ringRed100-1--D10', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'ringRed100-1--D10',
+      propValue: true,
+    }),
+    parser,
+  )
+  expect(atom.meta.colorPostfix).toEqual('D10')
+  expect(atom.style.boxShadow).toEqual(`0 0 0 1px #e5c9c9`)
+})
+
+test('Invalid color: ringFoo200-2', () => {
+  const atom = handleAtom!(
+    new Atom({
+      propKey: 'ringFoo200-2',
+      propValue: true,
+    }),
+    parser,
+  )
+
+  expect(atom.style).toBeUndefined()
 })

packages/fower-plugin-ring/src/index.ts

@@ -1,5 +1,6 @@
 import { FowerPlugin } from '@fower/types'
 import { store } from '@fower/store'
+import { Atom } from '@fower/atom'
 import { downFirst } from '@fower/utils'
 import { formatColor } from '@fower/color-helper'
 
@@ -9,31 +10,41 @@ function isMatch(key: string) {
   return ringReg.test(key)
 }
 
+function toStyle(atom: Atom): any {
+  const { colors } = store.theme
+  type ColorKey = keyof typeof colors
+  let width: string = '1'
+  let color: ColorKey = 'brand500'
+  let cssColor: any = colors[color]
+
+  const { colorPostfix } = atom.meta
+  const arr = atom.key.match(ringReg) as string[]
+
+  const [, colorName, w] = arr
+  if (w) width = w
+
+  if (colorName) {
+    color = downFirst(colorName) as any
+    if (colors[color]) {
+      cssColor = colors[color]
+    } else {
+      return undefined
+    }
+  }
+
+  cssColor = colorPostfix ? formatColor(cssColor, colorPostfix) : cssColor
+
+  return {
+    boxShadow: `0 0 0 ${width}px ${cssColor}`,
+  }
+}
+
 export default (): FowerPlugin => {
   return {
     isMatch,
     handleAtom(atom) {
-      const { colors } = store.theme
-      type ColorKey = keyof typeof colors
-      let width: string = '1'
-      let color: ColorKey = 'brand500'
-      let cssColor: any = colors[color]
-
-      const { colorPostfix } = atom.meta
-      const arr = atom.key.match(ringReg) || []
-      const [, colorName, w] = arr
-
-      if (w) width = w
-      if (colorName) {
-        color = downFirst(colorName) as any
-        cssColor = colors[color] || color
-      }
-
-      cssColor = colorPostfix ? formatColor(cssColor, colorPostfix) : cssColor
-
-      atom.style = {
-        boxShadow: `0 0 0 ${width}px ${cssColor}`,
-      }
+      atom.style = toStyle(atom)
+
       return atom
     },
   }