[bugfix] DropdownMenu: cann't use toggle to open item (#3876)

src/dropdown-menu/test/index.spec.js

@@ -1,19 +1,19 @@
 import { mount, later } from '../../../test/utils';
+import Vue from 'vue';
 import DropdownMenu from '..';
 import DropdownItem from '../../dropdown-item';
 
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+
 function renderWrapper(options = {}) {
   return mount({
     template: `
-      <dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
-        <dropdown-item v-model="value" :title="title" :options="options" />
-        <dropdown-item v-model="value" :title="title" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+        <van-dropdown-item v-model="value" :title="title" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: options.value || 0,
@@ -92,11 +92,7 @@ test('direction up', async () => {
     direction: 'up'
   });
 
-  await later(10);
-
-  const titles = wrapper.findAll('.van-dropdown-menu__title');
-
-  titles.at(0).trigger('click');
+  await later();
   expect(wrapper).toMatchSnapshot();
 });
 
@@ -130,15 +126,11 @@ test('didn`t find matched option', async () => {
 test('destroy one item', async () => {
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item v-if="render" v-model="value" :options="options" />
-        <dropdown-item v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item v-if="render" v-model="value" :options="options" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -159,14 +151,10 @@ test('destroy one item', async () => {
 test('disable dropdown item', async () => {
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item disabled v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item disabled v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -188,15 +176,11 @@ test('change event', async () => {
 
   const wrapper = mount({
     template: `
-      <dropdown-menu>
-        <dropdown-item v-model="value" :options="options" @change="onChange" />
-        <dropdown-item v-model="value" :options="options" />
-      </dropdown-menu>
+      <van-dropdown-menu>
+        <van-dropdown-item v-model="value" :options="options" @change="onChange" />
+        <van-dropdown-item v-model="value" :options="options" />
+      </van-dropdown-menu>
     `,
-    components: {
-      DropdownItem,
-      DropdownMenu
-    },
     data() {
       return {
         value: 0,
@@ -225,3 +209,26 @@ test('change event', async () => {
   expect(onChange).toHaveBeenCalledWith(1);
   expect(onChange).toHaveBeenCalledTimes(1);
 });
+
+test('toggle method', async done => {
+  const wrapper = mount({
+    template: `
+      <van-dropdown-menu>
+        <van-dropdown-item ref="item" />
+      </van-dropdown-menu>
+    `,
+    async mounted() {
+      // show
+      this.$refs.item.toggle(true, { immediate: true });
+      await later();
+      expect(wrapper).toMatchSnapshot();
+
+      // hide
+      this.$refs.item.toggle(false, { immediate: true });
+      await later();
+      expect(wrapper).toMatchSnapshot();
+
+      done();
+    }
+  });
+});