This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a commit to branch
enxdev/refactor/InfoTooltipWithTrigger-component
in repository https://gitbox.apache.org/repos/asf/superset.git
commit ece557e454d20dbc13bc68ed49725decdac50051
Author: Enzo Martellucci <enzomartellu...@gmail.com>
AuthorDate: Mon Apr 28 16:30:52 2025 +0200
refactor(test): enhance RTL test for InfoTooltipWithTrigger component
---
.../src/components/InfoTooltipWithTrigger.tsx | 3 +-
.../components/InfoTooltipWithTrigger.test.tsx | 60 ++++++++++++++++++----
.../components/controls/OptionControls/index.tsx | 8 ++-
3 files changed, 58 insertions(+), 13 deletions(-)
diff --git
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 7ba447b0f1..2c82fc52ec 100644
---
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -19,6 +19,7 @@
import { CSSProperties, KeyboardEvent, ReactNode } from 'react';
import { kebabCase } from 'lodash';
import { t } from '@superset-ui/core';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Tooltip, TooltipProps, TooltipPlacement } from './Tooltip';
export interface InfoTooltipWithTriggerProps {
@@ -35,7 +36,7 @@ export const InfoTooltipWithTrigger = ({
label,
tooltip,
onClick,
- icon,
+ icon = <ExclamationCircleOutlined />,
className = 'text-muted',
placement = 'right',
iconsStyle = {},
diff --git
a/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
b/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
index 0011f862b2..46cdd22585 100644
---
a/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
+++
b/superset-frontend/packages/superset-ui-chart-controls/test/components/InfoTooltipWithTrigger.test.tsx
@@ -18,7 +18,11 @@
*/
import '@testing-library/jest-dom';
import { fireEvent, render } from '@testing-library/react';
-import { ThemeProvider, supersetTheme } from '@superset-ui/core';
+import { ThemeProvider, supersetTheme, hexToRgb } from '@superset-ui/core';
+import {
+ InfoCircleOutlined,
+ ExclamationCircleOutlined,
+} from '@ant-design/icons';
import { InfoTooltipWithTrigger, InfoTooltipWithTriggerProps } from
'../../src';
jest.mock('../../src/components/Tooltip', () => ({
@@ -44,31 +48,35 @@ test('renders a tooltip', () => {
expect(getAllByTestId('mock-tooltip').length).toEqual(1);
});
-test('renders an info icon', () => {
+test('renders an info antd icon', () => {
const { container } = setup();
- expect(container.getElementsByClassName('fa-info-circle')).toHaveLength(1);
+ const iconElement = container.querySelector('svg');
+ expect(iconElement).not.toBeNull();
});
-test('responds to keypresses', () => {
+test('responds to keydown events', () => {
const clickHandler = jest.fn();
const { getByRole } = setup({
label: 'test',
tooltip: 'this is a test',
onClick: clickHandler,
});
- fireEvent.keyPress(getByRole('button'), {
+
+ fireEvent.keyDown(getByRole('button'), {
key: 'Tab',
code: 9,
charCode: 9,
});
expect(clickHandler).toHaveBeenCalledTimes(0);
- fireEvent.keyPress(getByRole('button'), {
+
+ fireEvent.keyDown(getByRole('button'), {
key: 'Enter',
code: 13,
charCode: 13,
});
expect(clickHandler).toHaveBeenCalledTimes(1);
- fireEvent.keyPress(getByRole('button'), {
+
+ fireEvent.keyDown(getByRole('button'), {
key: ' ',
code: 32,
charCode: 32,
@@ -76,9 +84,41 @@ test('responds to keypresses', () => {
expect(clickHandler).toHaveBeenCalledTimes(2);
});
-test('has a bsStyle', () => {
+test('applies success color based on theme token', () => {
+ const { container } = setup({
+ icon: <InfoCircleOutlined />,
+ iconsStyle: { color: supersetTheme.colorSuccess },
+ });
+
+ const buttonSpan = container.querySelector(
+ 'span[role="button"]',
+ ) as HTMLElement;
+ expect(buttonSpan).toBeInTheDocument();
+ expect(buttonSpan.style.color).toBe(hexToRgb(supersetTheme.colorSuccess));
+});
+
+test('applies warning color based on theme token', () => {
const { container } = setup({
- bsStyle: 'something',
+ icon: <InfoCircleOutlined />,
+ iconsStyle: { color: supersetTheme.colorWarning },
});
- expect(container.getElementsByClassName('text-something')).toHaveLength(1);
+
+ const buttonSpan = container.querySelector(
+ 'span[role="button"]',
+ ) as HTMLElement;
+ expect(buttonSpan).toBeInTheDocument();
+ expect(buttonSpan.style.color).toBe(hexToRgb(supersetTheme.colorWarning));
+});
+
+test('applies error color based on theme token', () => {
+ const { container } = setup({
+ icon: <ExclamationCircleOutlined />,
+ iconsStyle: { color: supersetTheme.colorError },
+ });
+
+ const buttonSpan = container.querySelector(
+ 'span[role="button"]',
+ ) as HTMLElement;
+ expect(buttonSpan).toBeInTheDocument();
+ expect(buttonSpan.style.color).toBe(hexToRgb(supersetTheme.colorError));
});
diff --git
a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 8a44c5a06a..ec204ff717 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -395,9 +395,13 @@ export const OptionControlLabel = ({
</Label>
{(!!datasourceWarningMessage || isExtra) && (
<StyledInfoTooltipWithTrigger
- icon="exclamation-triangle"
+ icon={
+ <Icons.ExclamationCircleOutlined
+ iconSize="s"
+ iconColor={theme.colorWarning}
+ />
+ }
placement="top"
- bsStyle="warning"
tooltip={
datasourceWarningMessage ||
t(`
