From 0f3610bafe0867f9e4d4d1643e8ff2a0cb858b05 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 31 Jan 2021 16:11:49 +0800
Subject: [PATCH] fix(Toast): closeOnClickOverlay not work (#8044)

* fix(Toast): closeOnClickOverlay not work

* fix: demo
---
 src/toast/Toast.js             |  7 +++++++
 src/toast/test/index.legacy.js | 17 -----------------
 src/toast/test/index.spec.js   | 24 ++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/toast/Toast.js b/src/toast/Toast.js
index 759228029..57060d1a2 100644
--- a/src/toast/Toast.js
+++ b/src/toast/Toast.js
@@ -25,6 +25,7 @@ export default createComponent({
     overlayClass: null,
     overlayStyle: Object,
     closeOnClick: Boolean,
+    closeOnClickOverlay: Boolean,
     type: {
       type: String,
       default: 'text',
@@ -63,6 +64,10 @@ export default createComponent({
       clearTimeout(timer);
     };
 
+    const toggle = (show) => {
+      emit('update:show', show);
+    };
+
     const renderIcon = () => {
       const { icon, type, iconPrefix, loadingType } = props;
       const hasIcon = icon || type === 'success' || type === 'fail';
@@ -119,8 +124,10 @@ export default createComponent({
         transition={props.transition}
         overlayClass={props.overlayClass}
         overlayStyle={props.overlayStyle}
+        closeOnClickOverlay={props.closeOnClickOverlay}
         onClick={onClick}
         onClosed={clearTimer}
+        {...{ 'onUpdate:show': toggle }}
       >
         {renderIcon()}
         {renderMessage()}
diff --git a/src/toast/test/index.legacy.js b/src/toast/test/index.legacy.js
index a49dd67b3..c16917fa0 100644
--- a/src/toast/test/index.legacy.js
+++ b/src/toast/test/index.legacy.js
@@ -166,23 +166,6 @@ test('should trigger onClose callback after closed', () => {
   Toast.allowMultiple(false);
 });
 
-test('closeOnClick option', async () => {
-  Toast.allowMultiple();
-  const toast = Toast({
-    message: 'toast',
-  });
-
-  await later();
-  toast.$el.click();
-  expect(toast.value).toBeTruthy();
-
-  toast.closeOnClick = true;
-  toast.$el.click();
-  expect(toast.value).toBeFalsy();
-
-  Toast.allowMultiple(false);
-});
-
 test('register component', () => {
   Vue.use(Toast);
   expect(Vue.component(ToastVue.name)).toBeTruthy();
diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js
index 837149c2d..ab96603e6 100644
--- a/src/toast/test/index.spec.js
+++ b/src/toast/test/index.spec.js
@@ -15,3 +15,27 @@ test('should change overlay style after using overlay-style prop', async () => {
   await later();
   expect(wrapper.find('.van-overlay').element.style.background).toEqual('red');
 });
+
+test('should close Toast when using closeOnClick prop and clicked', () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      closeOnClick: true,
+    },
+  });
+
+  wrapper.find('.van-toast').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});
+
+test('should close Toast when using closeOnClickOverlay prop and overlay is clicked', () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+      closeOnClickOverlay: true,
+    },
+  });
+
+  wrapper.find('.van-overlay').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});