@lightningjs/blits 1.23.2 → 1.25.0

package/.github/workflows/run-blits-tests.yml

@@ -4,6 +4,7 @@ on:
   pull_request_target:
     branches:
       - dev
+      - master
 
 jobs:
   run-blits-tests:
@@ -12,6 +13,9 @@ jobs:
     steps:
     - name: Checkout Code
       uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
 
     - name: Set up Node.js
       uses: actions/setup-node@v3
@@ -42,7 +46,7 @@ jobs:
         echo "summary=$summary" >> $GITHUB_OUTPUT
 
         # If the number of failed tests is greater than 1, exit with error.
-        if [ "$failed" -gt 1 ]; then
+        if [ "$failed" -gt 0 ]; then
             exit 1
         fi
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v1.25.0
+
+_28 mar 2025_
+
+- Fixed issue when same effect type is used in `effects` attribute
+- Added ability to enable / disable announcer via launch setting as well as runtime
+
+## v1.24.0
+
+_26 mar 2025_
+
+- Added additional tests for router
+- Fixed issues with `:show` attribute not working properly
+- Fixed issue with strings starting with a number being casted to a number
+- Fixed named slots functionality
+
 ## v1.23.2
 
 _18 mar 2025_

package/docs/plugins/text-to-speech-announcer.md

