Page Comparison

This document is a starting/reference guide for writing unit tests for the UI modules within ERM. 

...

• Importing React
• Importing the mocks from erm-components
• Importing the TestForm (if your component is rendered within a Form), renderWithIntl (function that renders the component to the dom with necessary translations)
• userEvent thats used to trigger events such as clicks, hover etcThe actual component you need to test
  

Mock:

Apart from the stripes/intl mocks that were imported in the previous step from erm-components, this section includes mocks such as mocking an API request, or mocking  a callback (spy). We use jests mocking API for this purpose.

Mocking an onSubmit or an onAdd callback can be as simple as:

or you can go one step further and mock the function implementation:

This mock overrides the default onSubmit functionality and logs 'submit' to the console when its triggered.

...

To trigger a button with label Submit on it, you could do that using the userEvent.click api. 

Image RemovedImage Added

Assert:

Final step is to assert if your test is behaving as expected.

The following assertion expects the handleSubmit callback to be called once when the submit button is clicked.

Example:

Putting the above steps together:

import React from 'react';
import '@folio/stripes-erm-components/test/jest/__mock__';
import { TestForm, renderWithIntl } from '@folio/stripes-erm-components/test/jest/helpers';
import userEvent from '@testing-library/user-event';
import BasketSelector from './BasketSelector';

const onAdd = jest.fn();
const onSubmit = jest.fn();

const basketSelectorProps = {
 'addButtonLabel':'add button',
 'autoFocus':true,
 'basket':[{
 'id':'5650325f-52ef-4ac3-a77a-893911ccb666',
 'class':'org.olf.kb.Pkg',
 'name':'Edward Elgar:Edward Elgar E-Book Archive in Business & Management, Economics and Finance:Nationallizenz',
 'suppressFromDiscovery':false,
 'label': 'basketSelector'
 }]
};

describe('BasketSelector', () => {
 test('renders add To Basket button', () => {
   const { getByText } = renderWithIntl(
     <TestForm onSubmit={onSubmit}>
       <BasketSelector {...basketSelectorProps}/>
     </TestForm>
   );

   expect(getByLabelText(/basketSelector/i)).toBeInTheDocument();
   userEvent.click(getByText('add button'));
   expect(onAdd.mock.calls.length).toBe(1);
 });
});

Running the tests locally:

To run the test in your local workspace:

1) Navigate to the app folder (eg: ui-agreements) and run

      yarn test:jest

 This should run all the tests within the app.

2) If you would like to run one specific test, you can specify the name of the test you would like to run like:

      yarn test:jest BasketSelector;

Running Coverage report:

Once you run the tests locally you should have an artifacts folder genrated locally in your app folder.

To generate coverage report:

1) From your app folder navigate to:

    cd artifacts/coverage-jest/lcov-report/

 2) In this folder you should see an index.html file which you can statically serve by installing a simple npm module like serve and run:

    serve ./
This command will serve up a UI(defaults to localhost:5000) where you can see the coverage metrics
Image Added

You can go into the specific file to see what lines/functions are missing th code coverage and can add them to the tests accordingly.

Idealy we would like to have 100% coverage on all the components. Sometimes it feels too trivial to cover certain cases, i.e. the effort in writing the test outweighs the condition you are checking for and that decision is left to the developer.

Debugging:

https://testing-library.com/docs/dom-testing-library/api-debugging/