add test: matches

Author: pynnl

cypress/integration/main.spec.js

@@ -1,9 +1,13 @@
-function checkRoutes (arr, ...args) {
+function checkVisible (name, arr, ...args) {
   for (let e of args)
-    cy.get(`.route:contains(${e})`).should('be.visible')
+    cy.get(`.${name}:contains(${e})`).should('be.visible')
 
   for (let e of arr.filter(e => !args.includes(e)))
-    cy.get(`.route:contains(${e})`).should('not.be.visible')
+    cy.get(`.${name}:contains(${e})`).should('not.be.visible')
+}
+
+function checkRoutes () {
+  checkVisible('route', ...arguments)
 }
 
 function checkProperty (key, value) {
@@ -168,3 +172,20 @@ it('active', () => {
   checkProperty('href', '#/active/route2/route3')
   checkRoutes(arr, 2, 3)
 })
+
+it('matches', () => {
+  let checkProp = (...args) => checkVisible('property', ...args)
+  let arr = ['/', 'matches', '/route1', '/route2', '/route3']
+
+  cy.visit('#/matches')
+  checkProp(arr, '/', 'matches')
+
+  cy.visit('#/matches/route1')
+  checkProp(arr, '/', 'matches', '/route1')
+
+  cy.visit('#/matches/route2')
+  checkProp(arr, '/', 'matches', '/route2')
+
+  cy.visit('#/matches/route2/route3')
+  checkProp(arr, '/', 'matches', '/route2', '/route3')
+})

test/src/components/Link.svelte

@@ -8,6 +8,7 @@ import Redirect, { schema as _Redirect } from './tests/Redirect.svelte'
 import Params, { schema as _Params } from './tests/Params.svelte'
 import Query from './tests/Query.svelte'
 import Active, { schema as _Active } from './tests/Active.svelte'
+import Matches, { schema as _Matches } from './tests/Matches.svelte'
 
 routes.set({
   '/': {
@@ -19,7 +20,8 @@ routes.set({
     'redirect': { $$component: Redirect, ..._Redirect },
     'params': { $$component: Params, ..._Params },
     'query': Query,
-    'active': { $$component: Active, ..._Active }
+    'active': { $$component: Active, ..._Active },
+    'matches': { $$component: Matches, ..._Matches }
   }
 })
 

test/src/index.js

@@ -15,7 +15,7 @@ export let schema = {
 }
 </script>
 
-<Navigator route='{$routes[`/`][`active`]}'/>
+<Navigator route='{$routes[`/`][`active`]}' deep={true} exact={true}/>
 <div>
   <Property key='href' value={$active.$$href}/>
   <Router deep={true}/>

test/src/tests/Active.svelte

@@ -0,0 +1,23 @@
+<script context='module'>
+import { routes, matches } from '../../../src'
+import Route1 from '../components/Route1.svelte'
+import Route2 from '../components/Route2.svelte'
+import Route3 from '../components/Route3.svelte'
+import Navigator from '../components/Navigator.svelte'
+import Property from '../components/Property.svelte'
+
+export let schema = {
+  '/route1': Route1,
+  '/route2': {
+    $$component: Route2,
+    '/route3': Route3
+  }
+}
+</script>
+
+<Navigator route='{$routes[`/`][`matches`]}' deep={true} exact={true}/>
+<div>
+  {#each $matches as e}
+    <Property value={e.$$pathname}/>
+  {/each}
+</div>