Add test for example 4

Author: mornir

components/Example4.vue

@@ -32,11 +32,11 @@ 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 data-cy="input-random-cat" v-model="form.name" 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;">
+      <br><br><img data-cy="img-random-cat" v-show="response" :src="response" style="width:100%;height:auto;">
     </p>
     <p v-if="error" style="color:red;"><strong>Error {{ error.status }}</strong><br>{{ error.data }}</p>
   </ElForm>

test/integration/app.spec.js

@@ -9,51 +9,85 @@ describe('Example 1', () => {
 })
 
 describe('Example 2', () => {
-  beforeEach( () => {
+  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}`)
   })
 
-  it("Makes a GET request", () => {
+  it('Makes a GET request', () => {
     cy.server()
     cy.route('/.netlify/functions/hello-name').as('getName')
     cy.get('[data-cy=btn-hello-name]').click()
   })
 })
 
 describe('Example 3', () => {
-  beforeEach( () => {
+  beforeEach(() => {
     cy.visit('/')
     cy.server()
     cy.route('POST', '/.netlify/functions/hello-name-post').as('postName')
-    cy.route('GET', '/.netlify/functions/hello-name-post?name=').as('getName')
+    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')
+    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')
+    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) => {
+    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')
+  })
+})