From fd0d351dcfaca6bcda97715ba347b2af0b5cad3c Mon Sep 17 00:00:00 2001
From: maxin <48519459+nnmax@users.noreply.github.com>
Date: Tue, 31 May 2022 15:13:44 +0800
Subject: [PATCH] test(button): add test (#2047)

Co-authored-by: maxin <maxin@growingio.com>
---
 src/button/Button.tsx               |  8 ---
 src/button/IconButton.tsx           |  8 ---
 src/button/__test__/button.test.tsx | 86 +++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 16 deletions(-)
 create mode 100644 src/button/__test__/button.test.tsx

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index fdfac03ced..558b405a43 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -60,12 +60,4 @@ export const BUTTON_DISPLAY_NAME = 'Button';
 
 Button.displayName = BUTTON_DISPLAY_NAME;
 
-Button.defaultProps = {
-  type: 'primary',
-  size: 'normal',
-  loading: false,
-  disabled: false,
-  htmlType: 'button',
-};
-
 export default Button;
diff --git a/src/button/IconButton.tsx b/src/button/IconButton.tsx
index 557d72071d..5b13cc77b9 100644
--- a/src/button/IconButton.tsx
+++ b/src/button/IconButton.tsx
@@ -17,12 +17,4 @@ export const ICON_BUTTON_DISPLAY_NAME = 'IconButton';
 
 IconButton.displayName = ICON_BUTTON_DISPLAY_NAME;
 
-IconButton.defaultProps = {
-  type: 'primary',
-  size: 'normal',
-  loading: false,
-  disabled: false,
-  htmlType: 'button',
-};
-
 export default IconButton;
diff --git a/src/button/__test__/button.test.tsx b/src/button/__test__/button.test.tsx
new file mode 100644
index 0000000000..46b6062754
--- /dev/null
+++ b/src/button/__test__/button.test.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PlusOutlined } from '@gio-design/icons';
+import Button from '../Button';
+import IconButton from '../IconButton';
+
+describe('<Button />', () => {
+  test('Should render different types of buttons', () => {
+    const { getAllByTestId } = render(
+      <>
+        <Button type="primary">Primary</Button>
+        <Button type="secondary">Secondary</Button>
+        <Button type="text">Text</Button>
+      </>
+    );
+    const buttons = getAllByTestId('button');
+    expect(buttons[0]).toHaveClass('gio-button_primary');
+    expect(buttons[1]).toHaveClass('gio-button_secondary');
+    expect(buttons[2]).toHaveClass('gio-button_text');
+  });
+
+  test('Should render different sizes of buttons', () => {
+    const { getAllByRole } = render(
+      <>
+        <Button size="normal">Normal</Button>
+        <Button size="small">Small</Button>
+      </>
+    );
+    const buttons = getAllByRole('button');
+    expect(buttons[0]).toHaveClass('gio-button_normal');
+    expect(buttons[1]).toHaveClass('gio-button_small');
+  });
+
+  test('Should render a disabled button', () => {
+    const { getByRole } = render(<Button disabled>Disabled</Button>);
+    expect(getByRole('button')).toBeDisabled();
+    expect(getByRole('button')).toHaveClass('gio-button_disabled');
+  });
+
+  test('Should render a loading button with disabled', () => {
+    const { getByRole } = render(<Button loading>Loading</Button>);
+    expect(getByRole('button')).toBeDisabled();
+    expect(getByRole('button')).toHaveClass('gio-button_loading');
+    expect(getByRole('img')).toHaveAttribute('aria-label', 'loading-two-tone');
+  });
+
+  test('Should render buttons with a prefix or suffix icon', () => {
+    const { getAllByRole } = render(
+      <>
+        <Button prefix={<PlusOutlined />}>Prefix</Button>
+        <Button suffix={<PlusOutlined />}>Suffix</Button>
+      </>
+    );
+    const buttons = getAllByRole('button');
+    expect(buttons[0].firstElementChild).toHaveClass('gio-button-prefix-icon');
+    expect(buttons[1].firstElementChild).toHaveClass('gio-button-suffix-icon');
+  });
+
+  test('Should render a button with a active status', () => {
+    const { getByRole } = render(<Button active>Active</Button>);
+    expect(getByRole('button')).toHaveClass('gio-button_active');
+  });
+
+  test('Should render a submit button or reset button', () => {
+    const { getByText } = render(
+      <>
+        <Button htmlType="submit">Submit</Button>
+        <Button htmlType="reset">Reset</Button>
+      </>
+    );
+    expect(getByText('Submit')).toHaveAttribute('type', 'submit');
+    expect(getByText('Reset')).toHaveAttribute('type', 'reset');
+  });
+});
+
+describe('<Button.IconButton />', () => {
+  test('Should render a icon button', () => {
+    const { getByRole } = render(
+      <IconButton>
+        <PlusOutlined />
+      </IconButton>
+    );
+
+    expect(getByRole('button')).toHaveClass('gio-icon-button');
+  });
+});