Add tests for bookkeeper components

apps/frontend/src/components/bookkeeper/BalanceSheet/Graph/BalanceSheetGraph.test.tsx

@@ -1,15 +1,101 @@
-import { render, screen } from '@testing-library/react';
+import { act, fireEvent, waitFor } from '@testing-library/react';
 import BalanceSheetGraph from './BalanceSheetGraph';
+import {
+  getMockStoreData,
+  mockBalanceSheetData,
+  renderWithMockContext,
+} from '../../../../utilities/test-utilities';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: jest.fn(),
-}));
+describe('Balance Sheet Graph component ', () => {
+  let providerProps = JSON.parse(JSON.stringify(getMockStoreData()));
+  let container;
 
-describe.skip('Balance Sheet Graph component ', () => {
-  beforeEach(() => render(<BalanceSheetGraph balanceSheetData={undefined} width={900} />));
+  beforeEach(() => {
+    ({ container } = renderWithMockContext(
+      <BalanceSheetGraph balanceSheetData={mockBalanceSheetData} width={900} />,
+      { providerProps },
+    ));
+  });
+
+  it('should render the graph', () => {
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders correctly with empty data', () => {
+    renderWithMockContext(<BalanceSheetGraph balanceSheetData={{ periods: [] }} width={900} />, {
+      providerProps,
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders correct number of bars for the periods', () => {
+    const bars = container.querySelectorAll('g.bar-group');
+    expect(bars.length).toBe(2);
+  });
+
+  it('displays tooltip with correct content on hover', async () => {
+    const bar = container.querySelector('rect.bar');
+    let tooltip = container.querySelector('.sats-flow-tooltip');
+
+    expect(tooltip).toBeNull();
+    expect(bar).not.toBeNull();
+
+    await act(async () => fireEvent.mouseOver(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.balance-sheet-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).toBeVisible();
+
+    const tooltipText = tooltip.textContent?.replace(/\s+/g, ' ').trim();
+    const expectedText = `
+    Short Channel ID: 12345x12345x1
+    Remote Alias: Wallet 1
+    Balance: 500,000.000
+    Percentage: 50%
+    Account: onchain_wallet
+    Total Period Balance: 1,000,000.000
+    `
+      .replace(/\s+/g, ' ')
+      .trim();
+    expect(tooltipText).toContain(expectedText);
+  });
+
+  it('hides tooltip on mouseout', async () => {
+    const bar = container.querySelector('rect.bar');
+    let tooltip = container.querySelector('.balance-sheet-tooltip');
+
+    await act(async () => fireEvent.mouseOver(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.balance-sheet-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).toBeVisible();
+
+    await act(async () => fireEvent.mouseOut(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.balance-sheet-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).not.toBeVisible();
+  });
+  it('renders the x-axis and y-axis correctly', () => {
+    const xAxisLabels = container.querySelectorAll('.x-axis text');
+    const yAxisLabels = container.querySelectorAll('.y-axis text');
 
-  it('should be in the document', () => {
-    expect(screen.getByTestId('balancesheetgraph-container')).not.toBeEmptyDOMElement()
+    expect(xAxisLabels.length).toBe(mockBalanceSheetData.periods.length);
+    expect(yAxisLabels.length).toBeGreaterThan(0);
+    expect(xAxisLabels[0].textContent).toBe(mockBalanceSheetData.periods[0].periodKey);
   });
 });

apps/frontend/src/components/bookkeeper/BalanceSheet/Graph/BalanceSheetGraph.tsx

@@ -124,6 +124,7 @@ function BalanceSheetGraph({ balanceSheetData, width }) {
       barsGroup.attr("clip-path", "url(#chart-area-clip");
 
       svg.append("g")
+        .attr("class", "y-axis")
         .call(d3.axisLeft(yScale)
           .tickSizeInner(0)
           .tickSizeOuter(0)

apps/frontend/src/components/bookkeeper/BkprRoot/BkprRoot.test.tsx

@@ -1,10 +1,79 @@
-import { render, screen } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import Bookkeeper from './BkprRoot';
+import { useNavigate } from 'react-router-dom';
+import { getMockStoreData, renderWithMockContext } from '../../../utilities/test-utilities';
 
 describe('Bookkeeper component ', () => {
-  beforeEach(() => render(<Bookkeeper />));
+  let mockNavigate: jest.Mock;
+  let providerProps = JSON.parse(JSON.stringify(getMockStoreData()));
+
+  beforeEach(() => {
+    mockNavigate = jest.fn();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+    renderWithMockContext(<Bookkeeper />, { providerProps });
+  });
 
   it('should be in the document', () => {
-    expect(screen.getByTestId('bookkeeper-container')).not.toBeEmptyDOMElement()
+    expect(screen.getByTestId('bookkeeper-container')).not.toBeEmptyDOMElement();
+  });
+
+  it('should display the dashboard header', () => {
+    expect(screen.getByText('Bookkeeper Dashboard')).toBeInTheDocument();
+  });
+
+  it('should display the Balance Sheet section', () => {
+    expect(screen.getByText('Balance Sheet')).toBeInTheDocument();
+    expect(screen.getByText('Total Number of Channels')).toBeInTheDocument();
+    expect(screen.getByText('Total Balance in Channels')).toBeInTheDocument();
+    expect(screen.getByText('Total Balance in Wallet')).toBeInTheDocument();
+  });
+
+  it('should display the Sats Flow section', () => {
+    expect(screen.getByText('Sats Flow')).toBeInTheDocument();
+    expect(screen.getByText('Inflow this month')).toBeInTheDocument();
+    expect(screen.getByText('Outflow this month')).toBeInTheDocument();
+  });
+
+  it('should display the Volume Chart section', () => {
+    expect(screen.getByText('Volume Chart')).toBeInTheDocument();
+    expect(screen.getByText('Track route performance.')).toBeInTheDocument();
+  });
+
+  it('should navigate to Terminal when the Terminal button is clicked', async () => {
+    const terminalButton = screen.getByText('Terminal');
+    await act(async () => fireEvent.click(terminalButton));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/bookkeeper/terminal');
+  });
+
+  it('should navigate to Balance Sheet on View More click', async () => {
+    const viewMoreButton = screen.getAllByText('View More')[0];
+    await act(async () => fireEvent.click(viewMoreButton));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/bookkeeper/balancesheet');
+  });
+
+  it('should navigate to Sats Flow on View More click', async () => {
+    const viewMoreButton = screen.getAllByText('View More')[1];
+    await act(async () => fireEvent.click(viewMoreButton));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/bookkeeper/satsflow');
+  });
+
+  it('should navigate to Volume on View More click', async () => {
+    const viewMoreButton = screen.getAllByText('View More')[2];
+    await act(async () => fireEvent.click(viewMoreButton));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/bookkeeper/volume');
+  });
+
+  it('should display fetched data when available', async () => {
+    expect(await screen.findByText('5')).toBeInTheDocument();
+    expect(await screen.findByText('100,000.000')).toBeInTheDocument();
+    expect(await screen.findByText('50,000.000')).toBeInTheDocument();
+    expect(await screen.findByText('2,000.000')).toBeInTheDocument();
+    expect(await screen.findByText('−1,000.000')).toBeInTheDocument();
+    expect(await screen.findByText('route1')).toBeInTheDocument();
+    expect(await screen.findByText('route2')).toBeInTheDocument();
   });
 });

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowGraph/SatsFlowGraph.test.tsx

@@ -0,0 +1,106 @@
+import SatsFlowGraph from './SatsFlowGraph';
+import {
+  getMockStoreData,
+  mockSatsFlowData,
+  renderWithMockContext,
+} from '../../../../utilities/test-utilities';
+import { act, fireEvent, waitFor } from '@testing-library/react';
+
+describe('Sats Flow Graph component ', () => {
+  let providerProps = JSON.parse(JSON.stringify(getMockStoreData()));
+  let container;
+
+  beforeEach(() => {
+    ({ container } = renderWithMockContext(
+      <SatsFlowGraph satsFlowData={mockSatsFlowData} width={900} />,
+      {
+        providerProps,
+      },
+    ));
+  });
+
+  it('should render the graph', () => {
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders correctly with empty data', () => {
+    renderWithMockContext(<SatsFlowGraph satsFlowData={{ periods: [] }} width={900} />, {
+      providerProps,
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders correct number of bars for the periods', () => {
+    const bars = container.querySelectorAll('g.bar-group');
+    expect(bars.length).toBe(2);
+  });
+
+  it('displays tooltip with correct content on hover', async () => {
+    const bar = container.querySelector('rect.bar');
+    let tooltip = container.querySelector('.sats-flow-tooltip');
+
+    expect(tooltip).toBeNull();
+    expect(bar).not.toBeNull();
+
+    await act(async () => fireEvent.mouseOver(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.sats-flow-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).toBeVisible();
+
+    const tooltipText = tooltip.textContent?.replace(/\s+/g, ' ').trim();
+    const expectedText = `
+    Event Tag: deposit
+    Net Inflow: 800.000
+    Credits: 1,000.000
+    Debits: 200.000
+    Volume: 1,200.000
+    Period Inflow: 1,500.000
+    Period Outflow: 200.000
+    Period Net Inflow: 1,300.000
+    Period Volume: 1,700.000
+  `
+      .replace(/\s+/g, ' ')
+      .trim();
+    expect(tooltipText).toContain(expectedText);
+  });
+
+  it('hides tooltip on mouseout', async () => {
+    const bar = container.querySelector('rect.bar');
+    let tooltip = container.querySelector('.sats-flow-tooltip');
+
+    await act(async () => fireEvent.mouseOver(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.sats-flow-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).toBeVisible();
+
+    await act(async () => fireEvent.mouseOut(bar));
+
+    tooltip = await waitFor(() => {
+      const tooltipElement = document.querySelector('.sats-flow-tooltip');
+      if (!tooltipElement) throw new Error('Tooltip not found');
+      return tooltipElement;
+    });
+
+    expect(tooltip).not.toBeVisible();
+  });
+
+  it('renders the x-axis and y-axis correctly', () => {
+    const xAxisLabels = container.querySelectorAll('.x-axis-labels text');
+    const yAxisLabels = container.querySelectorAll('.y-axis text');
+
+    expect(xAxisLabels.length).toBe(2);
+    expect(yAxisLabels.length).toBeGreaterThan(0);
+  });
+});

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowGraph/SatsFlowGraph.tsx

@@ -159,7 +159,8 @@ function SatsFlowGraph({ satsFlowData, width }: { satsFlowData: SatsFlow, width:
 
       //set up y axis
       const yAxisTickFormat = d => `${d3.format(",")(d)}`;
-      svg.append("g")
+      const yAxisGroup = svg.append("g")
+        .attr("class", "y-axis")
         .call(d3.axisLeft(yScale)
           .tickSizeInner(0)
           .tickSizeOuter(0)

apps/frontend/src/components/bookkeeper/SatsFlow/SatsFlowRoot.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import SatsFlowRoot from './SatsFlowRoot';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+describe('Sats Flow component ', () => {
+  beforeEach(() => render(<SatsFlowRoot />));
+
+  it('should be in the document', () => {
+    expect(screen.getByTestId('satsflow-container')).not.toBeEmptyDOMElement();
+  });
+});