Run tests in a single command

README.md

@@ -36,18 +36,9 @@ $ yarn generate
 ```
 
 ## Running Tests
-You need to first start the app and the functions before running the tests.
+Tests use the Netlify CLI to run the serverless functions locally. You'll probably be prompted to login with your Netlify account.
 
 ``` 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,7 @@ export default {
 <template>
   <div>
     <h2>1. Hello, World!</h2>
-    <ElButton type="primary" data-cy="btn-hello-world" @click="helloWorld()"
+    <ElButton @click="helloWorld()" type="primary" data-cy="btn-hello-world"
       >Hello</ElButton
     >
     <p>Response: {{ response }}</p>

components/Example2.vue

@@ -31,10 +31,10 @@ export default {
   <ElForm
     ref="form"
     :model="form"
+    @submit.native.prevent="helloName(form.name)"
     inline
     label-width="auto"
     label-position="left"
-    @submit.native.prevent="helloName(form.name)"
   >
     <h2>2. Hello, {name}</h2>
     <ElFormItem label="Name">
@@ -46,9 +46,9 @@ export default {
       />
     </ElFormItem>
     <ElButton
+      @click="helloName(form.name)"
       type="primary"
       data-cy="btn-hello-name"
-      @click="helloName(form.name)"
     >
       👋 Say hello
     </ElButton>

components/Example3.vue

@@ -44,10 +44,10 @@ export default {
   <ElForm
     ref="form"
     :model="form"
+    @submit.native.prevent="helloNamePost(form.name)"
     inline
     label-width="auto"
     label-position="left"
-    @submit.native.prevent="helloNamePost(form.name)"
   >
     <h2>3. Hello, {name} (POST version)</h2>
     <ElFormItem label="Name">
@@ -58,16 +58,16 @@ export default {
       />
     </ElFormItem>
     <ElButton
+      @click="helloNamePost(form.name)"
       type="primary"
       data-cy="btn-hello-name-post"
-      @click="helloNamePost(form.name)"
     >
       👋 Say hello
     </ElButton>
     <ElButton
+      @click="helloNamePostError(form.name)"
       type="danger"
       data-cy="btn-hello-name-post-error"
-      @click="helloNamePostError(form.name)"
     >
       .$get() Error
     </ElButton>

components/Example4.vue

@@ -31,10 +31,10 @@ export default {
   <ElForm
     ref="form"
     :model="form"
+    @submit.native.prevent="randomCat(form.name)"
     inline
     label-width="auto"
     label-position="left"
-    @submit.native.prevent="randomCat(form.name)"
   >
     <h2>4. Get a random cat with your name</h2>
     <p><em>API call done by your browser</em></p>
@@ -47,9 +47,9 @@ export default {
       />
     </ElFormItem>
     <ElButton
+      @click="randomCat(form.name)"
       type="primary"
       data-cy="btn-random-cat"
-      @click="randomCat(form.name)"
     >
       🐈 Meow
     </ElButton>
@@ -59,8 +59,8 @@ export default {
       <br />
       <img
         v-show="response"
-        data-cy="img-random-cat"
         :src="response"
+        data-cy="img-random-cat"
         style="width:100%;height:auto;"
       />
     </p>

components/Example5.vue

@@ -41,18 +41,18 @@ export default {
   <ElForm
     ref="form"
     :model="form"
+    @submit.native.prevent="icanhazip()"
     inline
     label-width="auto"
     label-position="left"
-    @submit.native.prevent="icanhazip()"
   >
     <h2>5. icanhazip.com</h2>
     <p><em>API call done by lambda function</em></p>
     <p>Your IP: {{ ip }}</p>
-    <ElButton type="primary" @click="icanhazip()">
+    <ElButton @click="icanhazip()" type="primary">
       🤖 Haz AWS IP please
     </ElButton>
-    <ElButton type="info" @click="response = '—'">Clear</ElButton>
+    <ElButton @click="response = '—'" type="info">Clear</ElButton>
     <p>Response: {{ response }}</p>
     <p v-if="error" style="color:red;">
       <strong>Error {{ error.status }}</strong>

components/Example6.vue

@@ -82,10 +82,10 @@ export default {
     <ElFormItem label="Email" prop="email">
       <ElInput v-model="form.email" placeholder="Your email" required />
     </ElFormItem>
-    <ElButton type="primary" @click="submitForm('mailgunForm')">
+    <ElButton @click="submitForm('mailgunForm')" type="primary">
       💌 Send form
     </ElButton>
-    <ElButton type="info" @click="resetForm('mailgunForm')">Reset</ElButton>
+    <ElButton @click="resetForm('mailgunForm')" type="info">Reset</ElButton>
     <p>Response: {{ response }}</p>
     <p v-if="error" style="color:red;">
       <strong>Error {{ error.status }}</strong>

components/Example7.vue

@@ -32,16 +32,16 @@ export default {
   <ElForm
     ref="form"
     :model="form"
+    @submit.native.prevent="sendSlackMessage(form.name)"
     inline
     label-width="auto"
     label-position="left"
-    @submit.native.prevent="sendSlackMessage(form.name)"
   >
     <h2>7. Send a Slack message</h2>
     <ElFormItem label="Name">
       <ElInput v-model="form.name" placeholder="Your name" />
     </ElFormItem>
-    <ElButton type="primary" @click="sendSlackMessage(form.name)">
+    <ElButton @click="sendSlackMessage(form.name)" type="primary">
       👋 Say hello
     </ElButton>
     <p>Response: {{ response }}</p>

cypress.json

@@ -5,5 +5,6 @@
   "pluginsFile": "test/plugins/index.js",
   "screenshotsFolder": "test/screenshots",
   "supportFile": "test/support/index.js",
-  "videosFolder": "test/videos"
+  "videosFolder": "test/videos",
+  "video": false
 }

nuxt.config.js

@@ -29,7 +29,7 @@ export default {
   /*
    ** Nuxt.js dev-modules
    */
-  devModules: [
+  buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module'
   ],

package.json

@@ -8,7 +8,8 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "test": "cypress open",
+    "test": "ntl dev & wait-on http://localhost:3000 & cypress run",
+    "testing": "cypress run",
     "generate": "nuxt generate",
     "lint": "sass-lint -c .sass-lint.yml '**/*.scss' -v -q -i 'node_modules/**/*.scss' && eslint --ext .js,.vue --ignore-path .gitignore ."
   },
@@ -32,9 +33,11 @@
     "eslint-plugin-cypress": "^2.8.1",
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-prettier": "^3.0.1",
+    "netlify-cli": "2.11.13",
     "node-sass": "^4.11.0",
     "prettier": "^1.16.4",
     "sass-lint": "^1.12.1",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "wait-on": "^3.3.0"
   }
 }