refactor(components): rewrite Modal component

* add an optional close button
* add an icon prop

1 files changed, 42 insertions, 0 deletions

diff --git a/src/components/molecules/modals/tooltip/tooltip.test.tsx b/src/components/molecules/modals/tooltip/tooltip.test.tsx
new file mode 100644
index 0000000..1596670
--- /dev/null
+++ b/src/components/molecules/modals/tooltip/tooltip.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
+import { Tooltip } from './tooltip';
+
+const title = 'A custom title';
+const children =
+  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
+
+describe('Tooltip', () => {
+  it('renders a title and a body', () => {
+    render(<Tooltip heading={title}>{children}</Tooltip>);
+
+    expect(rtlScreen.getByText(title)).toBeInTheDocument();
+    expect(rtlScreen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('can render a hidden modal', () => {
+    render(
+      <Tooltip heading={title} isOpen={false}>
+        {children}
+      </Tooltip>
+    );
+
+    // Neither toBeVisible or toHaveStyle are working.
+    //expect(rtlScreen.getByText(children)).not.toBeVisible();
+    //expect(rtlScreen.getByText(children)).toHaveStyle({ visibility: 'hidden' });
+    expect(rtlScreen.getByText(children)).toHaveClass('tooltip--hidden');
+  });
+
+  it('can render a visible modal', () => {
+    render(
+      <Tooltip heading={title} isOpen>
+        {children}
+      </Tooltip>
+    );
+
+    expect(rtlScreen.getByText(children)).toBeVisible();
+    expect(rtlScreen.getByText(children)).toHaveStyle({
+      visibility: 'visible',
+    });
+  });
+});