fix(Pagination): change event not work (#10018)

* fix(Pagination): change event not work

* chore: update pnpm lock

packages/vant-cli/package.json

@@ -48,6 +48,7 @@
     "vue": "^3.2.20"
   },
   "dependencies": {
+    "@types/jest": "^27.0.3",
     "@babel/core": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",

packages/vant/src/pagination/Pagination.tsx

@@ -135,7 +135,7 @@ export default defineComponent({
           <button
             type="button"
             disabled={disabled}
-            onClick={() => updateModelValue(modelValue - 1)}
+            onClick={() => updateModelValue(modelValue - 1, true)}
           >
             {slot ? slot() : props.prevText || t('prev')}
           </button>
@@ -157,7 +157,7 @@ export default defineComponent({
           <button
             type="button"
             disabled={disabled}
-            onClick={() => updateModelValue(modelValue + 1)}
+            onClick={() => updateModelValue(modelValue + 1, true)}
           >
             {slot ? slot() : props.nextText || t('next')}
           </button>
@@ -176,7 +176,7 @@ export default defineComponent({
           <button
             type="button"
             aria-current={page.active || undefined}
-            onClick={() => updateModelValue(page.number)}
+            onClick={() => updateModelValue(page.number, true)}
           >
             {slots.page ? slots.page(page) : page.text}
           </button>

packages/vant/src/pagination/test/index.spec.ts

@@ -29,3 +29,26 @@ test('should render page slot correctly', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should emit change event after the page is changed', async () => {
+  const wrapper = mount(Pagination, {
+    props: {
+      modelValue: 1,
+      totalItems: 50,
+      'onUpdate:modelValue': (modelValue: number) => {
+        wrapper.setProps({ modelValue });
+      },
+    },
+  });
+
+  await wrapper
+    .findAll('.van-pagination__item--page button')[2]
+    .trigger('click');
+  expect(wrapper.emitted('change')).toEqual([[3]]);
+
+  await wrapper.find('.van-pagination__item--prev button').trigger('click');
+  expect(wrapper.emitted('change')).toEqual([[3], [2]]);
+
+  await wrapper.find('.van-pagination__item--next button').trigger('click');
+  expect(wrapper.emitted('change')).toEqual([[3], [2], [3]]);
+});

pnpm-lock.yaml

@@ -87,6 +87,7 @@ importers:
       '@docsearch/css': 3.0.0-alpha.41
       '@docsearch/js': 3.0.0-alpha.41
       '@types/fs-extra': ^9.0.13
+      '@types/jest': ^27.0.3
       '@types/less': ^3.0.3
       '@types/lodash-es': ^4.17.5
       '@types/markdown-it': ^12.2.3
@@ -142,6 +143,7 @@ importers:
       '@babel/preset-typescript': 7.16.0_@babel+core@7.16.0
       '@docsearch/css': 3.0.0-alpha.41
       '@docsearch/js': 3.0.0-alpha.41
+      '@types/jest': 27.0.3
       '@vant/eslint-config': link:../vant-eslint-config
       '@vant/markdown-vetur': link:../vant-markdown-vetur
       '@vant/stylelint-config': link:../vant-stylelint-config
@@ -179,7 +181,7 @@ importers:
       release-it: 14.11.6
       stylelint: 13.13.1
       transliteration: 2.2.0
-      ts-jest: 27.1.0_e9a97d29b53edf30da72e8531628bcc0
+      ts-jest: 27.1.0_30b6fcff5d98ca4c7c41e0929500ff50
       typescript: 4.5.2
       vite: 2.6.13_less@4.1.2
       vite-plugin-html: 2.1.1_vite@2.6.13
@@ -2088,6 +2090,13 @@ packages:
       '@types/istanbul-lib-report': 3.0.0
     dev: false
 
+  /@types/jest/27.0.3:
+    resolution: {integrity: sha512-cmmwv9t7gBYt7hNKH5Spu7Kuu/DotGa+Ff+JGRKZ4db5eh8PnKS4LuebJ3YLUoyOyIHraTGyULn23YtEAm0VSg==, tarball: '@types/jest/download/@types/jest-27.0.3.tgz'}
+    dependencies:
+      jest-diff: 27.3.1
+      pretty-format: 27.3.1
+    dev: false
+
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha1-l+3JA36gw4WFMgsolk3eOznkZg0=, tarball: '@types/json-schema/download/@types/json-schema-7.0.9.tgz'}
     dev: false
@@ -6388,7 +6397,7 @@ packages:
       mime-db: 1.50.0
 
   /mime/1.6.0:
-    resolution: {integrity: sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=, tarball: mime/download/mime-1.6.0.tgz}
+    resolution: {integrity: sha1-Ms2eXGRVO9WNGaVor0Uqz/BJgbE=, tarball: mime/download/mime-1.6.0.tgz?cache=0&sync_timestamp=1636370946189&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmime%2Fdownload%2Fmime-1.6.0.tgz}
     engines: {node: '>=4'}
     hasBin: true
     requiresBuild: true
@@ -7981,7 +7990,7 @@ packages:
   /trough/1.0.5:
     resolution: {integrity: sha1-uLY5zvrX0LsqvTfUM/+Ck++l9AY=, tarball: trough/download/trough-1.0.5.tgz}
 
-  /ts-jest/27.1.0_e9a97d29b53edf30da72e8531628bcc0:
+  /ts-jest/27.1.0_30b6fcff5d98ca4c7c41e0929500ff50:
     resolution: {integrity: sha512-ZouWlP03JMtzfNHg0ZeDrxAESYGmVhWyHtIl2/01kBbXaMbTr4Vhv6/GeMxUed6GFg/4ycMo+yU6Eo9gI16xTQ==, tarball: ts-jest/download/ts-jest-27.1.0.tgz}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -8000,6 +8009,7 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.16.0
+      '@types/jest': 27.0.3
       babel-jest: 27.3.1_@babel+core@7.16.0
       bs-logger: 0.2.6
       esbuild: 0.14.2
@@ -8378,7 +8388,7 @@ packages:
       extract-from-css: 0.4.4
       jest: 27.3.1
       source-map: 0.5.6
-      ts-jest: 27.1.0_e9a97d29b53edf30da72e8531628bcc0
+      ts-jest: 27.1.0_30b6fcff5d98ca4c7c41e0929500ff50
       tsconfig: 7.0.0
       typescript: 4.5.2
       vue: 3.2.21