Feat: steps unit tests (#109)

* feat: add steps unit tests and add coveragePathIgnorePatterns in the jest config file

* feat: add mock server to unit tests

* feat: add new unit tests and commented console warning of FavouriteActivities

---------

Co-authored-by: Derek Roberts <derek.roberts@gmail.com>
Co-authored-by: Craig Yu <craig.yu93@gmail.com>

frontend/jest.config.js

@@ -14,6 +14,15 @@ module.exports = {
     'text',
     'cobertura',
     'lcov'
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/src/components/Logout/',
+    '<rootDir>/src/components/SilentCheckSso/',
+    '<rootDir>/src/contexts/',
+    '<rootDir>/src/routes/',
+    '<rootDir>/src/service/',
+    '<rootDir>/src/api-service/'
   ]
 };
 

frontend/src/__test__/components/CollectionStep.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import '@testing-library/jest-dom';
+import SeedlotRegistrarionForm from '../../views/Seedlot/SeedlotRegistrationForm';
+import makeServer from '../../mock-server/server';
+
+describe('Collection Step test', () => {
+  let dismount: Function;
+  beforeEach(() => {
+    makeServer('jest-test');
+    const qc = new QueryClient();
+    const { unmount } = render(
+      <QueryClientProvider client={qc}>
+        <BrowserRouter>
+          <SeedlotRegistrarionForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+    dismount = unmount;
+  });
+
+  afterEach(() => dismount());
+
+  it('should have the correct labels', () => {
+    const content = {
+      title: 'Collector agency',
+      subtitle: 'Enter the collector agency information',
+      titleInformation: 'Collection information',
+      subtitleInformation: 'Enter the collection information about this seedlot'
+    }
+    expect(screen.getByText(content.title)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitle)).toBeInTheDocument();
+    expect(screen.getByText(content.titleInformation)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitleInformation)).toBeInTheDocument();
+  });
+
+  it('should call the checkbox click function', async () => {
+    for (let checkbox of screen.getAllByRole('checkbox')) {
+      fireEvent.click(checkbox);
+      if (checkbox.id === 'applicant') {
+        await waitFor(() => {
+          expect(checkbox).not.toBeChecked();
+        });
+      } else {
+        await waitFor(() => {
+          expect(checkbox).toBeChecked();
+        });
+      }
+    };
+  });
+});

frontend/src/__test__/components/ExtractionAndStorageStep.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import '@testing-library/jest-dom';
+import SeedlotRegistrarionForm from '../../views/Seedlot/SeedlotRegistrationForm';
+import makeServer from '../../mock-server/server';
+
+describe('Extraction and Storage Step test', () => {
+  let dismount: Function;
+  let component: HTMLElement;
+  beforeEach(() => {
+    makeServer('jest-test');
+    const qc = new QueryClient();
+    const { container, unmount } = render(
+      <QueryClientProvider client={qc}>
+        <BrowserRouter>
+          <SeedlotRegistrarionForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+    dismount = unmount;
+    component = container;
+
+    // screen click next button
+    clickNext(5);
+  });
+
+  afterEach(() => dismount());
+
+  function clickNext(times: number) {
+    const buttonNext = component.getElementsByClassName('back-next-btn')[1];
+    for(var i = 0; i < times; i++) {
+      fireEvent.click(buttonNext);
+    }
+  }
+
+  it('should have the correct labels', () => {
+    const content = {
+      title: 'Extraction information',
+      subtitle: 'Enter the extractory agency information and extraction’s star and end dates for this seedlot',
+      titleTemporary: 'Temporary seed storage',
+      subtitleTemporary: 'Enter the seed storage agency information and storage’s star and end dates for this seedlot'
+    }
+    const titleBox = component.getElementsByClassName('extraction-information-title')[0];
+    expect(titleBox).toHaveTextContent(content.title);
+    expect(titleBox).toHaveTextContent(content.subtitle);
+    expect(screen.getByText(content.titleTemporary)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitleTemporary)).toBeInTheDocument();
+  });
+
+  it('should call the checkbox click function twice', async () => {
+    const checkBoxes = screen.getAllByRole('checkbox');
+
+    for(var i = 0; i < 2; i++){
+      for(var j = 0; j < checkBoxes.length; j++){
+        fireEvent.click(checkBoxes[j]);
+      }
+    }
+
+    await waitFor(() => {
+      expect(checkBoxes[0]).toBeChecked();
+      expect(checkBoxes[1]).toBeChecked();
+      expect(checkBoxes[2]).not.toBeChecked();
+    });
+  });
+
+  it('should input date in the form', () => {
+    const content = {
+      extStartDate: '2023/04/26',
+      extEndDate: '2023/04/25',
+      extErrorMsg: 'Please enter a valid date'
+    };
+
+    //Click the checkbox
+    const chkExtraction = screen.getAllByRole('checkbox')[0];
+    fireEvent.click(chkExtraction);
+
+    //Input Extraction Start Date
+    const dateExtStart = component.querySelector('#extraction-start-date-input') as HTMLInputElement;
+
+    fireEvent.mouseDown(dateExtStart);
+    fireEvent.change(dateExtStart, { target: { value: content.extStartDate } });
+    expect(dateExtStart.value).toEqual(content.extStartDate);
+
+    //Input Extraction End Date
+    const dateExtEnd = component.querySelector('#extraction-end-date-input') as HTMLInputElement;
+
+    fireEvent.mouseDown(dateExtEnd);
+    fireEvent.change(dateExtEnd, { target: { value: content.extEndDate } });
+    expect(dateExtEnd.value).toEqual(content.extEndDate);
+  });
+});

