From 490abc4820ffe15d0c3c8143d4cde929405480b2 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Mon, 12 Aug 2024 11:08:35 +0200 Subject: [PATCH 1/4] [IconButton] Fix hover background color behavior --- .../mui-material/src/IconButton/IconButton.js | 3 +++ .../src/IconButton/IconButton.test.js | 20 ++++++++++++++++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 31ce68e22f2f82..316781b6cd5341 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -164,6 +164,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { color = 'default', disabled = false, disableFocusRipple = false, + disableRipple = false, size = 'medium', ...other } = props; @@ -174,6 +175,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { color, disabled, disableFocusRipple, + disableRipple, size, }; @@ -185,6 +187,7 @@ const IconButton = React.forwardRef(function IconButton(inProps, ref) { centerRipple focusRipple={!disableFocusRipple} disabled={disabled} + disableRipple={disableRipple} ref={ref} {...other} ownerState={ownerState} diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index 25ca0ca6b2b9d3..465980ed582aed 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; -import { createRenderer, reactMajor } from '@mui/internal-test-utils'; +import { createRenderer, reactMajor, fireEvent } from '@mui/internal-test-utils'; import capitalize from '@mui/utils/capitalize'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton'; @@ -141,4 +141,22 @@ describe('', () => { )).not.to.throw(); }); + + it('should apply the hover background by default', () => { + const { container, getByTestId } = render(); + + fireEvent.mouseMove(container.firstChild, { + clientX: 19, + }); + expect(getComputedStyle(getByTestId('icon')).backgroundColor).to.equal('rgba(0, 0, 0, 0.04)'); + }); + + it('should not apply the hover background if disableRipple is true', () => { + const { container, getByTestId } = render(); + + fireEvent.mouseMove(container.firstChild, { + clientX: 19, + }); + expect(getComputedStyle(getByTestId('icon')).backgroundColor).to.equal('rgba(0, 0, 0, 0)'); + }); }); From e6121e65c90898abc2a8834c1c3254720cb8783d Mon Sep 17 00:00:00 2001 From: mnajdova Date: Mon, 12 Aug 2024 11:27:02 +0200 Subject: [PATCH 2/4] Use getComputedStyle in the tests --- .../mui-material/src/IconButton/IconButton.test.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index 465980ed582aed..bcec55dcb49fe2 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -143,20 +143,24 @@ describe('', () => { }); it('should apply the hover background by default', () => { - const { container, getByTestId } = render(); + const { container, getByTestId } = render(); fireEvent.mouseMove(container.firstChild, { clientX: 19, }); - expect(getComputedStyle(getByTestId('icon')).backgroundColor).to.equal('rgba(0, 0, 0, 0.04)'); + expect(getByTestId('icon-button')).toHaveComputedStyle({ + backgroundColor: 'rgba(0, 0, 0, 0.04)', + }); }); it('should not apply the hover background if disableRipple is true', () => { - const { container, getByTestId } = render(); + const { container, getByTestId } = render( + , + ); fireEvent.mouseMove(container.firstChild, { clientX: 19, }); - expect(getComputedStyle(getByTestId('icon')).backgroundColor).to.equal('rgba(0, 0, 0, 0)'); + expect(getByTestId('icon-button')).toHaveComputedStyle({ backgroundColor: 'rgba(0, 0, 0, 0)' }); }); }); From 0c6c28eb99d601d96d2e54865456ef1c67c021d9 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Mon, 12 Aug 2024 11:44:35 +0200 Subject: [PATCH 3/4] skip browser tests --- .../mui-material/src/IconButton/IconButton.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index bcec55dcb49fe2..6053bdbb45a6f2 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -142,7 +142,11 @@ describe('', () => { )).not.to.throw(); }); - it('should apply the hover background by default', () => { + it('should apply the hover background by default', function test() { + if(!/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const { container, getByTestId } = render(); fireEvent.mouseMove(container.firstChild, { @@ -154,6 +158,10 @@ describe('', () => { }); it('should not apply the hover background if disableRipple is true', () => { + if(!/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const { container, getByTestId } = render( , ); From 9c595a171ff7c4d679e2c92fdd858cdce29dab76 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Mon, 12 Aug 2024 11:45:43 +0200 Subject: [PATCH 4/4] convert arrow function to named function --- packages/mui-material/src/IconButton/IconButton.test.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index 6053bdbb45a6f2..76011f1d2dbf29 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -143,10 +143,10 @@ describe('', () => { }); it('should apply the hover background by default', function test() { - if(!/jsdom/.test(window.navigator.userAgent)) { + if (!/jsdom/.test(window.navigator.userAgent)) { this.skip(); } - + const { container, getByTestId } = render(); fireEvent.mouseMove(container.firstChild, { @@ -157,8 +157,8 @@ describe('', () => { }); }); - it('should not apply the hover background if disableRipple is true', () => { - if(!/jsdom/.test(window.navigator.userAgent)) { + it('should not apply the hover background if disableRipple is true', function test() { + if (!/jsdom/.test(window.navigator.userAgent)) { this.skip(); }