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

refactor(superset-ui-core): Migrate ChartFrame to RTL #28563

Merged
merged 3 commits into from
May 21, 2024
Merged

refactor(superset-ui-core): Migrate ChartFrame to RTL #28563

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2f336c0
Add null return, refactor tests
rtexelm May 17, 2024
c481fb8
Remove describe block
rtexelm May 17, 2024
5110165
Re-refactor tests, omit unnecsry, add new
rtexelm May 20, 2024
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
188 changes: 96 additions & 92 deletions superset-frontend/packages/superset-ui-core/test/chart-composition/ChartFrame.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,110 +18,114 @@
*/

import React from 'react';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ChartFrame } from '@superset-ui/core';

describe('TooltipFrame', () => {
it('renders content that requires smaller space than frame', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
contentWidth={300}
contentHeight={300}
renderContent={({ width, height }) => (
<div>
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div').text()).toEqual('400/400');
});
type Props = {
contentWidth?: number;
contentHeight?: number;
height: number;
renderContent: ({
height,
width,
}: {
height: number;
width: number;
}) => React.ReactNode;
width: number;
};

const renderChartFrame = (props: Props) => render(<ChartFrame {...props} />);

it('renders content without specifying content size', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
renderContent={({ width, height }) => (
<div>
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div').text()).toEqual('400/400');
it('renders content that requires smaller space than frame', () => {
const { getByText } = renderChartFrame({
width: 400,
height: 400,
contentWidth: 300,
contentHeight: 300,
renderContent: ({ width, height }) => (
<div>
{width}/{height}
</div>
),
});
expect(getByText('400/400')).toBeInTheDocument();
});

it('renders content that requires same size with frame', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
contentWidth={400}
contentHeight={400}
renderContent={({ width, height }) => (
<div>
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div').text()).toEqual('400/400');
it('renders content without specifying content size', () => {
const { getByText } = renderChartFrame({
width: 400,
height: 400,
renderContent: ({ width, height }) => (
<div>
{width}/{height}
</div>
),
});
expect(getByText('400/400')).toBeInTheDocument();
});

it('renders content that requires space larger than frame', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
contentWidth={500}
contentHeight={500}
renderContent={({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div.chart').text()).toEqual('500/500');
it('renders content that requires equivalent size to frame', () => {
const { getByText } = renderChartFrame({
width: 400,
height: 400,
contentWidth: 400,
contentHeight: 400,
renderContent: ({ width, height }) => (
<div>
{width}/{height}
</div>
),
});
expect(getByText('400/400')).toBeInTheDocument();
});

it('renders content that width is larger than frame', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
contentWidth={500}
renderContent={({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div.chart').text()).toEqual('500/400');
it('renders content that requires space larger than frame', () => {
const { getByText, container } = renderChartFrame({
width: 400,
height: 400,
contentWidth: 500,
contentHeight: 500,
renderContent: ({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
),
});
expect(getByText('500/500')).toBeInTheDocument();
const containerDiv = container.firstChild as HTMLElement;
expect(containerDiv).toHaveStyle({ overflowX: 'auto', overflowY: 'auto' });
});

it('renders content that height is larger than frame', () => {
const wrapper = shallow(
<ChartFrame
width={400}
height={400}
contentHeight={600}
renderContent={({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
)}
/>,
);
expect(wrapper.find('div.chart').text()).toEqual('400/600');
it('renders content when width is larger than frame', () => {
const { getByText, container } = renderChartFrame({
width: 400,
height: 400,
contentWidth: 500,
renderContent: ({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
),
});
expect(getByText('500/400')).toBeInTheDocument();
const containerDiv = container.firstChild as HTMLElement;
expect(containerDiv).toHaveStyle({ overflowX: 'auto', overflowY: 'hidden' });
});

it('renders an empty frame when renderContent is not given', () => {
const wrapper = shallow(<ChartFrame width={400} height={400} />);
expect(wrapper.find('div')).toHaveLength(0);
it('renders content when height is larger than frame', () => {
const { getByText, container } = renderChartFrame({
width: 400,
height: 400,
contentHeight: 600,
renderContent: ({ width, height }) => (
<div className="chart">
{width}/{height}
</div>
),
});
expect(getByText('400/600')).toBeInTheDocument();
const containerDiv = container.firstChild as HTMLElement;
expect(containerDiv).toHaveStyle({ overflowX: 'hidden', overflowY: 'auto' });
});
Loading