feat(): initial vue support

vue/test/ion-vue-router.spec.js

@@ -0,0 +1,170 @@
+import Vue from 'vue'
+import Router from '../src/router.js'
+import IonVueRouter from '../src/components/ion-vue-router.vue'
+
+describe('IonVueRouter', () => {
+  Vue.use(Router)
+  Vue.config.ignoredElements.push(/^ion-/)
+
+  const app = new Vue({
+    components: { Toolbar: Toolbar() },
+    render(h) {
+      return h('ion-vue-router')
+    },
+    router: new Router({
+      mode: 'abstract',
+      routes: [{ path: '/', component: Home() }, { path: '/page', component: Page() }],
+    }),
+  }).$mount()
+
+  it('Renders the home route correctly', done => {
+    app.$router.push('/')
+    setTimeout(() => {
+      expect(app.$el.textContent.trim()).toBe('Home Go to page')
+      done()
+    }, 1)
+  })
+
+  it('Renders the page route correctly', done => {
+    app.$router.push('/page')
+    setTimeout(() => {
+      expect(app.$el.textContent.trim()).toBe('Page Go home')
+      done()
+    }, 1)
+  })
+
+  it('Renders back route correctly', done => {
+    app.$router.go(-1)
+    setTimeout(() => {
+      expect(app.$el.textContent.trim()).toBe('Home Go to page')
+      done()
+    }, 1)
+  })
+
+  it('Sets the default data correctly', () => {
+    expect(typeof IonVueRouter.data).toBe('function')
+    expect(IonVueRouter.data()).toMatchObject({
+      leavingEl: null,
+      enteringEl: null,
+    })
+  })
+
+  it('Sets the default props correctly', () => {
+    const constructor = Vue.extend(IonVueRouter)
+    const component = new constructor({ router: new Router() })
+    expect(component.bindCss).toBeFalsy()
+    expect(component.animated).toBeTruthy()
+    expect(component.name).toBe('default')
+  })
+
+  it('Transitions correctly', () => {
+    expect.assertions(3)
+
+    const constructor = Vue.extend(IonVueRouter)
+    const component = new constructor({ router: new Router() })
+
+    component.$refs.ionRouterOutlet = mockIonRouterOutlet()
+    expect(component.transition()).toBeFalsy()
+
+    component.enteringEl = document.createElement('div')
+    component.leave(document.createElement('h1'), res => {
+      expect(res).toBeTruthy()
+    })
+
+    return component
+      .transition(document.createElement('div'), document.createElement('h1'))
+      .then(res => {
+        return expect(res).toBeTruthy()
+      })
+  })
+
+  it('Gets duration correctly', () => {
+    const constructor = Vue.extend(IonVueRouter)
+    const component = new constructor({ router: new Router() })
+
+    expect(component.getDuration()).toBe(undefined)
+
+    component.animated = false
+    expect(component.getDuration()).toBe(0)
+  })
+
+  it('Gets direction correctly', () => {
+    const constructor = Vue.extend(IonVueRouter)
+    const component = new constructor({ router: new Router() })
+
+    expect(component.getDirection()).toBe('forward')
+
+    component.$router.direction = -1
+    expect(component.getDirection()).toBe('back')
+  })
+
+  it('Runs stub methods correctly', () => {
+    const constructor = Vue.extend(IonVueRouter)
+    const component = new constructor({ router: new Router() })
+
+    component.enterCancelled()
+    component.leaveCancelled()
+  })
+})
+
+function Toolbar() {
+  return Vue.component('Toolbar', {
+    name: 'Toolbar',
+    props: {
+      backURL: { type: String, default: '' },
+      title: { type: String, default: '' },
+    },
+    template: `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button :default-href="backURL"/>
+          </ion-buttons>
+          <ion-title>{{ title }}</ion-title>
+        </ion-toolbar>
+      </ion-header>`,
+  })
+}
+
+function Home() {
+  return Vue.component('Home', {
+    template: `
+      <ion-page class="ion-page">
+        <toolbar title="Home"/>
+        <ion-content class="ion-content" padding>
+          <router-link to="/page">Go to page</router-link>
+        </ion-content>
+      </ion-page>`,
+  })
+}
+
+function Page() {
+  return Vue.component('Page', {
+    methods: {
+      goHome() {
+        this.$router.back()
+      },
+    },
+    template: `
+      <ion-page class="ion-page">
+        <toolbar title="Page"/>
+        <ion-content class="ion-content" padding>
+          <ion-button @click="goHome">Go home</ion-button>
+        </ion-content>
+      </ion-page>`,
+  })
+}
+
+function mockIonRouterOutlet() {
+  return {
+    componentOnReady() {
+      return new Promise(resolve => {
+        return resolve({
+          commit() {
+            return true
+          },
+        })
+      })
+    },
+  }
+}