add test for carousel, ref #1274 (#1522)

ant-design · Jul 3, 2017 · f6646a2 · f6646a2
1 parent 4ffe391
commit f6646a2
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 0 deletions.
diff --git a/components/carousel/__tests__/__snapshots__/index.test.js.snap b/components/carousel/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel.RN renders correctly 1`] = `
+<View
+  onLayout={[Function]}
+>
+  <RCTScrollView
+    automaticallyAdjustContentInsets={false}
+    autoplay={false}
+    autoplayInterval={3000}
+    bounces={true}
+    contentContainerStyle={undefined}
+    contentOffset={
+      Object {
+        "x": 0,
+        "y": 0,
+      }
+    }
+    directionalLockEnabled={true}
+    dotActiveStyle={Object {}}
+    dotStyle={Object {}}
+    dots={true}
+    horizontal={true}
+    infinite={false}
+    onMomentumScrollEnd={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    pagination={[Function]}
+    pagingEnabled={true}
+    removeClippedSubviews={false}
+    scrollEventThrottle={100}
+    selectedIndex={0}
+    showsHorizontalScrollIndicator={false}
+    showsVerticalScrollIndicator={false}
+    styles={
+      Object {
+        "pagination": Object {
+          "alignItems": "center",
+          "position": "absolute",
+        },
+        "paginationX": Object {
+          "bottom": 10,
+          "left": 0,
+          "right": 0,
+        },
+        "paginationY": Object {
+          "bottom": 0,
+          "right": 10,
+          "top": 0,
+        },
+        "pointActiveStyle": Object {
+          "backgroundColor": "#888",
+        },
+        "pointStyle": Object {
+          "backgroundColor": "#ccc",
+          "borderRadius": 8,
+          "height": 8,
+          "width": 8,
+        },
+        "spaceStyle": Object {
+          "marginHorizontal": 2.5,
+          "marginVertical": 3,
+        },
+      }
+    }
+    vertical={false}
+  >
+    <View>
+      <View
+        style={
+          Object {
+            "width": 0,
+          }
+        }
+      >
+        <View>
+          abc
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "position": "absolute",
+        },
+        Object {
+          "bottom": 10,
+          "left": 0,
+          "right": 0,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#ccc",
+              "borderRadius": 8,
+              "height": 8,
+              "width": 8,
+            },
+            Object {
+              "marginHorizontal": 2.5,
+              "marginVertical": 3,
+            },
+            Object {},
+            Object {
+              "backgroundColor": "#888",
+            },
+            Object {},
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
diff --git a/components/carousel/__tests__/__snapshots__/index.test.web.js.snap b/components/carousel/__tests__/__snapshots__/index.test.web.js.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel.web renders correctly 1`] = `
+<div
+  class="slider am-carousel"
+  style="position:relative;display:block;width:100%;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;visibility:hidden;"
+>
+  <div
+    class="slider-frame"
+    style="position:relative;display:block;overflow:hidden;height:auto;margin:0px;padding:0;transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate(0, 0);box-sizing:border-box;-moz-box-sizing:border-box;"
+  >
+    <ul
+      class="slider-list"
+      style="transform:translate3d(0px, 0px, 0);-webkit-transform:translate3d(0px, 0px, 0);-ms-transform:translate(0px, 0px);position:relative;display:block;margin:0px 0px;padding:0;height:0;width:0;cursor:inherit;box-sizing:border-box;-moz-box-sizing:border-box;"
+    >
+      <li
+        class="slider-slide"
+        style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+      >
+        <a
+          href="#"
+        >
+          <img
+            alt="carousel images"
+            src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR"
+          />
+        </a>
+      </li>
+      <li
+        class="slider-slide"
+        style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+      >
+        <a
+          href="#"
+        >
+          <img
+            alt="carousel images"
+            src="https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn"
+          />
+        </a>
+      </li>
+      <li
+        class="slider-slide"
+        style="position:absolute;left:0;top:0;display:inline-block;list-style-type:none;vertical-align:top;width:0;height:auto;box-sizing:border-box;-moz-box-sizing:border-box;margin-left:0;margin-right:0;margin-top:auto;margin-bottom:auto;"
+      >
+        <a
+          href="#"
+        >
+          <img
+            alt="carousel images"
+            src="https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div
+    class="slider-decorator-0"
+    style="position:absolute;bottom:0;width:100%;text-align:center;"
+  >
+    <div
+      class="am-carousel-wrap"
+    >
+      <div
+        class="am-carousel-wrap-dot am-carousel-wrap-dot-active"
+      >
+        <span />
+      </div>
+      <div
+        class="am-carousel-wrap-dot"
+      >
+        <span />
+      </div>
+      <div
+        class="am-carousel-wrap-dot"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import Carousel from '../index';
+
+describe('Carousel.RN', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Carousel><View>abc</View></Carousel>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('has no dots', () => {
+    const wrapper = shallow(
+      <Carousel dots={false}>
+        <View>abc</View>
+      </Carousel>,
+    );
+    // only has `ScrollView`
+    expect(wrapper.children()).toHaveLength(1);
+    // ScrollViewMock
+    expect(wrapper.children().name()).toMatch(/ScrollView/);
+  });
+
+  it('has dots', () => {
+    const wrapper = shallow(<Carousel><View>abc</View></Carousel>);
+    expect(wrapper.children()).toHaveLength(2);
+  });
+
+  it('check api', () => {
+    const itemStyle = {
+      height: 150,
+      width: 320,
+      flexGrow: 1,
+    };
+    const wrapper = shallow(
+      <Carousel selectedIndex={1}>
+        <View style={itemStyle}>item1</View>
+        <View style={itemStyle}>item2</View>
+        <View style={itemStyle}>item3</View>
+      </Carousel>,
+    );
+    // wrapper.children().at(0) => ScrollView(ScrollViewMock)
+    expect(wrapper.children().at(0).children()).toHaveLength(3);
+    expect(wrapper.state('selectedIndex')).toEqual(1);
+    // because of ``ScrollViewMock``, can not test UI and events.
+  });
+});
diff --git a/components/carousel/__tests__/index.test.web.js b/components/carousel/__tests__/index.test.web.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Carousel from '../index.web';
+
+describe('Carousel.web', () => {
+  it('renders correctly', () => {
+    const children = ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'].map((item, i) => (
+      <a href="#" key={i}>
+        <img src={`https://zos.alipayobjects.com/rmsportal/${item}`} alt="carousel images" />
+      </a>
+    ));
+    const wrapper = render(<Carousel>{children}</Carousel>);
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+});