Vue Router query params test

<!DOCTYPE html>
<html>

  <head>
    <link data-require="jasmine@*" data-semver="2.4.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.css" />
    <script data-require="jasmine@*" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
    <script data-require="jasmine@*" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
    <script data-require="jasmine@*" data-semver="2.4.1" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
    <script src="https://unpkg.com/vue@2.6.8"></script>
    <script src="https://unpkg.com/vue-router@3.0.2"></script>
    <script src="script.js"></script>
  </head>

  <body>
  </body>

</html>

describe('undefined query params', () => {
  var router
  
  beforeEach(() => {
    router = new VueRouter()
    new Vue({ router: router })
  })

  it('should work', () => {
    router.push({ query: { foo: undefined } })
    expect(router.app.$route.query).toEqual({ foo: undefined })
    expect(location.hash).toEqual('#/')
  })

  it('should work consistently', () => {
    router.push({ query: { bar: 'bar' } })
    router.push({ query: { foo: undefined } })
    expect(router.app.$route.query).toEqual({ foo: undefined })
    expect(location.hash).toEqual('#/')
  })

  it('should support the example use case', () => {
    router.push({ query: { q: 'foo', color: 'bar' } })
    router.push({ query: { q: 'foo', offset: undefined } })
    expect(router.app.$route.query).toEqual({ q: 'foo', offset: undefined })
    expect(location.hash).toEqual('#/?q=foo')
  })
})

This is a demonstration of a bug in vue-router 3.0.2.

Passing an undefined query param can prevent the url from updating.

I'm doing search filtering using query params. Every time I change a filter, I
add/remove/modify the appropriate param, and reset my pagination by setting
an offset param to undefined. In my app, the combination of removing a param
and offset not being set to begin with, causes the route not to update.

1. Start with `/?q=foo&color=bar`.
2. `this.$router.push({query: {q: 'foo', offset: undefined}})`
3. I expect the url to change to `/?q=foo`, but it does not change at all

This issue is easy enough to work around, but it took me a while to figure out
what was going on.