test(e2e): build projects and test them in browser

.circleci/config.yml

@@ -43,7 +43,7 @@ jobs:
           at: ~/
       - run:
           name: Run unit tests
-          command: yarn run test
+          command: yarn run test:unit
 
 workflows:
   version: 2

gridsome/lib/__tests__/__fixtures__/project-basic/src/layouts/Default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ 'is-mounted': isMounted }">
     <slot />
     <Footer />
   </div>
@@ -11,6 +11,14 @@ import Footer from '~/components/Footer'
 export default {
   components: {
     Footer
+  },
+  data () {
+    return {
+      isMounted: false
+    }
+  },
+  mounted (){
+    this.isMounted = true
   }
 }
 </script>

gridsome/lib/__tests__/__fixtures__/project-basic/src/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Layout>
+  <Layout class="home">
     <h1>Gridsome</h1>
     <h2 class="meta-data">{{ $page.metaData.myTest.value }}</h2>
 
@@ -21,6 +21,14 @@
     <span class="from-plugin">{{ TEST_2 }}</span>
     <span class="from-chain-webpack">{{ TEST_3 }}</span>
 
+    <ul>
+      <li v-for="edge in $page.allTestDoc.edges" :key="edge.node.id">
+        <g-link :to="edge.node.path" :class="`doc-link-${edge.node.id}`">
+          {{ edge.node.title }}
+        </g-link>
+      </li>
+    </ul>
+
     <g-image />
     <g-link />
   </Layout>
@@ -34,6 +42,15 @@ query Home {
       value
     }
   }
+  allTestDoc {
+    edges {
+      node {
+        id
+        title
+        path
+      }
+    }
+  }
 }
 </page-query>
 

gridsome/lib/__tests__/__fixtures__/project-basic/src/templates/TestDoc.vue

@@ -1,9 +1,13 @@
 <template>
-  <Layout>
+  <Layout class="doc-template">
     <h1>{{ $page.testDoc.title }}</h1>
+    <g-link class="page-link-1" to="/pages/1">Page 1</g-link>
+    <g-link class="page-link-2" to="/pages/2">Page 2</g-link>
     <ul>
       <li v-for="{ node } in $page.testDoc.belongsTo.edges" :key="node.id" :class="`doc-${node.id}`">
-        <span>{{ node.title }}</span>
+        <g-link :to="node.path" :class="`doc-link-${node.id}`">
+          {{ node.title }}
+        </g-link>
       </li>
     </ul>
     <Pager :info="$page.testDoc.belongsTo.pageInfo"/>

gridsome/lib/__tests__/__fixtures__/project-basic/src/templates/TestPage.vue

@@ -1,7 +1,8 @@
 <template>
-  <Layout>
+  <Layout class="page-template">
     <h1>{{ $page.testPage.title }}</h1>
     <h2>{{ $page.allTestDoc.edges[0].node.title }}</h2>
+    <g-link class="home-link" to="/">Home</g-link>
   </Layout>
 </template>
 

gridsome/lib/__tests__/__fixtures__/project-blog/src/layouts/Default.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="{ 'is-mounted': isMounted }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isMounted: false
+    }
+  },
+  mounted (){
+    this.isMounted = true
+  }
+}
+</script>

gridsome/lib/__tests__/__fixtures__/project-blog/src/main.js

@@ -0,0 +1,5 @@
+import Layout from './layouts/Default.vue'
+
+export default function (Vue, { head }) {
+  Vue.component('Layout', Layout)
+}

gridsome/lib/__tests__/__fixtures__/project-blog/src/pages/Index.vue

@@ -1,11 +1,11 @@
 <template>
-  <Layout>
+  <Layout :class="`home-${$page.posts.pageInfo.currentPage}`">
     <h1>Blog</h1>
     <span class="current-page">{{ $page.posts.pageInfo.currentPage }}</span>
     <ul>
       <li v-for="{ node } in $page.posts.edges" :key="node.id" :class="`post-${node.id}`">
         <span>{{ node.title }}</span>
-        <g-link :to="node.path">Read more</g-link>
+        <g-link :class="`post-link-${node.id}`" :to="node.path">Read more</g-link>
       </li>
     </ul>
     <Pager :info="$page.posts.pageInfo"/>

gridsome/lib/__tests__/__fixtures__/project-blog/src/templates/Category.vue

@@ -1,18 +1,19 @@
 <template>
