test(color-picker): swatches test (#1361)

* fix: `swatchColorMode` will be completed

* test(color-picker): supplementary test cases

jest.config.js

@@ -110,7 +110,7 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+  setupFiles: ['jest-canvas-mock'],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts'],

package.json

@@ -103,6 +103,7 @@
     "husky": "^7.0.0",
     "inquirer": "^8.1.0",
     "jest": "^27.0.4",
+    "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^11.0.0",
     "marked": "^3.0.2",
     "prettier": "^2.2.1",

src/color-picker/src/ColorPickerSwatches.tsx

@@ -135,7 +135,6 @@ export default defineComponent({
     function normalizeOutput (parsed: ParsedColor): string {
       const { mode: modeProp } = props
       let { value, mode: swatchColorMode } = parsed
-      if (swatchColorMode === modeProp) return value
       // color name is converted to hex
       if (!swatchColorMode) {
         swatchColorMode = 'hex'
@@ -147,6 +146,7 @@ export default defineComponent({
           value = '#000000'
         }
       }
+      if (swatchColorMode === modeProp) return value
 
       // swatch value to current mode value
       const conversions = covert[swatchColorMode]

src/color-picker/tests/ColorPicker.spec.tsx

@@ -107,42 +107,53 @@ describe('n-color-picker', () => {
           .querySelector('.n-color-picker-swatch__fill')
           ?.getAttribute('style')
       ).toContain('background: rgb(0, 0, 0);')
+      wrapper.unmount()
     })
     it('output according to mode', async () => {
       const onUpdateValue = jest.fn()
       const output = {
-        RGBA: 'rgba(0, 0, 0, 1)',
-        HSLA: 'hsla(0, 0%, 0%, 1)',
-        HSVA: 'hsva(0, 0%, 0%, 1)'
+        RGBA: {
+          mode: 'rgb',
+          value: 'rgba(0, 0, 0, 1)'
+        },
+        HSLA: {
+          mode: 'hsl',
+          value: 'hsla(0, 0%, 0%, 1)'
+        },
+        HSVA: {
+          mode: 'hsv',
+          value: 'hsva(0, 0%, 0%, 1)'
+        },
+        HEXA: {
+          mode: 'hex',
+          value: '#000000'
+        }
       }
-      const modes = Object.keys(output) as ColorPickerMode[]
+      const modes = Object.values(output).map(v => v.mode) as ColorPickerMode[]
       const wrapper = mount(NColorPicker, {
         attachTo: document.body,
         props: {
-          swatches: ['#000000'],
+          swatches: ['black'],
           modes,
-          onUpdateValue
+          onUpdateValue: onUpdateValue
         }
       })
       await wrapper.find('.n-color-picker-trigger').trigger('click')
       const swatch = document.querySelector('.n-color-picker-swatch')
       const modeDom = document.querySelector('.n-color-picker-input__mode')
-      let length = modes.length - 1
+      let length = modes.length
       let currentMode: string | null | undefined = null
-      while (length) {
+      while (length && (currentMode = modeDom?.textContent)) {
         ;(swatch as HTMLElement).click()
         await nextTick()
-        const actualOutput =
-          currentMode && output[currentMode as keyof typeof output]
+        const actualOutput = output[currentMode as keyof typeof output]
         if (actualOutput) {
-          expect(onUpdateValue).toHaveBeenCalledWith(actualOutput)
+          expect(onUpdateValue).toHaveBeenCalledWith(actualOutput.value)
         }
         ;(modeDom as HTMLElement).click()
         await nextTick()
-        currentMode = modeDom?.textContent
         length--
       }
-      wrapper.unmount()
     })
   })
 })