@@ -46,3 +46,15 @@ Blits.Component('MyComponent', {
   }
 })
 ```
+
+## Enabling / disabling the announcer
+
+By default the announcer is disabled. This mean that whenever you call `this.$announcer.speak()` there will actually not be anything spoken out via the Text To Speech engine.
+
+In order to enable utterances being spoken out, you can set the Blits launch setting `announcer` to `true` in the index.js.
+
+Alternatively the announcer can be enabled or disabled run time by using one of the following methods on the Announcer pluging:
+
+- `this.$announcer.enable()` - activates the announcer
+- `this.$announcer.disable()` - deactivates the announcer
+- `this.$announcer.disable(true/false)` - turns the announcer or on off

package/index.d.ts

@@ -929,7 +929,22 @@ declare module '@lightningjs/blits' {
      *
      * @important if you dont know what you're doing here, you probably shouldn't be doing it!
      */
-    advanced?: Partial<RendererMainSettings>
+    advanced?: Partial<RendererMainSettings>,
+    /**
+     * Whether or not the announcer should be activated on initialization
+     *
+     * When set to `false` announcements via `this.$annoucer.speak()` will
+     * be ignored. When set to `true` announcement will be spoken out via the
+     * text to speech API
+     *
+     * Announcer can be enabled / disabled run time as well via:
+     * - this.$announcer.enable()
+     * - this.$announcer.disable()
+     * - this.$announcer.toggle(true/false)
+     *
+     * @default false
+     */
+    announcer?: boolean
   }
 
   interface State {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.23.2",
+  "version": "1.25.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/announcer/announcer.js

@@ -19,7 +19,22 @@ import speechSynthesis from './speechSynthesis.js'
 
 let debounce
 
+let active = false
+
+const enable = () => {
+  active = true
+}
+
+const disable = () => {
+  active = false
+}
+
+const toggle = (v) => {
+  active = v ? true : false
+}
+
 const speak = (message, politeness = 'off') => {
+  if (active === false) return
   clearTimeout(debounce)
   speechSynthesis.cancel()
   // assertive messages get spoken immediately
@@ -45,4 +60,7 @@ export default {
   polite,
   assertive,
   stop,
+  enable,
+  disable,
+  toggle,
 }

package/src/application.js

@@ -54,6 +54,8 @@ const Application = (config) => {
   }
 
   config.hooks[symbols.init] = function () {
+    // set the initial activation state of the announcer based on launch setting
+    this.$announcer.toggle(Settings.get('announcer', false))
     const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
 
     keyDownHandler = async (e) => {

package/src/components/FPScounter.js

@@ -736,7 +736,7 @@ export default () =>
         )
 
         elementConfig23['image'] = component.image
-        elementConfig23['x'] = -2
+        elementConfig23['x'] = '-2'
         elementConfig23['w'] = 47
         elementConfig23['h'] = 25
         elementConfig23['map'] = component.sprite
@@ -759,7 +759,7 @@ export default () =>
         parent = elms[23]
         const props24 = {}
         props24['image'] = component.image
-        props24['x'] = -2
+        props24['x'] = '-2'
         props24['w'] = 47
         props24['h'] = 25
         props24['map'] = component.sprite

package/src/engines/L3/element.js

@@ -82,6 +82,9 @@ const layoutFn = function (config) {
   let otherDimension = 0
   const gap = config.gap || 0
   for (let i = 0; i < childrenLength; i++) {
+    if (this.children[i] !== undefined && this.children[i].props.raw.show === false) {
+      continue
+    }
     const node = children[i]
     node[position] = offset
     node[oppositePosition] = padding.oppositeStart
@@ -303,12 +306,8 @@ const propsTransformer = {
   set show(v) {
     if (v) {
       this.props['alpha'] = this.raw['alpha'] !== undefined ? this.raw['alpha'] : 1
-      this.props['width'] = this.raw['w'] || this.raw['width'] || 0
-      this.props['height'] = this.raw['h'] || this.raw['height'] || 0
     } else {
       this.props['alpha'] = 0
-      this.props['width'] = 0
-      this.props['height'] = 0
     }
   },
   set alpha(v) {
@@ -329,24 +328,29 @@ const propsTransformer = {
         v[i].props.color = colors.normalize(v[i].props.color)
       }
     }
-
+    const effectNames = {}
     if (this.element.node === undefined) {
+      this.element.effectNames = []
       this.props['shader'] = renderer.createShader('DynamicShader', {
         effects: v.map((effect) => {
+          let name = effect.type
+          if (effectNames[name] !== undefined) {
+            name += ++effectNames[name]
+          } else {
+            effectNames[name] = 1
+          }
+          name += this.element.counter
+          this.element.effectNames.push(name)
           // temporary add counter to work around shader caching issues
-          return renderer.createEffect(
-            effect.type,
-            effect.props,
-            effect.type + this.element.counter
-          )
+          return renderer.createEffect(effect.type, effect.props, name)
         }),
       })
     } else {
       for (let i = 0; i < v.length; i++) {
+        const name = this.element.effectNames[i]
         // temporary add counter to work around shader caching issues
-        const target = this.element.node.shader.props[v[i].type + this.element.counter]
+        const target = this.element.node.shader.props[name]
         const props = Object.keys(v[i].props)
-
         if (target == undefined) continue
         for (let j = 0; j < props.length; j++) {
           target[props[j]] = v[i].props[props[j]]
@@ -652,6 +656,7 @@ export default (config, component) => {
     scheduledTransitions: {},
     config,
     component,
+    effectNames: [],
     counter: counter++,
   })
 }

package/src/engines/L3/element.test.js

@@ -551,10 +551,6 @@ test('Element - Set `show` property as false', (assert) => {
 
   assert.equal(el.node['alpha'], 0, 'Node alpha parameter should set to 0')
   assert.equal(el.props.props['alpha'], 0, 'Props alpha parameter should set')
-  assert.equal(el.node['width'], 0, 'Node width parameter should set to 0')
-  assert.equal(el.props.props['width'], 0, 'props width parameter should set to 0')
-  assert.equal(el.node['height'], 0, 'Node height parameter should set to 0')
-  assert.equal(el.props.props['height'], 0, 'props height parameter should set to 0')
 
   assert.end()
 })
@@ -567,9 +563,7 @@ test('Element - Set `show` property as false', (assert) => {
   assert.equal(el.node['alpha'], 1, 'Node alpha parameter should be set')
   assert.equal(el.props.props['alpha'], 1, 'Props alpha parameter should be set')
   assert.equal(el.node['width'], 960, 'Node width parameter should be set')
-  assert.equal(el.props.props['width'], 960, 'props width parameter should be set')
   assert.equal(el.node['height'], 540, 'Node height parameter should be set')
-  assert.equal(el.props.props['height'], 540, 'props height parameter should be set')
 
   assert.end()
 })

package/src/lib/codegenerator/generator.js

@@ -148,7 +148,7 @@ const generateElementCode = function (
   Object.keys(templateObject).forEach((key) => {
     if (key === 'slot') {
       renderCode.push(`
