spec(e2e): Update e2e spec

DanSnow · Mar 22, 2017 · c4e5b8d · c4e5b8d
1 parent 29dc444
commit c4e5b8d
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 44 deletions.
diff --git a/e2e/e2e.spec.js b/e2e/e2e.spec.js
@@ -10,48 +10,79 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000 // Set timeout
 describe('e2e', () => {
   let nightmare
   let server
+  const extractSpyResult = () => {
+    return [
+      window.normalVerifyCallback.calledOnce,
+      window.bindedVerifyCallback.calledOnce,
+      window.invisibleVerifyCallback.calledOnce
+    ]
+  }
 
-  it('work', async () => {
-    const spyResult = await nightmare
-      .goto('http://localhost:8080/e2e/index.html')
-      .wait(1000) // Wait for recaptcha loaded
-      .enterIFrame('iframe[name=undefined]')
-      .click('.recaptcha-checkbox')
-      .exitIFrame()
-      .wait(3000) // Wait for verified
-      .evaluate(() => {
-        return window.verifyCallback.calledOnce
-      })
+  describe('Normal reCAPTCHA', () => {
+    it('work', async () => {
+      let spyResult = await nightmare
+        .enterIFrame('iframe[name=undefined]')
+        .click('.recaptcha-checkbox')
+        .exitIFrame()
+        .wait(2000) // Wait for verified
+        .evaluate(extractSpyResult)
 
-    expect(spyResult).toBe(true)
+      expect(spyResult).toEqual([true, false, false])
+    })
+  })
+
+  describe('Binded reCAPTCHA', () => {
+    it('work', async () => {
+      let spyResult = await nightmare
+        .click('#binded')
+        .wait(2000) // Wait for verified
+        .evaluate(extractSpyResult)
+
+      expect(spyResult).toEqual([false, true, false])
+    })
+  })
+
+  describe('Invisible reCAPTCHA', () => {
+    it('work', async () => {
+      let spyResult = await nightmare
+        .click('#submit')
+        .wait(2000) // Wait for verified
+        .evaluate(extractSpyResult)
+
+      expect(spyResult).toEqual([false, false, true])
+    })
   })
 
   beforeAll(() => {
     // Setup http-server
+    nightmare = new Nightmare({
+      webPreferences: {
+        webSecurity: false // Need for access iframe
+      }
+    })
+
+    const nightmareInitial = nightmare
+        .goto('http://localhost:8080/e2e/index.html')
+        .wait(1000) // Wait for recaptcha loaded
+
     return new Promise((resolve) => {
       server = HttpServer.createServer({
         root: path.resolve(__dirname, '..')
       })
 
-      server.listen(8080, () => {
+      server.listen(8080, async () => {
+        await nightmareInitial
         resolve()
       })
     })
   })
 
   beforeEach(() => {
-    nightmare = new Nightmare({
-      webPreferences: {
-        webSecurity: false // Need for access iframe
-      }
-    })
-  })
-
-  afterEach(() => {
-    return nightmare.end()
+    return nightmare.evaluate(() => window.resetSpies())
   })
 
   afterAll(() => {
     server.close()
+    return nightmare.end()
   })
 })
diff --git a/e2e/index.html b/e2e/index.html
@@ -6,16 +6,32 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.min.js" defer></script>
   </head>
   <body>
-    <h1>This is example to use vue-recaptcha</h1>
     <div id="root">
-      <vue-recaptcha
-        ref="recaptcha"
-        @verify="onVerify"
-        @expired="onExpired"
-        :sitekey="opts.sitekey"
-        :options="opts">
-      </vue-recaptcha>
-      <button @click="resetRecaptcha"> Reset ReCAPTCHA </button>
+      <div>
+        <vue-recaptcha
+          ref="recaptcha"
+          @verify="onNormalVerify"
+          :sitekey="sitekey">
+        </vue-recaptcha>
+      </div>
+      <div>
+        <vue-recaptcha
+          @verify="onBindedVerify"
+          :sitekey="sitekey">
+          <button id="binded">Click me</button>
+        </vue-recaptcha>
+      </div>
+      <div>
+        <form id="form" @submit.prevent="onSubmit">
+          <vue-recaptcha
+            ref="invisibleRecaptcha"
+            @verify="onInvisibleVerify"
+            size="invisible"
+            :sitekey="sitekey">
+          </vue-recaptcha>
+          <button id="submit" type="submit" @click.prevent="onSubmit">Submit</button>
+        </form>
+      </div>
     </div>
     <script src="https://unpkg.com/vue@latest/dist/vue.min.js" defer></script>
     <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>

diff --git a/e2e/main.js b/e2e/main.js
@@ -1,27 +1,31 @@
 /* global Vue: false, VueRecaptcha: false, sinon: false */
 
-window.verifyCallback = sinon.spy()
+window.normalVerifyCallback = sinon.spy()
+window.bindedVerifyCallback = sinon.spy()
+window.invisibleVerifyCallback = sinon.spy()
+
+function resetSpies () {
+  window.normalVerifyCallback.reset()
+  window.bindedVerifyCallback.reset()
+  window.invisibleVerifyCallback.reset()
+}
+
+window.resetSpies = resetSpies
 
 new Vue({ // eslint-disable-line no-new
   el: '#root',
   data: {
-    opts: {
-      sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
-    }
+    sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
   },
   components: {
     'vue-recaptcha': VueRecaptcha
   },
   methods: {
-    onVerify: function (response) {
-      console.log('Verify: ' + response)
-      window.verifyCallback()
-    },
-    onExpired: function () {
-      console.log('Expired')
+    onSubmit: function () {
+      this.$refs.invisibleRecaptcha.execute()
     },
-    resetRecaptcha () {
-      this.$refs.recaptcha.reset() // Direct call reset method
-    }
+    onNormalVerify: window.normalVerifyCallback,
+    onBindedVerify: window.bindedVerifyCallback,
+    onInvisibleVerify: window.invisibleVerifyCallback
   }
 })