From e9d5d3b13724c3df8acd14095bd45f3becc4e400 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Tue, 2 Mar 2021 21:34:55 -0300 Subject: [PATCH] Adds tests and storybook to CopyToClipboard component (#13359) --- superset-frontend/.storybook/preview.jsx | 20 ++++- .../components/CopyToClipboard_spec.jsx | 33 -------- .../components/Collapse/Collapse.stories.tsx | 4 +- .../components/Tooltip/Tooltip.stories.tsx | 2 +- .../src/components/Alert/Alert.stories.tsx | 8 +- .../AsyncAceEditor/AsyncAceEditor.stories.tsx | 6 +- .../src/components/Button/Button.stories.tsx | 8 +- .../ButtonGroup/ButtonGroup.stories.tsx | 4 +- .../CopyToClipboard.stories.tsx | 66 ++++++++++++++++ .../CopyToClipboard/CopyToClipboard.test.tsx | 76 +++++++++++++++++++ .../index.jsx} | 2 +- .../components/Loading/Loading.stories.tsx | 8 +- 12 files changed, 181 insertions(+), 56 deletions(-) delete mode 100644 superset-frontend/spec/javascripts/components/CopyToClipboard_spec.jsx create mode 100644 superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx create mode 100644 superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx rename superset-frontend/src/components/{CopyToClipboard.jsx => CopyToClipboard/index.jsx} (98%) diff --git a/superset-frontend/.storybook/preview.jsx b/superset-frontend/.storybook/preview.jsx index e20ff6c5e237b..94fcfd71858af 100644 --- a/superset-frontend/.storybook/preview.jsx +++ b/superset-frontend/.storybook/preview.jsx @@ -21,18 +21,34 @@ import { addDecorator } from '@storybook/react'; import { jsxDecorator } from 'storybook-addon-jsx'; import { addParameters } from '@storybook/react'; import { withPaddings } from 'storybook-addon-paddings'; - import { supersetTheme, ThemeProvider } from '@superset-ui/core'; +import { combineReducers, createStore, applyMiddleware, compose } from 'redux'; +import thunk from 'redux-thunk'; +import { Provider } from 'react-redux'; +import reducerIndex from 'spec/helpers/reducerIndex'; -import '../src/theme.ts'; +import 'src/theme.ts'; import './storybook.css'; +const store = createStore( + combineReducers(reducerIndex), + {}, + compose(applyMiddleware(thunk)), +); + const themeDecorator = Story => ( {} ); +const providerDecorator = Story => ( + + + +); + addDecorator(jsxDecorator); addDecorator(themeDecorator); +addDecorator(providerDecorator); addDecorator(withPaddings); addParameters({ diff --git a/superset-frontend/spec/javascripts/components/CopyToClipboard_spec.jsx b/superset-frontend/spec/javascripts/components/CopyToClipboard_spec.jsx deleted file mode 100644 index 9f27ac6c7635b..0000000000000 --- a/superset-frontend/spec/javascripts/components/CopyToClipboard_spec.jsx +++ /dev/null @@ -1,33 +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 CopyToClipboard from 'src/components/CopyToClipboard'; - -describe('CopyToClipboard', () => { - const defaultProps = { - text: 'some text to copy', - }; - - it('renders', () => { - expect(React.isValidElement()).toBe( - true, - ); - }); -}); diff --git a/superset-frontend/src/common/components/Collapse/Collapse.stories.tsx b/superset-frontend/src/common/components/Collapse/Collapse.stories.tsx index f6636a81ccf0e..169d3bc45ae45 100644 --- a/superset-frontend/src/common/components/Collapse/Collapse.stories.tsx +++ b/superset-frontend/src/common/components/Collapse/Collapse.stories.tsx @@ -62,10 +62,10 @@ InteractiveCollapse.argTypes = { InteractiveCollapse.story = { parameters: { actions: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx b/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx index f1040d71d2bba..f4c1302da4940 100644 --- a/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx +++ b/superset-frontend/src/common/components/Tooltip/Tooltip.stories.tsx @@ -52,7 +52,7 @@ export const InteractiveTooltip = (args: TooltipProps) => ( InteractiveTooltip.story = { parameters: { knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/components/Alert/Alert.stories.tsx b/superset-frontend/src/components/Alert/Alert.stories.tsx index 4b4f86ea3db5c..da02aae7ccbb5 100644 --- a/superset-frontend/src/components/Alert/Alert.stories.tsx +++ b/superset-frontend/src/components/Alert/Alert.stories.tsx @@ -63,13 +63,13 @@ export const AlertGallery = () => ( AlertGallery.story = { parameters: { actions: { - disabled: true, + disable: true, }, controls: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; @@ -94,7 +94,7 @@ InteractiveAlert.argTypes = { InteractiveAlert.story = { parameters: { knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx b/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx index 6587121fa947c..6269ba9224f58 100644 --- a/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx +++ b/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx @@ -81,7 +81,7 @@ export const AsyncAceEditor = ( AsyncAceEditor.args = { defaultTabSize: 2, width: '100%', - height: 500, + height: '500px', value: `{"text": "Simple text"}`, }; @@ -99,10 +99,10 @@ AsyncAceEditor.argTypes = { AsyncAceEditor.story = { parameters: { actions: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/components/Button/Button.stories.tsx b/superset-frontend/src/components/Button/Button.stories.tsx index b5a683b36fa24..9a1853ce0fce8 100644 --- a/superset-frontend/src/components/Button/Button.stories.tsx +++ b/superset-frontend/src/components/Button/Button.stories.tsx @@ -98,13 +98,13 @@ export const ButtonGallery = () => ( ButtonGallery.story = { parameters: { actions: { - disabled: true, + disable: true, }, controls: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; @@ -117,7 +117,7 @@ export const InteractiveButton = (args: ButtonProps & { label: string }) => { InteractiveButton.story = { parameters: { knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx b/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx index 8c878644a769f..e5b0b94cbcfc3 100644 --- a/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/superset-frontend/src/components/ButtonGroup/ButtonGroup.stories.tsx @@ -61,10 +61,10 @@ InteractiveButtonGroup.argTypes = { InteractiveButtonGroup.story = { parameters: { actions: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx new file mode 100644 index 0000000000000..e932b4593859d --- /dev/null +++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx @@ -0,0 +1,66 @@ +/** + * 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 Button from 'src/components/Button'; +import Icon from 'src/components/Icon'; +import ToastPresenter from 'src/messageToasts/containers/ToastPresenter'; +import CopyToClipboard from '.'; + +export default { + title: 'CopyToClipboard', + component: CopyToClipboard, +}; + +export const InteractiveCopyToClipboard = ({ copyNode, ...rest }: any) => { + let node = ; + if (copyNode === 'Icon') { + node = ; + } else if (copyNode === 'Text') { + node = Copy; + } + return ( + <> + + + + ); +}; + +InteractiveCopyToClipboard.args = { + shouldShowText: true, + text: 'http://superset.apache.org/', + wrapped: true, + tooltipText: 'Copy to clipboard', +}; + +InteractiveCopyToClipboard.argTypes = { + onCopyEnd: { action: 'onCopyEnd' }, + copyNode: { + defaultValue: 'Button', + control: { type: 'radio', options: ['Button', 'Icon', 'Text'] }, + }, +}; + +InteractiveCopyToClipboard.story = { + parameters: { + knobs: { + disable: true, + }, + }, +}; diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx new file mode 100644 index 0000000000000..81103a8a080ef --- /dev/null +++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.test.tsx @@ -0,0 +1,76 @@ +/** + * 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, waitFor } from 'spec/helpers/testing-library'; +import userEvent from '@testing-library/user-event'; +import CopyToClipboard from '.'; + +test('renders with default props', () => { + const text = 'Text'; + render(, { useRedux: true }); + expect(screen.getByText(text)).toBeInTheDocument(); + expect(screen.getByText('Copy')).toBeInTheDocument(); +}); + +test('renders with custom copy node', () => { + const copyNode = Custom node; + render(, { useRedux: true }); + expect(screen.getByRole('link')).toBeInTheDocument(); +}); + +test('renders without text showing', () => { + const text = 'Text'; + render(, { + useRedux: true, + }); + expect(screen.queryByText(text)).not.toBeInTheDocument(); +}); + +test('getText on copy', async () => { + const getText = jest.fn(() => 'Text'); + render(, { useRedux: true }); + userEvent.click(screen.getByText('Copy')); + await waitFor(() => expect(getText).toHaveBeenCalled()); +}); + +test('renders tooltip on hover', async () => { + const tooltipText = 'Tooltip'; + render(, { useRedux: true }); + userEvent.hover(screen.getByText('Copy')); + const tooltip = await screen.findByRole('tooltip'); + expect(tooltip).toBeInTheDocument(); + expect(tooltip).toHaveTextContent(tooltipText); +}); + +test('triggers onCopyEnd', async () => { + const onCopyEnd = jest.fn(); + render(, { + useRedux: true, + }); + userEvent.click(screen.getByText('Copy')); + await waitFor(() => expect(onCopyEnd).toHaveBeenCalled()); +}); + +test('renders unwrapped', () => { + const text = 'Text'; + render(, { + useRedux: true, + }); + expect(screen.queryByText(text)).not.toBeInTheDocument(); +}); diff --git a/superset-frontend/src/components/CopyToClipboard.jsx b/superset-frontend/src/components/CopyToClipboard/index.jsx similarity index 98% rename from superset-frontend/src/components/CopyToClipboard.jsx rename to superset-frontend/src/components/CopyToClipboard/index.jsx index bded61fd69f56..bff6116857a32 100644 --- a/superset-frontend/src/components/CopyToClipboard.jsx +++ b/superset-frontend/src/components/CopyToClipboard/index.jsx @@ -102,7 +102,7 @@ class CopyToClipboard extends React.Component { renderLink() { return ( - + {this.props.shouldShowText && this.props.text && ( {this.props.text} diff --git a/superset-frontend/src/components/Loading/Loading.stories.tsx b/superset-frontend/src/components/Loading/Loading.stories.tsx index b0d8bf11f0ec3..60ef378fc1e48 100644 --- a/superset-frontend/src/components/Loading/Loading.stories.tsx +++ b/superset-frontend/src/components/Loading/Loading.stories.tsx @@ -49,13 +49,13 @@ export const LoadingGallery = () => ( LoadingGallery.story = { parameters: { actions: { - disabled: true, + disable: true, }, controls: { - disabled: true, + disable: true, }, knobs: { - disabled: true, + disable: true, }, }, }; @@ -65,7 +65,7 @@ export const InteractiveLoading = (args: Props) => ; InteractiveLoading.story = { parameters: { knobs: { - disabled: true, + disable: true, }, }, };