Use css style on component testing (#2701)

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 () => {
@@ -84,4 +85,27 @@ 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(
+      <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();
+
+    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()
+    );
+  });
 });

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}
+    </>
+  );
+}

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"
   }