Modern Front-End Testing with Cypress

## Modern Front-End Testing with Cypress

<div>
 Presented by Michael Herman
</div>

---

### Agenda

##### (1) Theory

1. Objectives
1. What is Cypress?
1. Why Cypress?
1. Cypress in Action
1. TDD Development Workflow (*theory*)

##### (2) Practice

1. Project Setup
1. TDD Development Workflow (*action*)

##### (3) Next Steps / Questions

---

## Theory

---

### Objectives

By the end of this lecture, you should be able to...

1. Explain what Cypress is and why you may want to use it

1. Describe how to introduce Cypress into your test-driven development (TDD) workflow

1. Install Cypress and write a test

1. Practice TDD with Cypress

---

### What is Cypress?

[Cypress](https://www.cypress.io/) is a modern web automation test framework designed to simplify browser testing.

While it's best known as a Selenium replacement, it's much more than just an end-to-end test automation tool. Cypress is a developer tool made to be used proactively by developers rather than a non-technical QA team focused on after-the-fact testing.

It's built on top of some familiar JavaScript testing tools:

1. [Mocha](https://mochajs.org/) - test framework
1. [Chai](https://www.chaijs.com/) - assertion library
1. [Sinon](https://sinonjs.org/) - mocking library

It makes setting up, writing, running, and debugging tests easy.

---

### Why Cypress?

#### Developer-friendly

1. Familiar Mocha and Chai syntax
1. Access to native browser elements
1. [Debug](https://docs.cypress.io/guides/guides/debugging.html#Using-debugger) failing tests in Chrome Dev Tools
1. Amazing [documentation](https://docs.cypress.io)
1. Auto reloads

#### [Batteries-included](https://www.cypress.io/how-it-works/)

1. Screenshots and videos
1. Framework + assertions + [mocks](https://docs.cypress.io/guides/guides/stubs-spies-and-clocks.html#Stubs)
1. [Stub network requests](https://docs.cypress.io/guides/guides/network-requests.html)
1. Electron GUI (watch and debug tests in real-time, [time-travel](https://docs.cypress.io/guides/core-concepts/test-runner.html#Command-Log))

#### Reliable

1. [Waiting](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Cypress-is-Not-Like-jQuery) is built-in to every command and assertion
1. Consistent results that developers actually trust ❤️

---

### Cypress in Action

```javascript
it('should handle feedback submission correctly', () => {
  // navigate to testdriven.io
  cy.visit('/');
  cy.get('h1').contains('Test-Driven Development Courses');

// click feedback button
  cy.get('button').contains('Feedback').click();
  cy.get('#feedbackModal').should('have.css', 'display', 'block');
  cy.get('h5').contains('Send Us Feedback');
  cy.get('input[placeholder="Your email address"]').type('test@test.com');
  cy.get('textarea').type('just a test');

// submit feedback
  cy.get('button.btn.btn-primary[type="submit"]').contains('Send').click();
  cy.get('h4').contains('Thank You!');
  cy.get('button').contains('Close').click();
  cy.get('#feedbackModal').should('have.css', 'display', 'none');
});
```

Be sure to review:

1. [Best practices](https://docs.cypress.io/guides/references/best-practices.html)
1. Each command has correct/incorrect usage - [example](https://docs.cypress.io/api/commands/click.html#Usage)

---

### TDD Development Workflow (theory)

Cypress is great for end-to-end testing (as a Selenium-replacement), but it's better to use it directly in your TDD workflow for unit and integration testing.

Cypress is not just a testing tool--it's a development tool!

1. Convert user stories, requirements, etc. into partial test specs

1. Add fixtures and stub out network calls

1. Run the Cypress GUI and keep it open next to your code editor

1. Use `.only` to iterate on a single test

1. Ensure the test fails

1. Code until that test passes (red, green, refactor)

1. Repeat the previous three steps until all tests are green

1. Optional: Convert the integration tests to e2e tests

---

## Practice

---

### Project Setup

1. Create a new project:
    ```sh
    $ mkdir cypress-workflow && cd cypress-workflow
    $ npm init -y
    $ npm install cypress --save-dev
    ```
--

1. Run Cypress to generate a new project scaffold:
    ```sh
    $ ./node_modules/.bin/cypress open
    ```
--

1. Remove the "cypress/integration/examples" directory.

1. Add a *sample.spec.js* file to the "cypress/integration" directory.

---

### TDD Development Workflow (action)

#### Steps:

1. Convert user stories, requirements, and acceptance criteria into partial test specs - `"As a user I can see the "hello, world!" text'`:
    ```sh
    describe('cypress sample', () => {
      beforeEach(() => { cy.visit('http://localhost:8080') });
      it('should display the "hello, world" text', () => {});
    });
    ```
--

1. ~~Add fixtures and stub out network calls~~

1. Run the Cypress GUI and keep it open next to your code editor

1. Use `.only` to focus, and iterate, on a single test

1. Ensure the test fails

1. Code until that test passes (red, green, refactor)

1. ~~Repeat the previous three steps until all tests are green~~

1. ~~Optional: Convert the integration tests to e2e tests~~

---

### That's it!

##### Resources

1. [My Cypress Workflow](https://www.youtube.com/watch?v=5sXulBZe25Q) *(video)* - example Cypress workflow for building and testing web applications

1. [Modern Front-End Testing with Cypress](https://testdriven.io/blog/modern-frontend-testing-with-cypress/) *(blog post)* - looks at how to introduce Cypress into your test-driven development workflow

1. [Sliding Down the Testing Pyramid](https://www.cypress.io/blog/2018/04/02/sliding-down-the-testing-pyramid) *(blog post)* - tutorial that details how Cypress can execute integration and unit tests

1. [Cypress Visual Regression](https://github.com/mjhea0/cypress-visual-regression) *(NPM module)* - module for adding visual regression testing to Cypress

1. [Cypress Docs](https://docs.cypress.io/guides/overview/why-cypress.html) *(docs)* - the Cypress documentation (sets the standard for documentation)

##### Questions?

✌️