@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/transfer/basic-usage.spec.ts

@@ -1,104 +1,86 @@
 import { test, expect } from '@playwright/test'
 
-test('默认状态下交换按钮是否禁用', async ({ page }) => {
+test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#basic-usage')
-  const preview = page.locator('#preview')
-  const buttons = preview.getByRole('button')
-  // 向左交换按钮应该为禁用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右交换按钮应该为禁用状态
-  await expect(buttons.nth(1)).toBeDisabled()
-})
-
-test('多选', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#basic-usage')
-  const preview = page.locator('#preview')
+  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)
 
-  // 从左侧面板选择多个备用项，交换至右侧面板
+  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)
 
-  labels = leftPanel.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   // 选中"备选项3"
+  labels = leftPanel.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   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()
-
-  // 右侧面板应该出现"备选项2"
+  // 按钮可用状态
+  await expect(toRightBtn).toBeEnabled()
+  await expect(toLeftBtn).toBeDisabled()
+
+  // 点击向左侧交换按钮
+  await toRightBtn.click()
+  await page.waitForTimeout(10)
+
+  // 检查右侧面板
   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()
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
+  await page.waitForTimeout(10)
+
+  // 2、从右交换至左
 
-  // 从右侧面板选择多个备用项，交换至左侧面板
-  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   // 选中"备选项2"
+  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
 
-  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   // 选中"备选项3"
+  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   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(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为可用状态
-  await expect(buttons.nth(1)).toBeEnabled()
+
+  // 按钮可用状态
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeEnabled()
+
   // 点击向左侧交换按钮
-  await buttons.nth(1).click()
+  await toLeftBtn.click()
+  await page.waitForTimeout(10)
 
-  // 左侧面板应该出现"备选项2"
+  // 检查左侧面板
   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()
 
-test('全选', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#basic-usage')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
   // 全选
-  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)
 })

package/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)
+})

package/demos/pc/app/transfer/custom-btns.spec.ts

@@ -1,34 +1,26 @@
 import { test, expect } from '@playwright/test'
 
-test('判断按钮是否可用', async ({ page }) => {
+test('自定义按钮测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#show-all-btn')
-  const preview = page.locator('#preview')
-  const buttons = preview.getByRole('button')
-  await expect(buttons.first()).toBeEnabled()
-  await expect(buttons.nth(3)).toBeEnabled()
-})
+  await page.goto('transfer#custom-btns')
 
-test('全部移动到右侧', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#show-all-btn')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container .tiny-transfer')
   const buttons = preview.getByRole('button')
   const transferPanels = preview.locator('.tiny-transfer-panel')
+  const leftPanel = transferPanels.first()
   const rightPanel = transferPanels.nth(1)
+
+  // 判断按钮是否可用
+  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()
   await expect(buttons.nth(3)).toBeEnabled()
-})
 
-test('全部移动到左侧', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#show-all-btn')
-  const preview = page.locator('#preview')
-  const buttons = preview.getByRole('button')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
+  // 全部移动到左侧
   await buttons.nth(3).click()
   await expect(leftPanel.locator('label').filter({ hasText: '列表 1 0 / 15' })).toHaveCount(1)
   await expect(buttons.first()).toBeEnabled()

package/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>

package/demos/pc/app/transfer/custom-filter.spec.ts

@@ -2,14 +2,16 @@ import { test, expect } from '@playwright/test'
 
 test('自定义过滤方法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#custom-filter-method')
-  const preview = page.locator('#preview')
+  await page.goto('transfer#custom-filter')
+
+  const preview = page.locator('.pc-demo-container')
   const transferPanels = preview.locator('div.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
-  const input = preview.getByPlaceholder('请输入城市拼音').first()
+  const input = preview.getByPlaceholder('请输入城市拼音').first().locator('input')
+  const items = leftPanel.locator('div.tiny-transfer-panel__list > label')
+
   await input.click()
   await input.fill('xi')
-  const items = leftPanel.locator('div.tiny-transfer-panel__list > label')
   await expect(items).toHaveCount(1)
   // 判断删除搜索关键字后是否正常显示列表
   await input.click()

package/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')
     }
   }
 }

package/demos/pc/app/transfer/custom-footer.spec.ts

@@ -3,6 +3,5 @@ import { test, expect } from '@playwright/test'
 test('自定义列表底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#custom-footer')
-  await page.getByRole('button', { name: '操作' }).first().click()
-  await page.getByRole('button', { name: '操作' }).nth(1).click()
+  await expect(page.getByRole('button', { name: '操作' })).toHaveCount(2)
 })

package/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>
   )
 }

package/demos/pc/app/transfer/custom-render.spec.ts

