From 9bd96a4cdaa65b890be27d3da9fb07c53bb1290a Mon Sep 17 00:00:00 2001
From: sbenmoussati <51402489+sbenmoussati@users.noreply.github.com>
Date: Fri, 13 Aug 2021 14:22:52 +0200
Subject: [PATCH] SDA-3292 Close button hovering not taken into account to
 prevent notification close

---
 spec/notificationComp.spec.ts                 | 10 ++++++++++
 src/renderer/components/notification-comp.tsx |  5 +++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/spec/notificationComp.spec.ts b/spec/notificationComp.spec.ts
index 7f13127e..240c3039 100644
--- a/spec/notificationComp.spec.ts
+++ b/spec/notificationComp.spec.ts
@@ -128,4 +128,14 @@ describe('Toast notification component', () => {
     toastNotificationReplyButton = wrapper.find(replyButtonSelector);
     expect(toastNotificationReplyButton.exists()).toBeTruthy();
   });
+
+  it('should trigger mouse hovering function while hovering a notification', async () => {
+    const spy = jest.spyOn(ipcRenderer, 'send');
+    const notificationContainer = wrapper.find(
+      '[data-testid="NOTIFICATION_CONTAINER"]',
+    );
+    expect(notificationContainer).toBeTruthy();
+    notificationContainer.simulate('mouseenter');
+    expect(spy).toBeCalledWith('notification-mouseenter', 0);
+  });
 });
diff --git a/src/renderer/components/notification-comp.tsx b/src/renderer/components/notification-comp.tsx
index d7f077e5..2f846be7 100644
--- a/src/renderer/components/notification-comp.tsx
+++ b/src/renderer/components/notification-comp.tsx
@@ -157,6 +157,7 @@ export default class NotificationComp extends React.Component<
     containerCssClass += customCssClasses.join(' ');
     return (
       <div
+        data-testid='NOTIFICATION_CONTAINER'
         className={containerCssClass}
         style={{
           height: containerHeight,
@@ -164,6 +165,8 @@ export default class NotificationComp extends React.Component<
           borderColor: themeColors.notificationBorderColor,
         }}
         lang={i18n.getLocale()}
+        onMouseEnter={this.eventHandlers.onMouseEnter(id)}
+        onMouseLeave={this.eventHandlers.onMouseLeave(id)}
       >
         <div
           className={`close-button ${themeClassName}`}
@@ -181,8 +184,6 @@ export default class NotificationComp extends React.Component<
           role='alert'
           onContextMenu={this.eventHandlers.onContextMenu}
           onClick={this.eventHandlers.onClick(id)}
-          onMouseEnter={this.eventHandlers.onMouseEnter(id)}
-          onMouseLeave={this.eventHandlers.onMouseLeave(id)}
         >
           <div className='logo-container'>{this.renderImage(icon)}</div>
           <div className='notification-container'>