Skip to content

Commit

Permalink
test: Adds tests and storybook to CertifiedIcon component (#13457)
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-s-molina authored Mar 30, 2021
1 parent 3c4591e commit 9d6832d
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 11 deletions.
Original file line number Diff line number Diff line change
@@ -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,
},
},
};
Original file line number Diff line number Diff line change
@@ -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);
});
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -56,4 +56,4 @@ function CertifiedIconWithTooltip({
);
}

export default CertifiedIconWithTooltip;
export default CertifiedIcon;
9 changes: 8 additions & 1 deletion superset-frontend/src/components/Icon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
};

Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/components/TableSelector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/datasource/DatasourceEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
/>
Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/src/views/CRUD/data/dataset/DatasetList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -239,7 +239,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
return (
<FlexRowContainer>
{parsedExtra?.certification && (
<CertifiedIconWithTooltip
<CertifiedIcon
certifiedBy={parsedExtra.certification.certified_by}
details={parsedExtra.certification.details}
/>
Expand Down

0 comments on commit 9d6832d

Please sign in to comment.