Testing summary.js frontend solves #207

frontend/src/__tests__/summary.test.tsx

@@ -1,26 +1,55 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import Summary from '../pages/summary';
 
 describe('Summary Page', () => {
-    it('should render text with "Purchases"', () => {
-        render(<Summary />);
-        const Purchases = screen.getByText('Purchases');
-        expect(Purchases).toBeInTheDocument(); // assert that the button is in the document
-    });
-    it('should render text with "Current Stock"', () => {
-        render(<Summary />);
-        const CurrentStock = screen.getByText('Current Stock');
-        expect(CurrentStock).toBeInTheDocument(); // assert that the button is in the document
-    });
-    it('should render text with "Waste Management"', () => {
-        render(<Summary />);
-        const WasteManagement = screen.getByText('Waste Management');
-        expect(WasteManagement).toBeInTheDocument(); // assert that the button is in the document
-    });
-    it('should render text with "Soon to Expire"', () => {
-        render(<Summary />);
-        const SoontoExpire = screen.getByText('Soon to Expire');
-        expect(SoontoExpire).toBeInTheDocument(); // assert that the button is in the document
-    });
-});
+  // Test if the Summary component is rendered and contains the text 'Purchases'
+  test('renders Summary component', () => {
+    render(<Summary />);
+    expect(screen.getByText('Purchases')).toBeInTheDocument();
+  });
+
+  // Test if the tables are displayed by default
+  test('displays tables by default', () => {
+    render(<Summary />);
+    expect(screen.getByText('Purchases')).toBeInTheDocument();
+    expect(screen.getByText('Current Stock')).toBeInTheDocument();
+    expect(screen.getByText('Waste Management')).toBeInTheDocument();
+    expect(screen.getByText('Soon to Expire')).toBeInTheDocument();
+  });
+
+  // Test if the chart is hidden by default
+  test('hides chart by default', () => {
+    render(<Summary />);
+    expect(screen.queryByText('Visualized Data')).not.toBeInTheDocument();
+  });
+
+  // Test if the chart is shown and the tables are hidden when the 'Chart' button is clicked
+  test('shows chart and hides tables when chart button is clicked', () => {
+    render(<Summary />);
+    const chartButton = screen.getByText('Chart');
+    fireEvent.click(chartButton);
+
+    expect(screen.getByText('Visualized Data')).toBeInTheDocument();
+    expect(screen.queryByText('Purchases')).not.toBeInTheDocument();
+    expect(screen.queryByText('Current Stock')).not.toBeInTheDocument();
+    expect(screen.queryByText('Waste Management')).not.toBeInTheDocument();
+    expect(screen.queryByText('Soon to Expire')).not.toBeInTheDocument();
+  });
+
+  // Test if the tables are shown and the chart is hidden when the 'Table' button is clicked
+  test('shows tables and hides chart when table button is clicked', () => {
+    render(<Summary />);
+    const chartButton = screen.getByText('Chart');
+    fireEvent.click(chartButton);
+    const tableButton = screen.getByText('Table');
+    fireEvent.click(tableButton);
+
+    expect(screen.getByText('Purchases')).toBeInTheDocument();
+    expect(screen.getByText('Current Stock')).toBeInTheDocument();
+    expect(screen.getByText('Waste Management')).toBeInTheDocument();
+    expect(screen.getByText('Soon to Expire')).toBeInTheDocument();
+    expect(screen.queryByText('Visualized Data')).not.toBeInTheDocument();
+  });
+});