From f2992cde5d49bde380251d39af5c4283d2e466a1 Mon Sep 17 00:00:00 2001
From: balanza <ema.decu@gmail.com>
Date: Tue, 18 Jun 2024 10:38:12 +0200
Subject: [PATCH 1/3] failing test

Signed-off-by: balanza <emanuele.decupis@suse.com>
---
 assets/js/common/Tooltip/Tooltip.test.jsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/assets/js/common/Tooltip/Tooltip.test.jsx b/assets/js/common/Tooltip/Tooltip.test.jsx
index 0b76abafcd..486c042328 100644
--- a/assets/js/common/Tooltip/Tooltip.test.jsx
+++ b/assets/js/common/Tooltip/Tooltip.test.jsx
@@ -84,4 +84,25 @@ describe('Tooltip', () => {
       expect(screen.queryByText('This is my tooltip text')).toBeNull()
     );
   });
+
+  it('should hide the text when the mouse go away', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <Tooltip content="This is my tooltip text">This is my anchor</Tooltip>
+      </div>
+    );
+
+    expect(screen.queryByText('This is my tooltip text')).toBeNull();
+
+    await act(async () => user.hover(screen.queryByText('This is my anchor')));
+    await act(async () =>
+      user.unhover(screen.queryByText('This is my anchor'))
+    );
+
+    await waitFor(() =>
+      expect(screen.queryByText('This is my tooltip text')).not.toBeVisible()
+    );
+  });
 });

From 7c92ef410d3a22a7e182b18fe2c5d370c409f584 Mon Sep 17 00:00:00 2001
From: balanza <ema.decu@gmail.com>
Date: Tue, 18 Jun 2024 10:45:18 +0200
Subject: [PATCH 2/3] add WithStyle test util

Signed-off-by: balanza <emanuele.decupis@suse.com>
---
 assets/js/lib/test-utils/ui/index.jsx | 27 +++++++++++++++++++++++++++
 assets/package.json                   |  1 +
 2 files changed, 28 insertions(+)
 create mode 100644 assets/js/lib/test-utils/ui/index.jsx

diff --git a/assets/js/lib/test-utils/ui/index.jsx b/assets/js/lib/test-utils/ui/index.jsx
new file mode 100644
index 0000000000..34cde512af
--- /dev/null
+++ b/assets/js/lib/test-utils/ui/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const css = require('fs').readFileSync(
+  `${__dirname}/../../../../../priv/static/assets/app.css`,
+  'utf8'
+);
+
+/**
+ * Prepend the application global css in a <style> element.
+ * It's meant to be used in component testing when css classes must be resolved.
+ *
+ * @example
+ *
+ * render(
+ *   <WithStyle>
+ *     <Elem />
+ *   </WithStyle>
+ * );
+ */
+export function WithStyle({ children }) {
+  return (
+    <>
+      <style>{css}</style>
+      {children}
+    </>
+  );
+}
diff --git a/assets/package.json b/assets/package.json
index 461d3b2842..b044d0d831 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -87,6 +87,7 @@
     "lint": "eslint . --ext js,jsx",
     "format:check": "prettier -c .",
     "format": "prettier --write .",
+    "pretest": "ls ../priv/static/assets/app.css || npm run tailwind:build",
     "test": "jest",
     "chromatic": "npx chromatic --exit-zero-on-changes"
   }

From 7b159fa66b9e5c1a4e37f96424220cd6ab6d0f55 Mon Sep 17 00:00:00 2001
From: balanza <ema.decu@gmail.com>
Date: Tue, 18 Jun 2024 10:45:27 +0200
Subject: [PATCH 3/3] fix test

Signed-off-by: balanza <emanuele.decupis@suse.com>
---
 assets/js/common/Tooltip/Tooltip.test.jsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/assets/js/common/Tooltip/Tooltip.test.jsx b/assets/js/common/Tooltip/Tooltip.test.jsx
index 486c042328..632439f77f 100644
--- a/assets/js/common/Tooltip/Tooltip.test.jsx
+++ b/assets/js/common/Tooltip/Tooltip.test.jsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
 import Tooltip from '.';
+import { WithStyle } from '../../lib/test-utils/ui';
 
 describe('Tooltip', () => {
   it('should show a text when mouse is hovering', async () => {
@@ -89,9 +90,11 @@ describe('Tooltip', () => {
     const user = userEvent.setup();
 
     render(
-      <div>
-        <Tooltip content="This is my tooltip text">This is my anchor</Tooltip>
-      </div>
+      <WithStyle>
+        <div>
+          <Tooltip content="This is my tooltip text">This is my anchor</Tooltip>
+        </div>
+      </WithStyle>
     );
 
     expect(screen.queryByText('This is my tooltip text')).toBeNull();