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.

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 visx-xychart to react 17 #1

Merged
merged 9 commits into from
Aug 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion packages/visx-xychart/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"access": "public"
},
"peerDependencies": {
"react": "^16.4.0-0",
"react": "^16.8.0 || ^17.0.0",
"react-spring": "^9.2.0"
},
"dependencies": {
Expand Down
30 changes: 16 additions & 14 deletions packages/visx-xychart/test/components/Annotation.test.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import React from 'react';
import { mount } from 'enzyme';
import {
Annotation as VxAnnotation,
EditableAnnotation as VxEditableAnnotation,
} from '@visx/annotation';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { DataContext, Annotation, AnimatedAnnotation } from '../../src';
import getDataContext from '../mocks/getDataContext';

const series = { key: 'visx', data: [{}], xAccessor: () => 4, yAccessor: () => 7 };

function setup(children: React.ReactNode) {
return mount(
return render(
<DataContext.Provider value={getDataContext(series)}>
<svg>{children}</svg>
</DataContext.Provider>,
Expand All @@ -22,20 +19,22 @@ describe('<Annotation />', () => {
expect(Annotation).toBeDefined();
});
it('should render a VxAnnotation', () => {
const wrapper = setup(
const { getByText } = setup(
<Annotation dataKey={series.key} datum={{}}>
{'test'}
</Annotation>,
);
expect(wrapper.find(VxAnnotation)).toHaveLength(1);
expect(getByText('test')).toBeInTheDocument();
});
it('should render a VxEditableAnnotation when editable=true', () => {
const wrapper = setup(
const { container } = setup(
<Annotation editable dataKey={series.key} datum={{}}>
{'test'}
</Annotation>,
);
expect(wrapper.find(VxEditableAnnotation)).toHaveLength(1);
// with editable=true, the svg should have a circle overlay with 'cursor: grab' attribute
const CircleElement = container.querySelector('circle');
expect(CircleElement).toHaveAttribute('cursor');
});
});

Expand All @@ -44,19 +43,22 @@ describe('<AnimatedAnnotation />', () => {
expect(AnimatedAnnotation).toBeDefined();
});
it('should render a VxAnnotation', () => {
const wrapper = setup(
const { getByText } = setup(
<AnimatedAnnotation dataKey={series.key} datum={{}}>
{'test'}
</AnimatedAnnotation>,
);
expect(wrapper.find(VxAnnotation)).toHaveLength(1);
expect(getByText('test')).toBeInTheDocument();
});
it('should render a VxEditableAnnotation when editable=true', () => {
const wrapper = setup(
const { container } = setup(
<AnimatedAnnotation editable dataKey={series.key} datum={{}}>
{'test'}
</AnimatedAnnotation>,
);
expect(wrapper.find(VxEditableAnnotation)).toHaveLength(1);

// with editable=true, the svg should have a circle overlay with 'cursor: grab' attribute
const CircleElement = container.querySelector('circle');
expect(CircleElement).toHaveAttribute('cursor');
});
});
45 changes: 24 additions & 21 deletions packages/visx-xychart/test/components/AreaSeries.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useContext, useEffect } from 'react';
import { animated } from 'react-spring';
import { mount } from 'enzyme';
import { Area, LinePath } from '@visx/shape';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { AnimatedAreaSeries, DataContext, AreaSeries, useEventEmitter } from '../../src';
import getDataContext from '../mocks/getDataContext';
import setupTooltipTest from '../mocks/setupTooltipTest';
Expand All @@ -15,66 +14,69 @@ describe('<AreaSeries />', () => {
});

it('should render an Area', () => {
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AreaSeries dataKey={series.key} {...series} />
</svg>
</DataContext.Provider>,
);
// @ts-ignore produces a union type that is too complex to represent.ts(2590)
expect(wrapper.find(Area)).toHaveLength(1);
const Path = container.querySelector('path');
expect(Path).toBeInTheDocument();
});

it('should set strokeLinecap="round" to make datum surrounded by nulls visible', () => {
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AreaSeries dataKey={series.key} renderLine={false} {...series} />
</svg>
</DataContext.Provider>,
);
expect(wrapper.find('path').prop('strokeLinecap')).toBe('round');
const Path = container.querySelector('path');
expect(Path).toBeInTheDocument();
expect(Path).toHaveAttribute('stroke-linecap', 'round');
});

it('should use x/y0Accessors an Area', () => {
it('should use x/y0Accessors in an Area', () => {
const y0Accessor = jest.fn(() => 3);
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AreaSeries dataKey={series.key} {...series} y0Accessor={y0Accessor} />
</svg>
</DataContext.Provider>,
);

const callCount = y0Accessor.mock.calls.length;
const Path = container.querySelector('path');
expect(Path).toBeInTheDocument();
expect(y0Accessor).toHaveBeenCalled();
const y0Area = wrapper.find(Area).prop('y0') as Function;
y0Area();
expect(y0Accessor).toHaveBeenCalledTimes(callCount + 1);
});

it('should render a LinePath is renderLine=true', () => {
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AreaSeries renderLine dataKey={series.key} {...series} />
</svg>
</DataContext.Provider>,
);
// @ts-ignore produces a union type that is too complex to represent.ts(2590)
expect(wrapper.find(LinePath)).toHaveLength(1);

const LinePath = container.querySelector('.visx-line');
expect(LinePath).toBeInTheDocument();
});

it('should render Glyphs if focus/blur handlers are set', () => {
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AreaSeries dataKey={series.key} {...series} onFocus={() => {}} />
</svg>
</DataContext.Provider>,
);
expect(wrapper.find('circle')).toHaveLength(series.data.length);

const Circles = container.querySelectorAll('circle');
expect(Circles).toHaveLength(series.data.length);
});

