From c202bd6ac0c76f65b70ef4161a1f21252ab1332b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 11 Dec 2019 10:15:52 -0500
Subject: [PATCH] test(e2e): use better mocking strategy for commits example

---
 .../commits.js => __tests__/commits.mock.ts}  |  2 +-
 .../vue/examples/__tests__/commits.spec.ts    | 19 ++++++++++++++++++-
 packages/vue/examples/__tests__/e2eUtils.ts   |  6 ++++++
 packages/vue/examples/classic/commits.html    | 18 +++++-------------
 .../vue/examples/composition/commits.html     | 19 +++++++------------
 5 files changed, 37 insertions(+), 27 deletions(-)
 rename packages/vue/examples/{mocks/commits.js => __tests__/commits.mock.ts} (99%)

diff --git a/packages/vue/examples/mocks/commits.js b/packages/vue/examples/__tests__/commits.mock.ts
similarity index 99%
rename from packages/vue/examples/mocks/commits.js
rename to packages/vue/examples/__tests__/commits.mock.ts
index b375839a..8ec7b558 100644
--- a/packages/vue/examples/mocks/commits.js
+++ b/packages/vue/examples/__tests__/commits.mock.ts
@@ -1,4 +1,4 @@
-window.MOCKS = {
+export default {
   master: [
     {
       sha: 'd1527fbee422c7170e56845e55b49c4fd6de72a7',
diff --git a/packages/vue/examples/__tests__/commits.spec.ts b/packages/vue/examples/__tests__/commits.spec.ts
index 68db6540..96a31505 100644
--- a/packages/vue/examples/__tests__/commits.spec.ts
+++ b/packages/vue/examples/__tests__/commits.spec.ts
@@ -1,5 +1,6 @@
 import path from 'path'
 import { setupPuppeteer } from './e2eUtils'
+import mocks from './commits.mock'
 
 describe('e2e: commits', () => {
   const { page, click, count, text, isChecked } = setupPuppeteer()
@@ -7,9 +8,25 @@ describe('e2e: commits', () => {
   async function testCommits(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../${apiType}/commits.html#test`
+      `../${apiType}/commits.html`
     )}`
 
+    // intercept and mock the response to avoid hitting the actual API
+    await page().setRequestInterception(true)
+    page().on('request', req => {
+      const match = req.url().match(/&sha=(.*)$/)
+      if (!match) {
+        req.continue()
+      } else {
+        req.respond({
+          status: 200,
+          contentType: 'application/json',
+          headers: { 'Access-Control-Allow-Origin': '*' },
+          body: JSON.stringify(mocks[match[1] as 'master' | 'sync'])
+        })
+      }
+    })
+
     await page().goto(baseUrl)
     await page().waitFor('li')
     expect(await count('input')).toBe(2)
diff --git a/packages/vue/examples/__tests__/e2eUtils.ts b/packages/vue/examples/__tests__/e2eUtils.ts
index e8c7e5f6..b39f01ff 100644
--- a/packages/vue/examples/__tests__/e2eUtils.ts
+++ b/packages/vue/examples/__tests__/e2eUtils.ts
@@ -11,6 +11,12 @@ export function setupPuppeteer() {
   beforeEach(async () => {
     browser = await puppeteer.launch(puppeteerOptions)
     page = await browser.newPage()
+
+    page.on('console', e => {
+      if (e.type() === 'error') {
+        console.error(`Error from Puppeteer-loaded page:`, e)
+      }
+    })
   })
 
   afterEach(async () => {
diff --git a/packages/vue/examples/classic/commits.html b/packages/vue/examples/classic/commits.html
index d44cab4f..d88f0e28 100644
--- a/packages/vue/examples/classic/commits.html
+++ b/packages/vue/examples/classic/commits.html
@@ -1,5 +1,4 @@
 <script src="../../dist/vue.global.js"></script>
-<script src="../mocks/commits.js"></script>
 
 <div id="demo">
   <h1>Latest Vue.js Commits</h1>
@@ -42,18 +41,11 @@ const App = {
 
   methods: {
     fetchData() {
-      if (window.location.hash === '#test') {
-        // use mocks in e2e to avoid dependency on network / authentication
-        setTimeout(() => {
-          this.commits = window.MOCKS[this.currentBranch]
-        }, 0)
-      } else {
-        fetch(`${API_URL}${this.currentBranch}`)
-          .then(res => res.json())
-          .then(data => {
-            this.commits = data
-          })
-      }
+      fetch(`${API_URL}${this.currentBranch}`)
+        .then(res => res.json())
+        .then(data => {
+          this.commits = data
+        })
     },
     truncate(v) {
       const newline = v.indexOf('\n')
diff --git a/packages/vue/examples/composition/commits.html b/packages/vue/examples/composition/commits.html
index bf5b0c85..e2e4b1b2 100644
--- a/packages/vue/examples/composition/commits.html
+++ b/packages/vue/examples/composition/commits.html
@@ -1,5 +1,4 @@
 <script src="../../dist/vue.global.js"></script>
-<script src="../mocks/commits.js"></script>
 
 <div id="demo">
   <h1>Latest Vue.js Commits</h1>
@@ -38,17 +37,13 @@ const App = {
     const currentBranch = ref('master')
     const commits = ref(null)
 
-    watch([currentBranch, commits], () => {
-      if (window.location.hash === '#test') {
-        // use mocks in e2e to avoid dependency on network / authentication
-        setTimeout(() => {
-          commits.value = window.MOCKS[currentBranch.value]
-        }, 0)
-      } else {
-        fetch(`${API_URL}${currentBranch.value}`)
-          .then(res => res.json())
-          .then(data => { commits.value = data })
-      }
+    watch(() => {
+      fetch(`${API_URL}${currentBranch.value}`)
+        .then(res => res.json())
+        .then(data => {
+          console.log(data)
+          commits.value = data
+        })
     })
 
     return {