test: Tests, dedicated directory and Storybook for the ProgressBar component (#13534)

* Move to own dir and add storybook

* Add tests

superset-frontend/spec/javascripts/sqllab/ResultSet_spec.jsx

@@ -22,7 +22,7 @@ import { styledMount } from 'spec/helpers/theming';
 import { Provider } from 'react-redux';
 import sinon from 'sinon';
 import Alert from 'src/components/Alert';
-import ProgressBar from 'src/common/components/ProgressBar';
+import ProgressBar from 'src/components/ProgressBar';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import FilterableTable from 'src/components/FilterableTable/FilterableTable';

superset-frontend/src/SqlLab/components/QueryTable.jsx

@@ -20,7 +20,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Well } from 'react-bootstrap';
-import ProgressBar from 'src/common/components/ProgressBar';
+import ProgressBar from 'src/components/ProgressBar';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/core';
 

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -19,7 +19,7 @@
 import React, { CSSProperties } from 'react';
 import ButtonGroup from 'src/components/ButtonGroup';
 import Alert from 'src/components/Alert';
-import ProgressBar from 'src/common/components/ProgressBar';
+import ProgressBar from 'src/components/ProgressBar';
 import moment from 'moment';
 import { RadioChangeEvent } from 'antd/lib/radio';
 import Button from 'src/components/Button';

superset-frontend/src/common/components/common.stories.tsx

@@ -32,7 +32,6 @@ import {
   DatePicker as AntdDatePicker,
   RangePicker as AntdRangePicker,
 } from './DatePicker';
-import ProgressBar from './ProgressBar';
 import { CronPicker, CronError } from './CronPicker';
 
 export default {
@@ -241,10 +240,6 @@ export const DateRangePicker = () => (
   />
 );
 
-export const Progress = () => <ProgressBar percent={90} />;
-export const ProgressStriped = () => <ProgressBar percent={90} striped />;
-export const ProgressSuccess = () => <ProgressBar percent={100} />;
-
 export const Switch = () => (
   <>
     <AntdSwitch defaultChecked />

superset-frontend/src/common/components/index.tsx

@@ -58,7 +58,6 @@ export { default as Alert, AlertProps } from 'antd/lib/alert';
 export { default as Select, SelectProps } from 'antd/lib/select';
 
 export { default as Collapse } from './Collapse';
-export { default as Progress } from './ProgressBar';
 
 export const MenuItem = styled(AntdMenu.Item)`
   > a {

superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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 ProgressBar, { ProgressBarProps } from '.';
+
+export default {
+  title: 'ProgressBar',
+  component: ProgressBar,
+};
+
+export const InteractiveProgressBar = (args: ProgressBarProps) => (
+  <ProgressBar {...args} />
+);
+
+InteractiveProgressBar.args = {
+  striped: true,
+  percent: 90,
+  showInfo: true,
+  status: 'normal',
+  strokeColor: '#FF0000',
+  trailColor: '#000',
+  strokeLinecap: 'round',
+  type: 'line',
+};
+
+InteractiveProgressBar.argTypes = {
+  status: {
+    control: {
+      type: 'select',
+      options: ['normal', 'success', 'exception', 'active'],
+    },
+  },
+  strokeLinecap: {
+    control: {
+      type: 'select',
+      options: ['round', 'square'],
+    },
+  },
+  type: {
+    control: {
+      type: 'select',
+      options: ['line', 'circle', 'dashboard'],
+    },
+  },
+};

superset-frontend/src/components/ProgressBar/ProgressBar.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 ProgressBar, { ProgressBarProps } from '.';
+
+const mockedProps: ProgressBarProps = {
+  percent: 90,
+};
+
+test('should render', () => {
+  const { container } = render(<ProgressBar {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render with info', () => {
+  render(<ProgressBar {...mockedProps} />);
+  expect(screen.getByText('90%')).toBeInTheDocument();
+});
+
+test('should render without info', () => {
+  const noInfoProps = {
+    ...mockedProps,
+    showInfo: false,
+  };
+  render(<ProgressBar {...noInfoProps} />);
+  expect(screen.queryByText('90%')).not.toBeInTheDocument();
+});
+
+test('should render with error icon', () => {
+  const errorProps = {
+    ...mockedProps,
+    status: 'exception' as const,
+  };
+  render(<ProgressBar {...errorProps} />);
+  expect(screen.getByLabelText('close-circle')).toBeInTheDocument();
+});
+
+test('should render with success icon', () => {
+  const successProps = {
+    ...mockedProps,
+    status: 'success' as const,
+  };
+  render(<ProgressBar {...successProps} />);
+  expect(screen.getByLabelText('check-circle')).toBeInTheDocument();
+});
+
+test('should render with stripes', () => {
+  const stripedProps = {
+    ...mockedProps,
+    striped: true,
+  };
+  const { container } = render(<ProgressBar {...stripedProps} />);
+  expect(container).toHaveStyle(
+    `background-image: 'linear-gradient(
+      45deg,rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%, transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%, transparent) !important'`,
+  );
+});

superset-frontend/src/components/ProgressBar/index.tsx

@@ -18,11 +18,10 @@
  */
 import React from 'react';
 import { styled } from '@superset-ui/core';
-// eslint-disable-next-line no-restricted-imports
 import { Progress as AntdProgress } from 'antd';
 import { ProgressProps } from 'antd/lib/progress/progress';
 
-interface ProgressBarProps extends ProgressProps {
+export interface ProgressBarProps extends ProgressProps {
   striped?: boolean;
 }
 
@@ -46,8 +45,9 @@ const ProgressBar = styled(({ striped, ...props }: ProgressBarProps) => (
             transparent 25%, transparent 50%,
             rgba(255, 255, 255, 0.15) 50%,
             rgba(255, 255, 255, 0.15) 75%,
-            transparent 75%, transparent);
-        background-size: 1rem 1rem; `};
+            transparent 75%, transparent) !important;
+        background-size: 1rem 1rem !important;
+        `};
   }
 `;