[pull] main from Comcast:main

README.md

@@ -760,8 +760,8 @@ function MyGrid() {
 }
 
 test('grid', async () => {
-  await render(<MyGrid />);
-  const grid = screen.getByRole('grid', { name: 'my-grid' });
+  await page.render(<MyGrid />);
+  const grid = page.getByRole('grid', { name: 'my-grid' });
 });
 ```
 

test/browser/TreeDataGrid.test.tsx

@@ -322,7 +322,7 @@ test('cell navigation in a treegrid', async () => {
 
   // expand group
   const groupCell1 = getCell('USA');
-  expect(document.body).toHaveFocus();
+  await expect.element(document.body).toHaveFocus();
   await expect.element(focusSink).toHaveAttribute('tabIndex', '-1');
   await userEvent.click(groupCell1);
   await expect.element(focusSink).toHaveFocus();
@@ -351,23 +351,23 @@ test('cell navigation in a treegrid', async () => {
 
   // select cell
   await userEvent.click(getCellsAtRowIndex(5)[1]);
-  expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true');
+  await expect.element(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'true');
   await expect.element(focusSink).toHaveAttribute('tabIndex', '-1');
 
   // select the previous cell
   await userEvent.keyboard('{arrowleft}');
-  expect(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false');
-  expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
+  await expect.element(getCellsAtRowIndex(5)[1]).toHaveAttribute('aria-selected', 'false');
+  await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
 
   // if the first cell is selected then arrowleft should select the row
   await userEvent.keyboard('{arrowleft}');
-  expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false');
+  await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'false');
   await expect.element(getRows()[4]).toHaveClass(rowSelectedClassname);
   await expect.element(focusSink).toHaveFocus();
 
   // if the row is selected then arrowright should select the first cell on the same row
   await userEvent.keyboard('{arrowright}');
-  expect(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
+  await expect.element(getCellsAtRowIndex(5)[0]).toHaveAttribute('aria-selected', 'true');
 
   await userEvent.keyboard('{arrowleft}{arrowup}');
 
@@ -390,7 +390,7 @@ test('cell navigation in a treegrid', async () => {
   await expect.element(getRows()[5]).toHaveClass(rowSelectedClassname);
 
   await userEvent.keyboard('{home}');
-  await expect.element(page.getByRole('row').all()[0]).toHaveClass(rowSelectedClassname);
+  await expect.element(page.getByRole('row').nth(0)).toHaveClass(rowSelectedClassname);
 
   // collpase parent group
   await userEvent.keyboard('{arrowdown}{arrowdown}{arrowleft}');

test/browser/column/colSpan.test.ts

@@ -46,9 +46,9 @@ describe('colSpan', () => {
     const topSummarryRow1 = getCellsAtRowIndex(0);
     expect(topSummarryRow1).toHaveLength(14);
     // 7th-8th cells are merged
-    expect(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8');
-    expect(topSummarryRow1[7]).toHaveAttribute('aria-colspan', '2');
-    expect(topSummarryRow1[7]).toHaveStyle({
+    await expect.element(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8');
+    await expect.element(topSummarryRow1[7]).toHaveAttribute('aria-colspan', '2');
+    await expect.element(topSummarryRow1[7]).toHaveStyle({
       gridColumnStart: '8',
       gridColumnEnd: '10'
     });
@@ -58,31 +58,31 @@ describe('colSpan', () => {
     const row1 = getCellsAtRowIndex(3);
     expect(row1).toHaveLength(14);
     // 7th-8th cells are merged
-    expect(row1[6]).toHaveAttribute('aria-colindex', '7');
-    expect(row1[6]).toHaveAttribute('aria-colspan', '2');
-    expect(row1[6]).toHaveStyle({
+    await expect.element(row1[6]).toHaveAttribute('aria-colindex', '7');
+    await expect.element(row1[6]).toHaveAttribute('aria-colspan', '2');
+    await expect.element(row1[6]).toHaveStyle({
       gridTemplateColumns: '7',
       gridColumnEnd: '9'
     });
-    expect(row1[7]).toHaveAttribute('aria-colindex', '9');
-    expect(row1[7]).not.toHaveAttribute('aria-colspan');
+    await expect.element(row1[7]).toHaveAttribute('aria-colindex', '9');
+    await expect.element(row1[7]).not.toHaveAttribute('aria-colspan');
 
     // 3rd-5th, 7th-8th cells are merged
     const row2 = getCellsAtRowIndex(4);
     expect(row2).toHaveLength(12);
-    expect(row2[2]).toHaveAttribute('aria-colindex', '3');
-    expect(row2[2]).toHaveStyle({
+    await expect.element(row2[2]).toHaveAttribute('aria-colindex', '3');
+    await expect.element(row2[2]).toHaveStyle({
       gridColumnStart: '3',
       gridColumnEnd: '6'
     });
-    expect(row2[2]).toHaveAttribute('aria-colspan', '3');
-    expect(row2[3]).toHaveAttribute('aria-colindex', '6');
-    expect(row2[4]).toHaveAttribute('aria-colindex', '7');
-    expect(row2[4]).toHaveStyle({
+    await expect.element(row2[2]).toHaveAttribute('aria-colspan', '3');
+    await expect.element(row2[3]).toHaveAttribute('aria-colindex', '6');
+    await expect.element(row2[4]).toHaveAttribute('aria-colindex', '7');
+    await expect.element(row2[4]).toHaveStyle({
       gridColumnStart: '7',
       gridColumnEnd: '9'
     });
-    expect(row2[5]).toHaveAttribute('aria-colindex', '9');
+    await expect.element(row2[5]).toHaveAttribute('aria-colindex', '9');
 
     expect(getCellsAtRowIndex(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns
     expect(getCellsAtRowIndex(7)).toHaveLength(10);

test/browser/column/headerCellClass.test.ts

@@ -17,8 +17,8 @@ test('headerCellClass is either nullish or a string', async () => {
 
   await setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
+  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
 });
 
 test('columnGroup.headerCellClass is either nullish or a string', async () => {
@@ -36,6 +36,6 @@ test('columnGroup.headerCellClass is either nullish or a string', async () => {
 
   await setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  expect(cell1).toHaveClass(cellClassname, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
+  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
+  await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
 });

test/browser/column/renderCell.test.tsx

@@ -21,15 +21,15 @@ describe('renderValue', () => {
   it('should be used by default', async () => {
     await setup({ columns, rows });
     const [cell1, cell2] = getCells();
-    expect(cell1).toHaveTextContent('101');
-    expect(cell2).toBeEmptyDOMElement();
+    await expect.element(cell1).toHaveTextContent('101');
+    await expect.element(cell2).toBeEmptyDOMElement();
   });
 
   it('should handle non-object values', async () => {
     await setup({ columns, rows: [null] });
     const [cell1, cell2] = getCells();
-    expect(cell1).toBeEmptyDOMElement();
-    expect(cell2).toBeEmptyDOMElement();
+    await expect.element(cell1).toBeEmptyDOMElement();
+    await expect.element(cell2).toBeEmptyDOMElement();
   });
 });
 
@@ -52,8 +52,8 @@ describe('Custom cell renderer', () => {
   it('should replace the default cell renderer', async () => {
     await setup({ columns, rows });
     const [cell1, cell2] = getCells();
-    expect(cell1).toHaveTextContent('#101');
-    expect(cell2).toHaveTextContent('No name');
+    await expect.element(cell1).toHaveTextContent('#101');
+    await expect.element(cell2).toHaveTextContent('No name');
   });
 
   it('can update rows', async () => {
@@ -93,9 +93,9 @@ describe('Custom cell renderer', () => {
     await page.render(<Test />);
 
     const [cell] = getCells();
-    expect(cell).toHaveTextContent('value: 1');
+    await expect.element(cell).toHaveTextContent('value: 1');
     await userEvent.click(page.getByRole('button'));
-    expect(cell).toHaveTextContent('value: 2');
+    await expect.element(cell).toHaveTextContent('value: 2');
     expect(onChange).toHaveBeenCalledExactlyOnceWith([{ id: 2 }], {
       column: {
         ...column,
@@ -140,29 +140,29 @@ test('Focus child if it sets tabIndex', async () => {
   const button1 = page.getByRole('button', { name: 'Button 1' });
   const button2 = page.getByRole('button', { name: 'Button 2' });
   const cell = page.getByRole('gridcell', { name: 'Button 1 Text Button 2' });
-  expect(button1).toHaveAttribute('tabindex', '-1');
-  expect(cell).toHaveAttribute('tabindex', '-1');
+  await expect.element(button1).toHaveAttribute('tabindex', '-1');
+  await expect.element(cell).toHaveAttribute('tabindex', '-1');
   await userEvent.click(page.getByText('Text'));
-  expect(button1).toHaveFocus();
-  expect(button1).toHaveAttribute('tabindex', '0');
+  await expect.element(button1).toHaveFocus();
+  await expect.element(button1).toHaveAttribute('tabindex', '0');
   await userEvent.tab({ shift: true });
-  expect(button1).not.toHaveFocus();
-  expect(button1).toHaveAttribute('tabindex', '-1');
-  expect(cell).toHaveAttribute('tabindex', '-1');
+  await expect.element(button1).not.toHaveFocus();
+  await expect.element(button1).toHaveAttribute('tabindex', '-1');
+  await expect.element(cell).toHaveAttribute('tabindex', '-1');
   await userEvent.click(button1);
-  expect(button1).toHaveFocus();
-  expect(button1).toHaveAttribute('tabindex', '0');
-  expect(cell).toHaveAttribute('tabindex', '-1');
+  await expect.element(button1).toHaveFocus();
+  await expect.element(button1).toHaveAttribute('tabindex', '0');
+  await expect.element(cell).toHaveAttribute('tabindex', '-1');
   await userEvent.tab({ shift: true });
   await userEvent.click(button2);
-  expect(button2).toHaveFocus();
+  await expect.element(button2).toHaveFocus();
   // It is user's responsibilty to set the tabIndex on button2
-  expect(button1).toHaveAttribute('tabindex', '0');
-  expect(cell).toHaveAttribute('tabindex', '-1');
+  await expect.element(button1).toHaveAttribute('tabindex', '0');
+  await expect.element(cell).toHaveAttribute('tabindex', '-1');
   await userEvent.click(button1);
-  expect(button1).toHaveFocus();
-  expect(button1).toHaveAttribute('tabindex', '0');
-  expect(cell).toHaveAttribute('tabindex', '-1');
+  await expect.element(button1).toHaveFocus();
+  await expect.element(button1).toHaveAttribute('tabindex', '0');
+  await expect.element(cell).toHaveAttribute('tabindex', '-1');
 });
 
 test('Cell should not steal focus when the focus is outside the grid and cell is recreated', async () => {
@@ -193,11 +193,11 @@ test('Cell should not steal focus when the focus is outside the grid and cell is
   await page.render(<FormatterTest />);
 
   await userEvent.click(getCellsAtRowIndex(0)[0]);
-  expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
+  await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
 
   const button = page.getByRole('button', { name: 'Test' }).element();
-  expect(button).not.toHaveFocus();
+  await expect.element(button).not.toHaveFocus();
   await userEvent.click(button);
-  expect(getCellsAtRowIndex(0)[0]).not.toHaveFocus();
-  expect(button).toHaveFocus();
+  await expect.element(getCellsAtRowIndex(0)[0]).not.toHaveFocus();
+  await expect.element(button).toHaveFocus();
 });

test/browser/column/renderEditCell.test.tsx

@@ -22,7 +22,7 @@ describe('Editor', () => {
     await userEvent.keyboard('2');
     await userEvent.tab();
     await expect.element(editor).not.toBeInTheDocument();
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/);
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12$/);
   });
 
   it('should open and commit changes on enter', async () => {
@@ -33,8 +33,8 @@ describe('Editor', () => {
     await userEvent.keyboard('{enter}');
     await expect.element(editor).toHaveValue(1);
     await userEvent.keyboard('3{enter}');
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/);
-    expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^13$/);
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
     await expect.element(editor).not.toBeInTheDocument();
   });
 
@@ -43,7 +43,7 @@ describe('Editor', () => {
     await userEvent.click(getCellsAtRowIndex(0)[0]);
     // TODO: await userEvent.keyboard('123{enter}'); fails in FF
     await userEvent.keyboard('{enter}123{enter}');
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
   });
 
   it('should close editor and discard changes on escape', async () => {
@@ -53,8 +53,8 @@ describe('Editor', () => {
     await expect.element(editor).toHaveValue(1);
     await userEvent.keyboard('2222{escape}');
     await expect.element(editor).not.toBeInTheDocument();
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/);
-    expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/);
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveFocus();
   });
 
   it('should commit changes and close editor when clicked outside', async () => {
@@ -65,7 +65,7 @@ describe('Editor', () => {
     await userEvent.keyboard('2222');
     await userEvent.click(page.getByText('outside'));
     await expect.element(editor).not.toBeInTheDocument();
-    expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12222$/);
+    await expect.element(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^12222$/);
   });
 
   it('should commit quickly enough on outside clicks so click event handlers access the latest rows state', async () => {
@@ -115,7 +115,7 @@ describe('Editor', () => {
     it('should be editable if an editor is specified and editable is undefined/null', async () => {
       await page.render(<EditorTest />);
       const cell = getCellsAtRowIndex(0)[1];
-      expect(cell).not.toHaveAttribute('aria-readonly');
+      await expect.element(cell).not.toHaveAttribute('aria-readonly');
       await userEvent.dblClick(cell);
       await expect.element(page.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
     });
@@ -129,7 +129,7 @@ describe('Editor', () => {
     it('should not be editable if editable is false', async () => {
       await page.render(<EditorTest editable={false} />);
       const cell = getCellsAtRowIndex(0)[1];
-      expect(cell).toHaveAttribute('aria-readonly', 'true');
+      await expect.element(cell).toHaveAttribute('aria-readonly', 'true');
       await userEvent.dblClick(cell);
 
       await expect
@@ -158,19 +158,19 @@ describe('Editor', () => {
       await expect.element(editor1).toHaveValue('a1');
       await userEvent.keyboard('23');
       // The cell value should update as the editor value is changed
-      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a123$/);
+      await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a123$/);
       // clicking in a portal does not count as an outside click
       await userEvent.click(editor1);
       await expect.element(editor1).toBeInTheDocument();
       // true outside clicks are still detected
       await userEvent.click(page.getByText('outside'));
       await expect.element(editor1).not.toBeInTheDocument();
-      expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus();
+      await expect.element(getCellsAtRowIndex(0)[1]).not.toHaveFocus();
 
       await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
       await userEvent.click(page.getByRole('textbox', { name: 'col2-editor' }));
       await userEvent.keyboard('{enter}');
-      expect(getCellsAtRowIndex(0)[1]).toHaveFocus();
+      await expect.element(getCellsAtRowIndex(0)[1]).toHaveFocus();
     });
 
     it('should not commit on outside click if commitOnOutsideClick is false', async () => {
@@ -204,7 +204,7 @@ describe('Editor', () => {
       await userEvent.click(getCellsAtRowIndex(0)[1]);
       // TODO: await userEvent.keyboard('yz{enter}'); fails in FF
       await userEvent.keyboard('{enter}yz{enter}');
-      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
+      await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
       await userEvent.keyboard('x');
       await expect
         .element(page.getByRole('textbox', { name: 'col2-editor' }))
@@ -224,7 +224,7 @@ describe('Editor', () => {
       );
       await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
       await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown
-      expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/);
+      await expect.element(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/);
     });
 
     it('should close the editor when closeOnExternalRowChange is true or undefined and row is changed from outside', async () => {

test/browser/column/renderHeaderCell.test.tsx

@@ -16,6 +16,6 @@ test('renderHeaderCell is either undefined or a component', async () => {
 
   await setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  expect(cell1).toHaveTextContent('ID');
-  expect(cell2).toHaveTextContent('Fancy! Name');
+  await expect.element(cell1).toHaveTextContent('ID');
+  await expect.element(cell2).toHaveTextContent('Fancy! Name');
 });

test/browser/column/renderSummaryCell.test.tsx

@@ -37,13 +37,13 @@ test('renderSummaryCell', async () => {
 
   const cells = getCells();
   expect(cells).toHaveLength(8);
-  expect(cells[0]).toHaveTextContent('Summary: 1');
-  expect(cells[2]).toHaveTextContent('Summary: 2');
-  expect(cells[4]).toHaveTextContent('Summary: 3');
-  expect(cells[6]).toHaveTextContent('Summary: 4');
+  await expect.element(cells[0]).toHaveTextContent('Summary: 1');
+  await expect.element(cells[2]).toHaveTextContent('Summary: 2');
+  await expect.element(cells[4]).toHaveTextContent('Summary: 3');
+  await expect.element(cells[6]).toHaveTextContent('Summary: 4');
   // nothing is rendered when renderSummaryCell is not defined
-  expect(cells[1]).toBeEmptyDOMElement();
-  expect(cells[3]).toBeEmptyDOMElement();
-  expect(cells[5]).toBeEmptyDOMElement();
-  expect(cells[7]).toBeEmptyDOMElement();
+  await expect.element(cells[1]).toBeEmptyDOMElement();
+  await expect.element(cells[3]).toBeEmptyDOMElement();
+  await expect.element(cells[5]).toBeEmptyDOMElement();
+  await expect.element(cells[7]).toBeEmptyDOMElement();
 });