Added $announcer.setComplementRoute

+ Added TypeScript definitions
+ Added Cypress tests
~ Modified example routes to use a beforeEnter handler so that tests can be run against the new method

Author: Luke Dawkes

example/src/router.js

@@ -11,6 +11,11 @@ const router = new VueRouter({
   mode: 'history',
   routes: [
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has loaded')
+
+        next()
+      },
       name: 'home',
       path: '/',
       component: Home,
@@ -19,6 +24,11 @@ const router = new VueRouter({
       }
     },
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has loaded')
+
+        next()
+      },
       name: 'about',
       path: '/about',
       component: About,
@@ -27,6 +37,11 @@ const router = new VueRouter({
       }
     },
     {
+      beforeEnter (to, from, next) {
+        router.app.$announcer.setComplementRoute('has fully loaded')
+
+        next()
+      },
       name: 'contact',
       path: '/contact',
       component: Contact,

index.d.ts

@@ -5,6 +5,8 @@ export interface Announcer
     data: Record<string, any>;
 
     set(message: string): void;
+
+    setComplementRoute(complementRoute: string): void;
 }
 
 declare module 'vue/types/vue'

src/index.js

@@ -15,6 +15,14 @@ export default function install (Vue, options = {}, router = null) {
           })
       }
     },
+
+    setComplementRoute (complementRoute) {
+      if (typeof (complementRoute) !== 'string') {
+        return
+      }
+
+      options.complementRoute = complementRoute
+    },
     data: null
   }
 

tests/e2e/integration/vue-announcer.test.js

@@ -12,18 +12,31 @@ describe('Announcer test', () => {
     cy.get('[data-va="announcer"]').should('contain', 'has loaded')
   })
 
+  it('Should contain the custom complement when the route changes', () => {
+    cy.get('a[href="/contact"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has fully loaded')
+  })
+
+  it('Should handle setting the custom complement multiple times', () => {
+    cy.get('a[href="/contact"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has fully loaded')
+
+    cy.get('a[href="/about"]').click()
+    cy.get('[data-va="announcer"]').should('contain', 'has loaded')
+  })
+
   it('Should be equal toasted message with the announced', () => {
     cy.get('a[href="/about"]').click()
     cy.get('[data-va="toasted"]').click()
 
     cy.get('.toasted-container')
-      .find('.toasted')
-      .invoke('text')
-      .then(text1 => {
-        cy.get('[data-va="announcer"]').invoke('text').should(text2 => {
-          console.log(text1, text2)
-          expect(text1).to.eq(text2)
+        .find('.toasted')
+        .invoke('text')
+        .then(text1 => {
+          cy.get('[data-va="announcer"]').invoke('text').should(text2 => {
+            console.log(text1, text2)
+            expect(text1).to.eq(text2)
+          })
         })
-      })
   })
 })