The Wayback Machine - https://web.archive.org/web/20201212162943/https://github.com/vuejs/vue-test-utils/issues/1728
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setSelected() converts value of <select> to string #1728

Open
Nicolas-Yazzoom opened this issue Nov 6, 2020 · 2 comments
Open

setSelected() converts value of <select> to string #1728

Nicolas-Yazzoom opened this issue Nov 6, 2020 · 2 comments

Comments

@Nicolas-Yazzoom
Copy link

@Nicolas-Yazzoom Nicolas-Yazzoom commented Nov 6, 2020

setSelected() converts value of <select> option to string

Hi,

I'm creating unit tests for a filter component with jest en VTU. I've noticed that when selecting a option from a <select> its value is automatically converted to string, even if the value of the option selected is a number. This is not the behaviour observed in the browser when manually selecting an option.

Steps to reproduce

Here is a simplified version of my code:
Component:

<template>
    <!-- other stuff -->
    <select
      v-model="filterData.pageSize"
      data-test="pageSize"
    >
      <option :value="null" hidden selected>
        Select option
      </option>
      <option
        v-for="(option, index) in pageSizeList"
        :key="index"
        :value="option.value"
      >
        {{ option.value }}
      </option>
    </select>
    <!-- other stuff -->
</template>
<script>
export default {
  data() {
    return {
      filterData: {
        $search: '',
        scopes: null,
        state: null,
        pageSize: 10
      }
    }
  },
  computed: {
    pageSizeList() {
      return [ // Notice how the value is type NUMBER
        { value: 10 },
        { value: 25 },
        { value: 50 },
        { value: 75 },
        { value: 100 }
      ]
    }
  },
  watch: {
    filterData: {
      handler(newData) {
         //newData.pageSize is of type number in browser but string in unit test

          // ....
          this.applyFilter()
        }
      },
      deep: true
    }
  },
  methods: {
    applyFilter() {
        // calls store mutation
    }
  }
}
</script>

test:

  test('If filter is not debounced when changing select box after searchstring', async () => {
    const wrapper = mount(filter, options)
    // ...

    await wrapper
      .findAll('[data-test="pageSize"] option')
      .at(2)
      .setSelected()

    console.log(typeof wrapper.vm.filterData.pageSize) // string ('25' instead of 25)

    expect(
      mockedStoreMutation.mock.calls[0][1]
        .pageSize
    ).toBe(25)
  })

Expected behaviour

When selecting an option using setSelected the value's type should be left unchanged.

Actual behaviour

setSelected changes the type of the value of the option to string.

expect(received).toBe(expected) // Object.is equality

    Expected: 25
    Received: "25"

      138 |       mockedStoreMutation.mock.calls[0][1]
      139 |         .pageSize
    > 140 |     ).toBe(25)
          |       ^
      141 |   })

Possible Solution

Don't change the type or update the docs with examples of how to use setValue and setSelected with non string values.

@Nicolas-Yazzoom
Copy link
Author

@Nicolas-Yazzoom Nicolas-Yazzoom commented Nov 6, 2020

I've found this unanswered question on stackoverflow of someone having the same issue with setValue: https://stackoverflow.com/questions/60488989/set-integer-value-of-a-v-select-element-using-vue-test-utils

@afontcu
Copy link
Member

@afontcu afontcu commented Dec 3, 2020

Hi! I think this is expected behavior, because HTMLSelectElement.value always returns a string.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.