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

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 b375839a62593a278d63373ce842089a3179c141..8ec7b55810e3248ccb3c80171597106bcc6d5884 100644 (file)
--- 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 68db654027318cf299f7ff7e5917efa4653df4d9..96a315056abb9af117a36fe5cdef5c2b8a703770 100644 (file)
--- 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 e8c7e5f6f65ca7c02c4265b5d4c7192f834f310f..b39f01ffae841b107f3ce1145274427d9a3b3d75 100644 (file)
--- 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 d44cab4f12bf0ee0bfc5445f6de5636ac1f2c152..d88f0e28b25e8df322075678bfdcedaa334579e8 100644 (file)
--- 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 bf5b0c85ccb13a14d65f7ae48a491728612f8051..e2e4b1b23e308cc15f0b0d041b286bf9ea5a33ae 100644 (file)
--- 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 {