From 8504f15c0dd887b4ec95a8be976910eefc7ff4ec Mon Sep 17 00:00:00 2001
From: Jeremie Robert <43446516+jeremierobert-coveo@users.noreply.github.com>
Date: Wed, 18 Mar 2020 08:44:58 -0400
Subject: [PATCH] fix(SFINT-3034): Make the tooltip flashing more reliable
 (#68)

---
 .../CopyToClipboard/CopyToClipboard.ts        | 11 ++--
 tests/components/CopyPaste/CopyPaste.spec.ts  | 52 ++++++++++++-------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/components/CopyToClipboard/CopyToClipboard.ts b/src/components/CopyToClipboard/CopyToClipboard.ts
index 88abc6ac..0e1135f4 100644
--- a/src/components/CopyToClipboard/CopyToClipboard.ts
+++ b/src/components/CopyToClipboard/CopyToClipboard.ts
@@ -62,12 +62,6 @@ export class CopyToClipboard extends ResultAction {
         super(element, ComponentOptions.initComponentOptions(element, CopyToClipboard, options), bindings, result);
 
         super.init();
-
-        this.bind.on(this.element, 'mouseleave', (event: MouseEvent) => {
-            if (event.target == this.element) {
-                this.setToolipText(this.options.tooltip);
-            }
-        });
     }
 
     protected doAction() {
@@ -87,6 +81,11 @@ export class CopyToClipboard extends ResultAction {
             this.copyToClipboardFallback(text);
         }
         this.setToolipText(this.options.successTooltip);
+        this.refreshTooltip();
+    }
+
+    private refreshTooltip() {
+        setTimeout(() => this.setToolipText(this.options.tooltip), 500);
     }
 
     private setToolipText(text: string) {
diff --git a/tests/components/CopyPaste/CopyPaste.spec.ts b/tests/components/CopyPaste/CopyPaste.spec.ts
index cae63bb8..257abae3 100644
--- a/tests/components/CopyPaste/CopyPaste.spec.ts
+++ b/tests/components/CopyPaste/CopyPaste.spec.ts
@@ -56,6 +56,38 @@ describe('CopyToClipboard ResultAction', () => {
             expect(writeTextStub.called).toBeTrue();
         });
 
+        describe('after half a second', () => {
+            beforeEach(() => {
+                jasmine.clock().install();
+            });
+
+            afterEach(() => {
+                jasmine.clock().uninstall();
+            });
+
+            it('should change the tooltip text for "Copy"', async () => {
+                testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText = 'patate';
+                testComponent.element.click();
+                await Promise.resolve();
+                jasmine.clock().tick(500);
+                expect(testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText).toEqual(l('CopyToClipboard_copy'));
+            });
+
+            describe('when the clipboard api is not available', () => {
+                beforeEach(() => {
+                    writeTextStub.get(() => undefined);
+                });
+
+                it('should change the tooltip text for "Copy"', async () => {
+                    testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText = 'patate';
+                    testComponent.element.click();
+                    await Promise.resolve();
+                    jasmine.clock().tick(500);
+                    expect(testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText).toEqual(l('CopyToClipboard_copy'));
+                });
+            });
+        });
+
         it('should change the tooltip text for "Copied!"', async () => {
             testComponent.element.click();
 
@@ -81,26 +113,6 @@ describe('CopyToClipboard ResultAction', () => {
         });
     });
 
-    describe('on mouseleave', () => {
-        it('should change the tooltip text for "Copy"', () => {
-            testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText = 'patate';
-            testComponent.element.dispatchEvent(new MouseEvent('mouseleave'));
-            expect(testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText).toEqual(l('CopyToClipboard_copy'));
-        });
-
-        describe('when the clipboard api is not available', () => {
-            beforeEach(() => {
-                writeTextStub.get(() => undefined);
-            });
-
-            it('should change the tooltip text for "Copy"', () => {
-                testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText = 'patate';
-                testComponent.element.dispatchEvent(new MouseEvent('mouseleave'));
-                expect(testComponent.element.querySelector<HTMLElement>('.coveo-caption-for-icon').innerText).toEqual(l('CopyToClipboard_copy'));
-            });
-        });
-    });
-
     describe('options', () => {
         describe('template', () => {
             it('should use the provided template to fill the clipboard', () => {