-        elementConfig${counter}['parent'] = component[Symbol.for('slots')] !== undefined && Array.isArray(component[Symbol.for('slots')]) === true && component[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
+        elementConfig${counter}['parent'] = slotComponent[Symbol.for('slots')] !== undefined && Array.isArray(slotComponent[Symbol.for('slots')]) === true && slotComponent[Symbol.for('slots')].filter(slot => slot.ref === '${templateObject.slot}').shift() || parent
       `)
     }
 
@@ -691,7 +691,7 @@ const cast = (val = '', key = false, component = 'component.') => {
     }
   }
   // numeric
-  else if (key !== 'color' && !isNaN(parseFloat(val))) {
+  else if (key !== 'color' && /[^0-9%\s.eE]/.test(val) === false && !isNaN(parseFloat(val))) {
     castedValue = parseFloat(val)
     if (val.endsWith('%')) {
       const map = {

package/src/lib/codegenerator/generator.test.js

@@ -296,6 +296,71 @@ test('Generate code for a template with a single element with attributes with a
   assert.end()
 })
 
+test('Generate code for a template with a single element with attributes with numeric & alpha numeric value', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        x: '10e2',
+        y: '100',
+        h: '45%',
+        w: '45.45%',
+        one: 'Pure String',
+        two: '123abc',
+        three: '1E',
+        four: 'E1',
+      },
+    ],
+  }
+
+  const expectedRender = `
+  function anonymous(parent, component, context, components, effect, getRaw, Log) {
+    const elms = []
+    let componentType
+    const rootComponent = component
+    let propData
+    let slotComponent
+    let inSlot = false
+    let slotChildCounter = 0
+    const elementConfig0 = {}
+
+    elms[0] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+
+    elementConfig0['x'] = 1000
+    elementConfig0['y'] = 100
+    elementConfig0['h'] = parent.node.height * (45 / 100)
+    elementConfig0['w'] = parent.node.width * (45.45 / 100)
+    elementConfig0['one'] = "Pure String"
+    elementConfig0['two'] = "123abc"
+    elementConfig0['three'] = 1
+    elementConfig0['four'] = "E1"
+
+    elms[0].populate(elementConfig0)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    return elms
+  }
+  `
+
+  const actual = generator.call(scope, templateObject)
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+  assert.end()
+})
+
 test('Generate code for a template with attributes and a nested element with attributes', (assert) => {
   const templateObject = {
     children: [
@@ -1427,6 +1492,144 @@ test('Generate code for a template with custom components with arguments', (asse
   assert.end()
 })
 
+test('Generate code for a template with custom components with argument value as numeric & alpha numeric', (assert) => {
+  const templateObject = {
+    children: [
+      {
+        [Symbol.for('componentType')]: 'Element',
+        children: [
+          {
+            [Symbol.for('componentType')]: 'Poster',
+            x: '10e2',
+            y: '100',
+            h: '45%',
+            w: '45.45%',
+            one: 'Pure String',
+            two: '123abc',
+            three: '1E',
+            four: 'E1',
+          },
+        ],
+      },
+    ],
+  }
+
+  const scope = {
+    components: {
+      Poster: () => {},
+    },
+  }
+
+  const expectedRender = `
+  function anonymous(parent, component, context, components, effect, getRaw, Log) {
+    const elms = []
+    let componentType
+    const rootComponent = component
+    let propData
+    let slotComponent
+    let inSlot = false
+    let slotChildCounter = 0
+    const elementConfig0 = {}
+
+    elms[0] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+    elms[0].populate(elementConfig0)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    const cmp1 = (context.components && context.components['Poster']) || components['Poster']
+    parent = elms[0]
+    const elementConfig1 = {}
+
+    elms[1] = this.element(
+        { parent: parent || 'root' },
+        inSlot === true ? slotComponent : component
+    )
+
+    elementConfig1['x'] = 1000
+    elementConfig1['y'] = 100
+    elementConfig1['h'] = parent.node.height * (45 / 100)
+    elementConfig1['w'] = parent.node.width * (45.45 / 100)
+    elementConfig1['one'] = "PureString"
+    elementConfig1['two'] = "123abc"
+    elementConfig1['three'] = 1
+    elementConfig1['four'] = "E1"
+
+    const skip1 = []
+    if (typeof cmp1 !== 'undefined') {
+        for (let key in cmp1.config.props) {
+            delete elementConfig1[cmp1.config.props[key]]
+            skip1.push(cmp1.config.props[key])
+        }
+    }
+
+    elms[1].populate(elementConfig1)
+
+    if (inSlot === true) {
+        slotChildCounter -= 1
+    }
+
+    parent = elms[1]
+    const props2 = {}
+
+    props2['x'] = 1000
+    props2['y'] = 100
+    props2['h'] = parent.node.height * (45 / 100)
+    props2['w'] = parent.node.width * (45.45 / 100)
+    props2['one'] = "PureString"
+    props2['two'] = "123abc"
+    props2['three'] = 1
+    props2['four'] = "E1"
+
+    componentType = props2['is'] || 'Poster'
+    let component2
+
+    if (typeof componentType === 'string') {
+        component2 = context.components && context.components[componentType] || components[componentType]
+        if (!component2) {
+            throw new Error('Component "Poster" not found')
+        }
+    } else if (typeof componentType === 'function' && componentType[Symbol.for('isComponent')] === true) {
+        component2 = componentType
+    }
+
+    elms[2] = component2.call(null, { props: props2 }, elms[1], component)
+
+    if (elms[2][Symbol.for('slots')][0]) {
+        parent = elms[2][Symbol.for('slots')][0]
+        slotComponent = elms[2]
+        inSlot = true
+    } else {
+        parent = elms[2][Symbol.for('children')][0]
+    }
+
+    if (inSlot === true && slotChildCounter === 0) {
+      inSlot = false
+    }
+
+    return elms
+  }
+  `
+
+  const actual = generator.call(scope, templateObject)
+
+  assert.equal(
+    normalize(actual.render.toString()),
+    normalize(expectedRender),
+    'Generator should return a render function with the correct code'
+  )
+  assert.ok(
+    Array.isArray(actual.effects) && actual.effects.length === 0,
+    'Generator should return an empty effects array'
+  )
+
+  assert.end()
+})
+
 test('Generate code for a template with custom components with reactive props', (assert) => {
   const templateObject = {
     children: [
@@ -1933,9 +2136,9 @@ test('Generate code for a template with slot content, using a named slot', (asse
     elms[4] = this.element({ parent: parent || 'root' }, inSlot === true ? slotComponent : component)
     elementConfig4['x'] = 100
     elementConfig4['y'] = component.y
-    elementConfig4['parent'] = component[Symbol.for('slots')] !== undefined &&
-      Array.isArray(component[Symbol.for('slots')]) === true &&
-      component[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || parent
+    elementConfig4['parent'] = slotComponent[Symbol.for('slots')] !== undefined &&
+      Array.isArray(slotComponent[Symbol.for('slots')]) === true &&
+       slotComponent[Symbol.for('slots')].filter(slot => slot.ref === 'mySlot').shift() || parent
     elementConfig4['slot'] = "mySlot"
     elms[4].populate(elementConfig4)
 

package/src/router/router.js

@@ -66,7 +66,7 @@ const isString = (v) => typeof v === 'string'
 
 export const matchHash = (path, routes = []) => {
   // remove trailing slashes
-  const originalPath = path
+  const originalPath = path.replace(/^\/+|\/+$/g, '')
   path = normalizePath(path)
   let matchingRoute = false
   let i = 0
@@ -89,6 +89,8 @@ export const matchHash = (path, routes = []) => {
           dynamicRoutePartsRegex.substring(part.index + part[0].length)
       })
 
+      dynamicRoutePartsRegex = '^' + dynamicRoutePartsRegex
+
       // test if the constructed regex matches the path
       const match = originalPath.match(new RegExp(`${dynamicRoutePartsRegex}`, 'i'))
 

package/src/router/router.test.js

@@ -16,7 +16,7 @@
  */
 
 import test from 'tape'
-import { matchHash } from './router.js'
+import { matchHash, getHash, to } from './router.js'
 
 const routes = [
   {
@@ -31,6 +31,9 @@ const routes = [
   {
     path: '/tv/:show/seasons/:season',
   },
+  {
+    path: '/movies/special',
+  },
   {
     path: '/movies/:name',
   },
@@ -40,6 +43,9 @@ const routes = [
   {
     path: '/route/with/trailing/slash/',
   },
+  {
+    path: '/dutchmovies/:id',
+  },
   {
     path: '*',
   },
@@ -54,6 +60,7 @@ test('Type of matchHash', (assert) => {
 })
 
 test('Match paths with static routes that have an exact match', (assert) => {
+  assert.equal(matchHash('', routes), routes[0], 'Should return the correct route object')
   assert.equal(matchHash('/', routes), routes[0], 'Should return the correct route object')
   assert.equal(matchHash('/page1', routes), routes[1], 'Should return the correct route object')
   assert.equal(
@@ -61,6 +68,11 @@ test('Match paths with static routes that have an exact match', (assert) => {
     routes[2],
     'Should return the correct route object'
   )
+  assert.equal(
+    matchHash('/movies/special', routes),
+    routes[4],
+    'Should return the correct route object'
+  )
   assert.end()
 })
 
@@ -71,32 +83,69 @@ test('Match paths with dynamic route parts', (assert) => {
     'Should return the correct route object'
   )
 
+  assert.equal(
+    matchHash('/tv/simpsons/season/first', routes),
+    routes[9],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/examples/test/seasons/5', routes),
+    routes[6],
+    'Should return the correct route object'
+  )
+
   assert.equal(
     matchHash('/movies/avengers-endgame', routes),
-    routes[4],
+    routes[5],
     'Should return the correct route object'
   )
+
+  assert.equal(
+    matchHash('/movies/special-1', routes),
+    routes[5],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/dutchmovies/123', routes),
+    routes[8],
+    'Should return the correct route object'
+  )
+
   assert.end()
 })
 
 test('Match paths with a wildcard asterix', (assert) => {
   assert.equal(
     matchHash('/examples/example1', routes),
-    routes[5],
+    routes[6],
     'Should return the correct route object'
   )
 
   assert.equal(
     matchHash('/examples/example1/subexample/and-another-page', routes),
-    routes[5],
+    routes[6],
     'Should return the correct route object'
   )
 
-  assert.equal(matchHash('/404', routes), routes[7], 'Should return the correct route object')
+  assert.equal(matchHash('/404', routes), routes[9], 'Should return the correct route object')
+
+  assert.equal(
+    matchHash('/page1/non-existing-path', routes),
+    routes[9],
+    'Should return the correct route object'
+  )
 
   assert.equal(
     matchHash('/page1/subpage1/i-dont-exist', routes),
-    routes[7],
+    routes[9],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/completely/unexpected/route', routes),
+    routes[9],
     'Should return the correct route object'
   )
 
@@ -124,6 +173,15 @@ test('Add params to route for dynamic route matches', (assert) => {
     'Should return the correct route object'
   )
 
+  const match3 = matchHash('/dutchmovies/1', routes)
+  assert.deepEqual(
+    match3.params,
+    {
+      id: '1',
+    },
+    'Should return the correct route object'
+  )
+
   assert.end()
 })
 
@@ -166,7 +224,13 @@ test('Work with trailing slashes', (assert) => {
 
   assert.equal(
     matchHash('/route/with/trailing/slash', routes),
-    routes[6],
+    routes[7],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('/tv/simpsons/seasons/first', routes),
+    routes[3],
     'Should return the correct route object'
   )
 
@@ -185,7 +249,13 @@ test('Work with and without leading slashes', (assert) => {
 
   assert.equal(
     matchHash('route/with/trailing/slash', routes),
-    routes[6],
+    routes[7],
+    'Should return the correct route object'
+  )
+
+  assert.equal(
+    matchHash('//tv/simpsons/seasons/first//', routes),
+    routes[3],
     'Should return the correct route object'
   )
 
@@ -208,7 +278,7 @@ test('Match routes case insensitive', (assert) => {
 
   assert.equal(
     matchHash('/Movies/Avengers-Endgame', routes),
-    routes[4],
+    routes[5],
     'Should return the correct route object'
   )
   assert.end()
@@ -234,5 +304,170 @@ test('Match routes case insensitive, but pass props with original casing', (asse
     'Should return the correct params object'
   )
 
+  const match3 = matchHash('/DutchMovies/ID_123', routes)
+  assert.deepEqual(
+    match3.params,
+    {
+      id: 'ID_123',
+    },
+    'Should return the correct params object'
+  )
+
+  assert.end()
+})
+
+test('Match paths with dynamic route parts along with query string params', (assert) => {
+  const hash1 = '#/tv/simpsons/seasons/first?token=123&ln=en'
+  document.location.hash = hash1
+
+  const { hash, path, queryParams } = getHash()
+
+  assert.equal(hash, hash1, 'Should return correct hash')
+  assert.equal(path, '/tv/simpsons/seasons/first', 'Should return the correct route path')
+  assert.equal(matchHash(path, routes), routes[3], 'Should return the correct route object')
+  assert.equal(
+    queryParams.get('token'),
+    '123',
+    'Should contain the correct query parameter key with value'
+  )
+  assert.equal(
+    queryParams.get('ln'),
+    'en',
+    'Should contain the correct query parameter key with value'
+  )
+  assert.end()
+})
+
+test('Get the hash from the URL', (assert) => {
+  const hash = '#/movies/action/the-avengers'
+  document.location.hash = hash
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object should contain a hash key with the correct location hash'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/action/the-avengers',
+    'The result object should contain a path key with the hash (stripped the # symbol)'
+  )
+
+  assert.end()
+})
+
+test('Get the hash from the URL and handle query params', (assert) => {
+  const hash = '#/movies/comedy/the-hangover?category=1&item=2'
+  document.location.hash = hash
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object should contain a hash key with the correct location hash without the query params'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/comedy/the-hangover',
+    'The result object should contain a path key with the hash (stripped the # symbol)'
+  )
+
+  assert.equal(
+    result.queryParams instanceof URLSearchParams,
+    true,
+    'The result object should contain a queryParams key with an URLSearchParams object'
+  )
+
+  assert.equal(
+    result.queryParams.get('category'),
+    '1',
+    'The result object should contain a queryParams key with the correct route query param values'
+  )
+
+  assert.equal(
+    result.queryParams.get('item'),
+    '2',
+    'The result object should contain a queryParams key with the correct route query param values'
+  )
+
+  assert.end()
+})
+
+test('Get route object from Match hash when navigating using to() method', (assert) => {
+  const hash = '/page1/subpage1'
+
+  to(hash)
+
+  const result = matchHash(hash, routes)
+
+  assert.equal(
+    result.path,
+    'page1/subpage1',
+    'The result object should contain a path key with path hash'
+  )
+  assert.equal(
+    Object.keys(result.params).length,
+    0,
+    'The results object should contain a params key with zero props'
+  )
+  assert.equal(
+    Object.keys(result.data).length,
+    0,
+    'The results object should contain a data key with zero props'
+  )
+  assert.equal(
+    Object.keys(result.options).length,
+    0,
+    'The results object should contain a options key with zero props'
+  )
+  assert.end()
+})
+
+test('Get route object from Match hash when navigating using to() method with options', (assert) => {
+  const hash = '/page1/subpage1'
+
+  to(hash, undefined, { keepAlive: true })
+
+  const result = matchHash(hash, routes)
+
+  assert.equal(
+    result.path,
+    'page1/subpage1',
+    'The result object should contain a path key with path hash'
+  )
+
+  assert.equal(
+    result.options.keepAlive,
+    true,
+    'The results object should contain a options key with keep alive as True'
+  )
+
+  assert.end()
+})
+
+test('Get Hash from URL when navigating using to() method', (assert) => {
+  const hash = '#/movies/action/avengers'
+
+  to(hash)
+
+  const result = getHash()
+
+  assert.equal(
+    result.hash,
+    hash,
+    'The result object key property should contain correct location hash'
+  )
+
+  assert.equal(
+    result.path,
+    '/movies/action/avengers',
+    'The result object should contain a path key with hash without #'
+  )
+
   assert.end()
 })