Cypress'ing Your Way to a Better Night's Sleep

class: center, middle

## Cypress'ing Your Way to a Better Night's Sleep 😴

<div>
 Presented by Michael Herman at <a href="https://www.meetup.com/DenverScript">DenverScript</a>
</div>

---

### Agenda

##### (1) About Me

##### (2) What is Cypress?

##### (3) Why Cypress?

##### (4) Cypress in Action

##### (5) My Workflow

---

### About Michael

```
$ whoami
michael.herman
```

#### Day Job

Senior Software Engineer at [ClickFox](https://www.clickfox.com/).
 
<img src="images/clickfox.png" style="max-width: 4%; border:0; box-shadow: none;" alt="clickfox logo">

#### Also

1. Founder of [TestDriven.io](https://testdriven.io)
1. Founder and Organizer of [Node.js Meetup Group](https://www.meetup.com/Node-js-Denver-Boulder/)
1. Former Lead Instructor at [Galvanize](https://www.galvanize.com/)
1. Co-founder/author of [Real Python](https://realpython.com)
1. 😍 - [tech writing/education](http://mherman.org), [open source](http://github.com/mjhea0), [financial models](http://www.starterfinancialmodel.com/), [radiohead](http://radiohead.com/)

---

### 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)

#### [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 ❤️

<hr>

Source: https://docs.cypress.io/guides/overview/why-cypress.html#Features

---

### 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)

---

### My Workflow

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

---

### That's it!

##### Resources

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

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

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

1. [cypress-skip-and-only-ui](https://github.com/bahmutov/cypress-skip-and-only-ui) - module for adding client-side buttons to run a single test or skip it for Cypress test runner

##### Questions?

✌️