* Toggles the sort order for the specified table column. Defaults to using the interaction type * set on the table tester.
(opts: TableToggleSortOpts)
| 246 | * set on the table tester. |
| 247 | */ |
| 248 | async toggleSort(opts: TableToggleSortOpts): Promise<void> { |
| 249 | let {column, interactionType = this._interactionType} = opts; |
| 250 | |
| 251 | let columnheader; |
| 252 | if (typeof column === 'number') { |
| 253 | columnheader = this.getColumns()[column]; |
| 254 | } else if (typeof column === 'string') { |
| 255 | columnheader = within(this.getRowGroups()[0]).getByText(column); |
| 256 | while (columnheader && !/columnheader/.test(columnheader.getAttribute('role'))) { |
| 257 | columnheader = columnheader.parentElement; |
| 258 | } |
| 259 | } else { |
| 260 | columnheader = column; |
| 261 | } |
| 262 | |
| 263 | let menuButton = within(columnheader).queryByRole('button'); |
| 264 | if (menuButton) { |
| 265 | let currentSort = columnheader.getAttribute('aria-sort'); |
| 266 | // TODO: Focus management is all kinda of messed up if I just use .focus and Space to open the sort menu. Seems like |
| 267 | // the focused key doesn't get properly set to the desired column header. Have to do this strange flow where I focus the |
| 268 | // column header except if the active element is already the menu button within the column header |
| 269 | if (interactionType === 'keyboard' && document.activeElement !== menuButton) { |
| 270 | await pressElement(this.user, columnheader, interactionType); |
| 271 | } else { |
| 272 | await pressElement(this.user, menuButton, interactionType); |
| 273 | } |
| 274 | |
| 275 | await waitFor(() => { |
| 276 | if (menuButton.getAttribute('aria-controls') == null) { |
| 277 | throw new Error('No aria-controls found on table column dropdown menu trigger element.'); |
| 278 | } else { |
| 279 | return true; |
| 280 | } |
| 281 | }); |
| 282 | |
| 283 | let menuId = menuButton.getAttribute('aria-controls'); |
| 284 | await waitFor(() => { |
| 285 | if (!menuId || document.getElementById(menuId) == null) { |
| 286 | throw new Error(`Table column header menu with id of ${menuId} not found in document.`); |
| 287 | } else { |
| 288 | return true; |
| 289 | } |
| 290 | }); |
| 291 | |
| 292 | if (menuId) { |
| 293 | let menu = document.getElementById(menuId); |
| 294 | if (menu) { |
| 295 | if (currentSort === 'ascending') { |
| 296 | await pressElement( |
| 297 | this.user, |
| 298 | within(menu).getAllByRole('menuitem')[1], |
| 299 | interactionType |
| 300 | ); |
| 301 | } else { |
| 302 | await pressElement( |
| 303 | this.user, |
| 304 | within(menu).getAllByRole('menuitem')[0], |
| 305 | interactionType |
no test coverage detected