refactor: class to function component

src/Button/SimpleButton/SimpleButton.spec.tsx

@@ -1,45 +1,43 @@
-import TestUtil from '../../Util/TestUtil';
-import SimpleButton, {SimpleButtonProps} from './SimpleButton';
+import { fireEvent,render, screen } from '@testing-library/react';
+import React from 'react';
+
+import SimpleButton from './SimpleButton';
 
 describe('<SimpleButton />', () => {
+
   it('is defined', () => {
-    expect(SimpleButton).not.toBeUndefined();
+    expect(SimpleButton).toBeDefined();
   });
 
-  it('can be rendered', () => {
-    const wrapper = TestUtil.mountComponent(SimpleButton);
-    expect(wrapper).not.toBeUndefined();
+  it('can rendered', () => {
+    render(<SimpleButton />);
+    expect(screen.getByRole('button')).toBeVisible();
   });
 
   it('allows to set some props', () => {
-    const wrapper = TestUtil.mountComponent(SimpleButton);
-
-    wrapper.setProps({
-      type: 'secondary',
-      shape: 'circle',
-      size: 'small',
-      disabled: true
-    });
-
-    const props = wrapper.props() as SimpleButtonProps;
-    expect(props.type).toBe('secondary');
-    expect(props.shape).toBe('circle');
-    expect(props.size).toBe('small');
-    expect(props.disabled).toBe(true);
-
-    expect(wrapper.find('button.ant-btn-secondary').length).toBe(1);
-    expect(wrapper.find('button.ant-btn-circle').length).toBe(1);
-    expect(wrapper.find('button.ant-btn-sm').length).toBe(1);
-    expect(wrapper.find('button').length).toBe(1);
+    render(
+      <SimpleButton
+        type="default"
+        shape="circle"
+        size="small"
+        disabled={true}
+      />
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('ant-btn-default');
+    expect(button).toHaveClass('ant-btn-circle');
+    expect(button).toHaveClass('ant-btn-sm');
+    expect(button).toBeDisabled();
   });
 
   it('calls a given click callback method onClick', () => {
     const onClick = jest.fn();
-    const wrapper = TestUtil.mountComponent(SimpleButton, {onClick});
+    render(<SimpleButton onClick={onClick} />);
 
-    wrapper.find('button').simulate('click');
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-
 });

src/Button/SimpleButton/SimpleButton.tsx

@@ -1,22 +1,18 @@
 import { Button, Tooltip } from 'antd';
 import { ButtonProps } from 'antd/lib/button';
-import { AbstractTooltipProps,TooltipPlacement } from 'antd/lib/tooltip';
+import { AbstractTooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
 import * as React from 'react';
 
 import { CSS_PREFIX } from '../../constants';
 
-interface DefaultProps {
-  type: 'default' | 'primary' | 'ghost' | 'dashed' | 'danger' | 'link';
+export type OwnProps = {
   /**
    * Additional [antd tooltip](https://ant.design/components/tooltip/)
    * properties to pass to the tooltip component. Note: The props `title`
    * and `placement` will override the props `tooltip` and `tooltipPlacement`
    * of this component!
    */
-  tooltipProps: AbstractTooltipProps;
-}
-
-interface BaseProps {
+  tooltipProps?: AbstractTooltipProps;
   /**
    * The tooltip to be shown on hover.
    */
@@ -25,65 +21,41 @@ interface BaseProps {
    * The position of the tooltip.
    */
   tooltipPlacement?: TooltipPlacement;
-}
-
-export type SimpleButtonProps = BaseProps & Partial<DefaultProps> & ButtonProps;
-
-/**
- * The SimpleButton.
- *
- * @class The SimpleButton
- * @extends React.Component
- */
-class SimpleButton extends React.Component<SimpleButtonProps> {
-
-  /**
-   * The default properties.
-   */
-  static defaultProps: DefaultProps = {
-    type: 'primary',
-    tooltipProps: {
-      mouseEnterDelay: 1.5
-    }
-  };
-
-  /**
-   * The className added to this component.
-   * @private
-   */
-  className = `${CSS_PREFIX}simplebutton`;
-
-  /**
-   * The render function.
-   */
-  render() {
-    const {
-      className,
-      tooltip,
-      tooltipPlacement,
-      tooltipProps,
-      ...antBtnProps
-    } = this.props;
-
-    const finalClassName = className
-      ? `${className} ${this.className}`
-      : this.className;
-
-    return (
-      <Tooltip
-        title={tooltip}
-        placement={tooltipPlacement}
-        {...tooltipProps}
+};
+
+export type SimpleButtonProps = OwnProps & ButtonProps;
+
+const defaultClassName = `${CSS_PREFIX}simplebutton`;
+
+const SimpleButton: React.FC<SimpleButtonProps> = ({
+  className,
+  type = 'primary',
+  tooltip,
+  tooltipPlacement,
+  tooltipProps = {
+    mouseEnterDelay: 1.5
+  },
+  ...passThroughProps
+}) => {
+
+  const finalClassName = className
+    ? `${className} ${defaultClassName}`
+    : `${defaultClassName}`;
+
+  return (
+    <Tooltip
+      title={tooltip}
+      placement={tooltipPlacement}
+      {...tooltipProps}
+    >
+      <Button
+        className={finalClassName}
+        {...passThroughProps}
       >
-        <Button
-          className={finalClassName}
-          {...antBtnProps}
-        >
-          {antBtnProps.children}
-        </Button>
-      </Tooltip>
-    );
-  }
-}
+        {passThroughProps.children}
+      </Button>
+    </Tooltip>
+  );
+};
 
 export default SimpleButton;