iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: Adds tests and storybook to PopoverSection component (#13438) 

* test: Adds storybook to PopoverSection component

* test: Adds tests and storybook to PopoverSection component
This commit is contained in:
Michael S. Molina 2021-03-09 17:08:10 -03:00 committed by GitHub
parent f0a9dccc70
commit fc36de2d1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 207 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
superset-frontend/spec/javascripts/components/PopoverSection_spec.jsx
View File

@ -1,52 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { shallow } from 'enzyme';
import PopoverSection from 'src/components/PopoverSection';
describe('PopoverSection', () => {
const defaultProps = {
title: 'Section Title',
isSelected: true,
onSelect: () => {},
info: 'info section',
children: <div />,
};
let wrapper;
const factory = overrideProps => {
const props = { ...defaultProps, ...(overrideProps || {}) };
return shallow(<PopoverSection {...props} />);
};
beforeEach(() => {
wrapper = factory();
});
it('renders', () => {
expect(React.isValidElement(<PopoverSection {...defaultProps} />)).toBe(
true,
);
});
it('is show an icon when selected', () => {
expect(wrapper.find('.fa-check')).toExist();
});
it('is show no icon when not selected', () => {
expect(factory({ isSelected: false }).find('.fa-check')).toHaveLength(0);
});
});

52
superset-frontend/src/components/PopoverSection.jsx
View File

@ -1,52 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
const propTypes = {
title: PropTypes.string.isRequired,
isSelected: PropTypes.bool.isRequired,
onSelect: PropTypes.func.isRequired,
info: PropTypes.string,
children: PropTypes.node.isRequired,
};
export default function PopoverSection({
title,
isSelected,
children,
onSelect,
info,
}) {
return (
<div className={`PopoverSection ${!isSelected ? 'dimmed' : ''}`}>
<div role="button" tabIndex={0} onClick={onSelect} className="pointer">
<strong data-test="popover-title">{title}</strong> &nbsp;
{info && (
<InfoTooltipWithTrigger tooltip={info} label="date-free-tooltip" />
)}
&nbsp;
<i className={isSelected ? 'fa fa-check text-primary' : ''} />
</div>
<div className="m-t-5 m-l-5">{children}</div>
</div>
);
}
PopoverSection.propTypes = propTypes;

55
superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx Normal file
View File

@ -0,0 +1,55 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import PopoverSection from '.';
export default {
title: 'PopoverSection',
};
export const InteractivePopoverSection = (args: any) => (
<PopoverSection {...args}>
<div
css={{
display: 'flex',
justifyContent: 'center',
border: '1px solid',
alignItems: 'center',
width: 100,
height: 100,
}}
>
Content
</div>
</PopoverSection>
);
InteractivePopoverSection.args = {
title: 'Title',
isSelected: true,
info: 'Some description about the content',
};
InteractivePopoverSection.story = {
parameters: {
knobs: {
disable: true,
},
},
};

62
superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx Normal file
View File

@ -0,0 +1,62 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import PopoverSection from 'src/components/PopoverSection';
test('renders with default props', () => {
render(
<PopoverSection title="Title">
<div role="form" />
</PopoverSection>,
);
expect(screen.getByRole('form')).toBeInTheDocument();
expect(screen.getAllByRole('img').length).toBe(1);
});
test('renders tooltip icon', () => {
render(
<PopoverSection title="Title" info="Tooltip">
<div role="form" />
</PopoverSection>,
);
expect(screen.getAllByRole('img').length).toBe(2);
});
test('renders a tooltip when hovered', async () => {
render(
<PopoverSection title="Title" info="Tooltip">
<div role="form" />
</PopoverSection>,
);
userEvent.hover(screen.getAllByRole('img')[0]);
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
});
test('calls onSelect when clicked', () => {
const onSelect = jest.fn();
render(
<PopoverSection title="Title" onSelect={onSelect}>
<div role="form" />
</PopoverSection>,
);
userEvent.click(screen.getByRole('img'));
expect(onSelect).toHaveBeenCalled();
});

87
superset-frontend/src/components/PopoverSection/index.tsx Normal file
View File

@ -0,0 +1,87 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React, { MouseEventHandler, ReactNode } from 'react';
import { useTheme } from '@superset-ui/core';
import { Tooltip } from 'src/common/components/Tooltip';
import Icon from 'src/components/Icon';
export interface PopoverSectionProps {
title: string;
isSelected?: boolean;
onSelect?: MouseEventHandler<HTMLDivElement>;
info?: string;
children?: ReactNode;
}
export default function PopoverSection({
title,
isSelected,
children,
onSelect,
info,
}: PopoverSectionProps) {
const theme = useTheme();
return (
<div
css={{
paddingBottom: theme.gridUnit * 2,
opacity: isSelected ? 1 : theme.opacity.mediumHeavy,
}}
>
<div
role="button"
tabIndex={0}
onClick={onSelect}
css={{
display: 'flex',
alignItems: 'center',
cursor: onSelect ? 'pointer' : 'default',
}}
>
<strong data-test="popover-title">{title}</strong>
{info && (
<Tooltip title={info} css={{ marginLeft: theme.gridUnit }}>
<Icon
role="img"
name="info-solid"
width={14}
height={14}
color={theme.colors.grayscale.light1}
/>
</Tooltip>
)}
<Icon
role="img"
name="check"
color={
isSelected ? theme.colors.primary.base : theme.colors.grayscale.base
}
/>
</div>
<div
css={{
marginLeft: theme.gridUnit,
marginTop: theme.gridUnit,
}}
>
{children}
</div>
</div>
);
}

9
superset-frontend/src/explore/components/controls/AnnotationLayer.jsx
View File

@ -455,10 +455,9 @@ export default class AnnotationLayer extends React.PureComponent {
<div style={{ marginRight: '2rem' }}>
<PopoverSection
isSelected
onSelect={() => {}}
title="Annotation Slice Configuration"
info={`This section allows you to configure how to use the slice
to generate annotations.`}
title={t('Annotation Slice Configuration')}
info={t(`This section allows you to configure how to use the slice
to generate annotations.`)}
>
{(annotationType === ANNOTATION_TYPES.EVENT ||
annotationType === ANNOTATION_TYPES.INTERVAL) && (
@ -597,7 +596,6 @@ export default class AnnotationLayer extends React.PureComponent {
return (
<PopoverSection
isSelected
onSelect={() => {}}
title={t('Display configuration')}
info={t('Configure your how you overlay is displayed here.')}
>
@ -697,7 +695,6 @@ export default class AnnotationLayer extends React.PureComponent {
<div style={{ marginRight: '2rem' }}>
<PopoverSection
isSelected
onSelect={() => {}}
title={t('Layer configuration')}
info={t('Configure the basics of your Annotation Layer.')}
>

8
superset-frontend/stylesheets/superset.less
View File

@ -460,18 +460,10 @@ iframe {
color: transparent;
}
.dimmed {
opacity: 0.5;
}
.pointer {
cursor: pointer;
}
.PopoverSection {
padding-bottom: 10px;
}
.popover {
max-width: 500px;
}