V-calendar: How to unit test the components with V-Calendar

[doutatsu]

I was expecting to be able to simply add Jest tests out of the box, but using both ShallowMount and mount didn't work, due to Unknown custom element: <v-date-picker>. I assumed this was due to V-Calendar being imported as a plugin, with global accessors for these. So I tried using createLocalVue from vue-test-utils and then using the Plugin that way. That resulted in never-ending list of errors...

So I've decided to check how v-calendar is tested internally and realised its not at all 😅 @nathanreyes tests are just commented out and abandoned.

So I guess I have two questions:

1. When and will be v-calendar tested internally? As seen there are no tests, but confidence in this utility quickly decreased.
2. Anybody got tips on making Jest tests work with v-calendar? I assume I have to go and create a manual Moack around it, but that's a bit of a pain tbh

[R3viewer]

Yes, I have the same Issue with Mocha-Chai. When I use the v-calendar module in a LocalVue get the error
Error in mounted hook: "TypeError: window.matchMedia is not a function"

And this error is send for all others components with an input.

[doutatsu]

To update the original actually, Unknown custom element: <v-date-picker> is not an error, but a Vue warning. My tests currently work, but I haven't tried to actually interact with the component, so I assume I wouldn't be able to do that. So would be good to get some advice on how to address this, before I get the need to test the interactivity

[nathanreyes]

@doutatsu Hi Maksim. First off, thanks for your input. Yes you are totally correct, the testing situation for this plugin is very much lacking and something I plan to address. The reasons for this are two-fold:

• This is the first open-source project I've ever done, so I really didn't know what I was getting myself into 😨 and my experience with vue-testing-utils is very limited. It was also not very stable when I started this project so when I started looking into it it was a very frustrating experience to say the least.
• I started this plugin not thinking many people would use it but as it has grown, unfortunately my personal free time has also decreased significantly so I've only been adding features to meet my personal project needs.

All that to say, your input is very welcome. The limited tests I have written are mainly for date matching so I first need to make sure they aren't in a broken state. I'm currently working on getting the accessibility up to speed, but I've decided to lock the feature-set until proper tests are implemented and I plant to make this the priority, starting with your PR. Also, focusing on the @next branch is preferred.

[nathanreyes]

I just pushed a feature/test-suite branch that I would like to periodically merge into @next until v1 is out of beta. Feel free to PR from that branch into @next with any new test you may be able to provide.

I started fixing a lot of the tests and added a few for locales. I plan on working on this extensively for the next couple of weeks.

[doutatsu]

Thanks, @nathanreyes, I'll do that then!

[d-koppenhagen]

Yes, I have the same Issue with Mocha-Chai. When I use the v-calendar module in a LocalVue get the error
Error in mounted hook: "TypeError: window.matchMedia is not a function"

And this error is send for all others components with an input.

@guperez have you found any workaround to prevent appearing this error? As event is I use shallowMount, the VCalender throws this error in my environment (I use also Mocha and Chai).

[d-koppenhagen]

Okay, I found a workaround for my tests, that will help to not stop tests working:

window.matchMedia = window.matchMedia || function() {
  return {
    matches : false,
    addListener : function() {},
    removeListener: function() {}
  };
};

You can implement it in your test suite until this issue has been fixed.

[ThomasRalee]

Any updates on this?

[somanypuppies]

Expanding on what @d-koppenhagen said, jest's suggested workaround:
https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

Adding a mock for window.matchMedia and registering v-calendar as a plugin with the localVue instance got rid of the warnings for me.

import Vue from 'vue';
import VCalendar from 'v-calendar';

const localVue = createLocalVue();
localVue.use(VCalendar);