Introduction

Creating a Markdown Blog

Server Rendering a GitHub Repo

Server Rendering to Static Rendering

Add Social Authentication

Add Comments Support

Add Optimistic UI Support

Implement On Page SEO Support

Sitemaps & Robots.txt

Create a Dashboard

Add Pagination Support

Deploying Our App

Using a CMS

Using FaunaDB

Using Prisma with Amazon RDS Proxy

Using Firebase

Using MongoDB

E2E Testing with Cypress

Using Dynamic Imports

Using the Bundle Analyzer

Preloading Data to Render Faster

Using Shallow Routing

Using the Next.js Preview Mode

Use Social Login for Preview Deployments

Wake up Static Pages inside Client Side

Bulletproof Next

Writing E2E tests for a Next.js app with Cypress

Now we need a starter app for this lesson. There are two options.

### 1️⃣ Your Existing Local Copy

If you completed other lessons in this course, you could run the following commands to get the starter app for this lesson:

```
git fetch --all
git checkout e2e-testing-with-cypress
```

Then, let's install dependencies and start the app:

```
yarn
yarn dev
```

### 2️⃣ Use a Fresh Copy

If you want to start from scratch, do this:

```
git clone https://github.com/arunoda/bulletproof-next-app.git
cd bulletproof-next-app
git checkout e2e-testing-with-cypress
```

Then, let's install dependencies and start the app:

```
yarn
yarn dev
```


Setting Up

Let's start with install Cypress. Run the following command to add Cypress to our blog app:

```
yarn add --dev cypress
```

Then add the following NPM script to the `package.json` file:

```
"test-dev": "cypress open"
```

