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

Code before:
      // the sortingIcon class is present even if sort icon is not rendered, therefore we check for its child presence
      expect(container.querySelector('i[class*=sortingIcon]')!.firstChild).not.toBeTruthy()
    })

    it('Renders sort arrow after clicking on sortable column header', () => {
      const { container } = render(<XTable model={tableProps} />)

      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(container.querySelector('i[class*=sortingIcon]')!.firstChild).toBeTruthy()
    })

    it('Checks if sort arrow disappears after clicking on another sortable column header', () => {
      const { container } = render(<XTable model={tableProps} />)

      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(container.querySelector('i[class*=sortingIcon]')!.firstChild).toBeTruthy()

      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[1])
      expect(container.querySelector('i[class*=sortingIcon]')!.firstChild).not.toBeTruthy()
    })

    it('Sorts by column - string', () => {
      const { container, getAllByRole } = render(<XTable model={tableProps} />)

      expect(getAllByRole('gridcell')[0].textContent).toBe(cell11)
      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(getAllByRole('gridcell')[0].textContent).toBe(cell21)
      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(getAllByRole('gridcell')[0].textContent).toBe(cell31)
    })

    it('Sorts by column - iso date', () => {
      const date1 = '1971-07-08T23:09:33', date2 = '1976-11-05T19:12:18', date3 = '2001-03-28T03:09:31'
      tableProps = {
        ...tableProps,
        rows: [
          { name: 'rowname1', cells: [date3] },
          { name: 'rowname2', cells: [date2] },
          { name: 'rowname3', cells: [date1] }
        ],
        columns: [{ name: 'colname1', label: 'Col1', sortable: true, searchable: true, data_type: 'time' }]
      }
      const { container, getAllByRole } = render(<XTable model={tableProps} />)

      expect(getAllByRole('gridcell')[0].textContent).toBe('3/28/2001, 3:09:31 AM')
      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(getAllByRole('gridcell')[0].textContent).toBe('7/8/1971, 11:09:33 PM')
      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
      expect(getAllByRole('gridcell')[0].textContent).toBe('3/28/2001, 3:09:31 AM')
    })


Review comment (suggestion):
This should work as well.

```suggestion
      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle'))
```

Code after:
      expect(container.querySelector("[data-icon-name='SortUp']")!).not.toBeInTheDocument()
      expect(container.querySelector("[data-icon-name='SortDown']")!).not.toBeInTheDocument()
    })

    it('Renders sort arrow after clicking on sortable column header', () => {
      const { container } = render(<XTable model={tableProps} />)

      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(container.querySelector("[data-icon-name='SortUp']")!).toBeInTheDocument()
    })

    it('Checks if sort arrow disappears after clicking on another sortable column header', () => {
      const { container } = render(<XTable model={tableProps} />)

      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(container.querySelectorAll("[data-icon-name='SortUp']")!).toHaveLength(1)

      fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[1])
      expect(container.querySelectorAll("[data-icon-name='SortUp']")!).toHaveLength(1)
    })

    it('Sorts by column - string', () => {
      const { container, getAllByRole } = render(<XTable model={tableProps} />)

      expect(getAllByRole('gridcell')[0].textContent).toBe(cell11)
      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(getAllByRole('gridcell')[0].textContent).toBe(cell21)
      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(getAllByRole('gridcell')[0].textContent).toBe(cell31)
    })

    it('Sorts by column - iso date', () => {
      const date1 = '1971-07-08T23:09:33', date2 = '1976-11-05T19:12:18', date3 = '2001-03-28T03:09:31'
      tableProps = {
        ...tableProps,
        rows: [
          { name: 'rowname1', cells: [date3] },
          { name: 'rowname2', cells: [date2] },
          { name: 'rowname3', cells: [date1] }
        ],
        columns: [{ name: 'colname1', label: 'Col1', sortable: true, searchable: true, data_type: 'time' }]
      }
      const { container, getAllByRole } = render(<XTable model={tableProps} />)

      expect(getAllByRole('gridcell')[0].textContent).toBe('3/28/2001, 3:09:31 AM')
      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(getAllByRole('gridcell')[0].textContent).toBe('7/8/1971, 11:09:33 PM')
      fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!)
      expect(getAllByRole('gridcell')[0].textContent).toBe('3/28/2001, 3:09:31 AM')
    })