From ad996a6e8189c3ac7239ac36e8f472c5f8a27df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E8=A7=81=E6=9C=88?=
 <61452855+nooooooom@users.noreply.github.com>
Date: Fri, 15 Oct 2021 01:18:37 +0800
Subject: [PATCH] test(color-picker): swatches test  (#1361)

* fix: `swatchColorMode` will be completed

* test(color-picker): supplementary test cases
---
 jest.config.js                               |  2 +-
 package.json                                 |  1 +
 src/color-picker/src/ColorPickerSwatches.tsx |  2 +-
 src/color-picker/tests/ColorPicker.spec.tsx  | 37 +++++++++++++-------
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 98c207b1f..bb133c3e1 100644
--- a/jest.config.js
+++ b/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'],
diff --git a/package.json b/package.json
index 8e73f2ca6..0be27eb35 100644
--- a/package.json
+++ b/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",
diff --git a/src/color-picker/src/ColorPickerSwatches.tsx b/src/color-picker/src/ColorPickerSwatches.tsx
index bd22d245d..065bbd08d 100644
--- a/src/color-picker/src/ColorPickerSwatches.tsx
+++ b/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]
diff --git a/src/color-picker/tests/ColorPicker.spec.tsx b/src/color-picker/tests/ColorPicker.spec.tsx
index 957636f58..cb28aed4c 100644
--- a/src/color-picker/tests/ColorPicker.spec.tsx
+++ b/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()
     })
   })
 })