_This is how the [package.json](https://github.com/arunoda/bulletproof-next-app/blob/e2e-testing-with-cypress-2/package.json#L9) file looks like at the end._

Then run `yarn test-dev` & it will open a window like this. 

![](https://res.cloudinary.com/get-started/image/upload/v1600325730/images/Screenshot_2020-09-17_at_12.10.05_xqnrkx.png)

This window list all our test files under `cypress/integration` directory & we can run them from here.

<Note>
👋  Since this is the first time, Cypress also adds some files to a directory called `cypress` inside our app. It also adds a file called `cypress.json` to the project root.
</Note>

<Question
    id="bulletproof-next-e2e-testing-with-cypress::2::1"
    title="What will happen when you click the 'Run all specs' button on the Cypress window?"
    answers={[
        "It threw an error saying http://localhost:3000 is not found",
        "It ran a set of tests targetting https://example.cypress.io",
        "It ran a set of tests targetting https://demo.cypress.io",
        "It ran nothing since the content of those test files are commented"
    ]}
    points={30}
    correctAnswer={1}
    explain={
        By default, Cypress adds some example tests which run against <https://example.cypress.io>.

        For now, we are not interested in those examples. So, delete the directory under `cypress/integration/examples`. 

        <Note>
        💡  You can always access these examples from [here](https://example.cypress.io). And [Cypress docs](https://docs.cypress.io) is your friend.
        </Note>
    }
/>



Install Cypress

Now, we are going to add our first test case. 

For that, create a file called `blog.spec.js` inside the `cypress/integration` directory. Then add the following content:

```js
describe("Blog", () => {
    it('should display blog posts', () => {
        cy.visit('http://localhost:3009')
        cy.get('.post-list').contains('Hello World')
    })

    it('should allow to view a blog post', () => {
        cy.visit('http://localhost:3009')
        cy.get('.post-list').contains('Hello World').click()
        cy.get('h1').contains('Hello World')
        cy.get('.content').contains('This is my first blog post using a markdown file')
    })
})
```

With the first test, we visit our app and check the existence of our blog post, "Hello World".

In the second test, we click the blog post link on the home page & loads the individual blog post. Then we check the content of the blog post.

---

Here's how we can run these tests:

* Start our app with `IS_TEST_MODE=1 yarn dev`
* Then start the cypress inside another terminal with `yarn test-dev`
* Then click "Run all specs" button in the Cypress window

The result will be looks like this:

<Vimeo videoId="459323428" />

As you experienced, the cool thing about Cypress is the dev experience. We can see what exactly is happening. It helps us to write tests & debug them very quickly.

<Question
    id="bulletproof-next-e2e-testing-with-cypress::3::1"
    title="We start our app with an environment variable `IS_TEST_MODE`. Why is that?"
    answers={[
        "Oh, it's a typo. Just ignore it",
        "Cypress needs it",
        "That's an indicator for the app to change some behaviors",
        "With this, we enable the Next.js test mode"
    ]}
    points={40}
    correctAnswer={2}
    explain={
        Even though we try to test against an environment similar to the production, we cannot do that 100%. In our blog app, we have "Login with GitHub" support. 

        But we cannot do the GitHub login flow with Cypress E2E tests. One blocker is Cypress runs our app inside an iframe. So, GitHub blocks access to those requests. It's possible to [bypass](https://github.com/lirantal/cypress-social-logins) this limitation, but that will complicate things.

        Instead, we initiate a fake login system when we run our app for E2E tests. `IS_TEST_MODE` env variable is the way how we notify our app about it.

        You can check `pages/api/auth/[..nextauth].js` on how we are doing it.
    }
/>


First Test Case

Now, let's try to test on-page SEO support on our blog post page. With that test case, our `cypress/integration/blog.spec.js` file looks like this:

```js
describe("Blog", () => {
    beforeEach(() => {
        cy.visit('http://localhost:3009')
    })
    
    it('should display blog posts', () => {
        cy.get('.post-list').contains('Hello World')
    })

    it('should allow to view a blog post', () => {
        cy.get('.post-list').contains('Hello World').click()
        cy.get('h1').contains('Hello World')
        cy.get('.content').contains('This is my first blog post using a markdown file')
    })

    it('should add proper seo info to a blog post', () => {
        cy.get('.post-list').contains('Hello World').click()
        cy.get('h1').contains('Hello World')

        cy.get('head title').should('contain', 'Hello World')
        cy.get('meta[name="description"]').should('have.attr', 'content').and('match', /This is my first blog post/)
        cy.get('meta[property="og:image"]').should('have.attr', 'content').and('match', /youtube/)
    })
})
```

As you can see, this is how we check an attribute of an HTML element coming from a CSS selector.

```js
cy.get('meta[name="description"]').should('have.attr', 'content').and('match', /This is my first blog post/)
```

You can check the documentation on `should` [here](https://docs.cypress.io/api/commands/should.html#Syntax).

Try to run these tests with Cypress. If Cypress has already launched a browser, it will automatically run these tests for you.

<Question
    id="bulletproof-next-e2e-testing-with-cypress::4::1"
    title="If you look closely, now we don't have the `cy.visit()` call inside tests. Why is that?"
    answers={[
        "Cypress remembers them, so we don't need to add them again",
        "Oh! That's a mistake",
        "Since there's an already running Cypress instance, we don't need to do it",
        "It was declared in the `beforeEach` hook"
    ]}
    points={20}
    correctAnswer={3}
    explain={
        Anything we put into the `beforeEach` hook will run before each test case. That's why we don't need to call `cy.visit()` every time.

        You can check the documentation on [Cypress hooks](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Hooks) for more info.
    }
/>


Test OnPage SEO

Let's try to test comments support. For that, we need to login to the app. Here's how to write a test case for that.

Create a new file called `cypress/integration/comments.spec.js` and add the following content:

```js
function addComment(commentText) {
    cy.get('textarea').type(commentText)
    cy.get('button').contains('Add Comment').click()
}

describe('Comments', () => {
    beforeEach(() => {
        cy.visit('http://localhost:3009')
        cy.get('.post-list').contains('Hello World').click()
        cy.get('h1').contains('Hello World')
    })

    it('should allow to add a comment', () => {
        const username = Math.random()
        const commentText = Math.random()

        cy.login(username)
        addComment(commentText)

        cy.get('.comment').contains(commentText)
        cy.get('.comment-author').contains(username)
    })
})
```

<Note>
👋  Have a look at the `addComment` function. Here we extract the add comment functionality into a function. So, we can invoke it multiple times in different tests.
</Note>

Here we add the `commentText` to the `textarea` and submit it after the login. Then we check for the rendered comment.

---

Try to run this test case.

<Question
    id="bulletproof-next-e2e-testing-with-cypress::5::1"
    title="How do you describe the result?"
    answers={[
        "It ran the test as expected",
        "It threw an error saying `addComment` is not defined",
        "It threw an error saying `cy.login` is not a function",
        "It failed the test since the comment didn't render on the screen"
    ]}
    points={40}
    correctAnswer={2}
    explain={
        Cypress does not have a `cy.login` function. But we can create a custom command called `login` where we can access it as `cy.login` from anywhere within Cypress.

        We will do that in the next step.
    }
/>


Login and Comment

Let's add our custom command `cy.login()`.

For that open the `cypress/support/commands.js` and add the following lines of code:

```js
Cypress.Commands.add('login', (username) => {
    cy.get('a').contains('Login').click()
    cy.get('input[type="text"]').type(username)
    cy.get('button').click()
    cy.get('.logout').should('be.visible')
})
```

As you can, it will click the login button & submit the given username. Then, it will check the visibility of the Logout link.

Just after you added this code, Cypress will run our tests & this will fix the issue we faced in the previous step.



Add a Custom Command

Now everything looks good. But every time we run tests, it will add a new comment. For now, there's no issue with that. But when we are creating more tests, this will affect the reliability of tests.

We need to reset the data store before each test case. We cannot do this for our production database. That's why we should try to use a local data store when running E2E tests.

<Note>
👋  In our case, we are using a filesystem-based datastore when we are running tests. Open `lib/data.js` to see how we are doing that.
</Note>

## Cypress Tasks

Now we are going to use a Cypress task to reset the database. For that open the `cypress/plugins/index.js` and replace the content with:

```js
const { promises: fsPromises } = require('fs')
const os = require('os')
const path = require('path')

module.exports = (on, config) => {
  on('task', {
    async resetData() {
      const dataDir = path.join(os.tmpdir(), 'bulletproof-next-app')
      await fsPromises.rmdir(dataDir, { recursive: true })
      return null
    }
  })
}
```

Here we delete a directory called `bulletproof-next-app` inside the `os.tmpdir()`. That's the place where we keep the data.

<Note>
💡  Just like this, you can run any Node.js code inside a task.
</Note>

---

Here's how we can use this task:

* Restart your Cypress dev command with `yarn test-dev` to register this task
* Then invoke `cy.task('resetData')` inside the `beforeEach` hook of `cypress/integration/comments.js` like this:

```js
beforeEach(() => {
    cy.task('resetData')
    cy.visit('http://localhost:3009')
    cy.get('.post-list').contains('Hello World').click()
    cy.get('h1').contains('Hello World')
})
```

That's it. Now Cypress will reset the data store before each test case.

---

Here's a simple question for you:

<Question
    id="bulletproof-next-e2e-testing-with-cypress::7::1"
    title="Why didn't we use a Cypress command to reset the datastore?"
    answers={[
        "We can. Cypress commands and tasks are identical.",
        "Cypress commands run inside the browser"
    ]}
    points={30}
    correctAnswer={1}
    explain={
        Cypress commands run inside the browser. But Cypress tasks run inside a Node.js server.

        Our reset functionality needs to access the file system. So, we need to do that inside a Node.js server. That's why we used a task.

        But if you just need to invoke some API calls, you can do that via a command. You can also use [cy.exec()](https://docs.cypress.io/api/commands/exec.html#Usage), if you just need to invoke some shell/system commands.

    }
/>





Reset Data

So far, we used the Cypress dev tool for running tests. But we can also run Cypress from the command line in the headless fashion.

To do that, add the following script to our package.json file:

```
"test": "cypress run"
```

_This is how the [package.json](https://github.com/arunoda/bulletproof-next-app/blob/e2e-testing-with-cypress-8/package.json#L10) file looks like at the end._

Then you can run these tests via `yarn test`.

---

Here's a simple challenge for you:

* Run these tests with: `yarn test`
* Then have a closer look at logs & the content in the `cypress` directory

<Question
    id="bulletproof-next-e2e-testing-with-cypress::8::1"
    title="Select the wrong statement?"
    answers={[
        "Cypress now uses Electron as the browser",
        "It saved screenshots for every test case inside `cypress/screenshots`",
        "It saved videos for every test case inside `cypress/vidoes`",
        "It saved videos for every test file inside `cypress/vidoes`"
    ]}
    points={40}
    correctAnswer={3}
    explain={
        As you have seen, Cypress records a video for each test file when it runs tests in the CLI mode. This is very helpful when we are debugging problems.
    }
/>


Run Tests With CLI

Since Cypress has a CLI mode, we can run them inside a CI server. For now, we are using GitHub Actions, but you use any CI provider with Cypress.

For that, create a file called `.github/workflows/e2e.yml` and add the following content:

```yaml
name: E2E Tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-16.04
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Start App
        run: |
          yarn
          NODE_ENV=test yarn build
          NODE_ENV=test yarn start &

      - name: Run E2E
        run: |
          yarn test
      
      - uses: actions/upload-artifact@v2
        if: always()
        with:
          name: Cypress E2E Videos
          path: cypress/videos
```

As you can see, we start our app in the background & run tests. Finally, we upload videos as artifacts. So, we can download & view them.

We also need to create an env file. For that, create a file called `.env.test` and add the following content:

```
NEXTAUTH_URL=http://localhost:3009
IS_TEST_MODE=1 
```

These are the environment variables we need for our app.

<Note>
💡  Next.js looks for `.env.test` file for environment variables if the app build & starts with `NODE_ENV=test`. Have a look at [Next.js documentation](https://nextjs.org/docs/basic-features/environment-variables) for more info.
</Note>


Now you can commit these two files to the repo & push it to GitHub. Then GitHub will run these e2e tests for every time you push code.

---

Here's a simple task for you.

Cypress has an [official](https://github.com/cypress-io/github-action) GitHub Action. It supports a lot of configurations. Try using it to run your tests inside Google Chrome instead of the headless browser.

Run Inside GitHub Actions

Horry! Now our app has E2E tests. 🎉

Here we learned about the fundamental of Cypress. With this knowledge, you can add E2E tests for your app. In addition to what we have done here, you may need to run a local version of your data store.

Check out these links for more details:

* [Cypress Documentation](https://docs.cypress.io)
* [Cypress Examples](https://example.cypress.io/)
* [Cypress Real World App](https://github.com/cypress-io/cypress-realworld-app)


Finally

Here's how to write E2E tests for a Next.js app using Cypress.

Bulletproof Next

E2E Testing with Cypress

🙏 We need your help