From 6a1e65cb4ed926d7977428ba77ece5cf42177430 Mon Sep 17 00:00:00 2001
From: aaronlamz <aaronlamz2022@gmail.com>
Date: Sun, 22 Oct 2023 14:54:57 +0800
Subject: [PATCH 1/2] test(ui): add Compose test cases

---
 .../src/components/compose/Compose.test.tsx   | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 packages/ui/src/components/compose/Compose.test.tsx

diff --git a/packages/ui/src/components/compose/Compose.test.tsx b/packages/ui/src/components/compose/Compose.test.tsx
new file mode 100644
index 00000000..69edda00
--- /dev/null
+++ b/packages/ui/src/components/compose/Compose.test.tsx
@@ -0,0 +1,66 @@
+import type { DComposeProps } from './Compose';
+
+import { render } from '../../__tests__/utils';
+import { DButton } from '../button';
+import { DInput } from '../input';
+import { DCompose, DComposeItem } from './index';
+
+const dPrefix = 'rd-';
+
+describe('DCompose', () => {
+  it('renders correctly', () => {
+    const { getByRole } = render(<DCompose></DCompose>);
+    const composeElement = getByRole('group');
+    expect(composeElement).toBeInTheDocument();
+  });
+
+  it('renders with different dSize values', () => {
+    const sizes: (DComposeProps['dSize'] | undefined)[] = ['smaller', 'larger'];
+    sizes.forEach((size) => {
+      const { container } = render(
+        <DCompose dSize={size}>
+          <DInput dPlaceholder="Search" />
+          <DButton>Button</DButton>
+        </DCompose>
+      );
+      const inputDiv = container.querySelector('.rd-input');
+      const buttonElement = container.querySelector('.rd-button');
+      expect(inputDiv).toHaveClass(`${dPrefix}input--${size}`);
+      expect(buttonElement).toHaveClass(`${dPrefix}button--${size}`);
+    });
+  });
+
+  it('renders vertically', () => {
+    const { getByRole } = render(<DCompose dVertical={true} />);
+    const composeElement = getByRole('group');
+    expect(composeElement).toHaveClass(`${dPrefix}compose--vertical`);
+  });
+
+  it('renders with dDisabled set to true', () => {
+    const { container } = render(
+      <DCompose dDisabled={true}>
+        <DInput dPlaceholder="Search" />
+        <DButton>Button</DButton>
+      </DCompose>
+    );
+    const inputDiv = container.querySelector('.rd-input');
+    const buttonElement = container.querySelector('.rd-button');
+    expect(inputDiv?.classList.contains('is-disabled')).toBe(true);
+    expect(buttonElement).toHaveAttribute('disabled');
+  });
+
+  it('renders with children', () => {
+    const { container } = render(
+      <DCompose>
+        <DComposeItem>
+          <DInput dPlaceholder="Search" />
+        </DComposeItem>
+        <DComposeItem>
+          <DButton>Button</DButton>
+        </DComposeItem>
+      </DCompose>
+    );
+    const composeItemElements = container.querySelectorAll(`.rd-compose-item`);
+    expect(composeItemElements.length).toBe(2);
+  });
+});

From 277c3e397ad8f56f5c6bf538c7f3f5d3544d7435 Mon Sep 17 00:00:00 2001
From: aaronlamz <aaronlamz2022@gmail.com>
Date: Sun, 22 Oct 2023 15:32:36 +0800
Subject: [PATCH 2/2] test(ui): update Compose testcases

---
 .../src/components/compose/Compose.test.tsx   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/ui/src/components/compose/Compose.test.tsx b/packages/ui/src/components/compose/Compose.test.tsx
index 69edda00..2caca861 100644
--- a/packages/ui/src/components/compose/Compose.test.tsx
+++ b/packages/ui/src/components/compose/Compose.test.tsx
@@ -63,4 +63,34 @@ describe('DCompose', () => {
     const composeItemElements = container.querySelectorAll(`.rd-compose-item`);
     expect(composeItemElements.length).toBe(2);
   });
+
+  // __noStyle test
+  it('should not have default style class when __noStyle is true', () => {
+    const { container } = render(
+      <DCompose __noStyle={true}>
+        <div className="no-style">Child</div>
+      </DCompose>
+    );
+
+    const hasStyleClass = container.firstChild?.classList.contains('rd-compose');
+    expect(hasStyleClass).toBe(false);
+  });
+
+  it('should have default style class when __noStyle is false or not provided', () => {
+    const { container: container1 } = render(
+      <DCompose __noStyle={false}>
+        <div>Child</div>
+      </DCompose>
+    );
+    const hasStyleClass1 = container1?.firstChild?.classList.contains('rd-compose');
+    expect(hasStyleClass1).toBe(true);
+
+    const { container: container2 } = render(
+      <DCompose>
+        <div>Child</div>
+      </DCompose>
+    );
+    const hasStyleClass2 = container2?.firstChild?.classList.contains('rd-compose');
+    expect(hasStyleClass2).toBe(true);
+  });
 });