test(help): add tests

packages/help/src/Help.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { PopoverPlacements, PopoverModes } from '@axa-fr/react-toolkit-popover';
-import Help from './Help.container';
+import Help from './Help';
 import readme from '../README.md';
 import './help-custom.scss';
 
@@ -36,13 +36,15 @@ export default {
 } as Meta;
 
 type HelpProps = React.ComponentProps<typeof Help>;
-const Template: Story<HelpProps> = ({ content, ...args }) => (
-  <Help {...args}>{content}</Help>
+const Template: Story<HelpProps> = ({ children, ...args }) => (
+  <Help {...args}>{children}</Help>
 );
 
-export const TextStory = Template.bind({});
+export const TextStory: Story<HelpProps> = Template.bind({});
 TextStory.args = {
-  content: 'Lorem ipsum dolor sit amet',
+  children: 'Lorem ipsum dolor sit amet',
+  mode: PopoverModes.click,
+  placement: PopoverPlacements.right,
 };
 
 const htmlChild = (
@@ -65,8 +67,10 @@ const htmlChild = (
   </div>
 );
 
-export const HtmlStory = Template.bind({});
+export const HtmlStory: Story<HelpProps> = Template.bind({});
 HtmlStory.args = {
-  content: htmlChild,
+  children: htmlChild,
   classModifier: 'custom',
+  mode: PopoverModes.over,
+  placement: PopoverPlacements.right,
 };

packages/help/src/__tests__/Help.spec.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import UserEvent from '@testing-library/user-event';
+import Help from '../Help';
+
+describe('Help', () => {
+  describe('Mode click (default)', () => {
+    it('should show help on when clicking on i', async () => {
+      // Arrange
+      render(<Help>Help content</Help>);
+
+      // Act
+      UserEvent.click(screen.getByText('i'));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/Help content/)).toBeInTheDocument();
+      });
+    });
+
+    it('should not hide help when clicking on help content', async () => {
+      // Arrange
+      render(<Help>Help content</Help>);
+      UserEvent.click(screen.getByText('i'));
+      await waitFor(() => {
+        screen.queryByText(/Help content/);
+      });
+
+      // Act
+      UserEvent.click(screen.getByText(/Help content/));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByText(/Help content/)).toBeInTheDocument();
+      });
+    });
+
+    it('should hide help when clicking on i', async () => {
+      // Arrange
+      render(<Help>Help content</Help>);
+      UserEvent.click(screen.getByText('i'));
+      await waitFor(() => {
+        screen.queryByText(/Help content/);
+      });
+
+      // Act
+      UserEvent.click(screen.getByText('i'));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/Help content/)).not.toBeInTheDocument();
+      });
+    });
+
+    it('should not show help on hover', async () => {
+      // Arrange
+      render(<Help>Help content</Help>);
+
+      // Act
+      UserEvent.hover(screen.getByText('i'));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/Help content/)).not.toBeInTheDocument();
+      });
+    });
+
+    it('should not show help before click', async () => {
+      // Arrange
+      render(<Help>Help content</Help>);
+
+      // Act
+      // No user interaction
+
+      // Assert
+      expect(screen.queryByText(/Help content/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Mode hover', () => {
+    it('should show help when hovering i', async () => {
+      // Arrange
+      render(<Help mode="over">Help content</Help>);
+
+      // Act
+      UserEvent.hover(screen.getByText('i'));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/Help content/)).toBeInTheDocument();
+      });
+    });
+
+    it('should hide help when unhovering i', async () => {
+      // Arrange
+      render(<Help mode="over">Help content</Help>);
+
+      // Act
+      UserEvent.unhover(screen.getByText('i'));
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.queryByText(/Help content/)).not.toBeInTheDocument();
+      });
+    });
+
+    it('should not show help before hover', async () => {
+      // Arrange
+      render(<Help mode="over">Help content</Help>);
+
+      // Act
+      // No user interaction
+
+      // Assert
+      expect(screen.queryByText(/Help content/)).not.toBeInTheDocument();
+    });
+  });
+});