test: Add Consent component unit tests

frontend/src/components/Consent/Consent.js

@@ -4,11 +4,11 @@ import { saveAs } from 'file-saver';
 import { URLS } from "../../config";
 import Button from "../Button/Button";
 import Loading from "../Loading/Loading";
-import * as API from "../../API";
+import { createConsent, useConsent } from "../../API";
 
 // Consent is an experiment view that shows the consent text, and handles agreement/stop actions
 const Consent = ({ title, text, experiment, participant, onNext, confirm, deny, urlQueryString }) => {
-    const [consent, loadingConsent] = API.useConsent(experiment.slug);
+    const [consent, loadingConsent] = useConsent(experiment.slug);
 
     // Listen for consent, and auto advance if already given
     useEffect(() => {
@@ -20,7 +20,7 @@ const Consent = ({ title, text, experiment, participant, onNext, confirm, deny,
     // Click on agree button
     const onAgree = async () => {
         // Store consent
-        await API.createConsent({ experiment, participant });
+        await createConsent({ experiment, participant });
 
         // Next!
         onNext();
@@ -31,7 +31,6 @@ const Consent = ({ title, text, experiment, participant, onNext, confirm, deny,
         const txt = doc.body.textContent.split('  ').join('');
         const blob = new Blob([txt], {type: "text/plain;charset=utf-8"});
         saveAs(blob, 'consent.txt');
-
     }
 
     // Loader in case consent is being loaded
@@ -63,8 +62,9 @@ const Consent = ({ title, text, experiment, participant, onNext, confirm, deny,
                     <h3>{title}</h3>
                 </div>
                 <div className="flex-end">
-                    <button 
+                    <button
                         className="btn btn-download fa-solid fa-download font-weight-bold"
+                        data-testid="download-button"
                         onClick={onDownload}
                     >
                     </button>
@@ -73,6 +73,7 @@ const Consent = ({ title, text, experiment, participant, onNext, confirm, deny,
 
             <div
                 className="consent-text"
+                data-testid="consent-text"
                 style={{ height: height - correction }}
                 dangerouslySetInnerHTML={{ __html: text }}
             />

frontend/src/components/Consent/Consent.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import Consent from './Consent';
+import { useConsent } from '../../API'
+import { saveAs } from 'file-saver';
+
+global.Blob = jest.fn().mockImplementation((content, options) => ({
+    content,
+    options
+}));
+
+global.URL.createObjectURL = jest.fn();
+
+jest.mock('file-saver', () => ({
+    saveAs: jest.fn(),
+}));
+
+jest.mock('../../API', () => ({
+    createConsent: jest.fn(),
+    useConsent: jest.fn(),
+}));
+
+const mockExperiment = {
+    slug: 'test-experiment',
+    loading_text: 'Loading...',
+};
+
+describe('Consent', () => {
+    it('renders loading state correctly', () => {
+        useConsent.mockReturnValue([null, true]); // Mock loading state
+        const { getByText } = render(<Consent experiment={{ slug: 'test-experiment', loading_text: 'Loading...' }} />);
+        expect(getByText('Loading...')).toBeInTheDocument();
+    });
+
+    it('renders consent text when not loading', () => {
+        useConsent.mockReturnValue([null, false]);
+        const { getByText } = render(<Consent text="<p>Consent Text</p>" experiment={mockExperiment} />);
+        expect(getByText('Consent Text')).toBeInTheDocument();
+    });
+
+    it('calls onNext when Agree button is clicked', async () => {
+        useConsent.mockReturnValue([null, false]);
+        const onNext = jest.fn();
+        const { getByText } = render(<Consent onNext={onNext} confirm="Agree" experiment={mockExperiment} />);
+        fireEvent.click(getByText('Agree'));
+
+        await waitFor(() => expect(onNext).toHaveBeenCalled());
+    });
+
+    it('triggers download when Download button is clicked', async () => {
+        useConsent.mockReturnValue([null, false]);
+        const { getByTestId } = render(<Consent text="<p>Consent Text</p>" experiment={mockExperiment} />);
+        fireEvent.click(getByTestId('download-button'));
+
+        await waitFor(() => expect(saveAs).toHaveBeenCalled());
+    });
+
+    it('auto advances if consent is already given', () => {
+        useConsent.mockReturnValue([true, false]);
+        const onNext = jest.fn();
+        render(<Consent onNext={onNext} urlQueryString="?participant_id=123" experiment={mockExperiment} />);
+        expect(onNext).toHaveBeenCalled();
+    });
+
+    it('calculates style for consent text correctly', () => {
+        useConsent.mockReturnValue([null, false]);
+        Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 800 });
+        const { getByTestId } = render(<Consent text="<p>Consent Text</p>" experiment={mockExperiment} />);
+        const consentText = getByTestId('consent-text');
+        expect(consentText.style.height).toBe('500px');
+    });
+
+
+
+});