refactor(IconButton): Refactor IconButton to use Ant Design 5 Card (apache#32890)

Co-authored-by: Maxime Beauchemin <[email protected]>
Co-authored-by: Geido <[email protected]>

Author: 3 people

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

@@ -16,42 +16,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import IconButton, { IconButtonProps } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from 'src/components/IconButton';
 
-export default {
-  title: 'IconButton',
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
   component: IconButton,
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+  parameters: {
+    a11y: {
+      enabled: true,
+    },
+  },
 };
 
-export const InteractiveIconButton = (args: IconButtonProps) => (
-  <IconButton
-    buttonText={args.buttonText}
-    altText={args.altText}
-    icon={args.icon}
-    href={args.href}
-    target={args.target}
-    htmlType={args.htmlType}
-  />
-);
+export default meta;
 
-InteractiveIconButton.args = {
-  buttonText: 'This is the IconButton text',
-  altText: 'This is an example of non-default alt text',
-  href: 'https://preset.io/',
-  target: '_blank',
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {
+  args: {
+    buttonText: 'Default IconButton',
+    altText: 'Default icon button alt text',
+  },
 };
 
-InteractiveIconButton.argTypes = {
-  icon: {
-    defaultValue: '/images/icons/sql.svg',
-    control: {
-      type: 'select',
-    },
-    options: [
-      '/images/icons/sql.svg',
-      '/images/icons/server.svg',
-      '/images/icons/image.svg',
-      'Click to see example alt text',
-    ],
+export const CustomIcon: Story = {
+  args: {
+    buttonText: 'Custom icon IconButton',
+    altText: 'Custom icon button alt text',
+    icon: '/images/sqlite.png',
   },
 };

superset-frontend/src/components/IconButton/IconButton.test.jsx

@@ -0,0 +1,90 @@
+/**
+ * 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 { render, screen, fireEvent } from 'spec/helpers/testing-library';
+import { IconButton } from 'src/components/IconButton';
+
+const defaultProps = {
+  buttonText: 'This is the IconButton text',
+  icon: '/images/icons/sql.svg',
+};
+
+describe('IconButton', () => {
+  it('renders an IconButton with icon and text', () => {
+    render(<IconButton {...defaultProps} />);
+
+    const icon = screen.getByRole('img');
+    const buttonText = screen.getByText(/this is the iconbutton text/i);
+
+    expect(icon).toBeVisible();
+    expect(buttonText).toBeVisible();
+  });
+
+  it('is keyboard accessible and has correct aria attributes', () => {
+    render(<IconButton {...defaultProps} />);
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveAttribute('tabIndex', '0');
+    expect(button).toHaveAttribute('aria-label', defaultProps.buttonText);
+  });
+
+  it('handles Enter and Space key presses', () => {
+    const mockOnClick = jest.fn();
+    render(<IconButton {...defaultProps} onClick={mockOnClick} />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(button, { key: ' ', code: 'Space' });
+    expect(mockOnClick).toHaveBeenCalledTimes(2);
+  });
+
+  it('uses custom alt text when provided', () => {
+    const customAltText = 'Custom Alt Text';
+    render(
+      <IconButton
+        buttonText="Custom Alt Text Button"
+        icon="/images/icons/sql.svg"
+        altText={customAltText}
+      />,
+    );
+
+    const icon = screen.getByAltText(customAltText);
+    expect(icon).toBeVisible();
+  });
+
+  it('displays tooltip with button text', () => {
+    render(<IconButton {...defaultProps} />);
+
+    const tooltipTrigger = screen.getByText(/this is the iconbutton text/i);
+    expect(tooltipTrigger).toBeVisible();
+  });
+
+  it('calls onClick handler when clicked', () => {
+    const mockOnClick = jest.fn();
+    render(<IconButton {...defaultProps} onClick={mockOnClick} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});