Skip to content

Commit

Permalink
fix(minHeight): issues/501 restructure resize event (#507)
Browse files Browse the repository at this point in the history 
* minHeight, restructure resize, autoUpdate as separate params
  • Loading branch information
@cdcabrera
cdcabrera committed Nov 17, 2020
1 parent 579beae commit baa1dbe
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 86 deletions.
30 changes: 20 additions & 10 deletions src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,10 @@ exports[`GraphCard Component should render a non-connected component: non-connec
className="curiosity-usage-graph"
>
<MinHeight
autoUpdate={false}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand Down Expand Up @@ -123,9 +124,10 @@ exports[`GraphCard Component should render a non-connected component: non-connec
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -199,9 +201,10 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
className="curiosity-usage-graph"
>
<MinHeight
autoUpdate={false}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand Down Expand Up @@ -252,9 +255,10 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -324,9 +328,10 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
className="curiosity-usage-graph"
>
<MinHeight
autoUpdate={false}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand Down Expand Up @@ -377,9 +382,10 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -449,9 +455,10 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
className="curiosity-usage-graph"
>
<MinHeight
autoUpdate={false}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand Down Expand Up @@ -502,9 +509,10 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -574,9 +582,10 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
className="curiosity-usage-graph"
>
<MinHeight
autoUpdate={false}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand Down Expand Up @@ -627,9 +636,10 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down
21 changes: 18 additions & 3 deletions src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ exports[`InventoryList Component should handle variations in data: filtered data
autoUpdate={true}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand All @@ -152,9 +154,10 @@ exports[`InventoryList Component should handle variations in data: filtered data
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight-10"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -204,6 +207,8 @@ exports[`InventoryList Component should handle variations in data: filtered data
autoUpdate={true}
key="footerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardFooter
className=""
Expand Down Expand Up @@ -233,6 +238,8 @@ exports[`InventoryList Component should handle variations in data: variable data
autoUpdate={true}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand All @@ -256,9 +263,10 @@ exports[`InventoryList Component should handle variations in data: variable data
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight-10"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand Down Expand Up @@ -304,6 +312,8 @@ exports[`InventoryList Component should handle variations in data: variable data
autoUpdate={true}
key="footerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardFooter
className=""
Expand Down Expand Up @@ -333,6 +343,8 @@ exports[`InventoryList Component should render a non-connected component: non-co
autoUpdate={true}
key="headerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardHeader>
<CardTitle>
Expand All @@ -356,9 +368,10 @@ exports[`InventoryList Component should render a non-connected component: non-co
</CardHeader>
</MinHeight>
<MinHeight
autoUpdate={false}
key="bodyMinHeight-10"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardBody>
<div
Expand All @@ -382,6 +395,8 @@ exports[`InventoryList Component should render a non-connected component: non-co
autoUpdate={true}
key="footerMinHeight"
minHeight={0}
updateOnContent={false}
updateOnResize={true}
>
<CardFooter
className=""
Expand Down
6 changes: 1 addition & 5 deletions src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@

exports[`MinHeight Component should render a non-connected component: non-connected 1`] = `
<div
style={
Object {
"minHeight": 0,
}
}
className="curiosity-minheight"
>
<div>
lorem ipsum
Expand Down
78 changes: 47 additions & 31 deletions src/components/minHeight/__tests__/minHeight.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ import { mount, shallow } from 'enzyme';
import { MinHeight } from '../minHeight';

describe('MinHeight Component', () => {
beforeEach(() => {
jest.useFakeTimers();
});

afterEach(() => {
jest.runAllTimers();
});

it('should render a non-connected component', () => {
const props = {};

Expand All @@ -12,67 +20,75 @@ describe('MinHeight Component', () => {

it('should set minHeight in relation to contents and props', () => {
const props = {
autoUpdate: true
updateOnContent: true
};
const component = shallow(<MinHeight {...props}>lorem ipsum</MinHeight>);

expect(component.instance().setMinHeight).toBeDefined();
const component = mount(<MinHeight {...props}>lorem ipsum</MinHeight>);
const componentInstance = component.instance();

// initial height should be zero
expect(component.instance().updatedMinHeight).toEqual(0);
// initial minHeight should be undefined
componentInstance.containerRef.current = { style: {} };
expect(componentInstance.containerRef.current.style.minHeight).toBe(undefined);

// set the container size arbitrarily
component.instance().containerRef.current = { clientHeight: 100 };
component.instance().componentDidUpdate();
expect(component.instance().updatedMinHeight).toEqual(100);
componentInstance.containerRef.current = { clientHeight: 75, style: {} };
componentInstance.innerContainerRef.current = { clientHeight: 75 };
jest.runAllTimers();
expect(componentInstance.containerRef.current.style.minHeight).toBe('75px');

// set a minimum minHeight
component.setProps({ minHeight: 200 });
expect(component.instance().updatedMinHeight).toEqual(200);
jest.runAllTimers();
expect(componentInstance.containerRef.current.style.minHeight).toBe('200px');

// disable "on update" minHeight adjustments
component.setProps({ autoUpdate: false, minHeight: 300 });
expect(component.instance().updatedMinHeight).toEqual(200);
component.setProps({ updateOnContent: false, minHeight: 300 });
jest.runAllTimers();
expect(componentInstance.containerRef.current.style.minHeight).toBe('200px');
});

it('should set minHeight on resize', () => {
const props = {};
const component = shallow(<MinHeight {...props}>lorem ipsum</MinHeight>);
const componentInstance = component.instance();

expect(component.instance().onResizeContainer).toBeDefined();
expect(componentInstance.onResizeContainer).toBeDefined();

// initial height and width should be zero
expect(component.instance().updatedMinHeight).toEqual(0);
expect(component.instance().updatedContainerWidth).toEqual(0);
componentInstance.containerRef.current = {};
expect(componentInstance.updatedContainerWidth).toBe(0);

// set the container size arbitrarily and force handleResize to fire
component.instance().containerRef.current = { clientHeight: 100, clientWidth: 200 };
componentInstance.containerRef.current = { clientHeight: 100, clientWidth: 200, style: {} };
componentInstance.innerContainerRef.current = { clientHeight: 100, clientWidth: 200 };
global.dispatchEvent(new Event('resize'));
expect(component.instance().updatedMinHeight).toEqual(100);
expect(component.instance().updatedContainerWidth).toEqual(200);
expect(componentInstance.containerRef.current.style.minHeight).toBe('100px');
expect(componentInstance.updatedContainerWidth).toBe(200);

// set the container size arbitrarily and force handleResize to fire
component.instance().containerRef.current = { clientHeight: 1000, clientWidth: 1337 };
componentInstance.containerRef.current = { clientHeight: 1000, clientWidth: 1337, style: {} };
componentInstance.innerContainerRef.current = { clientHeight: 1000, clientWidth: 1337 };
global.dispatchEvent(new Event('resize'));
expect(componentInstance.containerRef.current.style.minHeight).toBe('1000px');
expect(componentInstance.updatedContainerWidth).toBe(1337);

componentInstance.containerRef.current = { clientHeight: 600, clientWidth: 600, style: { minHeight: '1000px' } };
componentInstance.innerContainerRef.current = { clientHeight: 600, clientWidth: 600 };
component.setProps({ updateOnResize: false });
global.dispatchEvent(new Event('resize'));
expect(component.instance().updatedMinHeight).toEqual(1000);
expect(component.instance().updatedContainerWidth).toEqual(1337);
expect(componentInstance.containerRef.current.style.minHeight).toBe('1000px');
expect(componentInstance.updatedContainerWidth).toBe(1337);
});

it('should attempt to handle a ResizeObserver', () => {
const observe = jest.fn();
const unobserve = jest.fn();

window.ResizeObserver = jest.fn().mockImplementation(() => ({
observe,
unobserve
}));

const props = {};
const setResizeObserver = jest.spyOn(MinHeight.prototype, 'setResizeObserver');

const component = mount(<MinHeight {...props}>lorem ipsum</MinHeight>);
expect(observe).toHaveBeenCalledTimes(1);
expect(setResizeObserver).toHaveBeenCalledTimes(1);

const resizeObserver = jest.spyOn(component.instance(), 'resizeObserver');
component.unmount();
expect(unobserve).toHaveBeenCalledTimes(1);
expect(resizeObserver).toHaveBeenCalledTimes(1);
});

it('should run componentWillUnmount method successfully', () => {
Expand Down
Loading

0 comments on commit baa1dbe

Please sign in to comment.