docs(transfer): [transfer] remove queryclear demo, and add some e2e test (#1066)

* docs(transfer): remove queryclear demo, and add some e2e test

* docs(transfer): fix

examples/sites/demos/pc/app/transfer/basic-usage.spec.ts

@@ -5,87 +5,82 @@ test('基本用法', async ({ page }) => {
   await page.goto('transfer#basic-usage')
   const preview = page.locator('.pc-demo-container')
   // 穿梭框按钮
-  const buttons = preview.getByRole('button')
-  // 穿梭框面板
   const transferPanels = preview.locator('.tiny-transfer-panel')
-  // 左侧面板
-  const leftPanel = transferPanels.first()
-  // 右侧面板
+  const leftPanel = transferPanels.nth(0)
   const rightPanel = transferPanels.nth(1)
 
-  // 向左交换按钮应该为禁用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右交换按钮应该为禁用状态
-  await expect(buttons.nth(1)).toBeDisabled()
+  const buttons = preview.getByRole('button')
+  const toRightBtn = buttons.nth(0)
+  const toLeftBtn = buttons.nth(1)
 
-  // 从左侧面板选择多个备用项，交换至右侧面板
+  // 0、初始时，交换按钮应该为禁用状态
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
+
+  // 1、从左交换至右
   let labels = leftPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   // 选中"备选项2"
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
 
+  // 选中"备选项3"
   labels = leftPanel.locator('label').filter({ hasText: '备选项 3' }).locator('span')
-  // 选中"备选项3"
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
 
-  // 复选框
+  // 复选框应该为半选状态
   let checkbox = leftPanel.getByRole('paragraph').filter({ hasText: '列表 1 2 / 14' }).getByRole('checkbox')
-  // 应该为半选状态
   await expect(checkbox).toHaveClass(/is-indeterminate/)
-  // 向左侧交换的按钮应该为可用状态
-  await expect(buttons.first()).toBeEnabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
-  // 最后点击向左侧交换按钮
-  await buttons.first().click()
+  // 按钮可用状态
+  await expect(toRightBtn).toBeEnabled()
+  await expect(toLeftBtn).toBeDisabled()
 
-  // 右侧面板应该出现"备选项2"
-  await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
-  // 右侧面板应该出现"备选项3"
-  await expect(rightPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
-
-  // 从右侧面板选择多个备用项，交换至左侧面板
-  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
-  // 选中"备选项2"
-  await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
-  await expect(labels.first()).toHaveClass(/is-checked/)
-
-  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
-  // 选中"备选项3"
-  await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
-  await expect(labels.first()).toHaveClass(/is-checked/)
-
-  // 复选框
-  checkbox = rightPanel.getByRole('paragraph').filter({ hasText: '列表 2 2 / 4' }).getByRole('checkbox')
-  // 应该为半选状态
-  await expect(checkbox).toHaveClass(/is-indeterminate/)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为可用状态
-  await expect(buttons.nth(1)).toBeEnabled()
   // 点击向左侧交换按钮
-  await buttons.nth(1).click()
+  await toRightBtn.click()
+  await page.waitForTimeout(10)
 
-  // 左侧面板应该出现"备选项2"
+  // 检查右侧面板
+  await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
+  await expect(rightPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1)
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
+  await page.waitForTimeout(10)
+
+  // 2、从右交换至左
+
+  // 选中"备选项2"
+  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
+  await labels.nth(1).click()
+  await expect(labels.first()).toHaveClass(/is-checked/)
+
+  // 选中"备选项3"
+  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
+  await labels.nth(1).click()
+  await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
+
+  // 复选框应该为半选状态
+  checkbox = rightPanel.getByRole('paragraph').filter({ hasText: '列表 2 2 / 4' }).getByRole('checkbox')
+  await expect(checkbox).toHaveClass(/is-indeterminate/)
+
+  // 按钮可用状态
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeEnabled()
+
+  // 点击向左侧交换按钮
+  await toLeftBtn.click()
+  await page.waitForTimeout(10)
+
+  // 检查左侧面板
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
-  // 左侧面板应该出现"备选项3"
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
 
   // 全选
-  await leftPanel.locator('.tiny-checkbox__input').first().click()
-  // 显示的选中数量应该为 11
+  const allCheckbox = leftPanel.locator('.tiny-checkbox__input').first()
+  await allCheckbox.click()
   await expect(preview.getByRole('paragraph').filter({ hasText: '列表 1 11 / 14' })).toHaveCount(1)
 })

examples/sites/demos/pc/app/transfer/before-transfer.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('transfer#basic-usage')
+  const preview = page.locator('.pc-demo-container')
+  // 穿梭框按钮
+  const transferPanels = preview.locator('.tiny-transfer-panel')
+  const leftPanel = transferPanels.nth(0)
+  const rightPanel = transferPanels.nth(1)
+
+  const buttons = preview.getByRole('button')
+  const toRightBtn = buttons.nth(0)
+
+  // 1、从左交换至右
+  let labels = leftPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
+  // 选中"备选项2"
+  await labels.nth(1).click()
+  await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
+
+  // 点击向左侧交换按钮
+  await toRightBtn.click()
+  await page.waitForTimeout(10)
+
+  await page.waitForTimeout(2100)
+  await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
+})

