From fc36de2d1fad866d314c1f1e809dd35b8990ab27 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Tue, 9 Mar 2021 17:08:10 -0300 Subject: [PATCH] test: Adds tests and storybook to PopoverSection component (#13438) * test: Adds storybook to PopoverSection component * test: Adds tests and storybook to PopoverSection component --- .../components/PopoverSection_spec.jsx | 52 ----------- .../src/components/PopoverSection.jsx | 52 ----------- .../PopoverSection/PopoverSection.stories.tsx | 55 ++++++++++++ .../PopoverSection/PopoverSection.test.tsx | 62 +++++++++++++ .../src/components/PopoverSection/index.tsx | 87 +++++++++++++++++++ .../components/controls/AnnotationLayer.jsx | 9 +- superset-frontend/stylesheets/superset.less | 8 -- 7 files changed, 207 insertions(+), 118 deletions(-) delete mode 100644 superset-frontend/spec/javascripts/components/PopoverSection_spec.jsx delete mode 100644 superset-frontend/src/components/PopoverSection.jsx create mode 100644 superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx create mode 100644 superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx create mode 100644 superset-frontend/src/components/PopoverSection/index.tsx diff --git a/superset-frontend/spec/javascripts/components/PopoverSection_spec.jsx b/superset-frontend/spec/javascripts/components/PopoverSection_spec.jsx deleted file mode 100644 index 7f69a50134308..0000000000000 --- a/superset-frontend/spec/javascripts/components/PopoverSection_spec.jsx +++ /dev/null @@ -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:
, - }; - - let wrapper; - const factory = overrideProps => { - const props = { ...defaultProps, ...(overrideProps || {}) }; - return shallow(); - }; - beforeEach(() => { - wrapper = factory(); - }); - it('renders', () => { - expect(React.isValidElement()).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); - }); -}); diff --git a/superset-frontend/src/components/PopoverSection.jsx b/superset-frontend/src/components/PopoverSection.jsx deleted file mode 100644 index 243ad62874a9f..0000000000000 --- a/superset-frontend/src/components/PopoverSection.jsx +++ /dev/null @@ -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 ( -
-
- {title}   - {info && ( - - )} -   - -
-
{children}
-
- ); -} -PopoverSection.propTypes = propTypes; diff --git a/superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx b/superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx new file mode 100644 index 0000000000000..6516654d5a6f3 --- /dev/null +++ b/superset-frontend/src/components/PopoverSection/PopoverSection.stories.tsx @@ -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) => ( + +
+ Content +
+ +); + +InteractivePopoverSection.args = { + title: 'Title', + isSelected: true, + info: 'Some description about the content', +}; + +InteractivePopoverSection.story = { + parameters: { + knobs: { + disable: true, + }, + }, +}; diff --git a/superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx b/superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx new file mode 100644 index 0000000000000..2135f6ba46ef3 --- /dev/null +++ b/superset-frontend/src/components/PopoverSection/PopoverSection.test.tsx @@ -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( + +
+ , + ); + expect(screen.getByRole('form')).toBeInTheDocument(); + expect(screen.getAllByRole('img').length).toBe(1); +}); + +test('renders tooltip icon', () => { + render( + +
+ , + ); + expect(screen.getAllByRole('img').length).toBe(2); +}); + +test('renders a tooltip when hovered', async () => { + render( + +
+ , + ); + userEvent.hover(screen.getAllByRole('img')[0]); + expect(await screen.findByRole('tooltip')).toBeInTheDocument(); +}); + +test('calls onSelect when clicked', () => { + const onSelect = jest.fn(); + render( + +
+ , + ); + userEvent.click(screen.getByRole('img')); + expect(onSelect).toHaveBeenCalled(); +}); diff --git a/superset-frontend/src/components/PopoverSection/index.tsx b/superset-frontend/src/components/PopoverSection/index.tsx new file mode 100644 index 0000000000000..94ac66a47e4a8 --- /dev/null +++ b/superset-frontend/src/components/PopoverSection/index.tsx @@ -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; + info?: string; + children?: ReactNode; +} + +export default function PopoverSection({ + title, + isSelected, + children, + onSelect, + info, +}: PopoverSectionProps) { + const theme = useTheme(); + return ( +
+
+ {title} + {info && ( + + + + )} + +
+
+ {children} +
+
+ ); +} diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx index 91dfc7c1534a6..6de8677d61c64 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayer.jsx @@ -455,10 +455,9 @@ export default class AnnotationLayer extends React.PureComponent {
{}} - 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 ( {}} 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 {
{}} title={t('Layer configuration')} info={t('Configure the basics of your Annotation Layer.')} > diff --git a/superset-frontend/stylesheets/superset.less b/superset-frontend/stylesheets/superset.less index cdd259b6d08d0..ecfdd017f61ae 100644 --- a/superset-frontend/stylesheets/superset.less +++ b/superset-frontend/stylesheets/superset.less @@ -460,18 +460,10 @@ iframe { color: transparent; } -.dimmed { - opacity: 0.5; -} - .pointer { cursor: pointer; } -.PopoverSection { - padding-bottom: 10px; -} - .popover { max-width: 500px; }