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

Want to use this to make a test explorer for Karma( specifically for working with angular) #1

Open
Raagh opened this Issue Dec 18, 2018 · 17 comments

Comments

Projects
None yet
4 participants
@Raagh
Copy link

Raagh commented Dec 18, 2018

Hey man, first I wanna say that I really like your work. Really useful. I was thinking of making an implementation for angular using this adapter. Could you give me some pointers or where should I start looking for implementing loading the tests, running them etc? Do you have a common approach you used in your current implementations for loading this tests and making the implementation of the different adapters?.

I am definitely not an expert but I am pretty sure that someone is suffering for not having this as much as me.

Thanks

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Dec 18, 2018

Great! You're definitely not the only one interested in this - have a look at hbenl/vscode-test-explorer#19, in particular this comment where I summarize my experience with different approaches for loading the tests.
In this issue, some other users also showed interest in collaborating on such an adapter, so you may want to contact them.

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Dec 19, 2018

Thanks a lot man, I started yesterday but without any progress really. Still trying to figure out how to discover the tests. Unfortunately karma documentation is not as good as jasmine and also the tipings does not include things like the reporter so I will spend some time trying to make it work with typescript and then make it work for the problem at hand. This morning I already wake up with some ideas so lets see go this goes ahah. 👍

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Dec 25, 2018

Hey so I been doing some progress. still not being able to discover the tests but definitely getting a feeling of how this should be done. I have one question and maybe you could help me.

how can I require a module that should be installed in the project? in my case I wanna require from the adapter the angular cli that should be installed in project open in vscode. is this possible or the adapter should have a copy of the module?

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Dec 26, 2018

how can I require a module that should be installed in the project?

require('/absolute/path/to/project/node_modules/@angular/cli') should work.

is this possible or the adapter should have a copy of the module?

In my mocha and jasmine adapters I include a copy of mocha/jasmine in the extension. However, there is also a configuration option to use mocha/jasmine from any other (user-specified) path - I only include mocha/jasmine in the extension so that it can work even without any configuration by the user. So both approaches are possible, you should start with whatever is easier for you.

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Jan 16, 2019

Hey man, first of all just wanted to say thanks for all your help and code, definitely helped me a lot. Its been some hard weeks and there is ton to be done yet but I am happy to say that I got some parts working.

screenshot 2019-01-16 at 21 55 04

