fix(SFINT-3034): Make the tooltip flashing more reliable (#68)

coveo · Mar 18, 2020 · 8504f15 · 8504f15
1 parent b887cbd
commit 8504f15
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git 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
@@ -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', () => {