Add E2E tests for examples 1-4

.eslintrc.js

@@ -2,7 +2,8 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
+    'cypress/globals': true
   },
   parserOptions: {
     parser: 'babel-eslint',
@@ -19,7 +20,7 @@ module.exports = {
     'plugin:nuxt/recommended'
   ],
   // required to lint *.vue files
-  plugins: ['prettier'],
+  plugins: ['prettier', 'cypress'],
   rules: {
     semi: [2, 'never'],
     'no-console': 'warn',
@@ -38,7 +39,8 @@ module.exports = {
       'error',
       {
         singleQuote: true,
-        semi: false
+        semi: false,
+        endOfLine:"auto"
       }
     ],
   }

.gitignore

@@ -14,3 +14,5 @@ dist
 netlify-lambda-build
 
 .env
+
+.DS_store

README.md

@@ -34,3 +34,20 @@ $ netlify dev
 # Generate static project
 $ yarn generate
 ```
+
+## Running Tests
+You need to first start the app and the functions before running the tests.
+
+``` bash
+# Build lambda functions locally
+$ yarn netlify-lambda build netlify-lambda-src
+
+# Serve lambda functions locally
+$ yarn netlify-lambda serve netlify-lambda-src
+
+# Serve nuxt app with hot reload at localhost:3000
+$ yarn dev
+
+# Run tests
+$ yarn test
+```

components/Example1.vue

@@ -25,7 +25,9 @@ export default {
 <template>
   <div>
     <h2>1. Hello, World!</h2>
-    <ElButton type="primary" @click="helloWorld()">Hello</ElButton>
+    <ElButton type="primary" data-cy="btn-hello-world" @click="helloWorld()"
+      >Hello</ElButton
+    >
     <p>Response: {{ response }}</p>
     <p v-if="error" style="color:red;">
       <strong>Error {{ error.status }}</strong>

components/Example2.vue

@@ -38,9 +38,18 @@ export default {
   >
     <h2>2. Hello, {name}</h2>
     <ElFormItem label="Name">
-      <ElInput v-model="form.name" placeholder="Your name" required />
+      <ElInput
+        v-model="form.name"
+        placeholder="Your name"
+        required
+        data-cy="input-hello-name"
+      />
     </ElFormItem>
-    <ElButton type="primary" @click="helloName(form.name)">
+    <ElButton
+      type="primary"
+      data-cy="btn-hello-name"
+      @click="helloName(form.name)"
+    >
       👋 Say hello
     </ElButton>
     <p>Response: {{ response }}</p>

components/Example3.vue

@@ -51,12 +51,24 @@ export default {
   >
     <h2>3. Hello, {name} (POST version)</h2>
     <ElFormItem label="Name">
-      <ElInput v-model="form.name" placeholder="Your name" />
+      <ElInput
+        v-model="form.name"
+        placeholder="Your name"
+        data-cy="input-hello-name-post"
+      />
     </ElFormItem>
-    <ElButton type="primary" @click="helloNamePost(form.name)">
+    <ElButton
+      type="primary"
+      data-cy="btn-hello-name-post"
+      @click="helloNamePost(form.name)"
+    >
       👋 Say hello
     </ElButton>
-    <ElButton type="danger" @click="helloNamePostError(form.name)">
+    <ElButton
+      type="danger"
+      data-cy="btn-hello-name-post-error"
+      @click="helloNamePostError(form.name)"
+    >
       .$get() Error
     </ElButton>
     <p>Response: {{ response }}</p>

components/Example4.vue

@@ -39,14 +39,30 @@ export default {
     <h2>4. Get a random cat with your name</h2>
     <p><em>API call done by your browser</em></p>
     <ElFormItem label="Name">
-      <ElInput v-model="form.name" placeholder="Your name" required />
+      <ElInput
+        v-model="form.name"
+        data-cy="input-random-cat"
+        placeholder="Your name"
+        required
+      />
     </ElFormItem>
-    <ElButton type="primary" @click="randomCat(form.name)">🐈 Meow</ElButton>
+    <ElButton
+      type="primary"
+      data-cy="btn-random-cat"
+      @click="randomCat(form.name)"
+    >
+      🐈 Meow
+    </ElButton>
     <p>
       Response:
       <br />
       <br />
-      <img v-show="response" :src="response" style="width:100%;height:auto;" />
+      <img
+        v-show="response"
+        data-cy="img-random-cat"
+        :src="response"
+        style="width:100%;height:auto;"
+      />
     </p>
     <p v-if="error" style="color:red;">
       <strong>Error {{ error.status }}</strong>

cypress.json

@@ -0,0 +1,9 @@
+{
+  "baseUrl": "http://localhost:8888",
+  "fixturesFolder": "test/fixtures",
+  "integrationFolder": "test/integration",
+  "pluginsFile": "test/plugins/index.js",
+  "screenshotsFolder": "test/screenshots",
+  "supportFile": "test/support/index.js",
+  "videosFolder": "test/videos"
+}

package.json

@@ -8,6 +8,7 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
+    "test": "cypress open",
     "generate": "nuxt generate",
     "lint": "sass-lint -c .sass-lint.yml '**/*.scss' -v -q -i 'node_modules/**/*.scss' && eslint --ext .js,.vue --ignore-path .gitignore ."
   },
@@ -25,8 +26,10 @@
     "@nuxtjs/eslint-config": "^1.1.2",
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",
+    "cypress": "^3.8.0",
     "eslint": "^6.1.0",
     "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-cypress": "^2.8.1",
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-prettier": "^3.0.1",
     "node-sass": "^4.11.0",

test/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

test/integration/app.spec.js

@@ -0,0 +1,87 @@
+const name = 'Marco'
+
+describe('Example 1', () => {
+  it('Shows Hello, World', () => {
+    cy.visit('/')
+    cy.get('[data-cy=btn-hello-world]').click()
+    cy.contains('Hello, World')
+  })
+})
+
+describe('Example 2', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('Defaults to "Hello, World"', () => {
+    cy.get('[data-cy=btn-hello-name]').click()
+    cy.contains('Hello, World')
+  })
+
+  it(`Shows "Hello, ${name}"`, () => {
+    cy.get('[data-cy=input-hello-name]').type(name)
+    cy.get('[data-cy=btn-hello-name]').click()
+    cy.contains(`Hello, ${name}`)
+  })
+})
+
+describe('Example 3', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.server()
+    cy.route('POST', '/.netlify/functions/hello-name-post').as('postName')
+    cy.route('GET', '/.netlify/functions/hello-name-post**').as('getName')
+  })
+
+  it('Defaults to "Hello, World"', () => {
+    cy.get('[data-cy=btn-hello-name-post]').click()
+    cy.contains('Hello, World')
+    cy.wait('@postName')
+      .its('method')
+      .should('eq', 'POST')
+  })
+
+  it(`Shows "Hello, ${name}"`, () => {
+    cy.get('[data-cy=input-hello-name-post]').type(name)
+    cy.get('[data-cy=btn-hello-name-post]').click()
+    cy.contains(`Hello, ${name}`)
+    cy.wait('@postName')
+      .its('method')
+      .should('eq', 'POST')
+  })
+
+  it(`Throws error 405 Method Not Allowed`, () => {
+    cy.get('[data-cy=btn-hello-name-post-error]').click()
+    cy.wait('@getName').then(xhr => {
+      expect(xhr.status).to.equal(405)
+      expect(xhr.method).to.equal('GET')
+    })
+    cy.contains(`405`)
+  })
+})
+
+describe('Example 4', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.server()
+    cy.route('GET', '/.netlify/functions/random-cat**').as('getName')
+  })
+
+  it('Defaults to Meow', () => {
+    cy.get('[data-cy=btn-random-cat]').click()
+    cy.wait('@getName')
+      .its('response.body')
+      .should('include', 'Meow')
+    cy.contains('Hello, World')
+    cy.get('[data-cy=img-random-cat]').should('be.visible')
+  })
+
+  it(`Shows "Hello, ${name}"`, () => {
+    cy.get('[data-cy=input-random-cat]').type(name)
+    cy.get('[data-cy=btn-random-cat]').click()
+    cy.wait('@getName')
+      .its('response.body')
+      .should('include', name)
+    cy.get('[data-cy=img-random-cat]').should('be.visible')
+  })
+})

test/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

test/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

test/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')