types: test cases typing

src/checkbox-group/test/index.spec.tsx

@@ -1,7 +1,7 @@
-import { mount } from '@vue/test-utils';
-import Checkbox from '../../checkbox';
-import CheckboxGroup from '..';
 import { ref, nextTick } from 'vue';
+import { mount } from '../../../test';
+import Checkbox from '../../checkbox';
+import CheckboxGroup, { CheckboxGroupToggleAllOptions } from '..';
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {
   const wrapper = mount({
@@ -45,8 +45,8 @@ test('should change icon size when using icon-size prop', () => {
   });
 
   const icons = wrapper.findAll('.van-checkbox__icon');
-  expect(icons[0].element.style.fontSize).toEqual('10rem');
-  expect(icons[1].element.style.fontSize).toEqual('5rem');
+  expect(icons[0].style.fontSize).toEqual('10rem');
+  expect(icons[1].style.fontSize).toEqual('5rem');
 });
 
 test('should change checked color when using checked-color prop', () => {
@@ -62,24 +62,30 @@ test('should change checked color when using checked-color prop', () => {
   });
 
   const icons = wrapper.findAll('.van-icon');
-  expect(icons[0].element.style.backgroundColor).toEqual('black');
-  expect(icons[1].element.style.backgroundColor).toEqual('white');
+  expect(icons[0].style.backgroundColor).toEqual('black');
+  expect(icons[1].style.backgroundColor).toEqual('white');
 });
 
 test('should ignore Checkbox if bind-group is false', async () => {
   const wrapper = mount({
     setup() {
+      const value = ref(false);
+      const groupRef = ref();
+      const groupValue = ref([]);
+      const toggleAll = (checked?: boolean) => {
+        groupRef.value.toggleAll(checked);
+      };
+
       return {
-        value: ref(false),
-        groupValue: ref([]),
-        toggleAll(checked) {
-          this.$refs.group.toggleAll(checked);
-        },
+        value,
+        groupRef,
+        groupValue,
+        toggleAll,
       };
     },
     render() {
       return (
-        <CheckboxGroup v-model={this.groupValue} ref="group">
+        <CheckboxGroup v-model={this.groupValue} ref="groupRef">
           <Checkbox v-model={this.value} name="a" bindGroup={false} />
           <Checkbox name="b" />
           <Checkbox name="c" />
@@ -100,16 +106,21 @@ test('should ignore Checkbox if bind-group is false', async () => {
 test('should toggle all checkboxes when toggleAll method is called', async () => {
   const wrapper = mount({
     setup() {
+      const value = ref(['a']);
+      const groupRef = ref();
+      const toggleAll = (options?: CheckboxGroupToggleAllOptions) => {
+        groupRef.value.toggleAll(options);
+      };
+
       return {
-        value: ref(['a']),
-        toggleAll(checked) {
-          this.$refs.group.toggleAll(checked);
-        },
+        value,
+        groupRef,
+        toggleAll,
       };
     },
     render() {
       return (
-        <CheckboxGroup v-model={this.value} ref="group">
+        <CheckboxGroup v-model={this.value} ref="groupRef">
           <Checkbox name="a" />
           <Checkbox name="b" />
           <Checkbox name="c" disabled />