I am able to load the tests without running them( had to use some serious hacks to do this :( ) and I am able to run all the tests togethere, still haven't mapped the results to show them in the test explorer, also need to figure out how to run tests individually which is giving me a headache since karma public API is useless.

Still the code needs tons of improvements, now that I know its possible I will start creating unit tests and start refactoring while I continue with a fully working RunTests feature.

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Jan 20, 2019

Great! A lot of people are asking how to run their angular tests, so your adapter will be much appreciated!

I am able to load the tests without running them( had to use some serious hacks to do this :( )

Exactly my experience: detecting (i.e. loading) the tests always seems to be the most difficult part with javascript testing frameworks.

need to figure out how to run tests individually

Jasmine has an option to select the tests using a regular expression, I think Karma should have a similar option. If you use this, don't forget to escape the names of the tests (in case they contain characters that are used in regular expressions) and concatenate them with |, like this.

@RichiCoder1

This comment has been minimized.

Copy link

RichiCoder1 commented Jan 30, 2019

Howdy @Raagh! How goes progress? Is the code available to contibute too? Would love to help with refinement and tests

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Jan 30, 2019

Hey @RichiCoder1 thanks for showing some interest. The progress is good. I am able to load all the tests without running them, and run all the tests and get the results in the explorer. Still not able to run individual tests or groups of tests but I dont think I am that far away from that. Currently I am on holidays so I am not working on it or have my computer to upload the source code. I will do it in a week when I come home and continue with this. I will post the repository here and please feel free to contribute. I will make also a guide on posting pull request and some project concerns. Also maybe create an issue I have in the project where after a few runs karma stops listening on the port for whatever reason. 👍

@supersinex

This comment has been minimized.

Copy link

supersinex commented Feb 8, 2019

This would make my life! @Raagh you're a beast. Thanks for helping us Angular folks out!

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Feb 11, 2019

@RichiCoder1 @supersinex here is the repository. https://github.com/Raagh/angular-test-explorer .

I arrived today so its still missing some of the things I promised. I will try to do it today( I cannot promise it as I am suffering from a massive jetlag) I will create a few tasks of the things we re missing to complete a basic implementation. and also create a few issues I have with the current implementation.

In the meantime please take a look at the code and if you have any doubts please feel free to ask in the repository :).

Again thanks for all the comments, it really gave me a push to continue with this and get it working for all of us. Holidays are over, I will get back to work 💯 %

@supersinex

This comment has been minimized.

Copy link

supersinex commented Feb 13, 2019

@Raagh Awesome! If there's some way I can contribute, let me know 👍

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Feb 14, 2019

I am having this issue where after loading the tests , I try to run them and the first 2 times it works okey but on the thrid one it stops abruptly and then if I try again karma responds with "There is no server listening on port 9876".

I created a comment in the webstorm community ( webstorm currently has a plugin that has some of the functionality I want to implement and the owner of the plugin has been responding) with a better explanation of the issue.

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360002754120-IDEA-karma-js-plugin-help-Building-Angular-test-explorer-for-vscode?flash_digest=b1efc380b11c8a78b46af4bb075ab7696361443c&page=1

If someone wants to clone my repo, reproduce it and help me fix it, it would be awesome. please feel free to contact me at any time to my email regarding this project.

I will keep trying. thanks guys. @supersinex @RichiCoder1 @mattmeye @sumigoma @LuisReinoso @avavricek

the branch I am currently working on is feature/run-tests . please dont judge me by the quality of my code I am still figuring this out ahaha

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Feb 15, 2019

I tried to run your code but I get lots of compilation errors. For example, in test-explorer-karma.conf.ts you import Reporter from "karma", but @types/karma doesn't export a Reporter interface...
Are you sure that you pushed all necessary commits?

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Feb 15, 2019

@hbenl sorry just noticed that my gitignore was excluding the folder for typings which includes the Reporter interface.

You re still gonna see some errors on the typescript compiler but none of them prevent execution. they re just unused code and missing type definitions.

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Feb 17, 2019

@Raagh I've forked your repo and pushed some commits to a new branch called contrib. I had to update the dependencies because @angular-devkit/build-angular was pulling in an old version of webpack which didn't work with the configuration that a recent version of ng-cli created...

@Raagh

This comment has been minimized.

Copy link
Author

Raagh commented Feb 19, 2019

@hbenl I just noticed that the update in the dependencies broke the build. why you had to update them to be able to run? I am getting an error in @angular-devkit/build-angular probably related to the faulty webpack version you mentioned but I am using the latest branch. I am currently on a fresh install on windows. I am gonna try it later on my Mac but deleting node_modules and everything and starting again.

error: Cannot read property 'scripts' of undefined
TypeError: Cannot read property 'scripts' of undefined
at init (c:\Users\Patricio\Documents\GitHub\angular-test-explorer\node_modules@angular-devkit\build-angular\src\angular-cli-files\plugins\packages\angular_devkit\build_angular\src\angular-cli-files\plugins\karma.ts:81:25)

EDIT: I think was related to the angular project I am using as example. Tried with a new angular cli project and it works fine. I probably need to figure out how to use all the modules from the user to make sure it works on every project.

@hbenl

This comment has been minimized.

Copy link
Owner

hbenl commented Feb 19, 2019

The error I was getting was something about the webpack config containing a property futureEmitAssets that webpack didn't know about and so it refused to work with that config. The reason was that the adapter used the globally installed version of the ng command (which was a very recent version) but a locally installed (in the adapter's node_modules) version of webpack which was too old (the futureEmitAssets property was added to webpack just a few weeks ago).
So I think you're right: the adapter should use the user's version of ng-cli and webpack (and I guess karma as well).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.