test(color-picker, color-select-panel): format e2e test

Author: GaoNeng-wWw

examples/sites/demos/pc/app/color-picker/format.spec.ts

@@ -1,27 +1,31 @@
 import { test, expect } from '@playwright/test'
 
 test('rgb时应该为rgb(xx,xx,xx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   // 这个示例默认是rgb, 不需要手动修改
   // FIXME
   await expect(page.locator('#format')).toContainText('rgb')
 })
 
 test('hex时应该为#xxx', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.locator('li').filter({ hasText: 'Hex' }).click()
   await expect(page.locator('#format')).toContainText('#66CCFF')
 })
 
 test('hsl时应该为hsl(xxx,xxx,xxx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.locator('li').filter({ hasText: 'hsl' }).click()
   await expect(page.locator('#format')).toContainText('颜色值: hsl(199.99999999999997, 100%, 70%)')
 })
 
 test('hsv时候应该为hsv(xx,xx,xx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-picker#format')
   await page.getByRole('textbox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsv').click()

examples/sites/demos/pc/app/color-select-panel/format-composition-api.vue

@@ -12,20 +12,18 @@
         :visible="visible"
         @confirm="onConfirm"
         @cancel="onCancel"
-        :predefine="predefine"
         :format="value"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { TinySelect, TinyOption } from '@opentiny/vue'
+import { TinySelect, TinyOption, TinyColorSelectPanel, TinyButton } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const color = ref('#66ccff')
+const color = ref('rgb(102,204,255)')
 const visible = ref(false)
-const predefine = ref(new Array(8).fill(0).map(() => this.randomHex()))
 const options = ref([
   { value: 'hex', label: 'Hex' },
   { value: 'rgb', label: 'rgb' },
@@ -44,4 +42,7 @@ const onConfirm = () => {
 const onCancel = () => {
   hidden()
 }
+const changeVisible = () => {
+  visible.value = !visible.value
+}
 </script>

examples/sites/demos/pc/app/color-select-panel/format.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+test('rgb时应该为rgb(xx,xx,xx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#format')
+  // 这个示例默认是rgb, 不需要手动修改
+  // FIXME
+  await expect(page.locator('#format')).toContainText('颜色值: rgb(102,204,255)')
+})
+
+test('hex时应该为#xxx', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#format')
+  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByText('Hex', { exact: true }).click()
+  await expect(page.locator('#format')).toContainText('颜色值: #66CCFF')
+})
+
+test('hsl时应该为hsl(xxx,xxx,xxx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#format')
+  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('list').getByText('hsl').click()
+  await expect(page.locator('#format')).toContainText('颜色值: hsl(199.99999999999997, 100%, 70%)')
+})
+
+test('hsv时候应该为hsv(xx,xx,xx)', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#format')
+  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('list').getByText('hsv').click()
+  await expect(page.locator('#format')).toContainText('颜色值: hsv(199.99999999999997, 60%, 100%)')
+})

examples/sites/demos/pc/app/color-select-panel/format.vue

@@ -12,7 +12,6 @@
         :visible="visible"
         @confirm="onConfirm"
         @cancel="onCancel"
-        :predefine="predefine"
         :format="value"
       />
     </div>
@@ -31,7 +30,7 @@ export default {
   },
   data() {
     return {
-      color: '#66ccff',
+      color: 'rgb(102,204,255)',
       visible: false,
       predefine: new Array(8).fill(0).map(() => this.randomHex()),
       options: [
@@ -63,12 +62,6 @@ export default {
           .toString(16)
           .padEnd(6, '0')
       )
-    },
-    addPredefineColor() {
-      this.predefine.push(this.randomHex())
-    },
-    popPredefineColor() {
-      this.predefine.pop()
     }
   }
 }