Adding Unit Test for JS and HTML

[Andrew-Chen-Wang]

Description

I'm looking to add sample unit tests for JS and HTML. This can be implemented if the compose file included npm and if we gave a sample test file and javascript code that demonstrates how to unit test.

Rationale

I've been implementing JS for a bit in my new website, and the amount of Ajax code I wrote became painstakingly difficult to maintain as new features evolved.

Use case(s) / visualization(s)

Implementing unit test allows for more test driven code to be implemented not only in the backend but also the frontend.

[Andrew-Chen-Wang]

I hate Javascript so much already but... I guess testing JS is still necessary. Some helpful article: https://levelup.gitconnected.com/how-to-unit-test-html-and-vanilla-javascript-without-a-ui-framework-c4c89c9f5e56

[Andrew-Chen-Wang]

A pure JS version would be using QUnit. Haven't tested this lib though. Django has some kind of support but requires node: https://docs.djangoproject.com/en/dev/internals/contributing/writing-code/unit-tests/#running-the-javascript-tests

Django's example: https://docs.djangoproject.com/en/dev/internals/contributing/writing-code/javascript/#testing-from-the-command-line

[browniebroke]

I'm not sure that such tests would be in scope of the project, we don't ship any of our own JS at the moment, just jQuery/Bootstrap. However, it would be nice to include a good default setup by default, if possible.

I don't know if there is a clear winner for running JS tests, I've used mocha in the past, in React land people use Jest, but I don't know if it's widely used otherwise. I didn't realise that Django uses QUint, never tried it before.

Another thing, which is more for the project maintenance aspect, is that we don't currently run the Gulp tasks in our CI. It would be a nice improvement to run them. We currently don't keep our JS dependencies up to date like we do for the Python ones, and upgrading requires manual testing. That's a separate issue though.

[Andrew-Chen-Wang]

Hm well something like tasks.py isn't particularly useful either, but it does have a test when use_celery is set to yes. I don't see why not, for best practice sake. Although, tbh, I've never used a JS testing framework extensively, but I got Swift flashbacks when I started creating a lot of DOM elements programmatically and wanted to cnotribute some more to cookiecutter-django with some new knowledge in testing stuff like this. So regarding Mocha vs QUnit, since I've never tried Mocha, I can't really say much. However, one problem that I do see arising is when people start asking "how about Django template tags" like if statements which are based on context variables; I believe Django only uses QUnit to test Javascript only functions, not really HTML integration; otherwise it's mostly Selenium. I believe no one's been able to accomplish that, right?

Regarding the Gulp tasks in the CI, maybe having a testing framework included can help? That way, there is one job with node installed specifically performing node only functionality.

For JQuery and Bootstrap dependencies, we can use GitHub actions on a 24 hour cron job. Use some kind of HTML parser (I think GitHub actions are most performant with their JS template which is great since then...) we can grab all src= from script tags and check cdnjs or whatever if the dependencies need to be updated.

[elcolie]

I don't use JS, HTML on Django side. Decouple thing through Django REST and do a testing there. JS is horrible For Frontend I use Flutter. So my life with testing is easy

[Andrew-Chen-Wang]

I don't particularly trust JS frameworks with Django if that's what you're referring to with DRF (running djangorestframework-simplejwt which is what a lot of JS frameworks use for "sessions" in Django hurts me a bit).

However, testing UI with these frontend frameworks is definitely much easier than vanilla JS.