feat: pagination 增加单元测试 (#1063)

README.md

@@ -129,7 +129,7 @@ NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使
 
 | 版本 | 微信群 |内部咚咚群 |
 | --- | --- |--- |
-| [NutUI Vue](https://github.com/jdf2e/nutui/issues) | <img src="https://nutui.jd.com/3x/3.1.12/vx-code1.png" width="100" /> 关注后回复「NutUI」 | 82957939
+| [NutUI Vue](https://github.com/jdf2e/nutui/issues) | <img src="https://nutui.jd.com/3x/3.1.17/vx-codeys.png" width="100" /> 关注后回复「NutUI」 | 82957939
 | [NutUI x Taro](https://github.com/jdf2e/nutui/issues) | <img src="https://camo.githubusercontent.com/db4276b4ee4b443158195e943e9e678cb4d2afb7580f70d4d817ef0a90413aec/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f7461726f2d6a642d636f6d2f7374617469632f636f6e746163745f7461726f5f6e757475695f71722e706e67" width="100" /> 关注后回复「NutUI」 | 1022545110 |
 | [NutUI React](https://github.com/jdf2e/nutui-react/issues) | 回复「NutUI」 | 1022619199
 

src/packages/__VUE/col/__test__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render Col correctly and should render gutter correctly 1`] = `
+"<view class=\\"nut-row-
+              nut-row-justify-start
+              nut-row-align-flex-start
+              nut-row-flex-nowrap
+              nut-row\\">
+  <view class=\\"nut-col nut-col-gutter nut-col-8 nut-col-offset-0\\" style=\\"padding-left: 3px; padding-right: 3px;\\">8</view>
+  <view class=\\"nut-col nut-col-gutter nut-col-8 nut-col-offset-0\\" style=\\"padding-left: 3px; padding-right: 3px;\\">8</view>
+  <view class=\\"nut-col nut-col-gutter nut-col-8 nut-col-offset-0\\" style=\\"padding-left: 3px; padding-right: 3px;\\">8</view>
+</view>"
+`;

src/packages/__VUE/col/__test__/index.spec.tsx

@@ -0,0 +1,21 @@
+import Col from '../index.vue';
+import Row from '../../row/index.vue';
+import { mount } from '@vue/test-utils';
+
+// 测试用例
+test('should render Col correctly and should render gutter correctly', async () => {
+  const wrapper = mount({
+    components: {
+      Row: Row,
+      Col: Col
+    },
+    template: `
+      <Row gutter="6">
+        <Col span="8">8</Col>
+        <Col span="8">8</Col>
+        <Col span="8">8</Col>
+      </Row>
+    `
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/pagination/__test__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render page slot correctly 1`] = `
+"<view class=\\"nut-pagination\\">
+  <view class=\\"nut-pagination-prev disabled\\">上一页</view>
+  <view class=\\"nut-pagination-contain\\">
+    <view class=\\"nut-pagination-item active\\">foo我呀</view>
+    <view class=\\"nut-pagination-item\\">foo我呀</view>
+    <view class=\\"nut-pagination-item\\">foo我呀</view>
+    <view class=\\"nut-pagination-item\\">foo我呀</view>
+    <view class=\\"nut-pagination-item\\">foo我呀</view>
+  </view>
+  <!--v-if-->
+  <view class=\\"nut-pagination-next\\">下一页</view>
+</view>"
+`;
+
+exports[`should render prev-text、next-text slot correctly 1`] = `
+"<view class=\\"nut-pagination\\">
+  <view class=\\"nut-pagination-prev disabled\\">Custom PrevText</view>
+  <view class=\\"nut-pagination-contain\\">
+    <view class=\\"nut-pagination-item active\\">1</view>
+    <view class=\\"nut-pagination-item\\">2</view>
+    <view class=\\"nut-pagination-item\\">3</view>
+    <view class=\\"nut-pagination-item\\">4</view>
+    <view class=\\"nut-pagination-item\\">5</view>
+  </view>
+  <!--v-if-->
+  <view class=\\"nut-pagination-next\\">Custom NextText</view>
+</view>"
+`;

src/packages/__VUE/pagination/__test__/index.spec.ts

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import Pagination from '../index.vue';
+
+//测试 totalItems itemsPerPage currentPage @change
+test('should render five items and should not emit change event after clicking disabled option', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 25,
+      itemsPerPage: 5
+    }
+  });
+  expect(wrapper.findAll('.nut-pagination-item')).toHaveLength(5);
+});
+
+//测试 mode pageCount
+test('should render simple mode', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      pageCount: 12,
+      mode: 'simple'
+    }
+  });
+  expect(wrapper.findAll('.nut-pagination-item')).toHaveLength(0);
+  expect(wrapper.findAll('.nut-pagination-simple')).toHaveLength(1);
+});
+
+//测试 forceEllipses showPageSize
+test('should render forceEllipses and should emit change event after clicking forceEllipses option', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 125,
+      showPageSize: 3,
+      forceEllipses: true
+    }
+  });
+  expect(wrapper.findAll('.nut-pagination-item')).toHaveLength(4);
+});
+
+//测试 click visible
+test('should emit change event after clicking visible option', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 25,
+      itemsPerPage: 5,
+      modelValue: 1
+    }
+  });
+  const next = wrapper.find('.nut-pagination-next');
+  next.trigger('click');
+  expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+  expect(wrapper.emitted('change')).toBeTruthy();
+});
+
+//测试 click disable
+test('should not emit change event after clicking disable option', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 25,
+      itemsPerPage: 5,
+      modelValue: 1
+    }
+  });
+  const prev = wrapper.find('.nut-pagination-prev');
+  prev.trigger('click');
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+  expect(wrapper.emitted('change')).toBeFalsy();
+});
+
+//测试slot
+test('should render prev-text、next-text slot correctly', () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 50,
+      showPageSize: 5
+    },
+    slots: {
+      'prev-text': () => 'Custom PrevText',
+      'next-text': () => 'Custom NextText'
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+//测试slot
+test('should render page slot correctly', () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      totalItems: 50,
+      showPageSize: 5
+    },
+    slots: {
+      page: ({ text = '我呀' }) => `foo${text}`
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});

