test(ui:button): add tests

packages/ui/src/components/button/Button.test.tsx

@@ -0,0 +1,174 @@
+import { render, screen } from '@testing-library/react';
+
+import { PREFIX } from '../../tests';
+import { DCompose } from '../compose';
+import { DIcon } from '../icon';
+import { DButtonGroup, DButton } from './index';
+
+const icon = (
+ <DIcon data-testid="custom-icon" viewBox="64 64 896 896">
+ <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
+ </DIcon>
+);
+
+describe('DButton', () => {
+ const text = 'This is DButton';
+
+ const buttonClassList = () => {
+ return screen.getByRole('button').classList;
+ };
+
+ it('should `children` work', () => {
+ const { getByText } = render(<DButton children={text} />);
+ expect(getByText(text)).toBeInTheDocument();
+ });
+
+ it('should `dType` work', () => {
+ const dType = 'secondary';
+ render(<DButton dType={dType} />);
+ expect(buttonClassList().contains(`${PREFIX}button--${dType}`)).toBeTruthy();
+ });
+
+ it('should `dColor` work', () => {
+ const dColor = 'danger';
+ render(<DButton dColor={dColor} />);
+ expect(buttonClassList().contains(`t-${dColor}`)).toBeTruthy();
+ });
+
+ it('should `dLoading` work', () => {
+ const { getByRole } = render(<DButton dLoading={true} />);
+ expect(buttonClassList().contains(`is-loading`)).toBeTruthy();
+ expect(getByRole('button').children.length).toBe(1);
+ });
+
+ it('should `dIcon` work', () => {
+ const { getByRole } = render(<DButton dIcon={icon} />);
+ expect(getByRole('button').children.length).toBe(1);
+ });
+
+ it('should `dIconRight` work', () => {
+ const { getByRole } = render(<DButton dIcon={icon} dIconRight={true} children={text} />);
+ expect(getByRole('button').childNodes.length).toBe(2);
+ expect(getByRole('button').firstChild?.textContent).toBe(text);
+ });
+
+ it('should `dBlock` work', () => {
+ render(<DButton dBlock={true} />);
+ expect(buttonClassList().contains(`${PREFIX}button--block`)).toBeTruthy();
+ });
+
+ it('should `dShape` work', () => {
+ const shape = 'round';
+ render(<DButton dShape={shape} />);
+ expect(buttonClassList().contains(`${PREFIX}button--${shape}`)).toBeTruthy();
+ expect(buttonClassList().contains(`${PREFIX}button--circle`)).toBeFalsy();
+ });
+
+ it('should `dSize` work', () => {
+ const size = 'larger';
+ render(<DButton dSize={size} />);
+ expect(buttonClassList().contains(`${PREFIX}button--${size}`)).toBeTruthy();
+ });
+
+ it('should `disabled` work', () => {
+ const { getByRole } = render(<DButton disabled />);
+ expect(getByRole('button')).toBeDisabled();
+ });
+});
+
+describe('ButtonGroup', () => {
+ const expectBtnClass = (className: string) => {
+ const Buttons = screen.getAllByRole('button');
+ for (const iterator of Buttons) {
+ expect(iterator.classList.contains(className)).toBeTruthy();
+ }
+ };
+
+ it('should `children` work', () => {
+ const { getAllByRole } = render(
+ <DButtonGroup>
+ <DButton>L</DButton>
+ <DButton>M</DButton>
+ <DButton>R</DButton>
+ </DButtonGroup>
+ );
+ expect(getAllByRole('button').length).toBe(3);
+ });
+
+ it('should `dType` work', () => {
+ const type = 'outline';
+ render(
+ <DButtonGroup dType={type}>
+ <DButton>L</DButton>
+ <DButton>M</DButton>
+ <DButton>R</DButton>
+ </DButtonGroup>
+ );
+ expectBtnClass(`${PREFIX}button--${type}`);
+ });
+
+ it('should `dColor` work', () => {
+ const color = 'warning';
+ render(
+ <DButtonGroup dColor={color}>
+ <DButton>L</DButton>
+ <DButton>M</DButton>
+ <DButton>R</DButton>
+ </DButtonGroup>
+ );
+ expectBtnClass(`t-${color}`);
+ });
+
+ it('should `dSize` work', () => {
+ const size = 'smaller';
+ render(
+ <DButtonGroup dSize={size}>
+ <DButton>L</DButton>
+ <DButton>M</DButton>
+ <DButton>R</DButton>
+ </DButtonGroup>
+ );
+ expectBtnClass(`${PREFIX}button--${size}`);
+ });
+
+ it('should `dDisabled` work', () => {
+ const { getAllByRole } = render(
+ <DButtonGroup dDisabled>
+ <DButton>L</DButton>
+ <DButton>M</DButton>
+ <DButton>R</DButton>
+ </DButtonGroup>
+ );
+ const buttons = getAllByRole('button');
+ expect(buttons[0]).toBeDisabled();
+ expect(buttons[1]).toBeDisabled();
+ expect(buttons[2]).toBeDisabled();
+ });
+});
+
+describe('DCompose', () => {
+ const expectBtnClass = (className: string) => {
+ const Buttons = screen.getAllByRole('button');
+ for (const iterator of Buttons) {
+ expect(iterator.classList.contains(className)).toBeTruthy();
+ }
+ };
+ it('should `dSize` work', () => {
+ const size = 'smaller';
+ render(
+ <DCompose dSize={size}>
+ <DButton></DButton>
+ </DCompose>
+ );
+ expectBtnClass(`${PREFIX}button--${size}`);
+ });
+
+ it('should `dDisabled` work', () => {
+ const { getByRole } = render(
+ <DCompose dDisabled>
+ <DButton></DButton>
+ </DCompose>
+ );
+ expect(getByRole('button')).toBeDisabled();
+ });
+});

packages/ui/src/components/button/README.md

@@ -44,5 +44,5 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | dType | Set the shape of the buttons in the button group | Reference DButtonProps['dType'] | 'secondary' |
 | dColor | Set the color of the buttons in the button group | Reference DButtonProps['dColor'] | 'primary' |
 | dSize | Set the size of the buttons in the button group | Reference DButtonProps['dSize'] | - |
-| buttonGroupDisabled | Disable the buttons in the button group | boolean | false |
+| dDisabled | Disable the buttons in the button group | boolean | false |
 <!-- prettier-ignore-end -->

packages/ui/src/components/button/README.zh-Hant.md

@@ -43,5 +43,5 @@ export type DButtonRef = HTMLButtonElement;
 | dType | 设置按钮组中按钮的形态 | 参考 DButtonProps['dType'] | 'secondary' |
 | dColor | 设置按钮组中按钮的颜色 | 参考 DButtonProps['dColor'] | 'primary' |
 | dSize | 设置按钮组中按钮的尺寸 | 参考 DButtonProps['dSize'] | - |
-| buttonGroupDisabled | 禁用按钮组中的按钮 | boolean | false |
+| dDisabled | 禁用按钮组中的按钮 | boolean | false |
 <!-- prettier-ignore-end -->