-  <div>
+  <Layout :class="[`category-${$page.category.id}`, `category-page-${$page.category.belongsTo.pageInfo.currentPage}`]">
     <h1 class="category-title">{{ $page.category.title }}</h1>
     <ul>
       <li v-for="{ node } in $page.category.belongsTo.edges" :key="node.id" :class="`post-${node.id}`">
-        <span>{{ node.title }}</span>
+        <g-link :class="`post-link-${node.id}`" :to="node.path">{{ node.title }}</span>
       </li>
     </ul>
     <Pager :info="$page.category.belongsTo.pageInfo"/>
-  </div>
+  </Layout>
 </template>
 
 <page-query>
 query Tag ($id: String!, $page: Int, $showType: String) {
   category (id: $id) {
+    id
     title
     belongsTo (
       perPage: 2,

gridsome/lib/__tests__/__fixtures__/project-blog/src/templates/Post.vue

@@ -1,15 +1,39 @@
 <template>
-  <Layout>
+  <Layout :class="`post-${$page.post.id}`">
     <h1 class="post-title">{{ $page.post.title }}</h1>
     <span class="post-date">{{ $page.post.date }}</span>
+    <g-link class="home-link" to="/">Home</g-link>
+    <g-link
+      v-if="$page.post.category"
+      :class="`category-link-${$page.post.category.id}`"
+      :to="$page.post.category.path"
+    >
+      {{ $page.post.category.title }}
+    </g-link>
+    <ul>
+      <li v-for="tag in $page.post.tags" :key="tag.id">
+        <g-link :class="`tag-link-${tag.id}`" :to="tag.path">{{ tag.title }}</g-link>
+      </li>
+    </ul>
   </Layout>
 </template>
 
 <page-query>
 query Post ($path: String!, $dateFormat: String) {
   post (path: $path) {
+    id
     title
     date (format: $dateFormat)
+    tags {
+      id
+      title
+      path
+    }
+    category {
+      id
+      title
+      path
+    }
   }
 }
 </page-query>

gridsome/lib/__tests__/__fixtures__/project-blog/src/templates/Tag.vue

@@ -1,18 +1,19 @@
 <template>
-  <div>
+  <Layout :class="[`tag-${$page.tag.id}`, `tag-page-${$page.tag.belongsTo.pageInfo.currentPage}`]">
     <h1 class="tag-title">{{ $page.tag.title }}</h1>
     <ul>
       <li v-for="{ node } in $page.tag.belongsTo.edges" :key="node.id" :class="`post-${node.id}`">
-        <span>{{ node.title }}</span>
+        <g-link :class="`post-link-${node.id}`" :to="node.path">{{ node.title }}</g-link>
       </li>
     </ul>
     <Pager :info="$page.tag.belongsTo.pageInfo"/>
-  </div>
+  </Layout>
 </template>
 
 <page-query>
 query Tag ($path: String!, $page: Int, $perPage: Int = 5) {
   tag (path: $path) {
+    id
     title
     belongsTo (perPage: $perPage, page: $page) @paginate {
       pageInfo {

gridsome/lib/__tests__/__fixtures__/project-path-prefix/src/layouts/Default.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="{ 'is-mounted': isMounted }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isMounted: false
+    }
+  },
+  mounted (){
+    this.isMounted = true
+  }
+}
+</script>

gridsome/lib/__tests__/__fixtures__/project-path-prefix/src/main.js

@@ -0,0 +1,5 @@
+import Layout from './layouts/Default.vue'
+
+export default function (Vue, { head }) {
+  Vue.component('Layout', Layout)
+}

gridsome/lib/__tests__/__fixtures__/project-path-prefix/src/pages/About.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
-    about
-  </div>
+  <Layout class="about">
+    <h1>About</h1>
+    <g-link class="g-link-home" to="/" active-class="test-active">
+      Home
+    </g-link>
+  </Layout>
 </template>

gridsome/lib/__tests__/__fixtures__/project-path-prefix/src/pages/Index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <Layout class="home">
     <h1>{{ $page.metaData.siteName }}</h1>
-    <g-link class="g-link-home" :to="{ name: 'home' }" active-class="test-active">Home</g-link>
-    <g-link class="g-link-about" :to="{ name: 'about' }">About</g-link>
+    <g-link class="g-link-home" to="/" active-class="test-active">Home</g-link>
+    <g-link class="g-link-about" to="/about">About</g-link>
     <g-link class="g-link-file" to="~/assets/dummy.pdf">Download</g-link>
     <g-image class="g-image-test" src="~/assets/test.png" alt="Test image" width="1000" />
-  </div>
+  </Layout>
 </template>
 
 <page-query>