test(swiper): add swiper tests (#1280) (#1397)

src/swiper/__tests__/__snapshots__/swiper.test.tsx.snap

@@ -1,5 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Swiper 组件测试 create 1`] = `
+<div>
+  <div
+    class="t-swiper"
+  >
+    <div
+      class="t-swiper__wrap t-swiper--inside"
+    >
+      <div
+        class="t-swiper__content"
+      >
+        <div
+          class="t-swiper__container"
+          style="transform: translate3d(-0%, 0px, 0px);"
+        />
+      </div>
+      <ul
+        class="t-swiper__navigation t-swiper__navigation-bars"
+      />
+      <div
+        class="t-swiper__arrow t-swiper__arrow--default"
+      >
+        <div
+          class="t-swiper__arrow-left"
+        >
+          <svg
+            class="t-icon t-icon-chevron-left"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+        
+        <div
+          class="t-swiper__arrow-right"
+        >
+          <svg
+            class="t-icon t-icon-chevron-right"
+            fill="none"
+            height="1em"
+            viewBox="0 0 16 16"
+            width="1em"
+          >
+            <path
+              d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+              fill="currentColor"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`base.jsx 1`] = `
 <DocumentFragment>
   <div

src/swiper/__tests__/swiper.test.tsx

@@ -1,4 +1,92 @@
-import { testExamples } from '@test/utils';
+import React from 'react';
+import { testExamples, render, act, waitFor, fireEvent } from '@test/utils';
+import { Swiper } from '..';
+
+const { SwiperItem } = Swiper;
 
 // 测试组件代码 Example 快照
 testExamples(__dirname);
+
+describe('Swiper 组件测试', () => {
+  // 测试渲染
+  test('create', async () => {
+    const { container } = render(<Swiper></Swiper>);
+    expect(container.querySelectorAll('.t-swiper')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  // 测试事件
+  test('arrows event', async () => {
+    const TestView = () => (
+      <>
+        <Swiper
+          autoplay={false}
+          loop
+          navigation={{
+            showSlideBtn: 'hover',
+          }}
+        >
+          <SwiperItem>
+            <div className="demo-item">1</div>
+          </SwiperItem>
+          <SwiperItem>
+            <div className="demo-item">2</div>
+          </SwiperItem>
+          <SwiperItem>
+            <div className="demo-item">3</div>
+          </SwiperItem>
+        </Swiper>
+      </>
+    );
+
+    await act(async () => {
+      render(<TestView />);
+      // 获取 element
+      const element = await waitFor(() => document.querySelector('.t-swiper__container'));
+      const arrows = await waitFor(() => document.querySelectorAll('.t-swiper__navigation-item'));
+      expect(element).not.toBeNull();
+      expect(arrows.length).toBe(3);
+
+      fireEvent.click(arrows[1]);
+      fireEvent.mouseEnter(arrows[1]);
+      fireEvent.mouseLeave(arrows[1]);
+      expect(arrows[1].classList.contains('t-is-active')).toBeTruthy();
+    });
+  });
+
+  // 测试事件
+  test('event', async () => {
+    const TestView = () => (
+      <>
+        <Swiper loop>
+          <SwiperItem>
+            <div className="demo-item">1</div>
+          </SwiperItem>
+          <SwiperItem>
+            <div className="demo-item">2</div>
+          </SwiperItem>
+          <SwiperItem>
+            <div className="demo-item">3</div>
+          </SwiperItem>
+        </Swiper>
+      </>
+    );
+
+    await act(async () => {
+      render(<TestView />);
+      // 获取 element
+      const arrowLeft = await waitFor(() => document.querySelector('.t-swiper__arrow-left'));
+      const arrowRight = await waitFor(() => document.querySelector('.t-swiper__arrow-right'));
+      const element = await waitFor(() => document.querySelector('.t-swiper__container'));
+      expect(arrowLeft).not.toBeNull();
+      expect(arrowRight).not.toBeNull();
+      expect(element).not.toBeNull();
+
+      fireEvent.click(arrowRight);
+      expect(element.getAttribute('style')).toBe(
+        'transform: translate3d(-100%, 0px, 0px); transition: transform 0.3s ease;',
+      );
+      fireEvent.click(arrowLeft);
+    });
+  });
+});