Copy Link button implemented

frontend/tests/CopyLinkButton.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CopyLinkButton from '../src/components/CopyLinkButton';
+
+// Mock the Clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn(),
+  },
+  writable: true,
+});
+
+describe('CopyLinkButton', () => {
+  const testLink = 'http://localhost:3000/session/123';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders with "Copy Link" text and copy icon initially', () => {
+    render(<CopyLinkButton linkToCopy={testLink} />);
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByTestId('ContentCopyIcon')).toBeInTheDocument();
+  });
+
+  test('copies the link to clipboard and shows "Copied!" with check icon on click', async () => {
+    render(<CopyLinkButton linkToCopy={testLink} />);
+    const copyButton = screen.getByRole('button', { name: /copy link/i });
+
+    fireEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(testLink);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
+      expect(screen.getByTestId('CheckCircleOutlineIcon')).toBeInTheDocument();
+    });
+  });
+
+  test('reverts to "Copy Link" and copy icon after 3 seconds', async () => {
+    jest.useFakeTimers();
+    render(<CopyLinkButton linkToCopy={testLink} />);
+    const copyButton = screen.getByRole('button', { name: /copy link/i });
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
+    });
+
+    jest.advanceTimersByTime(3000);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+      expect(screen.getByTestId('ContentCopyIcon')).toBeInTheDocument();
+    });
+    jest.useRealTimers();
+  });
+
+  test('logs an error if clipboard.writeText fails', async () => {
+    const errorMessage = 'Failed to write to clipboard';
+    (navigator.clipboard.writeText as jest.Mock).mockRejectedValueOnce(new Error(errorMessage));
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<CopyLinkButton linkToCopy={testLink} />);
+    const copyButton = screen.getByRole('button', { name: /copy link/i });
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to copy link:', expect.any(Error));
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+});

frontend/tests/ResultsDisplay.test.tsx

@@ -1,11 +1,51 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import ResultsDisplay from '../src/components/ResultsDisplay';
+import { Decision } from '../src/hooks/useSession';
+
+// Mock the Clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn(),
+  },
+  writable: true,
+});
 
 describe('ResultsDisplay responsiveness and touch functionality', () => {
+  const mockDecision: Decision = {
+    goTo: 'Go-to decision',
+    alsoGood: 'Also good decision',
+    considerable: 'Considerable decision',
+    needsDiscussion: 'Needs discussion decision',
+    noGoes: 'No-goes decision',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders without crashing', () => {
-    render(<ResultsDisplay />);
-    // Add assertions specific to ResultsDisplay
+    render(<ResultsDisplay decision={mockDecision} />);
+    expect(screen.getByText('Cooperative Decision')).toBeInTheDocument();
+  });
+
+  it('should display the Copy Link button', () => {
+    render(<ResultsDisplay decision={mockDecision} />);
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByTestId('ContentCopyIcon')).toBeInTheDocument();
+  });
+
+  it('should copy the session URL to clipboard when Copy Link button is clicked', async () => {
+    render(<ResultsDisplay decision={mockDecision} />);
+    const copyButton = screen.getByRole('button', { name: /copy link/i });
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(window.location.href);
+      expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
+    });
   });
 
   // Placeholder for responsive tests

frontend/tests/SessionPage.test.tsx

@@ -1,36 +1,102 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { useParams } from 'react-router-dom';
+import { useSession, SessionState } from '../src/hooks/useSession';
 import SessionPage from '../src/pages/SessionPage';
 
+// Mock the useParams hook
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+// Mock the useSession hook
+jest.mock('../src/hooks/useSession', () => ({
+  ...jest.requireActual('../src/hooks/useSession'),
+  useSession: jest.fn(),
+  SessionState: jest.requireActual('../src/hooks/useSession').SessionState,
+}));
+
+// Mock the Clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn(),
+  },
+  writable: true,
+});
+
 describe('SessionPage functionality and readability', () => {
+  const mockSession = {
+    sessionId: 'test-session-id',
+    topic: 'Test Session Topic',
+    description: 'Test Description',
+    expectedResponses: 2,
+    submittedCount: 0,
+    state: SessionState.GATHERING,
+    responses: {},
+    finalResult: null,
+  };
+
+  beforeEach(() => {
+    (useParams as jest.Mock).mockReturnValue({ sessionId: 'test-session-id' });
+    (useSession as jest.Mock).mockReturnValue([
+      mockSession,
+      jest.fn(),
+      jest.fn(),
+      'client123',
+      null,
+    ]);
+    jest.clearAllMocks();
+  });
+
   it('renders without crashing', () => {
     render(<SessionPage />);
-    // Add assertions specific to SessionPage
+    expect(screen.getByText('Test Session Topic')).toBeInTheDocument();
   });
 
   it('should not display "Session:" prefix for the session topic', () => {
     render(<SessionPage />);
-    // Assuming a session topic is present, verify "Session:" is not in the document
     expect(screen.queryByText(/Session: /i)).not.toBeInTheDocument();
   });
 
   it('should not use placeholders in input fields and display validation rules', () => {
+    // Mock session to be in SETUP state for this test
+    (useSession as jest.Mock).mockReturnValue([
+      { ...mockSession, state: SessionState.SETUP },
+      jest.fn(),
+      jest.fn(),
+      'client123',
+      null,
+    ]);
     render(<SessionPage />);
-    // Check for TextField in SETUP state
-    // Assuming the component is in SETUP state for this test
-    // For 'Session Topic' TextField
     expect(screen.queryByPlaceholderText(/Session Topic/i)).not.toBeInTheDocument();
-    // For 'Number of Expected Responses' TextField
     expect(screen.queryByPlaceholderText(/Number of Expected Responses/i)).not.toBeInTheDocument();
-    // Add checks for helperText if validation rules are added to these fields
   });
 
   it('should hide the session status display', () => {
     render(<SessionPage />);
-    // Verify that the element displaying "Status:" is not in the document
     expect(screen.queryByText(/Status:/i)).not.toBeInTheDocument();
   });
 
+  it('should display the Copy Link button when not in SETUP state', () => {
+    render(<SessionPage />);
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByTestId('ContentCopyIcon')).toBeInTheDocument();
+  });
+
+  it('should copy the session URL to clipboard when Copy Link button is clicked', async () => {
+    render(<SessionPage />);
+    const copyButton = screen.getByRole('button', { name: /copy link/i });
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1);
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(window.location.href);
+      expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
+    });
+  });
+
   // Placeholder for responsive tests
   it('should adapt layout for mobile view', () => {
     // Simulate mobile viewport and check for specific layout changes