test(e2e): use better mocking strategy for commits example

packages/vue/examples/__tests__/commits.mock.ts

@@ -1,4 +1,4 @@
-window.MOCKS = {
+export default {
   master: [
     {
       sha: 'd1527fbee422c7170e56845e55b49c4fd6de72a7',

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)

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 () => {

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') {
+      fetch(`${API_URL}${this.currentBranch}`)
-        // use mocks in e2e to avoid dependency on network / authentication
+        .then(res => res.json())
-        setTimeout(() => {
+        .then(data => {
-          this.commits = window.MOCKS[this.currentBranch]
+          this.commits = data
-        }, 0)
+        })
-      } else {
-        fetch(`${API_URL}${this.currentBranch}`)
-          .then(res => res.json())
-          .then(data => {
-            this.commits = data
-          })
-      }
     },
     truncate(v) {
       const newline = v.indexOf('\n')

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], () => {
+    watch(() => {
-      if (window.location.hash === '#test') {
+      fetch(`${API_URL}${currentBranch.value}`)
-        // use mocks in e2e to avoid dependency on network / authentication
+        .then(res => res.json())
-        setTimeout(() => {
+        .then(data => {
-          commits.value = window.MOCKS[currentBranch.value]
+          console.log(data)
-        }, 0)
+          commits.value = data
-      } else {
+        })
-        fetch(`${API_URL}${currentBranch.value}`)
-          .then(res => res.json())
-          .then(data => { commits.value = data })
-      }
     })
 
     return {