Page Comparison

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

...

Before moving on to an example, queries are an important ascpect of testing and choosing the right query within your tests is crucial.

Queries are the methods that RTL gives you to find elements on the page. There are a number of ways in which we can grab an element on a page. 

The following table describes the selectors that you need to use as a priority.

Image Modified

Priority should be give according to the priorities listed here.

...

           To grab a button by the label Save & close, you can either use:

     1) getByRole('button', { name: 'Save & close' })
     2) getBylabelText('Save & close')

     Note: You might be tempted to pass data-testid to an element and find an element using the getByTestId query. This attribute is 
     provided by RTL only as an escape hatch and should be avoided wherever possible. The attribute is going to eventualy end up 
     on the dom and we do not want to pollute the dom with avoidable attributes.

...

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);
 });
});

...

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

TODO

FAQsTODO

Q) What should I do if the screen.debug doesnt display the entire dom

A) The screen.debug has a default limit as to how many number of lines it can dislay from the dom. To increase this you can run your test such as:

          DEBUG_PRINT_LIMIT=10000 yarn test:jest

               That should suffice. If it doesnt, just increase the limit.