From 8e9e2c5b61179255d91250779f9281e26b58b7db Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 18 Mar 2023 11:10:03 +0100
Subject: [PATCH] Create test for VisitsHighlightCard

---
 src/servers/helpers/VisitsHighlightCard.tsx   |  2 +-
 .../helpers/VisitsHighlightCard.test.tsx      | 60 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 test/servers/helpers/VisitsHighlightCard.test.tsx

diff --git a/src/servers/helpers/VisitsHighlightCard.tsx b/src/servers/helpers/VisitsHighlightCard.tsx
index bfe9b791..1617eb2e 100644
--- a/src/servers/helpers/VisitsHighlightCard.tsx
+++ b/src/servers/helpers/VisitsHighlightCard.tsx
@@ -4,7 +4,7 @@ import type { PartialVisitsSummary } from '../../visits/reducers/visitsOverview'
 import type { HighlightCardProps } from './HighlightCard';
 import { HighlightCard } from './HighlightCard';
 
-type VisitsHighlightCardProps = Omit<HighlightCardProps, 'tooltip'> & {
+export type VisitsHighlightCardProps = Omit<HighlightCardProps, 'tooltip' | 'children'> & {
   loading: boolean;
   excludeBots: boolean;
   visitsSummary: PartialVisitsSummary;
diff --git a/test/servers/helpers/VisitsHighlightCard.test.tsx b/test/servers/helpers/VisitsHighlightCard.test.tsx
new file mode 100644
index 00000000..ede67601
--- /dev/null
+++ b/test/servers/helpers/VisitsHighlightCard.test.tsx
@@ -0,0 +1,60 @@
+import { screen, waitFor } from '@testing-library/react';
+import type { VisitsHighlightCardProps } from '../../../src/servers/helpers/VisitsHighlightCard';
+import { VisitsHighlightCard } from '../../../src/servers/helpers/VisitsHighlightCard';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<VisitsHighlightCard />', () => {
+  const setUp = (props: Partial<VisitsHighlightCardProps> = {}) => renderWithEvents(
+    <VisitsHighlightCard loading={false} visitsSummary={{ total: 0 }} excludeBots={false} title="" {...props} />,
+  );
+
+  it.each([
+    [true, () => expect(screen.getByText('Loading...')).toBeInTheDocument()],
+    [false, () => expect(screen.queryByText('Loading...')).not.toBeInTheDocument()],
+  ])('displays loading message on loading', (loading, assert) => {
+    setUp({ loading });
+    assert();
+  });
+
+  it('does not render tooltip when summary has no bots', async () => {
+    const { user } = setUp({ title: 'Foo' });
+
+    await user.hover(screen.getByText('Foo'));
+    await waitFor(() => expect(screen.queryByText(/potential bot visits$/)).not.toBeInTheDocument());
+  });
+
+  it('renders tooltip when summary has bots', async () => {
+    const { user } = setUp({
+      title: 'Foo',
+      visitsSummary: { total: 50, bots: 30 },
+    });
+
+    await user.hover(screen.getByText('Foo'));
+    await waitFor(() => expect(screen.getByText(/potential bot visits$/)).toBeInTheDocument());
+  });
+
+  it.each([
+    [true, 20, () => {
+      expect(screen.getByText('20')).toBeInTheDocument();
+      expect(screen.queryByText('50')).not.toBeInTheDocument();
+    }],
+    [true, undefined, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+    [false, 20, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+    [false, undefined, () => {
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    }],
+  ])('displays non-bots when present and bots are excluded', (excludeBots, nonBots, assert) => {
+    setUp({
+      excludeBots,
+      visitsSummary: { total: 50, nonBots },
+    });
+    assert();
+  });
+});