examples/sites/demos/pc/app/transfer/custom-btns.spec.ts

@@ -14,7 +14,7 @@ test('自定义按钮测试', async ({ page }) => {
   await expect(buttons.first()).toBeEnabled()
   await expect(buttons.nth(3)).toBeEnabled()
 
-  //全部移动到右侧
+  // 全部移动到右侧
   await buttons.first().click()
   await expect(rightPanel.locator('label').filter({ hasText: '列表 2 0 / 13' })).toHaveCount(1)
   await expect(buttons.first()).toBeDisabled()

examples/sites/demos/pc/app/transfer/custom-filter-composition-api.vue

@@ -1,16 +1,20 @@
 <template>
-  <tiny-transfer
-    v-model="value"
-    :data="data"
-    filterable
-    :filter-method="filterMethod"
-    filter-placeholder="请输入城市拼音"
-  ></tiny-transfer>
+  <div>
+    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
+    <tiny-transfer
+      ref="transferRef"
+      v-model="value"
+      :data="data"
+      filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入城市拼音"
+    ></tiny-transfer>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
@@ -30,8 +34,13 @@ const generateData = () => {
 
 const data = ref(generateData())
 const value = ref([1, 4])
+const transferRef = ref()
 
 function filterMethod(query, item) {
   return item.pinyin.includes(query)
 }
+function clearQuery() {
+  transferRef.value.clearQuery('left')
+  transferRef.value.clearQuery('right')
+}
 </script>

examples/sites/demos/pc/app/transfer/custom-filter.vue

@@ -1,19 +1,24 @@
 <template>
-  <tiny-transfer
-    v-model="value"
-    :data="data"
-    filterable
-    :filter-method="filterMethod"
-    filter-placeholder="请输入城市拼音"
-  ></tiny-transfer>
+  <div>
+    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
+    <tiny-transfer
+      ref="transferRef"
+      v-model="value"
+      :data="data"
+      filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入城市拼音"
+    ></tiny-transfer>
+  </div>
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { Transfer, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer: Transfer,
+    TinyButton: Button
   },
   data() {
     const generateData = () => {
@@ -40,6 +45,10 @@ export default {
   methods: {
     filterMethod(query, item) {
       return item.pinyin.includes(query)
+    },
+    clearQuery() {
+      this.$refs.transferRef.clearQuery('left')
+      this.$refs.transferRef.clearQuery('right')
     }
   }
 }

examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue

@@ -41,7 +41,7 @@ const value = ref([1, 4])
 function renderDataItem(h, option) {
   return (
     <span>
-      <span class="red">{option.id}</span> - {option.text}- by jsx
+      <span class="red">{option.id}</span> - {option.text} - by jsx
     </span>
   )
 }

examples/sites/demos/pc/app/transfer/custom-render.spec.ts

@@ -5,8 +5,9 @@ test('判断是否可以选中自定义数据项', async ({ page }) => {
   await page.goto('transfer#custom-render')
 
   const preview = page.locator('.pc-demo-container')
-  const jsxNode = preview.getByText('备选项 2 -by jsx')
+  const jsxNode = preview.getByText('备选项 2 - by jsx')
   const slotNode = preview.getByText('备选项 2 - by slot')
+
   await expect(jsxNode).toHaveCount(1)
   await expect(slotNode).toHaveCount(1)
 })

examples/sites/demos/pc/app/transfer/custom-render.vue

@@ -49,7 +49,7 @@ export default {
     renderDataItem(h, option) {
       return (
         <span>
-          <span class="red">{option.id}</span> - {option.text} -by jsx
+          <span class="red">{option.id}</span> - {option.text} - by jsx
         </span>
       )
     }

examples/sites/demos/pc/app/transfer/custom-titles.spec.ts

@@ -10,5 +10,12 @@ test('自定义列表标题', async ({ page }) => {
   const rightPanel = transferPanels.nth(1)
 
   await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
+  await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共14/)
   await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选数据列表/)
+  await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共2/)
+
+  // 全选
+  const allCheckbox = leftPanel.locator('.tiny-checkbox__input').first()
+  await allCheckbox.click()
+  await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选择11 \/ 共14/)
 })

examples/sites/demos/pc/app/transfer/drop-config.spec.ts

@@ -22,7 +22,7 @@ test('尝试拖拽', async ({ page }) => {
   await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 5' })).toHaveCount(1)
   await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 11' })).toHaveCount(1)
 
-  //尝试拖拽右侧某一项至左侧面板
+  // 尝试拖拽右侧某一项至左侧面板
   const dragDiv2 = rightPanel.locator('label').filter({ hasText: '备选项 3' })
   await page.waitForTimeout(100)
   await dragDiv2.hover()

examples/sites/demos/pc/app/transfer/manual-clear-query-composition-api.vue

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
-    <tiny-transfer ref="transferRef" v-model="value" :data="data" filterable></tiny-transfer>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
-
-const generateData = () => {
-  const data = []
-
-  for (let i = 0; i <= 15; i++) {
-    data.push({
-      key: i,
-      label: `备选项 ${i}`,
-      disabled: i % 4 === 0
-    })
-  }
-
-  return data
-}
-
-const data = ref(generateData())
-const value = ref([1, 4])
-const transferRef = ref()
-
-function clearQuery() {
-  transferRef.value.clearQuery('left')
-  transferRef.value.clearQuery('right')
-}
-</script>

examples/sites/demos/pc/app/transfer/manual-clear-query.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('判断是否可以清除搜索内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#manual-clear-query')
-  const preview = page.locator('.pc-demo-container')
-  const input = preview.locator('.tiny-input-display-only input').first()
-  await input.click()
-  await input.fill('1')
-  await preview.getByRole('button', { name: '重置查询' }).click()
-  await expect(input).toHaveValue('')
-})

examples/sites/demos/pc/app/transfer/manual-clear-query.vue

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
-    <tiny-transfer ref="transfer" v-model="value" :data="data" filterable></tiny-transfer>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Transfer, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTransfer: Transfer,
-    TinyButton: Button
-  },
-  data() {
-    const generateData = () => {
-      const data = []
-
-      for (let i = 0; i <= 15; i++) {
-        data.push({
-          key: i,
-          label: `备选项 ${i}`,
-          disabled: i % 4 === 0
-        })
-      }
-
-      return data
-    }
-
-    return {
-      data: generateData(),
-      value: [1, 4]
-    }
-  },
-  methods: {
-    clearQuery() {
-      this.$refs.transfer.clearQuery('left')
-      this.$refs.transfer.clearQuery('right')
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/transfer/nested-table.spec.ts

@@ -14,7 +14,7 @@ test('判断数据交换', async ({ page }) => {
   await expect(rightPanel.getByText('列表 2 1 / 8')).toHaveCount(1)
   await page.waitForTimeout(50)
 
-  //判断是否可以将右侧数据交换到左侧面板
+  // 判断是否可以将右侧数据交换到左侧面板
   await preview.locator('.defaultButton > button:nth-child(2)').click()
   await expect(leftPanel.getByText('列表 1 0 / 13')).toHaveCount(1)
   await page.waitForTimeout(50)

examples/sites/demos/pc/app/transfer/webdoc/transfer.js

@@ -88,13 +88,15 @@ export default {
           组件支持显示一个输入框，去过滤显示在左右列表的数据项。<br>
           通过 <code>filterable</code> 属性开启左右侧列表的搜索功能，默认是根据label内容过滤。<br>
           通过 <code>filter-placeholder</code> 属性自定义左右搜索框占位符。<br>
-          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。
+          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。<br>
+          调用 <code>clearQuery()</code> 方法,可清空左右侧列表的搜索框，参数为 left 或者 right 。<br>
         `,
         'en-US': `
           At the top of the left and right lists, you can display an input field to filter the data items that display the left and right lists. <br>
           Use the <code>filterable</code> attribute to enable the search function of the left and right lists, which by default filter based on the label content. <br>
           Use the <code>filter-placeholder</code> attribute to define the placeholder for the left and right search boxes. <br>
-          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.
+          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.<br>
+          The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.<br>
         `
       },
       'codeFiles': ['custom-filter.vue']
@@ -114,7 +116,6 @@ export default {
       },
       'codeFiles': ['default-checked.vue']
     },
-
     {
       'demoId': 'drop-config',
       'name': { 'zh-CN': '可拖拽', 'en-US': 'Drag left and right' },
@@ -136,16 +137,7 @@ export default {
       },
       'codeFiles': ['target-order.vue']
     },
-    {
-      'demoId': 'manual-clear-query',
-      'name': { 'zh-CN': '手动清空搜索框', 'en-US': 'Clear the search box manually' },
-      'desc': {
-        'zh-CN': '调用 <code>clearQuery()</code> 方法可清空左右侧列表的搜索框，参数为 left 或者 right 。',
-        'en-US':
-          'The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.'
-      },
-      'codeFiles': ['manual-clear-query.vue']
-    },
+
     {
       'demoId': 'before-transfer',
       'name': { 'zh-CN': '穿梭拦截', 'en-US': 'Clear the search box manually' },
@@ -280,6 +272,7 @@ export default {
           'name': 'format',
           'type': 'object',
           'defaultValue':
+            // eslint-disable-next-line no-template-curly-in-string
             "{ <br>&nbsp; noChecked:'${checked}/${total}', <br>&nbsp; hasChecked: '${checked}/${total}' <br>}",
           'desc': { 'zh-CN': '列表顶部勾选状态文案', 'en-US': 'Check the status copy at the top of the list' },
           'demoId': 'custom-titles'