grid.spec.ts — vue Source File

Architecture documentation for grid.spec.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript VueCore 3 imports

Entity Profile

VueCore→ grid.spec.ts — vue Source File

Dependency Diagram

graph LR
  6c4de777_8ea4_083a_da2f_44aca3decfe3["grid.spec.ts"]
  89e1d5c3_816b_464a_8e3e_7496dffe6752["e2eUtils.ts"]
  6c4de777_8ea4_083a_da2f_44aca3decfe3 --> 89e1d5c3_816b_464a_8e3e_7496dffe6752
  29f97b51_38b6_0943_0c18_913d76c86b26["setupPuppeteer"]
  6c4de777_8ea4_083a_da2f_44aca3decfe3 --> 29f97b51_38b6_0943_0c18_913d76c86b26
  0409ae0b_e495_6959_8f5e_6f3562f01086["getExampleUrl"]
  6c4de777_8ea4_083a_da2f_44aca3decfe3 --> 0409ae0b_e495_6959_8f5e_6f3562f01086
  style 6c4de777_8ea4_083a_da2f_44aca3decfe3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { setupPuppeteer, getExampleUrl, E2E_TIMEOUT } from './e2eUtils'

interface TableData {
  name: string
  power: number
}

describe('e2e: grid', () => {
  const { page, click, text, count, typeValue, clearValue } = setupPuppeteer()
  const columns = ['name', 'power'] as const

  async function assertTable(data: TableData[]) {
    expect(await count('td')).toBe(data.length * columns.length)
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < columns.length; j++) {
        expect(
          await text(`tr:nth-child(${i + 1}) td:nth-child(${j + 1})`)
        ).toContain(`${data[i][columns[j]]}`)
      }
    }
  }

  async function testGrid(apiType: 'classic' | 'composition') {
    await page().goto(getExampleUrl('grid', apiType))
    await page().waitForSelector('table')
    expect(await count('th')).toBe(2)
    expect(await count('th.active')).toBe(0)
    expect(await text('th:nth-child(1)')).toContain('Name')
    expect(await text('th:nth-child(2)')).toContain('Power')
    await assertTable([
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ])

    await click('th:nth-child(1)')
    expect(await count('th.active:nth-child(1)')).toBe(1)
    expect(await count('th.active:nth-child(2)')).toBe(0)
    expect(await count('th:nth-child(1) .arrow.dsc')).toBe(1)
    expect(await count('th:nth-child(2) .arrow.dsc')).toBe(0)
    await assertTable([
      { name: 'Jet Li', power: 8000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 }
    ])

    await click('th:nth-child(2)')
    expect(await count('th.active:nth-child(1)')).toBe(0)
    expect(await count('th.active:nth-child(2)')).toBe(1)
    expect(await count('th:nth-child(1) .arrow.dsc')).toBe(1)
    expect(await count('th:nth-child(2) .arrow.dsc')).toBe(1)
    await assertTable([
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jet Li', power: 8000 },
      { name: 'Jackie Chan', power: 7000 }
    ])

    await click('th:nth-child(2)')
    expect(await count('th.active:nth-child(1)')).toBe(0)
    expect(await count('th.active:nth-child(2)')).toBe(1)
    expect(await count('th:nth-child(1) .arrow.dsc')).toBe(1)
    expect(await count('th:nth-child(2) .arrow.asc')).toBe(1)
    await assertTable([
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Chuck Norris', power: Infinity }
    ])

    await click('th:nth-child(1)')
    expect(await count('th.active:nth-child(1)')).toBe(1)
    expect(await count('th.active:nth-child(2)')).toBe(0)
    expect(await count('th:nth-child(1) .arrow.asc')).toBe(1)
    expect(await count('th:nth-child(2) .arrow.asc')).toBe(1)
    await assertTable([
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ])

    await typeValue('input[name="query"]', 'j')
    await assertTable([
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ])

    await typeValue('input[name="query"]', 'infinity')
    await assertTable([{ name: 'Chuck Norris', power: Infinity }])

    await clearValue('input[name="query"]')
    expect(await count('p')).toBe(0)
    await typeValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
    expect(await count('p')).toBe(1)
  }

  test(
    'classic',
    async () => {
      await testGrid('classic')
    },
    E2E_TIMEOUT
  )

  test(
    'composition',
    async () => {
      await testGrid('composition')
    },
    E2E_TIMEOUT
  )
})