From 868ab70f70e0285590572250ab21e5df547b9360 Mon Sep 17 00:00:00 2001 From: dakahn Date: Thu, 2 Sep 2021 21:35:11 -0500 Subject: [PATCH 1/8] fix(Tile): recalculate tile rect height on component did mount --- packages/react/src/components/Tile/Tile.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js index 5d7778bffb74..56de993b844a 100644 --- a/packages/react/src/components/Tile/Tile.js +++ b/packages/react/src/components/Tile/Tile.js @@ -507,11 +507,23 @@ export class ExpandableTile extends Component { }; } + resizeObserver = null; + resizeElement = React.createRef(); + componentDidMount = () => { + this.resizeObserver = new ResizeObserver((entries) => { + const [aboveTheFold] = entries; + this.setState({ + tileMaxHeight: aboveTheFold.contentRect.height, + }); + }); + if (this.tile) { const getStyle = window.getComputedStyle(this.tile, null); if (this.aboveTheFold) { + this.resizeObserver.observe(this.aboveTheFold); + this.setState({ tileMaxHeight: this.aboveTheFold.getBoundingClientRect().height, tilePadding: @@ -522,6 +534,12 @@ export class ExpandableTile extends Component { } }; + componentWillUnmount() { + if (this.resizeObserver) { + this.resizeObserver.disconnect(); + } + } + componentDidUpdate = (prevProps) => { if (prevProps.expanded !== this.props.expanded) { this.setMaxHeight(); @@ -654,7 +672,9 @@ export class TileAboveTheFoldContent extends Component { const { children } = this.props; return ( - + {children} ); From 5dc3e4fed6f50094131148aa83ce848b65b3f2de Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Fri, 3 Sep 2021 14:24:13 -0500 Subject: [PATCH 2/8] Update packages/react/src/components/Tile/Tile.js Co-authored-by: Josh Black --- packages/react/src/components/Tile/Tile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js index 56de993b844a..10adf0321c96 100644 --- a/packages/react/src/components/Tile/Tile.js +++ b/packages/react/src/components/Tile/Tile.js @@ -673,7 +673,6 @@ export class TileAboveTheFoldContent extends Component { return ( {children} From 0582b4e7a957df10c82859f31bfdbabc1847b13b Mon Sep 17 00:00:00 2001 From: dakahn Date: Tue, 7 Sep 2021 15:07:37 -0500 Subject: [PATCH 3/8] fix(Tile): remove unused variable --- packages/react/src/components/Tile/Tile.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js index 56de993b844a..14649400a48e 100644 --- a/packages/react/src/components/Tile/Tile.js +++ b/packages/react/src/components/Tile/Tile.js @@ -508,7 +508,6 @@ export class ExpandableTile extends Component { } resizeObserver = null; - resizeElement = React.createRef(); componentDidMount = () => { this.resizeObserver = new ResizeObserver((entries) => { From 6b815adb60973b68a9e54f7d029b60be53ee2308 Mon Sep 17 00:00:00 2001 From: dakahn Date: Tue, 7 Sep 2021 17:08:30 -0500 Subject: [PATCH 4/8] chore(Tile): update tests with mock ResizeObserver --- packages/react/src/components/Tile/Tile-test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js index 73327ccefac7..740fb240cb59 100644 --- a/packages/react/src/components/Tile/Tile-test.js +++ b/packages/react/src/components/Tile/Tile-test.js @@ -19,6 +19,14 @@ import { settings } from 'carbon-components'; const { prefix } = settings; +const observe = jest.fn(); +const unobserve = jest.fn(); + +window.ResizeObserver = jest.fn(() => ({ + observe, + unobserve, +})); + describe('Tile', () => { describe('Renders default tile as expected', () => { const wrapper = shallow( From 2058b14bf4e2ba4ba9cab0f82429e772cb8e81b4 Mon Sep 17 00:00:00 2001 From: dakahn Date: Tue, 7 Sep 2021 17:58:40 -0500 Subject: [PATCH 5/8] chore(Tile): format file --- packages/react/src/components/Tile/Tile.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js index a61a7c8ab55d..c6334f84615e 100644 --- a/packages/react/src/components/Tile/Tile.js +++ b/packages/react/src/components/Tile/Tile.js @@ -671,8 +671,7 @@ export class TileAboveTheFoldContent extends Component { const { children } = this.props; return ( - + {children} ); From 3cb3d1dbb16a9acbafc9c115a07dfd631d34dda2 Mon Sep 17 00:00:00 2001 From: dakahn Date: Wed, 8 Sep 2021 17:49:09 -0500 Subject: [PATCH 6/8] fix(Tile-test): wrap resizeObserver in before/aftereach --- .../react/src/components/Tile/Tile-test.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js index 740fb240cb59..42ffe91fd3eb 100644 --- a/packages/react/src/components/Tile/Tile-test.js +++ b/packages/react/src/components/Tile/Tile-test.js @@ -19,14 +19,6 @@ import { settings } from 'carbon-components'; const { prefix } = settings; -const observe = jest.fn(); -const unobserve = jest.fn(); - -window.ResizeObserver = jest.fn(() => ({ - observe, - unobserve, -})); - describe('Tile', () => { describe('Renders default tile as expected', () => { const wrapper = shallow( @@ -258,8 +250,22 @@ describe('Tile', () => { ); + let nativeResizeObserver = null; + beforeEach(() => { wrapper.state().expanded = false; + + nativeResizeObserver = window.ResizeObserver; + window.ResizeObserver = jest.fn(() => { + return { + observe: jest.fn(), + unobserve: jest.fn(), + }; + }); + }); + + afterEach(() => { + window.ResizeObserver = nativeResizeObserver; }); it('renders children as expected', () => { From 8def3e9aa85e9253dbafed70be48cc394f6cbb96 Mon Sep 17 00:00:00 2001 From: dakahn Date: Mon, 13 Sep 2021 11:36:41 -0500 Subject: [PATCH 7/8] fix(Tile-test): add asynchronous afterAll call --- .../react/src/components/Tile/Tile-test.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js index 42ffe91fd3eb..6da329b23c9d 100644 --- a/packages/react/src/components/Tile/Tile-test.js +++ b/packages/react/src/components/Tile/Tile-test.js @@ -18,6 +18,7 @@ import { shallow, mount } from 'enzyme'; import { settings } from 'carbon-components'; const { prefix } = settings; +let nativeResizeObserver = null; describe('Tile', () => { describe('Renders default tile as expected', () => { @@ -236,6 +237,19 @@ describe('Tile', () => { }); describe('Renders expandable tile as expected', () => { + window.ResizeObserver = jest.fn(() => { + return { + observe: jest.fn(), + unobserve: jest.fn(), + }; + }); + + nativeResizeObserver = window.ResizeObserver; + + afterAll(() => { + window.ResizeObserver = nativeResizeObserver; + }); + const wrapper = mount( @@ -250,22 +264,8 @@ describe('Tile', () => { ); - let nativeResizeObserver = null; - beforeEach(() => { wrapper.state().expanded = false; - - nativeResizeObserver = window.ResizeObserver; - window.ResizeObserver = jest.fn(() => { - return { - observe: jest.fn(), - unobserve: jest.fn(), - }; - }); - }); - - afterEach(() => { - window.ResizeObserver = nativeResizeObserver; }); it('renders children as expected', () => { From 7860a5d1d1ab62a494d818a6cf3420a7108b11dd Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 13 Sep 2021 11:53:45 -0500 Subject: [PATCH 8/8] fix(jest): add ResizeObserver to setup --- config/jest-config-carbon/setup/setup.js | 10 ++++++++++ packages/react/src/components/Tile/Tile-test.js | 14 -------------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/config/jest-config-carbon/setup/setup.js b/config/jest-config-carbon/setup/setup.js index c832e988aa3f..474e57786fa4 100644 --- a/config/jest-config-carbon/setup/setup.js +++ b/config/jest-config-carbon/setup/setup.js @@ -39,3 +39,13 @@ if (global.window) { const { getComputedStyle } = window; window.getComputedStyle = (element) => getComputedStyle(element); } + +if (global.window) { + window.ResizeObserver = jest.fn(() => { + return { + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), + }; + }); +} diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js index 6da329b23c9d..73327ccefac7 100644 --- a/packages/react/src/components/Tile/Tile-test.js +++ b/packages/react/src/components/Tile/Tile-test.js @@ -18,7 +18,6 @@ import { shallow, mount } from 'enzyme'; import { settings } from 'carbon-components'; const { prefix } = settings; -let nativeResizeObserver = null; describe('Tile', () => { describe('Renders default tile as expected', () => { @@ -237,19 +236,6 @@ describe('Tile', () => { }); describe('Renders expandable tile as expected', () => { - window.ResizeObserver = jest.fn(() => { - return { - observe: jest.fn(), - unobserve: jest.fn(), - }; - }); - - nativeResizeObserver = window.ResizeObserver; - - afterAll(() => { - window.ResizeObserver = nativeResizeObserver; - }); - const wrapper = mount(