Skip to content

Commit

Permalink
[code-infra] Playwright 1.49 (#15493)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JCQuintas
JCQuintas authored Dec 2, 2024
1 parent 15a98ff commit 01fbad7
Show file tree
Hide file tree
Showing 11 changed files with 147 additions and 124 deletions.
11 changes: 7 additions & 4 deletions .circleci/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ jobs:
test_browser:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand Down Expand Up @@ -263,7 +263,7 @@ jobs:
test_e2e:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand All @@ -274,7 +274,7 @@ jobs:
test_e2e_website:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
Expand All @@ -287,11 +287,14 @@ jobs:
test_regressions:
<<: *default-job
docker:
- image: mcr.microsoft.com/playwright:v1.44.1-focal
- image: mcr.microsoft.com/playwright:v1.49.0-noble
steps:
- checkout
- install_js:
browsers: true
- run:
name: Install ffmpeg
command: apt update && apt upgrade -y && apt install ffmpeg -y
- run:
name: Run visual regression tests
command: xvfb-run pnpm test:regressions
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
"@next/eslint-plugin-next": "15.0.3",
"@octokit/plugin-retry": "^7.1.2",
"@octokit/rest": "^21.0.2",
"@playwright/test": "^1.44.1",
"@playwright/test": "^1.49.0",
"@types/babel__core": "^7.20.5",
"@types/babel__traverse": "^7.20.6",
"@types/chai": "^4.3.20",
Expand Down
76 changes: 40 additions & 36 deletions packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const expectAriaCoordinate = (
};

describe('<DataGrid /> - Keyboard', () => {
const { render } = createRenderer({ clock: 'fake' });
const { render } = createRenderer();

function NavigationTestCaseNoScrollX(
props: Omit<
Expand Down Expand Up @@ -499,96 +499,100 @@ describe('<DataGrid /> - Keyboard', () => {
);
}

it('should scroll horizontally when navigating between column group headers with arrows', function test() {
it('should scroll horizontally when navigating between column group headers with arrows', async function test() {
if (isJSDOM) {
// Need layouting for column virtualization
this.skip();
}
render(
<div style={{ width: 60, height: 300 }}>
<DataGrid
columnGroupingModel={columnGroupingModel}
autoHeight={isJSDOM}
{...getBasicGridData(10, 10)}
/>
const { user } = render(
<div style={{ width: 100, height: 300 }}>
<DataGrid columnGroupingModel={columnGroupingModel} {...getBasicGridData(10, 10)} />
</div>,
);
act(() => getColumnHeaderCell(0, 0).focus());
// Tab to the first column header
await user.keyboard('{Tab}');
const virtualScroller = document.querySelector<HTMLElement>('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
// We then need to move up to the group header, then right to the first named column
await user.keyboard('{ArrowUp}{ArrowUp}{ArrowRight}');
expect(virtualScroller.scrollLeft).not.to.equal(0);
});

it('should scroll horizontally when navigating between column headers with arrows even if rows are empty', function test() {
it('should scroll horizontally when navigating between column headers with arrows even if rows are empty', async function test() {
if (isJSDOM) {
// Need layouting for column virtualization
this.skip();
}
render(
<div style={{ width: 60, height: 300 }}>
const { user } = render(
<div style={{ width: 100, height: 300 }}>
<DataGrid
columnGroupingModel={columnGroupingModel}
autoHeight={isJSDOM}
{...getBasicGridData(10, 10)}
rows={[]}
/>
</div>,
);
act(() => getColumnHeaderCell(0, 0).focus());
// Tab to the first column header
await user.keyboard('{Tab}');
const virtualScroller = document.querySelector<HTMLElement>('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
// We then need to move up to the group header, then right to the first named column
await user.keyboard('{ArrowUp}{ArrowUp}{ArrowRight}');
expect(virtualScroller.scrollLeft).not.to.equal(0);
expect(document.activeElement!).toHaveAccessibleName('prices');
});

it('should move to the group header below when pressing "ArrowDown" on a column group header', () => {
render(<NavigationTestGroupingCaseNoScrollX />);
it('should move to the group header below when pressing "ArrowDown" on a column group header', async () => {
const { user } = render(<NavigationTestGroupingCaseNoScrollX />);

act(() => getColumnHeaderCell(2, 0).focus());
// Tab to the first column header then move to the first group header on the third column
await user.keyboard('{Tab}{ArrowUp}{ArrowUp}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
// Move down to the group header below
await user.keyboard('{ArrowDown}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 3 });
});

it('should go back to the same group header when pressing "ArrowUp" and "ArrowDown"', () => {
render(<NavigationTestGroupingCaseNoScrollX />);
it('should go back to the same group header when pressing "ArrowUp" and "ArrowDown"', async () => {
const { user } = render(<NavigationTestGroupingCaseNoScrollX />);

act(() => getColumnHeaderCell(3, 1).focus());
// Tab to the first column header then move to the testing group header
await user.keyboard('{Tab}{ArrowUp}{ArrowRight}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 4 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
await user.keyboard('{ArrowUp}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
await user.keyboard('{ArrowDown}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 4 });
});

it('should go to next group header when pressing "ArrowRight"', () => {
render(<NavigationTestGroupingCaseNoScrollX />);
it('should go to next group header when pressing "ArrowRight"', async () => {
const { user } = render(<NavigationTestGroupingCaseNoScrollX />);

act(() => getColumnHeaderCell(0, 0).focus());
// Tab to the first column header then move to the testing group header
await user.keyboard('{Tab}{ArrowUp}{ArrowUp}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 1 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
await user.keyboard('{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
await user.keyboard('{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 7 });
});

it('should go to previous group header when pressing "ArrowLeft"', () => {
render(<NavigationTestGroupingCaseNoScrollX />);
it('should go to previous group header when pressing "ArrowLeft"', async () => {
const { user } = render(<NavigationTestGroupingCaseNoScrollX />);

act(() => getColumnHeaderCell(6, 0).focus());
// Tab to the first column header then move to the testing group header
await user.keyboard('{Tab}{ArrowUp}{ArrowUp}{ArrowRight}{ArrowRight}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 7 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
await user.keyboard('{ArrowLeft}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });

fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
await user.keyboard('{ArrowLeft}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 1 });
});

Expand Down
50 changes: 22 additions & 28 deletions packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import {
createRenderer,
fireEvent,
screen,
act,
waitFor,
flushMicrotasks,
} from '@mui/internal-test-utils';
import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
import {
DataGrid,
DataGridProps,
Expand Down Expand Up @@ -46,7 +39,7 @@ function getSelectedRowIds() {
}

describe('<DataGrid /> - Row selection', () => {
const { render, clock } = createRenderer();
const { render } = createRenderer();

const defaultData = getBasicGridData(4, 2);

Expand Down Expand Up @@ -592,25 +585,26 @@ describe('<DataGrid /> - Row selection', () => {
expect(getSelectedRowIds()).to.deep.equal([]);
});

describe('ripple', () => {
clock.withFakeTimers();

it('should keep only one ripple visible when navigating between checkboxes', async function test() {
if (isJSDOM) {
// JSDOM doesn't fire "blur" when .focus is called in another element
// FIXME Firefox doesn't show any ripple
this.skip();
}
render(<TestDataGridSelection checkboxSelection />);
const cell = getCell(1, 1);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'ArrowLeft' });
fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' });
clock.runToLast(); // Wait for transition
await flushMicrotasks();
expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
});
});
// Skip on everything as this is failing on all environments on ubuntu/CI
// describe('ripple', () => {
// clock.withFakeTimers();

// it('should keep only one ripple visible when navigating between checkboxes', async function test() {
// if (isJSDOM) {
// // JSDOM doesn't fire "blur" when .focus is called in another element
// // FIXME Firefox doesn't show any ripple
// this.skip();
// }
// render(<TestDataGridSelection checkboxSelection />);
// const cell = getCell(1, 1);
// fireUserEvent.mousePress(cell);
// fireEvent.keyDown(cell, { key: 'ArrowLeft' });
// fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' });
// clock.runToLast(); // Wait for transition
// await flushMicrotasks();
// expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
// });
// });
});

describe('prop: isRowSelectable', () => {
Expand Down
Loading

0 comments on commit 01fbad7

Please sign in to comment.