feat: unit test

Author: 梁朝飞

src/MotionThumb.tsx

@@ -142,7 +142,6 @@ export default function MotionThumb(props: MotionThumbInterface) {
 
   // =========================== Motion ===========================
   const onAppearStart = () =>
-    // Returns initial transform and size styles for the thumb based on the layout orientation (vertical or horizontal).
     vertical
       ? {
           transform: 'translateY(var(--thumb-start-top))',

tests/__snapshots__/index.test.tsx.snap

@@ -140,6 +140,68 @@ exports[`rc-segmented render segmented ok 1`] = `
 </div>
 `;
 
+exports[`rc-segmented render segmented with CSSMotion (vertical) basic vertical movement 1`] = `
+<div
+  aria-label="segmented control"
+  class="rc-segmented rc-segmented-vertical"
+  role="listbox"
+>
+  <div
+    class="rc-segmented-group"
+  >
+    <label
+      class="rc-segmented-item rc-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="true"
+        class="rc-segmented-item-label"
+        role="option"
+        title="iOS"
+      >
+        iOS
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Android"
+      >
+        Android
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Web3"
+      >
+        Web3
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
 <div
   aria-label="segmented control"
@@ -700,6 +762,68 @@ exports[`rc-segmented render segmented: disabled 1`] = `
 </div>
 `;
 
+exports[`rc-segmented render vertical segmented 1`] = `
+<div
+  aria-label="segmented control"
+  class="rc-segmented rc-segmented-vertical"
+  role="listbox"
+>
+  <div
+    class="rc-segmented-group"
+  >
+    <label
+      class="rc-segmented-item rc-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="true"
+        class="rc-segmented-item-label"
+        role="option"
+        title="iOS"
+      >
+        iOS
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Android"
+      >
+        Android
+      </div>
+    </label>
+    <label
+      class="rc-segmented-item"
+    >
+      <input
+        class="rc-segmented-item-input"
+        type="radio"
+      />
+      <div
+        aria-selected="false"
+        class="rc-segmented-item-label"
+        role="option"
+        title="Web"
+      >
+        Web
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`rc-segmented should render vertical segmented 1`] = `
 <div
   aria-label="segmented control"

tests/index.test.tsx

@@ -451,6 +451,42 @@ describe('rc-segmented', () => {
       offsetParentSpy.mockRestore();
     });
   });
+  describe('render segmented with CSSMotion: vertical', () => {
+    it('quick switch', () => {
+      const offsetParentSpy = jest
+        .spyOn(HTMLElement.prototype, 'offsetParent', 'get')
+        .mockImplementation(() => {
+          return container;
+        });
+      const { container } = render(
+        <Segmented
+          vertical
+          options={['IOS', 'Android', 'Web3']}
+          defaultValue="Android"
+        />,
+      );
+
+      // >>> Click: Web3
+      fireEvent.click(
+        container.querySelectorAll('.rc-segmented-item-input')[2],
+      );
+
+      // Motion to active
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect(container.querySelector('.rc-segmented-thumb')).toHaveClass(
+        'rc-segmented-thumb-motion-appear-active',
+      );
+
+      exceptThumbHaveStyle(container, {
+        '--thumb-active-top': '0px',
+        '--thumb-active-width': '0px',
+      });
+
+      offsetParentSpy.mockRestore();
+    });
+  });
 
   it('render segmented with options null/undefined', () => {
     const handleValueChange = jest.fn();