# 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

```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

```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