fix: mixing api and component tests (#349)

Author: bahmutov

README.md

@@ -151,6 +151,7 @@ plus a few smaller sanity specs in [cypress/component/basic](cypress/component/b
 <!-- prettier-ignore-start -->
 Spec | Description
 --- | ---
+[api-test](cypress/component/advanced/api-test) | Mix [REST api tests](https://glebbahmutov.com/blog/api-testing-with-sever-logs/) that use [cy-api](https://github.com/bahmutov/cy-api) with component tests
 [app-action-example](cypress/component/advanced/app-action-example) | App actions against components
 [context](cypress/component/advanced/context) | Confirms components that use React context feature work
 [custom-command](cypress/component/advanced/custom-command) | Wraps `mount` in a custom command for convenience

cypress/component/advanced/api-test/README.md

@@ -0,0 +1,7 @@
+# cy-api test example
+
+Using component tests with [cy-api](https://github.com/bahmutov/cy-api) tests. Read [Black box API testing with server logs](https://glebbahmutov.com/blog/api-testing-with-sever-logs/)
+
+![API tests](images/api-tests.png)
+
+Note: currently the API and component tests do not clear the HTML created by each other

cypress/component/advanced/api-test/images/api-tests.png

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+/// <reference types="../../lib" />
+/// <reference types="@bahmutov/cy-api" />
+import { Users } from './users.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+// adds cy.api command
+import '@bahmutov/cy-api/support'
+
+// mixes component and API tests
+describe('Component and API tests', () => {
+  it('fetches and shows 3 users', () => {
+    // no mocking, just real request to the backend REST endpoint
+    mount(<Users />)
+    // fetching users can take a while
+    cy.get('li', { timeout: 20000 }).should('have.length', 3)
+  })
+
+  it('checks if API responds with a list of users', () => {
+    cy.api({
+      // same or similar URL to the one the component is using
+      url: 'https://jsonplaceholder.cypress.io/users?_limit=3',
+    })
+      .its('body')
+      .should('have.length', 3)
+  })
+
+  // another component test
+  it('shows stubbed users', () => {
+    cy.stub(window, 'fetch').resolves({
+      json: cy
+        .stub()
+        .resolves([{ id: 101, name: 'Test User' }])
+        .as('users'),
+    })
+    // no mocking, just real request to the backend REST endpoint
+    mount(<Users />)
+    cy.get('li').should('have.length', 1)
+    cy.get('@users').should('have.been.calledOnce')
+  })
+
+  it('fetches one user from API', () => {
+    cy.api({
+      url: 'https://jsonplaceholder.cypress.io/users/1',
+    })
+      .its('body')
+      .should('include', {
+        id: 1,
+        name: 'Leanne Graham',
+      })
+  })
+})

cypress/component/advanced/api-test/spec.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export class Users extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      users: [],
+    }
+  }
+
+  componentDidMount() {
+    fetch('https://jsonplaceholder.cypress.io/users?_limit=3')
+      .then(response => {
+        return response.json()
+      })
+      .then(list => {
+        this.setState({
+          users: list,
+        })
+      })
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.users.map(user => (
+          <li key={user.id}>
+            <strong>{user.id}</strong> - {user.name}
+          </li>
+        ))}
+      </div>
+    )
+  }
+}

cypress/component/advanced/api-test/users.jsx

@@ -75,12 +75,16 @@ function cleanupStyles() {
 
   const styles = document.body.querySelectorAll('style')
   styles.forEach(styleElement => {
-    document.body.removeChild(styleElement)
+    if (styleElement.parentElement) {
+      styleElement.parentElement.removeChild(styleElement)
+    }
   })
 
   const links = document.body.querySelectorAll('link[rel=stylesheet]')
   links.forEach(link => {
-    document.body.removeChild(link)
+    if (link.parentElement) {
+      link.parentElement.removeChild(link)
+    }
   })
 }
 

lib/hooks.ts

@@ -55,6 +55,7 @@
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.10.4",
+    "@bahmutov/cy-api": "1.4.2",
     "@date-io/date-fns": "1",
     "@emotion/babel-preset-css-prop": "10.0.27",
     "@emotion/core": "10.0.22",