search

SortableJS / Vue.Draggable

Vue drag-and-drop component based on Sortable.js
https://sortablejs.github.io/Vue.Draggable/
MIT License
20.14k stars 2.9k forks source link

Testing with Vue Test Utils #614

Open katherine-boost opened 5 years ago

katherine-boost commented 5 years ago

Step by step scenario

When testing (with Vue Test Utils) MyComponent.vue, a component that uses Vue.Draggable, I was getting the persistent error TypeError: parseInt is not a function,

TypeError: parseInt is not a function
        at new Sortable (/path/to/node_modules/sortablejs/Sortable.js:540:25)
        at VueComponent.options (/path/to/node_modules/vuedraggable/dist/webpack:/vuedraggable/src/vuedraggable.js:215:55)

Although the Vue.Draggable component works fine for the user, in the test suite, window.parseInt was undefined.

Actual Solution

I checked your own specs and saw the way that you're mocking out Sortable, so I've done the same in my tests (and now working!)

import Sortable from 'sortablejs';
jest.genMockFromModule('sortablejs');
jest.mock('sortablejs');
const SortableFake = {
  destroy: jest.fn(),
  option: jest.fn()
};
Sortable.mockImplementation(() => SortableFake);

import MyComponent from 'components/MyComponent.vue'

Expected Solution

There's no mention of testing in the README - I think it could be valuable to include a short section noting that you'll need to mock out Sortable in your component spec.
I can probably write this up if you agree that it's useful.

Cheers!

David-Desmaisons commented 5 years ago

@katherine-boost Thanks for the feedback and the proposal. I am thinking as the README.md is already quite big maybe creating a dedicated .md file under the documentation folder and adding a link from the README will be a good solution. Out-of curisoty, did you try to use a mock for the draggable component itself? If so why was it not a good solution?

katherine-boost commented 5 years ago

FWIW, I don't mind long READMEs - your call though.

I wasn't testing the Draggable component itself - it was used within a component I was testing.
So I'm not sure about mocking out the draggable component in that circumstance. Disclaimer, I'm pretty inexperienced with Vue testing and indeed Vue itself, so could be missing the obvious.

titantwentyone commented 4 years ago

This is an old issue but I am also lookiing to test my own components which employ Vue Draggable. Would be great to have a guide on how this can be done. Happy to help with this if needed. Again, I'm not an expert when it comes to testing with Vue but willing to help.