Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[code-infra] Playwright 1.49 #15493

Merged
merged 42 commits into from
Dec 2, 2024
Merged
Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
0e78492
use latest versions
JCQuintas Nov 19, 2024
1a8b8ce
install ffmpeg
JCQuintas Nov 19, 2024
20feb46
try removing changes
JCQuintas Nov 19, 2024
aa80576
Merge branch 'master' into playwright-1.49
JCQuintas Nov 19, 2024
36fe4ec
revert aliasing
JCQuintas Nov 19, 2024
0b048d1
try headless
JCQuintas Nov 19, 2024
316e231
improve headless mode
JCQuintas Nov 19, 2024
57f49bb
add comment
JCQuintas Nov 19, 2024
501774d
try chrome channel
JCQuintas Nov 19, 2024
bc67af0
revert channel
JCQuintas Nov 19, 2024
4d05ebc
try ss options
JCQuintas Nov 19, 2024
06ed4ee
add chart test to time sensitive
JCQuintas Nov 19, 2024
3d1d77d
try border box
JCQuintas Nov 19, 2024
8ad7c1c
Revert "try border box"
JCQuintas Nov 19, 2024
48f62fe
move mouse as first thing
JCQuintas Nov 19, 2024
a0874a0
try wait for font
JCQuintas Nov 19, 2024
9f5eb1c
Revert "try wait for font"
JCQuintas Nov 19, 2024
73a1a54
try scrolling hack
JCQuintas Nov 19, 2024
56fbd76
remove
JCQuintas Nov 19, 2024
f3afe39
add preconnect
JCQuintas Nov 19, 2024
ae48c8d
add docker image to renovate
JCQuintas Nov 20, 2024
752ecfa
Merge commit '1ed1f8c0dcc4e46cea9d245696617fdd679bf01b' into playwrig…
JCQuintas Nov 25, 2024
540812a
use regular run
JCQuintas Nov 25, 2024
128c5d9
headless
JCQuintas Nov 25, 2024
e33587d
revert
JCQuintas Nov 25, 2024
6731b18
fix keyboard focus issues
JCQuintas Nov 25, 2024
72a1c20
skip test
JCQuintas Nov 25, 2024
0b331f1
comment out for clarity
JCQuintas Nov 26, 2024
b710558
try isolating tests
JCQuintas Nov 26, 2024
1f18f8a
Merge branch 'master' into playwright-1.49
JCQuintas Nov 26, 2024
4ab0284
revert changes
JCQuintas Nov 26, 2024
be5cf55
Merge branch 'master' into playwright-1.49
JCQuintas Nov 26, 2024
f2a7f25
remove extra props
JCQuintas Nov 27, 2024
28dc2a3
Merge commit 'e465d2f0938b085385a761139e5d3ac2fa7e50a2' into playwrig…
JCQuintas Nov 28, 2024
f1a9549
Merge commit '73bf12315f63d2f7210e2d368a258e86a5f97e58' into playwrig…
JCQuintas Nov 28, 2024
fde716a
Revert changes
JCQuintas Dec 2, 2024
d235c1b
try removing arg
JCQuintas Dec 2, 2024
815810d
Revert ripple test
JCQuintas Dec 2, 2024
2521817
Ignore ripple test
JCQuintas Dec 2, 2024
9327762
Merge commit '82d46ab329a11bf9308e8a1cf57786ac0cec37ad' into playwrig…
JCQuintas Dec 2, 2024
15c6cfe
fix test
JCQuintas Dec 2, 2024
017ff19
revert mouse move
JCQuintas Dec 2, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions .circleci/config.yml
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
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
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}');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems different to the previous behavior on L516. 🤔
Did you have problems with?

      await act(() => getColumnHeaderCell(0, 0).focus());

The same question applies to the whole file.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 It should probably work fine.

My main grip is that using .focus() is not really how the user uses the keyboard. So if you want to test that your behaviour is working properly, you should emulate the entire action.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would leave this call for @mui/xgrid, but maybe we can create an alternative getColumnHeaderCell or focusColumnHeaderCell function, which would click on the respective cell? 🤔

Copy link
Member Author

@JCQuintas JCQuintas Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't add clicking on the cell itself cause I don't know if that causes other side effects

Eg: if we have selectable rows and we click on column 0, then it "selects" the row.

Focusing through keyboard interactions seemed more safe.

The main difference on why it has more "keypresses" than before is because the default focus goes to the "effective" first entry on the header if we press tab, but these tests are testing the column groups, which means they were first focusing on the first ever element on the header getColumnHeaderCell(0, 0), rather than the element that gets the focus first, which in this case would be getColumnHeaderCell(0, 2)

So, this means

Previous getColumnHeaderCell(0, 0)

H - Header
C - Content Cell

H00 H10 H20
H01 H11 H21
H02 H12 H22
--- --- ---
C00 C10 C20

[Tab] -> getColumnHeaderCell(0, 2)

H00 H10 H20
H01 H11 H21
H02 H12 H22
--- --- ---
C00 C10 C20

I simply moved the focus back to the getColumnHeaderCell(0, 0) from the original tests.

Now, it might be that the element at 0,2 shouldn't get focus on tab, which would be another problem unrelated to this PR IMO 😅

But the tests are comparable between themselves and the assertions didn't change.

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
44 changes: 22 additions & 22 deletions packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
screen,
act,
waitFor,
flushMicrotasks,
} from '@mui/internal-test-utils';
import {
DataGrid,
Expand Down Expand Up @@ -46,7 +45,7 @@ function getSelectedRowIds() {
}

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

const defaultData = getBasicGridData(4, 2);

Expand Down Expand Up @@ -592,26 +591,27 @@ 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have you considered rewriting it with async syntax, not using fake timers, but trying to rely on DOM assertions, like checking if the new item has a ripple effect and only one DOM element has a ripple effect..? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that was the previously commented code. I only in this last commit reverted the ripple logic to the original one. 815810d

// 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', () => {
it('should update the selected rows when the isRowSelectable prop changes', () => {
Expand Down
Loading