Repository: h2oai/wave
File: ui/src/table.test.tsx (TypeScript)

Code before:
          filterable: true,
          cell_type: {
            tag: {
              name: 'tags',
              tags: [
                { label: 'TAG1', color: 'red' },
                { label: 'TAG2', color: 'green' },
                { label: 'TAG3', color: 'blue' },
              ]
            }
          }
        },
      ],
      rows: [
        { name: 'rowname1', cells: [cell11, 'TAG1'] },
        { name: 'rowname2', cells: [cell21, 'TAG2,TAG1'] },
        { name: 'rowname3', cells: [cell31, ''] }
      ]
    }

    const { container, getAllByRole, getAllByTestId } = render(<XTable model={tableProps} />)

    fireEvent.click(container.querySelector('.ms-DetailsHeader-filterChevron')!)

    const checkboxes = getAllByRole('checkbox')
    expect(checkboxes).toHaveLength(2)

    expect(getAllByTestId('tags')[0].childElementCount).toBe(1)
    expect(getAllByTestId('tags')[1].childElementCount).toBe(2)
    expect(getAllByTestId('tags')[2].childElementCount).toBe(0)
  })

  // TODO: Add a test to check that no event is emitted on rows update. Would result in infinite loop.

  describe('Height compute', () => {

    it('Computes properly for simple table - header, rows', () => {
      tableProps = {
        ...tableProps,
        columns: [
          { name: 'colname1', label: 'Col1' },
          { name: 'colname2', label: 'Col2' },
        ],
      }
      const { getByTestId } = render(<XTable model={tableProps} />)
      expect(getByTestId(name).style.height).toBe('196px')

    })

    it('Computes properly for searchable table - toptoolbar, header, rows, footer', () => {
      tableProps = {

Review comment (suggestion):
```suggestion
    expect(getAllByRole('checkbox')).toHaveLength(2)
```

Code after:
    fireEvent.click(container.querySelector('.ms-DetailsHeader-filterChevron')!)

    expect(getAllByRole('checkbox')).toHaveLength(2)

    const [tags1, tags2, tags3] = getAllByTestId('tags')
    expect(tags1.childElementCount).toBe(1)
    expect(tags2.childElementCount).toBe(2)
    expect(tags3.childElementCount).toBe(0)
  })

  // TODO: Add a test to check that no event is emitted on rows update. Would result in infinite loop.

  describe('Height compute', () => {

    it('Computes properly for simple table - header, rows', () => {
      tableProps = {
        ...tableProps,
        columns: [
          { name: 'colname1', label: 'Col1' },
          { name: 'colname2', label: 'Col2' },
        ],
      }
      const { getByTestId } = render(<XTable model={tableProps} />)
      expect(getByTestId(name).style.height).toBe('196px')

    })

    it('Computes properly for searchable table - toptoolbar, header, rows, footer', () => {
      tableProps = {
        ...tableProps,
        columns: [
          { name: 'colname1', label: 'Col1', searchable: true },
          { name: 'colname2', label: 'Col2' },
        ],
      }
      const { getByTestId } = render(<XTable model={tableProps} />)
      expect(getByTestId(name).style.height).toBe('290px')
    })

    it('Computes properly for custom progress cell - toptoolbar, header, rows, footer', () => {
      tableProps = {
        ...tableProps,
        columns: [
          { name: 'colname1', label: 'Col1', searchable: true },
          { name: 'colname2', label: 'Col2', cell_type: { progress: {} } },
        ],
      }
      const { getByTestId } = render(<XTable model={tableProps} />)
      expect(getByTestId(name).style.height).toBe('374px')
    })