test: add typing for some test cases (#8243)

src/notice-bar/test/index.spec.tsx

@@ -10,7 +10,7 @@ test('should emit close event when close icon is clicked', () => {
   const close = wrapper.find('.van-notice-bar__right-icon');
 
   close.trigger('click');
-  expect(wrapper.emitted('close')[0][0]).toBeTruthy();
+  expect(wrapper.emitted<[Event]>('close')![0][0]).toBeTruthy();
 });
 
 test('should render icon slot correct', () => {
@@ -53,12 +53,14 @@ test('should start scrolling when content width > wrap width ', async () => {
   const wrap = wrapper.find('.van-notice-bar__wrap');
   const content = wrapper.find('.van-notice-bar__content');
 
-  wrap.element.getBoundingClientRect = () => ({
+  wrap.element.getBoundingClientRect = () =>
-    width: 50,
+    ({
-  });
+      width: 50,
-  content.element.getBoundingClientRect = () => ({
+    } as DOMRect);
-    width: 100,
+  content.element.getBoundingClientRect = () =>
-  });
+    ({
+      width: 100,
+    } as DOMRect);
 
   await later(50);
 
@@ -76,12 +78,14 @@ test('should not start scrolling when content width > wrap width ', async () =>
   const wrap = wrapper.find('.van-notice-bar__wrap');
   const content = wrapper.find('.van-notice-bar__content');
 
-  wrap.element.getBoundingClientRect = () => ({
+  wrap.element.getBoundingClientRect = () =>
-    width: 200,
+    ({
-  });
+      width: 200,
-  content.element.getBoundingClientRect = () => ({
+    } as DOMRect);
-    width: 100,
+  content.element.getBoundingClientRect = () =>
-  });
+    ({
+      width: 100,
+    } as DOMRect);
 
   await later(50);
 

src/number-keyboard/test/index.spec.ts

@@ -1,7 +1,7 @@
 import NumberKeyboard from '..';
 import { mount, trigger, later } from '../../../test';
 
-function clickKey(key) {
+function clickKey(key: Parameters<typeof trigger>[0]) {
   trigger(key, 'touchstart');
   trigger(key, 'touchend');
 }
@@ -9,7 +9,7 @@ function clickKey(key) {
 test('should emit input event after clicking number key', () => {
   const wrapper = mount(NumberKeyboard);
   clickKey(wrapper.findAll('.van-key')[0]);
-  expect(wrapper.emitted('input')[0][0]).toEqual(1);
+  expect(wrapper.emitted('input')![0]).toEqual([1]);
   wrapper.unmount();
 });
 
@@ -163,10 +163,10 @@ test('should emit "update:modelValue" event after clicking key', () => {
   const keys = wrapper.findAll('.van-key');
 
   clickKey(keys[0]);
-  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1');
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
 
   clickKey(keys[1]);
-  expect(wrapper.emitted('update:modelValue')[1][0]).toEqual('2');
+  expect(wrapper.emitted('update:modelValue')![1]).toEqual(['2']);
 });
 
 test('should limit max length of modelValue when using maxlength prop', async () => {
@@ -182,12 +182,12 @@ test('should limit max length of modelValue when using maxlength prop', async ()
 
   clickKey(keys[0]);
   expect(onInput).toHaveBeenCalledTimes(1);
-  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1');
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual(['1']);
   await wrapper.setProps({ modelValue: '1' });
 
   clickKey(keys[1]);
   expect(onInput).toHaveBeenCalledTimes(1);
-  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
+  expect(wrapper.emitted('update:modelValue')!.length).toEqual(1);
 });
 
 test('should not render delete key when show-delete-key prop is false', async () => {
@@ -222,13 +222,13 @@ test('should shuffle key order when using random-key-order prop', () => {
     },
   });
 
-  const keys = [];
+  const keys: number[] = [];
-  const clickKeys = [];
+  const clickKeys: number[] = [];
 
   for (let i = 0; i < 9; i++) {
     keys.push(i + 1);
     clickKey(wrapper.findAll('.van-key')[i]);
-    clickKeys.push(wrapper.emitted('input')[i][0]);
+    clickKeys.push(wrapper.emitted<number[]>('input')![i][0]);
   }
 
   expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false);

src/popover/test/index.spec.tsx

@@ -23,7 +23,7 @@ test('should toggle popover when trigger is "click" and the reference element is
 
   await wrapper.setProps({ trigger: 'click' });
   await wrapper.find('.reference').trigger('click');
-  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+  expect(wrapper.emitted('update:show')![0]).toEqual([false]);
 });
 
 test('should emit select event when clicking the action', async () => {
@@ -37,7 +37,7 @@ test('should emit select event when clicking the action', async () => {
 
   await later();
   await wrapper.find('.van-popover__action').trigger('click');
-  expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
+  expect(wrapper.emitted('select')![0]).toEqual([baseActions[0], 0]);
 });
 
 test('should not emit select event when the action is disabled', () => {
@@ -63,11 +63,11 @@ test('should close popover when clicking the action', async () => {
   });
 
   await wrapper.find('.van-popover__action').trigger('click');
-  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+  expect(wrapper.emitted('update:show')![0]).toEqual([false]);
 
   await wrapper.setProps({ closeOnClickAction: false });
   await wrapper.find('.van-popover__action').trigger('click');
-  expect(wrapper.emitted('update:show').length).toEqual(1);
+  expect(wrapper.emitted('update:show')!.length).toEqual(1);
 });
 
 test('should allow to custom the className of action', () => {
@@ -139,12 +139,12 @@ test('should close popover when touch outside content', async () => {
   });
 
   const popover = root.querySelector('.van-popover');
-  trigger(popover, 'touchstart');
+  trigger(popover!, 'touchstart');
   expect(wrapper.emitted('update:show')).toBeFalsy();
 
   document.body.appendChild(root);
   trigger(document.body, 'touchstart');
-  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+  expect(wrapper.emitted('update:show')![0]).toEqual([false]);
 });
 
 test('should emit click-overlay event when overlay is clicked', () => {

src/rate/test/index.spec.ts

@@ -1,12 +1,14 @@
 import Rate from '..';
 import { mount, triggerDrag } from '../../../test';
+import type { DOMWrapper } from '@vue/test-utils';
 
-function mockGetBoundingClientRect(items) {
+function mockGetBoundingClientRect(items: DOMWrapper<Element>[]) {
   items.filter((icon, index) => {
-    icon.element.getBoundingClientRect = () => ({
+    icon.element.getBoundingClientRect = () =>
-      left: index * 25,
+      ({
-      width: 25,
+        left: index * 25,
-    });
+        width: 25,
+      } as DOMRect);
     return true;
   });
 }
@@ -16,15 +18,15 @@ test('should emit change and update:modelValue event when rate icon is clicked',
   const item4 = wrapper.findAll('.van-rate__icon')[3];
 
   item4.trigger('click');
-  expect(wrapper.emitted('change').length).toEqual(1);
+  expect(wrapper.emitted('change')!.length).toEqual(1);
-  expect(wrapper.emitted('change')[0][0]).toEqual(4);
+  expect(wrapper.emitted('change')![0]).toEqual([4]);
-  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
+  expect(wrapper.emitted('update:modelValue')!.length).toEqual(1);
-  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(4);
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([4]);
 
   await wrapper.setProps({ modelValue: 4 });
   item4.trigger('click');
-  expect(wrapper.emitted('change').length).toEqual(1);
+  expect(wrapper.emitted('change')!.length).toEqual(1);
-  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
+  expect(wrapper.emitted('update:modelValue')!.length).toEqual(1);
 });
 
 test('should not emit change and update:modelValue event when rate is not changed', () => {
@@ -49,8 +51,8 @@ test('should allow half rate when using allow-half prop', () => {
 
   const item4 = wrapper.findAll('.van-rate__icon--half')[3];
   item4.trigger('click');
-  expect(wrapper.emitted('change')[0][0]).toEqual(3.5);
+  expect(wrapper.emitted('change')![0]).toEqual([3.5]);
-  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(3.5);
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5]);
 });
 
 test('should not emit change or update:modelValue event when rate is disabled', () => {

src/search/test/index.spec.ts

@@ -28,8 +28,8 @@ test('should emit cancel event when cancel button click is clicked', () => {
   const cancel = wrapper.find('.van-search__action');
   cancel.trigger('click');
 
-  expect(wrapper.emitted('cancel').length).toEqual(1);
+  expect(wrapper.emitted('cancel')!.length).toEqual(1);
-  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('');
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual(['']);
 });
 
 test('should not emit cancel event when using action slot', () => {
@@ -56,7 +56,7 @@ test('should emit search event when enter key is pressed', () => {
   input.trigger('keypress.enter');
   input.trigger('keypress.a');
 
-  expect(wrapper.emitted('search').length).toEqual(1);
+  expect(wrapper.emitted('search')!.length).toEqual(1);
 });
 
 test('should render label slot correctly', () => {