@@ -2,9 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('判断是否可以选中自定义数据项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#custom-render-content')
-  await page.locator('label').filter({ hasText: '2 - 备选项 2' }).locator('span').nth(1).click()
-  await expect(page.locator('label').filter({ hasText: '2 - 备选项 2' }).locator('span').first()).toHaveClass(
-    /is-checked/
-  )
+  await page.goto('transfer#custom-render')
+
+  const preview = page.locator('.pc-demo-container')
+  const jsxNode = preview.getByText('备选项 2 - by jsx')
+  const slotNode = preview.getByText('备选项 2 - by slot')
+
+  await expect(jsxNode).toHaveCount(1)
+  await expect(slotNode).toHaveCount(1)
 })

package/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>
       )
     }

package/demos/pc/app/transfer/custom-titles.spec.ts

@@ -2,11 +2,20 @@ import { test, expect } from '@playwright/test'
 
 test('自定义列表标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#custom-transfer-titles')
-  const preview = page.locator('#preview')
+  await page.goto('transfer#custom-titles')
+  const preview = page.locator('.pc-demo-container')
+
   const transferPanels = preview.locator('.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
-  await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
   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/)
 })

package/demos/pc/app/transfer/default-checked.spec.ts

@@ -1,22 +1,18 @@
 import { test, expect } from '@playwright/test'
 
-test('判断左侧面板是否有默认勾选项', async ({ page }) => {
+test('判断面板是否有默认勾选项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#default-checked')
-  const preview = page.locator('#preview')
+
+  const preview = page.locator('.pc-demo-container')
   const transferPanels = preview.locator('.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
+  const rightPanel = transferPanels.nth(1)
+
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 2' }).first()).toHaveClass(/is-checked/)
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 6' }).first()).toHaveClass(/is-checked/)
   await expect(preview.getByRole('button').first()).toBeEnabled()
-})
 
-test('判断右侧面板是否有默认勾选项', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#default-checked')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const rightPanel = transferPanels.nth(1)
   await expect(rightPanel.locator('label').filter({ hasText: '备选项 1' }).first()).toHaveClass(/is-checked/)
   await expect(preview.getByRole('button').nth(1)).toBeEnabled()
 })

package/demos/pc/app/transfer/drop-config.spec.ts

@@ -1,33 +1,38 @@
 import { test, expect } from '@playwright/test'
 
-test('尝试拖拽左侧某一项至右侧面板', async ({ page }) => {
+test('尝试拖拽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#drop-config')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container')
   const transferPanels = preview.locator('.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
   const rightPanel = transferPanels.nth(1)
-  const dragDiv = leftPanel.locator('label:nth-child(2)').first()
-  await dragDiv.hover()
+  const dragDiv1 = leftPanel.locator('label:nth-child(2)').first()
+
+  // 尝试拖拽左侧某一项至右侧面板
+  await page.waitForTimeout(100)
+  await dragDiv1.hover()
+  await page.waitForTimeout(100)
   await page.mouse.down()
+  await page.waitForTimeout(100)
   await rightPanel.hover()
+  await page.waitForTimeout(100)
   await page.mouse.up()
+  await page.waitForTimeout(100)
   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)
-})
 
-test('尝试拖拽右侧某一项至左侧面板', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#drop-config')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
-  const rightPanel = transferPanels.nth(1)
-  const dragDiv = rightPanel.locator('label').filter({ hasText: '备选项 3' })
-  await dragDiv.hover()
+  // 尝试拖拽右侧某一项至左侧面板
+  const dragDiv2 = rightPanel.locator('label').filter({ hasText: '备选项 3' })
+  await page.waitForTimeout(100)
+  await dragDiv2.hover()
+  await page.waitForTimeout(100)
   await page.mouse.down()
+  await page.waitForTimeout(100)
   await leftPanel.hover()
+  await page.waitForTimeout(100)
   await page.mouse.up()
-  await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 13' })).toHaveCount(1)
-  await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 3' })).toHaveCount(1)
+  await page.waitForTimeout(100)
+  await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 12' })).toHaveCount(1)
+  await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 4' })).toHaveCount(1)
 })

package/demos/pc/app/transfer/nested-table.spec.ts

@@ -1,48 +1,25 @@
 import { test, expect } from '@playwright/test'
 
