tiny-vue/examples/sites/demos/pc/app/select/nest-grid-remote.spec.ts

import { expect, test } from '@playwright/test'

test.describe('下拉表格远程搜索', () => {
  test('单选,下拉表格远程搜索基础用法', async ({ page }) => {
    page.on('pageerror', (exception) => expect(exception).toBeNull())
    await page.goto('select#nest-grid-remote')

    const wrap = page.locator('#nest-grid-remote')
    const select = wrap.locator('.tiny-select').nth(0)
    const input = select.locator('.tiny-input__inner')
    const dropdown = page.locator('body > .tiny-select-dropdown')
    const suffixSvg = dropdown.locator('.tiny-input__suffix .tiny-select__caret')

    await expect(suffixSvg).toBeHidden()
    await expect(dropdown).toBeHidden()
    await input.focus()
    await input.fill(' ')
    await input.press('Enter')
    await page.waitForTimeout(200)
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
    await input.fill('1')
    await input.press('Enter')
    await page.waitForTimeout(200)
    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()

    const row1 = page.getByRole('row', { name: '省份 1 城市 1 区域 1' })
    const row2 = page.getByRole('row', { name: '省份 2 城市 2 区域 2' })
    await expect(row2).not.toBeVisible()
    await row1.getByRole('cell').first().click()
    await expect(row1).toHaveClass(/row__current/)
    await expect(input).toHaveValue('省 1-市 1')

    const row3 = page.getByRole('row', { name: '省份 10 城市 10 区域 10' })
    await input.click()
    await row3.getByRole('cell').first().click()
    await expect(input).toHaveValue('省 10-市 10')
  })

  test('单选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
    page.on('pageerror', (exception) => expect(exception).toBeNull())
    await page.goto('select#nest-grid-remote')

    const wrap = page.locator('#nest-grid-remote')
    const select = wrap.locator('.tiny-select').nth(1)
    const input = select.locator('.tiny-input__inner')
    const dropdown = page.locator('body > .tiny-select-dropdown')
    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret')

    await expect(suffixSvg).toBeVisible()
    await expect(dropdown).toBeHidden()
    await input.click()
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
    await page.getByRole('row', { name: '省份 2 城市 2 区域 2' }).getByRole('cell').first().click()
    await expect(input).toHaveValue('省 2-市 2')
    await input.click()
    await expect(page.getByRole('row', { name: '省份 2 城市 2 区域 2' })).toHaveClass(/row__current/)
    await page.getByRole('row', { name: '省份 6 城市 6 区域 6' }).getByRole('cell').first().click()
    await expect(input).toHaveValue('省 6-市 6')
    await input.click()
    await expect(page.getByRole('row', { name: '省份 6 城市 6 区域 6' })).toHaveClass(/row__current/)
    // 由于修改示例，增加了空格。所以1个空格匹配全部行， 2个空格才空数据
    await input.fill(' ' + ' ')
    await input.press('Enter')
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
  })

  test('多选,下拉表格远程搜索基础用法', async ({ page }) => {
    page.on('pageerror', (exception) => expect(exception).toBeNull())
    await page.goto('select#nest-grid-remote')
    const wrap = page.locator('#nest-grid-remote')
    const select = wrap.locator('.tiny-select').nth(2)
    const input = select.locator('.tiny-select__input')
    const dropdown = page.locator('body > .tiny-select-dropdown')
    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()

    // 下拉按钮不显示
    await expect(suffixSvg).toBeHidden()
    await expect(dropdown).toBeHidden()

    await input.fill(' ' + ' ')
    await input.press('Enter')
    await page.waitForTimeout(1000)
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
    await input.fill(' ')
    await input.press('Enter')
    await page.waitForTimeout(1000)
    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
    await page.getByRole('row', { name: '省份 0 城市 0 区域 0' }).getByRole('cell').first().click()
    const tags = page.locator('.tiny-select .tiny-tag')
    expect((await tags.all()).length).toEqual(1)
    await expect(tags.first()).toContainText(/市 0/)
    await page.getByRole('row', { name: '省份 1 城市 1 区域 1' }).getByRole('cell').first().click()
    expect((await tags.all()).length).toEqual(2)
    await expect(tags.first()).toContainText(/市 0/)
    await expect(tags.nth(1)).toContainText(/市 1/)
  })

  test('多选,下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
    page.on('pageerror', (exception) => expect(exception).toBeNull())
    await page.goto('select#nest-grid-remote')

    const wrap = page.locator('#nest-grid-remote')
    const select = wrap.locator('.tiny-select').nth(3)
    const input = select.locator('.tiny-select__input')
    const dropdown = page.locator('body > .tiny-select-dropdown')
    const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
    const tag = select.locator('.tiny-tag')

    await expect(suffixSvg).toBeVisible()
    await expect(dropdown).toBeHidden()
    await select.click()
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()

    await dropdown.getByRole('row', { name: '省份 0 城市 0 区域 0' }).getByRole('cell').first().click()

    expect((await tag.all()).length).toEqual(1)
    await expect(tag.first()).toContainText(/市 0/)

    await dropdown.getByRole('row', { name: '省份 1 城市 1 区域 1' }).getByRole('cell').first().click()
    expect((await tag.all()).length).toEqual(2)
    await expect(tag.first()).toContainText(/市 0/)
    await expect(tag.nth(1)).toContainText(/市 1/)
    await tag.nth(0).locator('.tiny-svg').click()
    await tag.nth(0).locator('.tiny-svg').click()
    await expect((await tag.all()).length).toEqual(0)
    await input.fill(' ' + ' ')
    await input.press('Enter')
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody tr').first()).toBeHidden()
  })
})