How to use Alsatian with vue sfc?

[georgyfarniev]

Hello. First of all, thank you for finally creating adequate testing framework for typescript. But how can I make setup for testing vue single file components?

[jamesadarich]

Hey there,

Thanks for your kind words :) unfortunately I haven't had much experience with Vue but I'd be happy to help.

If you could give me some examples of things you'd like to test we can discuss what options there could be :)

[georgyfarniev]

@jamesadarich thank you for lightning fast response. There is an official vue test example with mocha:
https://github.com/vuejs/vue-test-utils-mocha-webpack-example. You can find more examples and information about vue test utils here:
https://github.com/vuejs/vue-test-utils

I would love to use Alsatian for my fronted as well as I do with backend parts

[jamesadarich]

Cool, thanks for this. I've had a quick look into this and looks like there's some sort of deprecation notice on the mocha example you sent me recommending V3 of the Vue CLI instead. Would you prefer to be looking at this recommending?

[georgyfarniev]

Sorry @jamesadarich I gave you outdated information. Let me take a look what vue cli 3 can offer now for unit testing

UPD: looks like it works via cli-plugin-unit-mocha so we probably need to implement something similar, but for alsatian. Unfortunately, I'm not very familiar with node testing framework at all, so maybe you can give me your opinion about possibility of this compared to mocha.

[jamesadarich]

No worries, I'll take a look into this soon to determine what benefits this brings and how it should be implemented :)

[georgyfarniev]

@jamesadarich is there any updates on this? Also, how can I contact you personally?

[jamesadarich]

Hey @georgyfarniev sorry about the slow reply on this one. Trying to just get the last bits of v3 over the line to make sure it doesn't conflict with any suggestions made here. Happy to discuss further though.

With respect to contact I like to keep as much on the repo as possible for transparency but is it something that's more suited to another mode of communication e.g. email?

[georgyfarniev]

@jamesadarich sorry for late response also. I just wanted to ask how things going on alsatian. Happy to hear that it's progressing. We are startup and we are interested in using it for now, and contribute in, hopefully, near future.

[jamesadarich]

@georgyfarniev no problem. If you need to contact me directly you can use the email address in my profile :) otherwise I'll try and keep this up to date as I can. If you are looking to contribute I have some small pieces ready to go for 3.0.0 let me know if you'd like to and I'll assign you some stuff

[jamesadarich]

PS send me a link, I'd like to have a peek at the stuff you guys are up to 👍

[georgyfarniev]

@jamesadarich done

[jamesadarich]

Cool, so I've had a bit of time to do a bit of reading. But to be honest I'm not sure I get it at the moment (probably because I've never used Vue before).

The approaches I take to testing are:

• unit testing - in which case I'm only concerned with an individual function or class behaviour e.g. input/output for example
  Expect(render(4)).toBe(<div>4</div>);

• end to end testing - using something like selenium to test user focused actions e.g. filling in a form and submitting it

In both cases for me I wouldn't necessarily even care about the frameworks that are involved and I like to avoid testing these because I'm only really concerned with testing my code. So I'd like to understand the following

1. Do you test things differently? What's your approach?

2. What is the value of a plugin over and above just unit testing the functions you create?

[georgyfarniev]

@jamesadarich thank you for your detailed response. But the biggest problem with testing of vue using alsatian is loading of the tests itself.

For example, it's common to import *.vue sfc component directly to unit test *.spec.ts file. Currently, we don't have unit tests for frontend side and I don't have any experience of testing bundles wrapped by webpack (under the hood of vue-cli), that's why I asked how this could be accomplished.

In example that I found, vue sfc file are imported directly, and, as I understand, handled by test launcher: https://github.com/alexjoverm/vue-testing-series/blob/master/test/Message.test.js

Note that Message is a vue sfc file. Also, there's preprocessor for jest: https://github.com/vire/jest-vue-preprocessor. So if we figure out how to implement something similar, maybe I will have time to implement it. Also I apologize for my broken English.

[jamesadarich]

OK, so I don't think not having a preprocessor would stop you from writing tests but might be more useful and you can add some more Vue specific stuff.

If you've got some time I'd be happy to help guide you as to implementing this. There's a simple example of how to call Alsatian from node at https://github.com/alsatian-test/alsatian/wiki/running-tests#nodejs

Hopefully that should make some sense. Feel free to ask more specific questions here if you have trouble implementing it :)

[hisuwh]

@georgyfarniev did you ever make any progress with this?

[georgyfarniev]

Hi @hisuwh, I switched to jest already...