How to test-drive vanilla JS programs :D

[bouwe77]

Would this be a web application, so JS + HTML, or just JS only, for example a library?

[RichStone]

It’s actually a silly js-web question ;))

Best Rich

---

Rich Steinmetz

richstone.io linkedin phone: +34 603 214 534 On 10 Nov 2022, 22:52 +0100, Bouwe K. Westerdijk @.***>, wrote:

Would this be a web application, so JS + HTML, or just JS only, for example a library? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

[bouwe77]

Interesting, I guess Testing Library could be a nice one here, but let's see.

[RichStone]

Interesting, I guess Testing Library could be a nice one here, but let's see.

you'd need npm for that right?

[bouwe77]

Guess so... 🤔 But such a tool does not necessarily need to be a goal.

Can you telll a bit more about the dev environment and tools you want and don't want to use for this?

[RichStone]

I'm imagining a total beginner, just getting familiar with JS, HTML, and CSS. No NPM and Co. They want to write some VanillaJS and finish a couple of first small projects. Have you ever seen VanillaJS people write tests? :))

[bouwe77]

Interesting 🤔

I think almost no one would do this, because there are many frameworks and libraries (FLs) that makes it easier to get the job done, but also get you jobs 😏

However, it's interesting and important to (at some point) learn the basics, so you understand (and appreciate) what these FLs do for you.

OK, having said that, for whatever reason, we want to build a vanilla web app and test drive it, without tools.

Do you want to do browser UI tests or unit tests of only specific parts?

I would propose to do browser tests only, so we can experiment and refactor all of the things, without breaking the tests (see my other issue about not testing implementation details)

If we will not use NPM, etc., what are your thoughts on how to test it? And why is not having these tools important?

Anyway, I guess we could either use an existing (desktop/web/cli) tool which let's you write tests, which is not directly part of the app, or it could be a vanilla script we build ourselves, that opens the browser and runs the tests.

So we build a test runner, and tests, interesting... 😃

But let me know if I am even close to what you have in mind 😄

[RichStone]

Yes, you are 😁

Well, 20 years ago NPM didn't exist, what if you wanted to test drive your app 20 years ago? :D

And you can build nice things with just JS, HTML, and CSS, focusing on the core technologies without relying on backends, NPMs and lots of external deps (in theory)...

This guy has awesome content about JS:

https://vanillajstoolkit.com/

But he also told me that testing and TDD is just not a thing in vJS space back when I asked some years ago :D

[RichStone]

Haha, just landed in my podcast inbox:

https://podcasts.apple.com/es/podcast/codenewbie/id919219256?i=1000585609373

[bouwe77]

Interesting!

[bouwe77]

Where does your fascination (if I may call it that 😜) come from? For me it's only interesting from an educational standpoint, but is it more than that for you? Definitely interesting though!

[RichStone]

This is something that I tried when I was young :D

Now I realize that optimally, IMHO, you'd keep the frontend just for representational stuff, and keep most of the "logic" in the backend. But still, on those newcomers learning VanillaJS don't get a chance to practice TDD and testing, which is kind of a pity, but it's like this by design...

[bouwe77]

Now it gets interesting 😏

The streaming app contains a lot of logic, so what could be nice to discuss in an episode is when an app should (or should not) have a lot of logic, and also if/when it needs testing.

And the answer to this is it can have either an architectural or a functional reason, but also both of course 😃

[bouwe77]

In other words, I don't agree with your last comment 😜

[RichStone]

Now it gets interesting 😏

The streaming app contains a lot of logic, so what could be nice to discuss in an episode is when an app should (or should not) have a lot of logic, and also if/when it needs testing.

And the answer to this is it can have either an architectural or a functional reason, but also both of course 😃

Yes, I don't agree with it either, because it depends on what your frontend needs to do. But on average, optimally, for standard web apps, you could shoot for less logic in the presentational layer and more in the backend. That's different in games and highly interactive apps I guess...

[bouwe77]

Yes, and also depending on whether the frontend is physically separated from the backend, for example Rails + React, or not, for example just Rails, or Remix, or whatever.

[bouwe77]

If you want to test drive the old fashioned way, do you then also not expect the test suite to be part of a pipeline of some sort?

In other words, are tests just for building test driven, or also for automating/integrating the tests?

[RichStone]

If you want to test drive the old fashioned way, do you then also not expect the test suite to be part of a pipeline of some sort?

In other words, are tests just for building test driven, or also for automating/integrating the tests?

That's the thing. Let's assume you have a purely frontendy game, just HTML, CSS, and JS files.

It probably has some complex algorithms that'd be nice to test. But without NPM or a backend of any sort, it seems like the only option would be to have dedicated test files that could be run from a dedicated test HTML file or from the console (or from another automation of some sort as you mention "pipelines") 😁 That's all super hacky and feels wrong.

Once you get started with NPM and build tools, then you can do whatever you want of course. But people new to coding and self learners, don't touch backends and build tools sometimes for months, so they lose out a bit on testing and TDD in this environment of testless vanilla js 🙈

[bouwe77]

OK, I guess we can come up with a script to use right away, to start test driving, which later, with minimal adjustments xould be migrated into some form of automation once they are up for it.

I have some ideas for a quick POC, to check if it's possible, the right direction and feasible to build or use in an episode... 🤔

[RichStone]

OK, I guess we can come up with a script to use right away, to start test driving, which later, with minimal adjustments xould be migrated into some form of automation once they are up for it.

I have some ideas for a quick POC, to check if it's possible, the right direction and feasible to build or use in an episode... 🤔

whoa, nice!

[bouwe77]

On a second thought, it might be better (and more feasible) we'd use a tool that requires no coding 🤔 For example a tool that records how you interact with an app, and then repeats that automated.

Writing tests with code just requires installing stuff through NPM etc. Also fine of course, but if you want to focus on building an app or website perhaps a no-code testing tool can be interesting.

Also because I am curious it's something I'd use in a real (WG) project...