add test: optional, redirect, active

Author: pynnl

cypress/integration/main.spec.js

@@ -84,6 +84,22 @@ it('optional', () => {
   checkRoutes(arr, 3)
 })
 
+it('redirect', () => {
+  let arr = [1, 2, 3]
+
+  cy.visit('#/redirect')
+  checkRoutes(arr)
+
+  cy.visit('#/redirect/route4')
+  checkRoutes(arr, 1)
+
+  cy.visit('#/redirect/route5')
+  checkRoutes(arr, 2)
+
+  cy.visit('#/redirect-whatever')
+  checkRoutes(arr, 3)
+})
+
 it('params', () => {
   let arr = [1, 2, 3]
   let checkProp = (id, name, wildcard) => {
@@ -109,6 +125,46 @@ it('params', () => {
   checkRoutes(arr, 3)
 
   cy.visit('#/params/123')
-  checkProp(undefined, undefined, '/123')
+  checkProp(null, null, '/123')
   checkRoutes(arr, 4)
 })
+
+it('query', () => {
+  let checkProp = (id, name) => {
+    checkProperty('id', id)
+    checkProperty('name', name)
+    checkProperty('whatever')
+  }
+
+  cy.visit('#/query?')
+  checkProp()
+
+  cy.visit('#/query?id=1')
+  checkProp(1)
+
+  cy.visit('#/query?name=John')
+  checkProp(null, 'John')
+
+  cy.visit('#/query?id=1&name=John')
+  checkProp(1, 'John')
+})
+
+it('active', () => {
+  let arr = [1, 2, 3]
+
+  cy.visit('#/active')
+  checkProperty('href', '#/active')
+  checkRoutes(arr)
+
+  cy.visit('#/active/route1')
+  checkProperty('href', '#/active/route1')
+  checkRoutes(arr, 1)
+
+  cy.visit('#/active/route2')
+  checkProperty('href', '#/active/route2')
+  checkRoutes(arr, 2)
+
+  cy.visit('#/active/route2/route3')
+  checkProperty('href', '#/active/route2/route3')
+  checkRoutes(arr, 2, 3)
+})

test/src/index.js

@@ -4,7 +4,10 @@ import RootRoutes, { schema as _RootRoutes } from './tests/RootRoutes.svelte'
 import NestedRoutes, { schema as _NestedRoutes } from './tests/NestedRoutes.svelte'
 import Wildcard, { schema as _Wildcard } from './tests/Wildcard.svelte'
 import Optional, { schema as _Optional } from './tests/Optional.svelte'
+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'
 
 routes.set({
   '/': {
@@ -13,7 +16,10 @@ routes.set({
     'nested-routes': { $$component: NestedRoutes, ..._NestedRoutes },
     'wildcard': { $$component: Wildcard, ..._Wildcard },
     'optional': { $$component: Optional, ..._Optional },
-    'params': { $$component: Params, ..._Params }
+    'redirect': { $$component: Redirect, ..._Redirect },
+    'params': { $$component: Params, ..._Params },
+    'query': Query,
+    'active': { $$component: Active, ..._Active }
   }
 })
 

test/src/tests/Active.svelte

@@ -0,0 +1,22 @@
+<script context='module'>
+import Router, { routes, active } 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[`/`][`active`]}'/>
+<div>
+  <Property key='href' value={$active.$$href}/>
+  <Router deep={true}/>
+</div>

test/src/tests/Optional.svelte

@@ -12,5 +12,5 @@ export let schema = {
 }
 </script>
 
-<Navigator route='{$routes[`/`][`wildcard`]}'/>
+<Navigator route='{$routes[`/`][`optional`]}'/>
 <Router/>

test/src/tests/Params.svelte

@@ -1,9 +1,10 @@
 <script context='module'>
-import Router, { params } from '../../../src'
+import Router, { routes, params } from '../../../src'
 import Route1 from '../components/Route1.svelte'
 import Route2 from '../components/Route2.svelte'
 import Route3 from '../components/Route3.svelte'
 import Route4 from '../components/Route4.svelte'
+import Navigator from '../components/Navigator.svelte'
 import Property from '../components/Property.svelte'
 
 export let schema = {
@@ -14,6 +15,7 @@ export let schema = {
 }
 </script>
 
+<Navigator route='{$routes[`/`][`params`]}'/>
 <div>
   {#each Object.entries($params) as e}
     <Property key={e[0]} value={e[1]}/>

test/src/tests/Query.svelte

@@ -1,25 +1,11 @@
-<script>
-import { query } from '../../../src'
-import Link from '../components/Link.svelte'
-
-let to = [
-  '?a&b',
-  '?a=1&b=c'
-]
+<script context='module'>
+import Router, { query } from '../../../src'
+import Property from '../components/Property.svelte'
 </script>
 
 <div>
-  {#each to as e}
-    <Link href='{`#/query` + e}' label={e}/>
+  {#each Object.entries($query) as e}
+    <Property key={e[0]} value={e[1]}/>
   {/each}
+  <Router/>
 </div>
-<pre>
-  {JSON.stringify($query, null, 2)}
-</pre>
-
-<style>
-pre {
-  margin: 10px;
-  font-size: 20px;
-}
-</style>

test/src/tests/Redirect.svelte

@@ -1,21 +1,19 @@
-<script>
-import Link from '../components/Link.svelte'
+<script context='module'>
+import Router, { routes } 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'
 
-let to = [
-  '/a-link',
-  'what-e-ver'
-]
+export let schema = {
+  '/route1': Route1,
+  '/route2': Route2,
+  '/route3': Route3,
+  '/route4': '/redirect/route1',
+  '/route5': { $$redirect: '/redirect/route2' },
+  '*': '/redirect/route3'
+}
 </script>
 
-<div>All routes not matched will be redirected here</div>
-<div>
-  {#each to as e}
-    <Link href='{`#` + e}' label={e}/>
-  {/each}
-</div>
-
-<style>
-div {
-  font-size: 20px;
-}
-</style>
+<Navigator route='{$routes[`/`][`redirect`]}'/>
+<Router/>