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.

Sign up for GitHub

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

[deps] Upgrade to react v17 and react-testing-library #1268

Merged
merged 44 commits into from
Aug 10, 2021
Merged

[deps] Upgrade to react v17 and react-testing-library #1268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
7af9d27
add react-17 and react-testing-library
Jul 8, 2021
50b491b
upgrade and fix unit tests for visx-annotation
gazcn007 Jul 8, 2021
1486bc6
add react 17 and fix unit tests for withBoundingRects
gazcn007 Jul 12, 2021
13c4d31
nit fixes
gazcn007 Jul 12, 2021
0c31c0e
ts fixes
gazcn007 Jul 13, 2021
7d1baf5
update visx-brush
gazcn007 Jul 13, 2021
1e72ca7
update visx-chord
gazcn007 Jul 13, 2021
56ea63d
update visx-clip-path
gazcn007 Jul 13, 2021
43e0298
update visx-demo
gazcn007 Jul 13, 2021
9ad75ba
update visx-drag
gazcn007 Jul 13, 2021
d4fc817
update visx-geo
gazcn007 Jul 13, 2021
38cecc4
update visx-glyph
gazcn007 Jul 13, 2021
307c0df
update visx-gradient
gazcn007 Jul 13, 2021
dee81c7
update visx-grid
gazcn007 Jul 13, 2021
7d11538
update visx-group
gazcn007 Jul 13, 2021
f747068
update visx-heatmap
gazcn007 Jul 13, 2021
c510122
update visx-hierarchy
gazcn007 Jul 13, 2021
d89e019
update visx-legend
gazcn007 Jul 13, 2021
417fde2
update visx-marker
gazcn007 Jul 13, 2021
7a5cbeb
update visx-network
gazcn007 Jul 13, 2021
eb19772
update visx-pattern
gazcn007 Jul 13, 2021
5f77f15
update visx-responsive
gazcn007 Jul 15, 2021
730b9df
update visx-shape
gazcn007 Jul 18, 2021
0fa3a14
update visx-stats
gazcn007 Jul 18, 2021
59ee866
update visx-text
gazcn007 Jul 19, 2021
6c37f2d
update visx-threshold
gazcn007 Jul 19, 2021
94ac62e
update visx-tooltip
gazcn007 Jul 19, 2021
2dce10b
update visx-visx
gazcn007 Jul 19, 2021
35e012a
update visx-voronoi
gazcn007 Jul 19, 2021
47135bf
update visx-zoom
gazcn007 Jul 19, 2021
2c0f086
update visx-xychart
gazcn007 Jul 25, 2021
ae6a329
rewrote tests
gazcn007 Jul 25, 2021
1e5f22c
update AreaSeries test
gazcn007 Jul 25, 2021
74e7e30
update Hooks and Providers unit tests
gazcn007 Jul 25, 2021
4cbaaf5
add AreaStack and BarStack tests
gazcn007 Jul 26, 2021
84f54cf
fix unit test for BarGroup, BarSeries, GlyphSeries, Grid, LineSeries,…
gazcn007 Aug 3, 2021
e8e8fa4
fix Axis.test.tsx
gazcn007 Aug 3, 2021
71596d6
fix comments
gazcn007 Aug 4, 2021
28084a7
add react 16.8.0 as a dep
gazcn007 Aug 5, 2021
350fe0f
address comments
gazcn007 Aug 8, 2021
7c8f061
update visx-react-spring
gazcn007 Aug 8, 2021
66f7e2e
update visx-demo dependencies
gazcn007 Aug 9, 2021
9ba1368
update visx-axis depedencies
gazcn007 Aug 9, 2021
5d8da92
remove shallow from visx-text/Test.test.tsx
gazcn007 Aug 10, 2021
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
8 changes: 6 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@
"@types/node-fetch": "1.6.9",
"@types/react-test-renderer": "^16.9.0",
"@types/webpack": "^4.41.17",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.2.0",
"@testing-library/react-hooks": "^3.2.1",
"@testing-library/user-event": "^11.0.1",
"chalk": "4.1.0",
"coveralls": "^3.0.6",
"enzyme": "^3.10.0",
Expand All @@ -81,8 +85,8 @@
"marked": "^0.7.0",
"node-fetch": "2.6.1",
"raf": "^3.4.0",
"react": "^15.0.0-0 || ^16.0.0-0",
"react-dom": "^15.0.0-0 || ^16.0.0-0",
"react": "^16.0.0-0 || ^17.0.0-0",
"react-dom": "^16.0.0-0 || ^17.0.0-0",
"react-test-renderer": "^16.8.6",
"regenerator-runtime": "^0.10.5",
"timezone-mock": "^1.1.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-annotation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
},
"homepage": "https://github.com/airbnb/visx#readme",
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.0.0-0 || ^17.0.0-0"
},
"dependencies": {
"@types/react": "*",
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-annotation/test/Annotation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import React, { useContext } from 'react';
import { Annotation } from '../src';
import AnnotationContext from '../src/context/AnnotationContext';
Expand All @@ -16,7 +16,7 @@ describe('<Annotation />', () => {
return null;
}

mount(
render(
<Annotation {...annotation}>
<AnnotationChild />
</Annotation>,
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-axis/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"prop-types": "^15.6.0"
},
"peerDependencies": {
"react": "^16.3.0-0"
"react": "^16.3.0-0 || ^17.0.0-0"
},
"publishConfig": {
"access": "public"
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-bounds/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0",
"react-dom": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.0.0-0 || ^17.0.0-0",
"react-dom": "^16.0.0-0 || ^17.0.0-0"
}
}
137 changes: 95 additions & 42 deletions packages/visx-bounds/test/withBoundingRects.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,83 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import * as React from 'react';
import { mount } from 'enzyme';
import { render, waitFor } from '@testing-library/react';
import fireEvent from '@testing-library/user-event';
import { withBoundingRects } from '../src';
import '@testing-library/jest-dom';

const expectedRectShape = expect.objectContaining({
top: expect.any(Number),
right: expect.any(Number),
bottom: expect.any(Number),
left: expect.any(Number),
width: expect.any(Number),
height: expect.any(Number),
});
type RectShape = {
top?: number;
right?: number;
bottom?: number;
left?: number;
width?: number;
height?: number;
};

const emptyRect = {
top: 0,
right: 0,
bottom: 0,
left: 0,
width: 0,
height: 0,
};

const mockRect = {
top: 50,
left: 50,
bottom: 0,
right: 0,
};

type BoundingRectsComponentProps = {
rect?: RectShape;
parentRect?: RectShape;
getRects?: () => DOMRect;
children?: JSX.Element;
otherProps?: object;
};

// Component created for testing purpose
function BoundingRectsComponent({
rect,
parentRect,
getRects,
children,
...otherProps
}: BoundingRectsComponentProps) {
const parentRectStyle = {
top: parentRect?.top,
left: parentRect?.left,
bottom: parentRect?.bottom,
right: parentRect?.right,
};

const rectStyle = {
top: rect?.top,
left: rect?.left,
bottom: rect?.bottom,
right: rect?.right,
};

return (
<div data-testid="BoundingRectsComponentParent" style={parentRectStyle}>
<div data-testid="BoundingRectsComponent" style={rectStyle} onClick={() => getRects?.()}>
{children}
{JSON.stringify(otherProps)}
</div>
</div>
);
}

describe('withBoundingRects()', () => {
beforeAll(() => {
// mock getBoundingClientRect
Element.prototype.getBoundingClientRect = jest.fn(() => ({
width: 100,
height: 100,
top: 0,
left: 0,
bottom: 0,
right: 0,
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
...mockRect,
x: 0,
y: 0,
width: 100,
height: 100,
toJSON: jest.fn(),
}));
});
Expand All @@ -40,41 +86,48 @@ describe('withBoundingRects()', () => {
expect(withBoundingRects).toBeDefined();
});

test('it should pass rect, parentRect, and getRect props to the wrapped component', () => {
const Component = () => <div />;
const HOC = withBoundingRects(Component);
const wrapper = mount(<HOC />);
const RenderedComponent = wrapper.find(Component);
test('it should pass rect, parentRect, and getRect props to the wrapped component', async () => {
const HOC = withBoundingRects(BoundingRectsComponent);
// @ts-ignore
const { getByTestId } = render(<HOC />);

// getBoundingClientRect should be called twice, once for the component, and once for its parent
await waitFor(() => expect(Element.prototype.getBoundingClientRect).toHaveBeenCalledTimes(2));

expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
expect(RenderedComponent.prop('rect')).toEqual(expectedRectShape);
expect(RenderedComponent.prop('parentRect')).toEqual(expectedRectShape);
Copy link
Collaborator Author

@gazcn007 gazcn007 Jul 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

@williaster This is where RTL's philosophy of testing differs from Enzyme. Directly checking internal props & states is a NO-NO in RTL

Copy link
Collaborator

Choose a reason for hiding this comment

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

^I agree the RTL philosophy is better for things like this 💯 this is why enzyme struggles with adapters for each react release 😅

expect(typeof RenderedComponent.prop('getRects')).toBe('function');
const RenderedComponent = getByTestId('BoundingRectsComponent');
const RenderedComponentParent = getByTestId('BoundingRectsComponentParent');
Copy link
Collaborator

Choose a reason for hiding this comment

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

TIL getByTestId


const expectedStyle = `top: ${mockRect.top}px; bottom: ${mockRect.bottom}px; left: ${mockRect.left}px; right: ${mockRect.right}px;`;
expect(RenderedComponent).toHaveStyle(expectedStyle);
expect(RenderedComponentParent).toHaveStyle(expectedStyle);

fireEvent.click(RenderedComponent);
// upon onClick time, getBuondingClientRect should be called extra 2 times
expect(Element.prototype.getBoundingClientRect).toHaveBeenCalledTimes(4);
});

test('it should pass additional props to the wrapped component', () => {
const Component = () => <div />;
const HOC = withBoundingRects(Component);
const HOC = withBoundingRects(BoundingRectsComponent);
// @ts-ignore
const wrapper = mount(<HOC bananas="are yellow" />);
const RenderedComponent = wrapper.find(Component);
expect(RenderedComponent.prop('bananas')).toBe('are yellow');
const { getByText } = render(<HOC bananas="are yellow" />);
expect(getByText('are yellow', { exact: false })).toBeInTheDocument();
});

test('it should return default empty state if no node', () => {
test('it should not render if no node', () => {
const Component = () => null;
const HOC = withBoundingRects(Component);
const wrapper = mount(<HOC />);
const RenderedComponent = wrapper.find(Component);
expect(RenderedComponent.prop('rect')).toBeUndefined();
expect(RenderedComponent.prop('parentRect')).toBeUndefined();
const { container } = render(<HOC />);
expect(container.innerHTML).toHaveLength(0);
});

test('it should set rect and parentRect to empty state if no getBoundingClient()', () => {
const Component = () => <>{''}</>;
const HOC = withBoundingRects(Component);
const wrapper = mount(<HOC />);
const RenderedComponent = wrapper.find(Component);
expect(RenderedComponent.prop('rect')).toEqual(emptyRect);
(Element.prototype.getBoundingClientRect as unknown) = null;
const HOC = withBoundingRects(BoundingRectsComponent);
// @ts-ignore
const { getByTestId } = render(<HOC />);
const RenderedComponent = getByTestId('BoundingRectsComponent');
const RenderedComponentParent = getByTestId('BoundingRectsComponentParent');
expect(RenderedComponent).toHaveStyle(emptyRect);
expect(RenderedComponentParent).toHaveStyle(emptyRect);
});
});
2 changes: 1 addition & 1 deletion packages/visx-brush/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"access": "public"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.0.0-0 || ^17.0.0-0"
},
"dependencies": {
"@visx/drag": "1.18.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-chord/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
},
"homepage": "https://github.com/airbnb/visx#readme",
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.0.0-0 || ^17.0.0-0"
},
"dependencies": {
"@types/d3-chord": "^1.0.9",
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-clip-path/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.0.0-0 || ^17.0.0-0"
},
"publishConfig": {
"access": "public"
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@
"nprogress": "^0.2.0",
"prismjs": "^1.19.0",
"raw-loader": "^4.0.0",
"react": "^16.9.0",
"react": "^17.0.0",
"react-docgen-typescript-loader": "3.7.2",
"react-dom": "^16.9.0",
"react-dom": "^17.0.0",
"react-github-button": "^0.1.10",
"react-markdown": "^4.3.1",
"react-spring": "^9.2.0",
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
"private": true,
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react": "^17",
"@types/react-dom": "^17",
"@visx/responsive": "latest",
"react": "^16",
"react-dom": "^16",
"react": "^17",
"react-dom": "^17",
"react-scripts-ts": "3.1.0",
"typescript": "^3"
},
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/visx-annotation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
"private": true,
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react": "^17",
"@types/react-dom": "^17",
"@visx/annotation": "latest",
"@visx/mock-data": "latest",
"@visx/responsive": "latest",
"@visx/scale": "latest",
"@visx/shape": "latest",
"d3-array": "^2.8.0",
"react": "^16",
"react-dom": "^16",
"react": "^17",
"react-dom": "^17",
"react-scripts-ts": "3.1.0",
"typescript": "^3"
},
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/visx-area/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"private": true,
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react": "^17",
"@types/react-dom": "^17",
"@visx/curve": "latest",
"@visx/event": "latest",
"@visx/gradient": "latest",
Expand All @@ -18,8 +18,8 @@
"@visx/tooltip": "latest",
"d3-array": "^2.4.0",
"d3-time-format": "2.2.3",
"react": "^16.8",
"react-dom": "^16.8",
"react": "^17",
"react-dom": "^17",
"react-scripts-ts": "3.1.0",
"typescript": "^3"
},
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/visx-axis/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/d3-time-format": "2.1.1",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react": "^17",
"@types/react-dom": "^17",
"@visx/axis": "latest",
"@visx/curve": "latest",
"@visx/gradient": "latest",
Expand All @@ -19,8 +19,8 @@
"@visx/shape": "latest",
"@visx/scale": "latest",
"d3-time-format": "^2.2.3",
"react": "^16",
"react-dom": "^16",
"react": "^17",
"react-dom": "^17",
"react-scripts-ts": "3.1.0",
"react-spring": "^9.2.0",
"typescript": "^3"
Expand Down
8 changes: 4 additions & 4 deletions packages/visx-demo/src/sandboxes/visx-bargroup-horizontal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@
"private": true,
"dependencies": {
"@babel/runtime": "^7.8.4",
"@types/react": "^16",
"@types/react-dom": "^16",
"@types/react": "^17",
"@types/react-dom": "^17",
"@visx/axis": "latest",
"@visx/group": "latest",
"@visx/mock-data": "latest",
"@visx/responsive": "latest",
"@visx/scale": "latest",
"@visx/shape": "latest",
"d3-time-format": "^2.2.3",
"react": "^16",
"react-dom": "^16",
"react": "^17",
"react-dom": "^17",
"react-scripts-ts": "3.1.0",
"typescript": "^3"
},
Expand Down
Loading