tiny-vue_version0/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/)
    await input.fill(' ')
    await input.press('Enter')
    await expect(dropdown).toBeVisible()
    await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
  })

  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')).toBeEmpty()
  })
})