Skip to content

Commit a105b2a

Browse files
JanpotJanpot
committed
Browser tests
1 parent 9e3c284 commit a105b2a

21 files changed

+480
-115
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
"@types/yargs": "^17.0.33",
138138
"@typescript-eslint/eslint-plugin": "^7.18.0",
139139
"@typescript-eslint/parser": "^7.18.0",
140+
"@vitest/browser": "^2.1.2",
140141
"@vitest/coverage-v8": "^2.1.2",
141142
"babel-loader": "^9.2.1",
142143
"babel-plugin-istanbul": "^7.0.0",

‎packages/mui-joy/src/styles/CssVarsProvider.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('[Joy] CssVarsProvider', () => {
1111
beforeEach(() => {
1212
originalMatchmedia = window.matchMedia;
1313
// Create mocks of localStorage getItem and setItem functions
14-
Object.defineProperty(global, 'localStorage', {
14+
Object.defineProperty(globalThis, 'localStorage', {
1515
value: {
1616
getItem: (key: string) => storage[key],
1717
setItem: (key: string, value: string) => {

‎packages/mui-joy/src/styles/extendTheme.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ describe('extendTheme', () => {
205205
beforeEach(() => {
206206
originalMatchmedia = window.matchMedia;
207207
// Create mocks of localStorage getItem and setItem functions
208-
Object.defineProperty(global, 'localStorage', {
208+
Object.defineProperty(globalThis, 'localStorage', {
209209
value: {
210210
getItem: (key) => storage[key],
211211
setItem: (key, value) => {

‎packages/mui-material/src/Button/Button.test.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -624,14 +624,8 @@ describe('<Button />', () => {
624624
expect(button.querySelector('.pulsate-focus-visible')).to.equal(null);
625625
});
626626

627-
describe('server-side', () => {
628-
before(function beforeHook() {
629-
// Only run the test on node.
630-
if (!/jsdom/.test(window.navigator.userAgent)) {
631-
this.skip();
632-
}
633-
});
634-
627+
// eslint-disable-next-line no-undef
628+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
635629
it('should server-side render', () => {
636630
const { container } = renderToString(<Button>Hello World</Button>);
637631
expect(container.firstChild).to.have.text('Hello World');

‎packages/mui-material/src/Fab/Fab.test.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -160,14 +160,8 @@ describe('<Fab />', () => {
160160
expect(renderedIconChild).to.have.class(childClassName);
161161
});
162162

163-
describe('server-side', () => {
164-
before(function beforeHook() {
165-
// Only run the test on node.
166-
if (!/jsdom/.test(window.navigator.userAgent)) {
167-
this.skip();
168-
}
169-
});
170-
163+
// eslint-disable-next-line no-undef
164+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
171165
it('should server-side render', () => {
172166
const { container } = renderToString(<Fab>Fab</Fab>);
173167
expect(container.firstChild).to.have.text('Fab');

‎packages/mui-material/src/Portal/Portal.test.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,9 @@ import Portal, { PortalProps } from '@mui/material/Portal';
77
describe('<Portal />', () => {
88
const { render, renderToString } = createRenderer();
99

10-
describe('server-side', () => {
11-
before(function beforeHook() {
12-
// Only run the test on node.
13-
if (!/jsdom/.test(window.navigator.userAgent)) {
14-
this.skip();
15-
}
16-
});
17-
10+
// @ts-expect-error
11+
// eslint-disable-next-line no-undef
12+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
1813
it('render nothing on the server', () => {
1914
const { container } = renderToString(
2015
<Portal>

‎packages/mui-material/src/Tabs/Tabs.test.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -368,15 +368,11 @@ describe('<Tabs />', () => {
368368
]);
369369
});
370370

371-
describe('hidden tab / tabs', () => {
371+
// eslint-disable-next-line no-undef
372+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('hidden tab / tabs', () => {
372373
let nodeEnv;
373374

374375
before(function test() {
375-
if (!/jsdom/.test(window.navigator.userAgent)) {
376-
this.skip();
377-
return;
378-
}
379-
380376
nodeEnv = process.env.NODE_ENV;
381377
// We can't use a regular assignment, because it causes a syntax error in Karma
382378
Object.defineProperty(process.env, 'NODE_ENV', {

‎packages/mui-material/src/TextareaAutosize/TextareaAutosize.test.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,9 @@ describe('<TextareaAutosize />', () => {
137137
expect(parseInt(input.style.height, 10)).to.be.within(15, 17);
138138
});
139139

140-
describe('layout', () => {
140+
// @ts-expect-error
141+
// eslint-disable-next-line no-undef
142+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('layout', () => {
141143
const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
142144
function setLayout(
143145
input: HTMLTextAreaElement,
@@ -166,11 +168,6 @@ describe('<TextareaAutosize />', () => {
166168
}
167169

168170
before(function beforeHook() {
169-
// Only run the test on node.
170-
if (!/jsdom/.test(window.navigator.userAgent)) {
171-
this.skip();
172-
}
173-
174171
stub(window, 'getComputedStyle').value(
175172
(node: Element) => getComputedStyleStub.get(node) || {},
176173
);

‎packages/mui-material/src/ToggleButton/ToggleButton.test.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -125,14 +125,8 @@ describe('<ToggleButton />', () => {
125125
});
126126
});
127127

128-
describe('server-side', () => {
129-
before(function beforeHook() {
130-
// Only run the test on node.
131-
if (!/jsdom/.test(window.navigator.userAgent)) {
132-
this.skip();
133-
}
134-
});
135-
128+
// eslint-disable-next-line no-undef
129+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('server-side', () => {
136130
it('should server-side render', () => {
137131
const { container } = renderToString(<ToggleButton value="hello">Hello World</ToggleButton>);
138132
expect(container.firstChild).to.have.text('Hello World');

‎packages/mui-material/src/internal/SwitchBase.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ describe('<SwitchBase />', () => {
395395

396396
describe('check transitioning between controlled states throws errors', () => {
397397
it('should error when uncontrolled and changed to controlled', function test() {
398-
if (global.didWarnControlledToUncontrolled) {
398+
if (globalThis.didWarnControlledToUncontrolled) {
399399
this.skip();
400400
}
401401

@@ -421,7 +421,7 @@ describe('<SwitchBase />', () => {
421421
});
422422

423423
it('should error when controlled and changed to uncontrolled', function test() {
424-
if (global.didWarnControlledToUncontrolled) {
424+
if (globalThis.didWarnControlledToUncontrolled) {
425425
this.skip();
426426
}
427427

‎packages/mui-material/src/styles/ThemeProvider.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('ThemeProvider', () => {
1212
originalMatchmedia = window.matchMedia;
1313
// Create mocks of localStorage getItem and setItem functions
1414
storage = {};
15-
Object.defineProperty(global, 'localStorage', {
15+
Object.defineProperty(globalThis, 'localStorage', {
1616
value: {
1717
getItem: (key: string) => storage[key],
1818
setItem: (key: string, value: string) => {

‎packages/mui-material/src/styles/ThemeProviderWithVars.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('[Material UI] ThemeProviderWithVars', () => {
1212
beforeEach(() => {
1313
originalMatchmedia = window.matchMedia;
1414
// Create mocks of localStorage getItem and setItem functions
15-
Object.defineProperty(global, 'localStorage', {
15+
Object.defineProperty(globalThis, 'localStorage', {
1616
value: {
1717
getItem: (key) => storage[key],
1818
setItem: (key, value) => {

‎packages/mui-material/src/styles/extendTheme.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('extendTheme', () => {
1414
beforeEach(() => {
1515
originalMatchmedia = window.matchMedia;
1616
// Create mocks of localStorage getItem and setItem functions
17-
Object.defineProperty(global, 'localStorage', {
17+
Object.defineProperty(globalThis, 'localStorage', {
1818
value: {
1919
getItem: (key) => storage[key],
2020
setItem: (key, value) => {

‎packages/mui-material/src/useScrollTrigger/useScrollTrigger.test.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ describe('useScrollTrigger', () => {
4848
});
4949
});
5050

51-
describe('scroll', () => {
51+
// eslint-disable-next-line no-undef
52+
describeSkipIf(!/jsdom/.test(window.navigator.userAgent))('scroll', () => {
5253
const triggerRef = React.createRef();
5354
const containerRef = React.createRef(); // Get the scroll container's parent
5455
const getContainer = () => containerRef.current.children[0]; // Get the scroll container
@@ -75,13 +76,6 @@ describe('useScrollTrigger', () => {
7576
customContainer: PropTypes.bool,
7677
};
7778

78-
before(function beforeHook() {
79-
// Only run the test on node.
80-
if (!/jsdom/.test(window.navigator.userAgent)) {
81-
this.skip();
82-
}
83-
});
84-
8579
function dispatchScroll(offset, element = window) {
8680
act(() => {
8781
element.pageYOffset = offset;

‎packages/mui-material/test/integration/Menu.test.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -308,18 +308,22 @@ describe('<Menu /> integration', () => {
308308
);
309309
});
310310

311-
it('closes the menu when Tabbing while the list is active', async () => {
312-
render(<ButtonMenu />);
311+
it.only('closes the menu when Tabbing while the list is active', async () => {
312+
const { user } = render(<ButtonMenu />);
313313

314314
const trigger = screen.getByRole('button');
315315
await act(async () => {
316316
trigger.focus();
317+
});
318+
319+
await act(async () => {
317320
trigger.click();
318321
});
319322

320323
// react-transition-group uses one commit per state transition so we need to wait a bit
321324
fireEvent.keyDown(screen.getAllByRole('menuitem')[0], { key: 'Tab' });
322-
clock.tick(0);
325+
326+
// await user.keyboard('[Tab]');
323327

324328
expect(screen.getByRole('menu', { hidden: true })).toBeInaccessible();
325329
});

‎packages/mui-material/vitest.config.ts

+11
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,18 @@ export default defineConfig({
2525
// We use performance.now in the codebase
2626
toFake: [...configDefaults.fakeTimers.toFake, 'performance'],
2727
},
28+
browser: {
29+
enabled: false, // enabled through CLI
30+
name: 'chromium',
31+
provider: 'playwright',
32+
headless: !!process.env.CI,
33+
viewport: {
34+
width: 1024,
35+
height: 896,
36+
},
37+
},
2838
},
39+
2940
resolve: {
3041
alias: {
3142
'@mui/internal-test-utils': path.resolve(MONOREPO_ROOT, './packages-internal/test-utils/src'),

‎packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('InitColorSchemeScript', () => {
2020

2121
beforeEach(() => {
2222
// Create mocks of localStorage getItem and setItem functions
23-
Object.defineProperty(global, 'localStorage', {
23+
Object.defineProperty(globalThis, 'localStorage', {
2424
value: {
2525
getItem: (key) => storage[key],
2626
},

‎packages/mui-system/src/cssVars/createCssVarsProvider.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('createCssVarsProvider', () => {
2828
originalMatchmedia = window.matchMedia;
2929

3030
// Create mocks of localStorage getItem and setItem functions
31-
Object.defineProperty(global, 'localStorage', {
31+
Object.defineProperty(globalThis, 'localStorage', {
3232
value: {
3333
getItem: spy((key) => storage[key]),
3434
setItem: spy((key, value) => {

‎packages/mui-system/src/cssVars/useCurrentColorScheme.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('useCurrentColorScheme', () => {
4545
// clear the localstorage
4646
storage = {};
4747
// Create mocks of localStorage getItem and setItem functions
48-
Object.defineProperty(global, 'localStorage', {
48+
Object.defineProperty(globalThis, 'localStorage', {
4949
value: {
5050
getItem: spy((key) => storage[key]),
5151
setItem: spy((key, value) => {

0 commit comments

Comments
 (0)