src/packages/__VUE/row/__test__/index.spec.ts

@@ -0,0 +1,11 @@
+import Row from '../index.vue';
+import { mount } from '@vue/test-utils';
+
+test('should add "nut-row-flex-nowrap" class when wrap prop is false', () => {
+  const wrapper = mount(Row, {
+    props: {
+      wrap: 'nowrap'
+    }
+  });
+  expect(wrapper.classes()).toContain('nut-row-flex-nowrap');
+});

src/packages/__VUE/skeleton/__test__/__snapshots__/skeleton.spec.ts.snap

@@ -1,25 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-<<<<<<< HEAD
-exports[`should change avatar shape when using avatar-shape prop 1`] = `"<nut-avatar class=\\"avatarClass avatarClass--square\\" shape=\\"square\\" style=\\"width: 50px; height: 50px;\\" bg-color=\\"rgb(239, 239, 239)\\"></nut-avatar>"`;
-
-exports[`should change avatar size when using avatar-size prop: 20px 1`] = `"20px"`;
-
-exports[`should change avatar size when using avatar-size prop: 20px 2`] = `"20px"`;
-
-exports[`should render with row width array correctly 1`] = `
-"<view class=\\"skeleton\\" rowwidth=\\"100%,30,5rem\\">
-  <view class=\\"skeleton-animation\\"></view>
-  <view class=\\"content\\">
-    <!--v-if-->
-    <!--v-if-->
-    <view class=\\"content-line\\">
-      <view class=\\"title\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-      <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
-=======
 exports[`should change avatar shape when using avatarShape prop 1`] = `
 "<view style=\\"width: 50px; height: 50px; background-color: rgb(239, 239, 239);\\" class=\\"nut-avatar avatar-normal avatar-square avatarClass avatarClass--square\\"><i class=\\"nutui-iconfont nut-icon nut-icon- icon\\" src=\\"\\"></i>
   <!--v-if-->
@@ -39,7 +19,6 @@ exports[`should render default slot 1`] = `
     <view class=\\"content-line\\">
       <view class=\\"title\\"></view>
       <view class=\\"blockClass\\" style=\\"width: 100px; height: 100px;\\"></view>
->>>>>>> master/next
     </view>
   </view>
 </view>"

src/packages/__VUE/tag/__test__/__snapshots__/tag.spec.ts.snap

@@ -11,12 +11,9 @@ exports[`should render border-color correctly 1`] = `
   <!--v-if-->
 </view>"
 `;
-<<<<<<< HEAD
-=======
 
 exports[`should render textColor correctly 1`] = `
 "<view class=\\"nut-tag nut-tag--default nut-tag--plain\\" style=\\"background: red; color: blue;\\">
   <!--v-if-->
 </view>"
 `;
->>>>>>> master/next