test: Adds tests and storybook to CertifiedIcon component (#13457)

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

@@ -0,0 +1,42 @@
+/**
+ * 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 CertifiedIcon, { CertifiedIconProps } from '.';
+
+export default {
+  title: 'CertifiedIconWithTooltip',
+};
+
+export const InteractiveIcon = (args: CertifiedIconProps) => (
+  <CertifiedIcon {...args} />
+);
+
+InteractiveIcon.args = {
+  certifiedBy: 'Trusted Authority',
+  details: 'All requirements have been met.',
+  size: 30,
+};
+
+InteractiveIcon.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

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

@@ -0,0 +1,47 @@
+/**
+ * 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 CertifiedIcon from 'src/components/CertifiedIcon';
+
+test('renders with default props', () => {
+  render(<CertifiedIcon />);
+  expect(screen.getByRole('img')).toBeInTheDocument();
+});
+
+test('renders a tooltip when hovered', async () => {
+  render(<CertifiedIcon />);
+  userEvent.hover(screen.getByRole('img'));
+  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+});
+
+test('renders with certified by', async () => {
+  const certifiedBy = 'Trusted Authority';
+  render(<CertifiedIcon certifiedBy={certifiedBy} />);
+  userEvent.hover(screen.getByRole('img'));
+  expect(await screen.findByRole('tooltip')).toHaveTextContent(certifiedBy);
+});
+
+test('renders with details', async () => {
+  const details = 'All requirements have been met.';
+  render(<CertifiedIcon details={details} />);
+  userEvent.hover(screen.getByRole('img'));
+  expect(await screen.findByRole('tooltip')).toHaveTextContent(details);
+});

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

@@ -21,17 +21,17 @@ import { t, supersetTheme } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
 import { Tooltip } from 'src/common/components/Tooltip';
 
-interface CertifiedIconWithTooltipProps {
+export interface CertifiedIconProps {
   certifiedBy?: string;
   details?: string;
   size?: number;
 }
 
-function CertifiedIconWithTooltip({
+function CertifiedIcon({
   certifiedBy,
   details,
   size = 24,
-}: CertifiedIconWithTooltipProps) {
+}: CertifiedIconProps) {
   return (
     <Tooltip
       id="certified-details-tooltip"
@@ -56,4 +56,4 @@ function CertifiedIconWithTooltip({
   );
 }
 
-export default CertifiedIconWithTooltip;
+export default CertifiedIcon;

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

@@ -421,7 +421,14 @@ const Icon = ({
   const Component = iconsRegistry[name];
 
   return (
-    <Component color={color} viewBox={viewBox} data-test={name} {...rest} />
+    <Component
+      role="img"
+      aria-label={name}
+      color={color}
+      viewBox={viewBox}
+      data-test={name}
+      {...rest}
+    />
   );
 };
 

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

@@ -29,7 +29,7 @@ import FormLabel from 'src/components/FormLabel';
 
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import RefreshLabel from 'src/components/RefreshLabel';
-import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
+import CertifiedIcon from 'src/components/CertifiedIcon';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 
 const FieldTitle = styled.p`
@@ -261,7 +261,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           <i className={`fa fa-${option.type === 'view' ? 'eye' : 'table'}`} />
         </small>
         {option.extra?.certification && (
-          <CertifiedIconWithTooltip
+          <CertifiedIcon
             certifiedBy={option.extra.certification.certified_by}
             details={option.extra.certification.details}
             size={20}

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -26,7 +26,7 @@ import shortid from 'shortid';
 import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import Tabs from 'src/common/components/Tabs';
-import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
+import CertifiedIcon from 'src/components/CertifiedIcon';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
 import DatabaseSelector from 'src/components/DatabaseSelector';
 import Icon from 'src/components/Icon';
@@ -933,7 +933,7 @@ class DatasourceEditor extends React.PureComponent {
           metric_name: (v, onChange, _, record) => (
             <FlexRowContainer>
               {record.is_certified && (
-                <CertifiedIconWithTooltip
+                <CertifiedIcon
                   certifiedBy={record.certified_by}
                   details={record.certification_details}
                 />

superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx

@@ -44,7 +44,7 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 import { Tooltip } from 'src/common/components/Tooltip';
 import Icons from 'src/components/Icons';
 import FacePile from 'src/components/FacePile';
-import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip';
+import CertifiedIcon from 'src/components/CertifiedIcon';
 import ImportModelsModal from 'src/components/ImportModal/index';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import WarningIconWithTooltip from 'src/components/WarningIconWithTooltip';
@@ -239,7 +239,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
             return (
               <FlexRowContainer>
                 {parsedExtra?.certification && (
-                  <CertifiedIconWithTooltip
+                  <CertifiedIcon
                     certifiedBy={parsedExtra.certification.certified_by}
                     details={parsedExtra.certification.details}
                   />