-test('判断是否可以将左侧数据交换到右侧面板', async ({ page }) => {
+test('判断数据交换', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#nested-table')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container')
   const transferPanels = preview.locator('.tiny-transfer-panel')
+  const leftPanel = transferPanels.first()
   const rightPanel = transferPanels.nth(1)
-  await preview.locator('.tiny-button').first().click()
+  const toRightBtn = preview.locator('.tiny-button').first()
+
+  // 判断是否可以将左侧数据交换到右侧面板
+  await toRightBtn.click()
   await expect(rightPanel.getByText('列表 2 1 / 8')).toHaveCount(1)
-})
+  await page.waitForTimeout(50)
 
-test('判断是否可以将右侧数据交换到左侧面板', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#nested-table')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
+  // 判断是否可以将右侧数据交换到左侧面板
   await preview.locator('.defaultButton > button:nth-child(2)').click()
-  await expect(leftPanel.getByText('列表 1 1 / 14')).toHaveCount(1)
-})
+  await expect(leftPanel.getByText('列表 1 0 / 13')).toHaveCount(1)
+  await page.waitForTimeout(50)
 
-test('判断是否可以切换分页页码', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#nested-table')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
+  // 判断是否可以切换分页页码
   await preview.getByRole('listitem').filter({ hasText: '2' }).click()
   await expect(leftPanel.getByRole('table').locator('tbody > tr')).toHaveCount(3)
 })
-
-test('判断搜索功能是否正常', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#nested-table')
-  const preview = page.locator('#preview')
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const leftPanel = transferPanels.first()
-  const input = preview.getByPlaceholder('请输入城市拼音')
-  await input.first().click()
-  await input.first().fill('1')
-  const count = leftPanel.getByRole('table').locator('tbody > tr')
-  await expect(count).toHaveCount(7)
-  // 清空搜索内容
-  await input.first().click()
-  await input.first().fill('')
-  await expect(count).toHaveCount(10)
-})

package/demos/pc/app/transfer/nested-tree.spec.ts

@@ -1,39 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('判断是否可以将左侧数据交换至右侧面板', async ({ page }) => {
+test('嵌套树', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#nested-tree')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container')
   await preview.getByRole('treeitem', { name: '一级 1' }).locator('svg').first().click()
   await preview.getByRole('treeitem', { name: '一级 1' }).getByText('二级 1-1').click()
   await preview.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2).click()
-  await preview.getByRole('button').first().click()
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const rightPanel = transferPanels.nth(1)
-  await expect(
-    rightPanel.locator(
-      'div:nth-child(3) > div:nth-child(4) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
-    )
-  ).toHaveText('三级 1-1-1')
-})
 
-test('置顶和置底功能', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('transfer#nested-tree')
-  const preview = page.locator('#preview')
-  const buttons = await preview.getByRole('paragraph').filter({ hasText: '列表 2 1 / 3' }).locator('div')
-  await buttons.nth(1).click()
-  const transferPanels = preview.locator('.tiny-transfer-panel')
-  const rightPanel = transferPanels.nth(1)
-  await expect(
-    rightPanel.locator(
-      'div:nth-child(3) > div:nth-child(1) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
-    )
-  ).toHaveText('二级 2-1')
-  await buttons.nth(2).click()
-  await expect(
-    rightPanel.locator(
-      'div:nth-child(3) > div:nth-child(3) > .tiny-tree-node > .tiny-tree-node__content > span.tiny-tree-node__label'
-    )
-  ).toHaveText('二级 2-1')
+  await expect(preview.getByText('三级 1-1-1')).toHaveCount(1)
 })

package/demos/pc/app/transfer/target-order.spec.ts

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('判断交换左侧备选项后是否位于右侧面板首位', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#target-order')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container')
   const buttons = preview.getByRole('button')
   const transferPanels = preview.locator('.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
   await leftPanel.locator('label').filter({ hasText: '备选项 2' }).click()
   await buttons.first().click()
+
   const rightPanel = transferPanels.nth(1)
   await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
   await leftPanel.locator('label').filter({ hasText: '备选项 3' }).click()

package/demos/pc/app/transfer/transfer-events.spec.ts

@@ -3,13 +3,14 @@ import { test, expect } from '@playwright/test'
 test('判断是否触发了不同事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('transfer#transfer-events')
-  const preview = page.locator('#preview')
+  const preview = page.locator('.pc-demo-container')
   const transferPanels = preview.locator('.tiny-transfer-panel')
   const leftPanel = transferPanels.first()
   await leftPanel.locator('label').filter({ hasText: '备选项 2' }).click()
   await expect(page.getByText(/^left-check-change 事件/)).toBeVisible()
   await preview.getByRole('button').first().click()
   await expect(page.getByText(/^change 事件/)).toBeVisible()
+
   const rightPanel = transferPanels.nth(1)
   await rightPanel.locator('label').first().click()
   await expect(page.getByText(/^right-check-change 事件/)).toBeVisible()