frontend/src/__test__/components/InterimStep.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import '@testing-library/jest-dom';
+import SeedlotRegistrarionForm from '../../views/Seedlot/SeedlotRegistrationForm';
+import makeServer from '../../mock-server/server';
+
+describe('Interim Storage Step test', () => {
+  let dismount: Function;
+  let component: HTMLElement;
+  beforeEach(() => {
+    makeServer('jest-test');
+    const qc = new QueryClient();
+    const { container, unmount } = render(
+      <QueryClientProvider client={qc}>
+        <BrowserRouter>
+          <SeedlotRegistrarionForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+    dismount = unmount;
+    component = container;
+
+    // screen click next button
+    clickNext(2);
+  });
+
+  afterEach(() => dismount());
+
+  function clickNext(times: number) {
+    const buttonNext = component.getElementsByClassName('back-next-btn')[1];
+    for(var i = 0; i < times; i++) {
+      fireEvent.click(buttonNext);
+    }
+  }
+
+  it('should have the correct labels', () => {
+    const content = {
+      title: 'Interim agency',
+      subtitle: 'Enter the interim agency information',
+      titleStorage: 'Storage information',
+      subtitleStorage: 'Enter the interim storage information for this seedlot'
+    }
+    const titleBox = component.getElementsByClassName('interim-agency-title')[0];
+    expect(titleBox).toHaveTextContent(content.title);
+    expect(titleBox).toHaveTextContent(content.subtitle);
+    expect(screen.getByText(content.titleStorage)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitleStorage)).toBeInTheDocument();
+  });
+
+  it('should call the checkbox click function twice', async () => {
+    let checkbox = screen.getByRole('checkbox');
+
+    for(var i = 0; i < 2; i++){
+      fireEvent.click(checkbox);
+    }
+
+    await waitFor(() => {
+      expect(checkbox).toBeChecked();
+    });
+  });
+});

