Frontend testing appoach

So how does this translate to code?

// FreeTextGroupSearch > __tests__ > FreeTextGroupSearch.spec.js

import 'jest-dom/extend-expect';
import React from 'react';


describe('FreeTextGroupSearch', () => {
    afterEach(cleanup);
    it('The component mounts', async () => {
      const { container } = render(
            <FreeTextGroupSearch />
      );
    });
  });
                

import { render, fireEvent, cleanup } from '@testing-library/react';
import 'jest-dom/extend-expect';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import mockTowns from './towns-mock.json';

const mockStore = configureStore();
const townStore = mockStore(() => nearestGroupState);

const nearestGroupState = {
    async: {
      actionTypes: {},
    },
    view: {
      nearestGroup: {
        allTowns: mockTowns.towns,
      },
    },
};

describe('FreeTextGroupSearch', () => {
    afterEach(cleanup);
    it('The component mounts', async () => {
      const { container } = render(
         <Provider store={townStore}>
             <FreeTextGroupSearch />
         </Provider>,
      );
    });
  });
                                        

jest FreeTextGroupSearch.spec.js --watch

import MarshalContext from 'common/src/app/util/testing/MarshalContext';
import nearestGroupGeoLocationLocale from 'components/molecules/NearestGroupGeoLocation/locale/nearest-group-geo-location.en-GB.json';
import validationLocale from 'common/src/app/locale/validation.en-GB.json';
import nearestGroupSearchBarLocale from
'../../../../locale/nearest-group-search-bar.en-GB.json';

const contextMessages = {
    ...nearestGroupSearchBarLocale,
    ...nearestGroupGeoLocationLocale,
    ...validationLocale,
};

describe('FreeTextGroupSearch', () => {
    afterEach(cleanup);
    it('The component mounts', async () => {
      const { container } = render(
         <Provider store={townStore}>
             <MarshalContext messages={contextMessages}>
               <FreeTextGroupSearch  / >
             </MarshalContext>
         </Provider>,
      );
    });
  });


                    

jest.mock('../../../src/app/config/market/market.configdefinitions', () => ({
  // the value to mock
}));
                

it('Should show the dropdown of match when a place as been entered', () => {
const { getByTestId } = render(
     <Provider store={townStore}>
         <MarshalContext messages={contextMessages}>
             <FreeTextGroupSearch />
         </MarshalContext>
     </Provider>,
 );

 fireEvent.change(getByTestId('free-text-group-search-input'), { target: { value: 'Der' } });
 expect(getByTestId('dropdown-results-list')).toBeVisible();
 });
                        

                        
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

describe('FreeTextGroupSearch', () => {
    it('Should not have basic accessibility issues', async () => {
        const { container } = render(
             <Provider store={townStore}>
                 <MarshalContext messages={contextMessages}>
                     <FreeTextGroupSearch />
                 </MarshalContext>
             </Provider>,
        );

        const results = await axe(container);
        expect(results).toHaveNoViolations();
    });
}
                        
                    

Cavats

What is the expectation?

• Going forward we should be writing tests for new components or components that already exisit that we are upgrading functionality of and that do not use init action or redux form.
• If we are unable to write tests for a component we should be refactoring it so that we can even if it ends up taking longer as a result.
• We should be looking to test components at more of a granular level where possiable.
• Not having test should be highlighted in PR and blocking(unless circumstances of hotfixes)

How can you learn?

• Complete everything within the resource pack
• Refer to documentation and wider community for examples (found within the resources pack)
• Looking at other examples in our codebase
• The best way to learn is by doing!!