Testing a Javascript app with Elixir-Wallaby

[plpullen]

Hello all - I'm building tests for an app/site at work and doing it with elixir-wallaby. However, the app/site is already done and written in JS/Vue. Unfortunately, I can't find any information out there about this sort of approach.

It seems best to treat elixir-wallaby like I'm building a web scraper rather than a testing suite. So - I would bring the url I'm testing into the Application, maybe with HTTPoison, and write all my 'tests' in the /lib folder rather than /test. Any thoughts? Does that seem like a good way to solve the problem?

[mhanberg]

Hi!

This is an interesting use case of Wallaby. I think what i would do is create a new project with mix new test_suite --sup, and install Wallaby.

There are a couple of approaches we could take here:

You would write your Wallaby tests as normal, but in your Application, you would start a process that starts a Port that starts your JavaScript application. This assumes you are running something like npm run start that starts up a JS web server that serves your JS app

If your JS application has a non-deterministic start time, you'll probably want a helper that can hit an endpoint or a page that can signal to wallaby that it is ready and the tests can start.

Another way to approach it would be to compile your JS app (similar to how the docs describe), and then start a Plug server and point it to your apps entry point (probably an index.html somwhere) using Plug.Static

---

I think the second approach is probably the easiest. If this doesn't make sense, I would be happy to write you up an example repo that demonstrates this approach.

[plpullen]

@mhanberg If it isn't to much trouble, seeing an example repo would be immensely helpful! We do have a separate production version whose url I may use for the tests too. Thank you for the ideas!

[mhanberg]

I can work in it this evening.

[mhanberg]

Here is a link to an example repository with commit by commit explanations on how you might setup up a new app to build and test a JS application.

https://github.com/mhanberg/wallaby_plug_demo

[plpullen]

Thank you! I'm so incredibly grateful!

[plpullen]

@mhanberg So it turned out that this approach doesn't work in my situation. There's a separate backend that is required for the SPA to work so the static index.html page returned by that half of the code base is only part of the puzzle.

I'm think I'm back to the drawing board and wondering about setting up a suite of tests outside of the code base that I can point to a url, whether it's a local host or the staging url on an external server.

I found a breadcrumb here: https://elixirforum.com/t/wallaby-vs-hound/443/5#:~:text=support%20testing%20of-,SPAs,-%3F
It sounds like what I'm trying to do - but its not common enough for there to be examples.

[mhanberg]

I can take a crack at an example of this, this weekend if time allows.

I haven't looked at that link but I think we could get it working fairly easily.

[mhanberg]

Here is an example of starting an arbitrary process, waiting for it to be ready (this assumes it's a web server, which I think is a safe assumption in this case), and then runs tests on it.

https://github.com/mhanberg/wallaby_external_app_demo

[plpullen]

Thanks for the second demo! Seems like this might work if the separate code bases are all put in a Docker container that the test_helper would then start up.

I'm still confused on a point - I also want to test the SPA where it is at an external url, not on my machine. Can wallaby be used to do that? I'm starting to get the sense that all these testing tools -wallaby, selenium, etc - require running on a localhost address. Am I misunderstanding this?

[mhanberg]

If you want to test a public website, then there all you need to do is set the base_url to the website's URL and you're good to go.

[plpullen]

@mhanberg thanks - yeah - i figured that out today finally. Thanks for your help with all this. The intermingling of technologies has had me confused, but this has been a great learning process. Thanks again!

[mhanberg]

No worries, feel free to blog or tweet or open a show & tell GitHub Discussion post to share what you've accomplished with this if you'd like, I'm sure others would appreciate it!

Take care!