Testing-Guide.md

Using cypress and rtl

• Integration and Unit testing

---

Step 1: ticket

• Label your JIRA ticket
• Either harmonycypress and/or harmonyunit

---

Step 2: Updating your test plan

• Go through and find all the integration points
• Mark those tests in yellow

---

Step 3 —Integration - pt 1

• Determine if you need a new test suite or not
• Are you testing a new part of the app that Cypress currently doesn’t touch? => YES
• Is the test long, complicated, and will leave the app in a bad state? => Probably
• Is this testing something that is not generally used in the app, or that we don’t want to test every time? => Probably

---

Integration cont

• If you are testing a new piece of simple core integration, put the test inside of one of the pageTests/

cypress/pageTests/underwritingTest.spec.js

export default (product = 'HO3') =>
  cy.wrap(product === 'HO3' ? ho3Headers : af3Headers)
    .each(header => cy.checkDetailHeader(header))
    // Add in a bad answer
    .findDataTag('new_badAnswer').click()
    // Submit
    .clickSubmit().wait('@updateQuote')
    // Expect an error
    .findDataTag('new_error').should('contain', 'New Error Message')
    // Give good answer
    .findDataTag('new_goodAnswer').click().clickSubmit().wait('@updateQuote')
    // Check that we're on a new page
    .findDataTag('Customie').should('exist');

---

• If you are testing something new, add a new suite

cypress/integration/underwritingExceptions/underwritingExceptions.spec.js

import {
  setRouteAliases,
  navigateThroughLanding,
  navigateThroughSearchAddress,
  navigateThroughPolicyholder,
  navigateThroughUnderwriting,
  navigateThroughCustomize,
  navigateThroughShare,
  navigateThroughAssumptions,
  navigateThroughAdditionalInterests,
  navigateThroughMailingBilling
} from '../../helpers';
import { underwritingHO3, updateQuote } from '../../fixtures';

describe('Underwriting Error Testing', () => {
  before('Login and go to Underwriting', () => {
    cy.login();
    setRouteAliases();
    navigateThroughLanding();
    navigateThroughSearchAddress();
    navigateThroughPolicyholder();
  });

  it('Underwriting Error', () => {
    // Give underwriting bad data.
    navigateThroughUnderwriting({
      ...underwritingHO3,
      'previousClaims': '3-5 Years'
    });
    navigateThroughCustomize();
    // We see a modal containing the uw error.
    cy.get('ul.error').should(
      'contain',
      'Due to previous claims history, underwriting review is required prior to binding.'
    ).findDataTag('modal-refresh').should('contain', 'Refresh')
      .click().wait('@getQuote')
      // Policyholder should be able to be navigated through without re-filling out the form.
      .clickSubmit('#QuoteWorkflow').wait('@updateQuote');
    // Go back through with good data.
    navigateThroughUnderwriting();
    navigateThroughCustomize();
    navigateThroughShare();
    navigateThroughAssumptions();
    navigateThroughAdditionalInterests();
    // On mailing billing, we stub the post request.
    cy.route('POST', '/svc?quoteManager.updateQuote', {
      ...updateQuote,
      result: {
        ...updateQuote.result,
        underwritingExceptions: [{
          'code': '003',
          'displayText': 'Missing Info - Mailing/Billing Info',
          'category': 'Coverages & Deductibles',
          'action': 'Missing Info',
          'agentMessage':
          'Missing required information to complete quote -  Mailing/Billing Info',
          'internalMessage':
          'Missing required information to complete quote -  Mailing/Billing Info',
          'active': true,
          'canOverride': false,
          'overridden': false,
        }]
      }
    }).as('updateQuote');
    navigateThroughMailingBilling();
    cy.get('div#Error').should(
      'contain',
      'Please contact one of our representatives so they may further assist you in obtaining a HO3 insurance quote for this property.'
    );
  });
});

---

Step 3 - Integration cont

• Always use the navigation helpers to move you throughout the app. If you are navigating to somewhere that Cypress does not yet go, add a new navigation helper in.
• Use findDataTag to grab data-test tags
• Be explicit and document
• We are testing integration points only! Write tests that path through the app, leave small pieces of functionality to unit tests

---

Step 4 - Unit testing

• Use react-testing-library
• Functionality is very similar to enzyme, but with more restrictions on selecting
• Test like a user!
• Write tests where the component lives, in a subdir called tests
• **.rtl.spec.js
• Async/await is native and necessary if you have a component that fetches data and rerenders

---

Simple test example in core

• When testing a smaller component, test basic functionality and use render(). Give everything as abstract props
• Look at additionalInterestCard.rtl.spec.js in core

---

Complex unit test example in web

• Mock the service runner if necessary, give a full set of props for quoteData and anything else, async await
• Look at mailingBilling.rtl.spec.js in web

---

Final notes on rtl

• Break fields out into the defined field structure, iterate using the helpers
• Import everything necessary from test-utils
• Explicit describes/its