it('should invoke showTooltip/hideTooltip on pointermove/pointerout', () => {
Expand Down Expand Up @@ -123,13 +125,14 @@ describe('<AnimatedAreaSeries />', () => {
expect(AnimatedAreaSeries).toBeDefined();
});
it('should render an animated.path', () => {
const wrapper = mount(
const { container } = render(
<DataContext.Provider value={getDataContext(series)}>
<svg>
<AnimatedAreaSeries renderLine={false} dataKey={series.key} {...series} />
</svg>
</DataContext.Provider>,
);
expect(wrapper.find(animated.path)).toHaveLength(1);
const Path = container.querySelectorAll('path');
expect(Path).toHaveLength(1);
});
});
29 changes: 15 additions & 14 deletions packages/visx-xychart/test/components/AreaStack.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useContext, useEffect } from 'react';
import { mount } from 'enzyme';
import { animated } from 'react-spring';
import { Area, LinePath } from '@visx/shape';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
AreaStack,
AreaSeries,
Expand Down Expand Up @@ -48,7 +47,7 @@ describe('<AreaStack />', () => {
});

it('should render Areas', () => {
const wrapper = mount(
const { container } = render(
<DataProvider {...providerProps}>
<svg>
<AreaStack>
Expand All @@ -58,12 +57,12 @@ describe('<AreaStack />', () => {
</svg>
</DataProvider>,
);
// @ts-ignore produces a union type that is too complex to represent.ts(2590)
expect(wrapper.find(Area)).toHaveLength(2);
const Areas = container.querySelectorAll('.visx-area');
expect(Areas).toHaveLength(2);
});

it('should render LinePaths if renderLine=true', () => {
const wrapper = mount(
const { container } = render(
<DataProvider {...providerProps}>
<svg>
<AreaStack renderLine>
Expand All @@ -73,12 +72,12 @@ describe('<AreaStack />', () => {
</svg>
</DataProvider>,
);
// @ts-ignore produces a union type that is too complex to represent.ts(2590)
expect(wrapper.find(LinePath)).toHaveLength(2);
const LinePaths = container.querySelectorAll('.visx-line');
expect(LinePaths).toHaveLength(2);
});

it('should render Glyphs if focus/blur handlers are set', () => {
const wrapper = mount(
const { container } = render(
<DataProvider {...providerProps}>
<svg>
<AreaStack onFocus={() => {}}>
Expand All @@ -87,7 +86,8 @@ describe('<AreaStack />', () => {
</svg>
</DataProvider>,
);
expect(wrapper.find('circle')).toHaveLength(series1.data.length);
const Circles = container.querySelectorAll('circle');
expect(Circles).toHaveLength(series1.data.length);
});

it('should update scale domain to include stack sums including negative values', () => {
Expand All @@ -101,7 +101,7 @@ describe('<AreaStack />', () => {
return null;
}

mount(
render(
<DataProvider {...providerProps}>
<svg>
<AreaStack>
Expand Down Expand Up @@ -165,7 +165,7 @@ describe('<AnimatedAreaStack />', () => {
expect(AnimatedAreaStack).toBeDefined();
});
it('should render an animated.path', () => {
const wrapper = mount(
const { container } = render(
<DataProvider {...providerProps}>
<svg>
<AnimatedAreaStack renderLine={false}>
Expand All @@ -175,6 +175,7 @@ describe('<AnimatedAreaStack />', () => {
</svg>
</DataProvider>,
);
expect(wrapper.find(animated.path)).toHaveLength(2);
const Circles = container.querySelectorAll('path');
expect(Circles).toHaveLength(2);
});
});
Loading