frontend/src/__test__/components/OrchardStep.test.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import '@testing-library/jest-dom';
+import SeedlotRegistrarionForm from '../../views/Seedlot/SeedlotRegistrationForm';
+import makeServer from '../../mock-server/server';
+
+describe('Orchard Step test', () => {
+  let dismount: Function;
+  let component: HTMLElement;
+  beforeEach(() => {
+    makeServer('jest-test');
+    const qc = new QueryClient();
+    const { container, unmount } = render(
+      <QueryClientProvider client={qc}>
+        <BrowserRouter>
+          <SeedlotRegistrarionForm />
+        </BrowserRouter>
+      </QueryClientProvider>
+    );
+    dismount = unmount;
+    component = container;
+
+    // screen click next button
+    clickNext(3);
+  });
+
+  afterEach(() => dismount());
+
+  function clickNext(times: number) {
+    const buttonNext = component.getElementsByClassName('back-next-btn')[1];
+    for(var i = 0; i < times; i++) {
+      fireEvent.click(buttonNext);
+    }
+  }
+
+  it('should have the correct labels', () => {
+    const content = {
+      title: 'Orchard information',
+      subtitle: 'Enter the contributing orchard information',
+      titleGamete: 'Gamete information',
+      subtitleGamete: 'Enter the seedlot gamete information',
+      titlePollen: 'Pollen information',
+      subtitlePollen: 'Enter the pollen contaminant information'
+    }
+    const titleBox = component.getElementsByClassName('seedlot-orchard-title-row')[0];
+    expect(titleBox).toHaveTextContent(content.title);
+    expect(titleBox).toHaveTextContent(content.subtitle);
+    expect(screen.getByText(content.titleGamete)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitleGamete)).toBeInTheDocument();
+    expect(screen.getByText(content.titlePollen)).toBeInTheDocument();
+    expect(screen.getByText(content.subtitlePollen)).toBeInTheDocument();
+  });
+
+  it('should call the checkbox click function', async () => {
+    for (let checkbox of screen.getAllByRole('checkbox')) {
+      fireEvent.click(checkbox);
+
+      await waitFor(() => {
+        expect(checkbox).not.toBeChecked();
+      });
+    };
+  });
+
+  it('should show invalid Orchard ID message in both fields', async () => {
+    const orchardID = component.querySelector('#seedlot-orchard-number-input') as HTMLInputElement;
+    fireEvent.change(orchardID, {
+      target: { value: '2' }
+    });
+    orchardID.blur();
+
+    await waitFor(() => {
+      expect(orchardID.value).toBe('2');
+      expect(screen.getByText('Please insert a valid orchard id between 100 and 999')).toBeInTheDocument();
+    });
+
+    //Click button for additional Orchard ID
+    const addButton = screen.getByText('Add orchard');
+    fireEvent.click(addButton);
+
+    const addOrchardID = component.querySelector('#seedlot-aditional-orchard-number-input') as HTMLInputElement;
+    fireEvent.change(addOrchardID, {
+      target: { value: '3' }
+    });
+    addOrchardID.blur();
+
+    await waitFor(() => {
+      expect(addOrchardID.value).toBe('3');
+      expect(screen.getAllByText('Please insert a valid orchard id between 100 and 999')[1]).toBeInTheDocument();
+    });
+  });
+
+  it('should show and click Delete additional orchard button', () => {
+    const addButton = screen.getByText('Add orchard');
+    fireEvent.click(addButton);
+
+    const deleteButton = screen.getByText('Delete additional orchard');
+    fireEvent.click(deleteButton);
+  });
+
+  it('should change the Female contribution combobox value', () => {
+    const femaleContCombo = screen.getAllByRole('combobox')[1] as HTMLInputElement;
+    const defaultValue = femaleContCombo.value;
+    femaleContCombo.value = 'F2 - Measured cone volume'
+    femaleContCombo.dispatchEvent(new Event('change'));
+    expect(defaultValue).not.toEqual(femaleContCombo.value);
+  });
+
+  it('should choose and option from radiogroup', () => {
+    const firstRadio = screen.getByRole('radio', { name: 'M1 - Portion of ramets in orchard' });
+    const secondRadio = screen.getByRole('radio', { name: 'M2 - Pollen volume estimate by partial survey' });
+    const thirdRadio = screen.getByRole('radio', { name: 'M3 - Pollen volume estimate by 100% survey' });
+    fireEvent.click(firstRadio);
+    expect(firstRadio).toBeChecked();
+    expect(secondRadio).not.toBeChecked();
+    expect(thirdRadio).not.toBeChecked();
+  });
+
+  it('should show Contaminant pollen breeding percentage input', async () => {
+    const checkbox = screen.getAllByRole('checkbox')[2];
+    fireEvent.click(checkbox);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Contaminant pollen breeding percentage (optional) (%)')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('If contaminant pollen was present and the contaminant pollen has a breeding value')
+      ).toBeInTheDocument();
+    });
+  });
+});