Linting HTML output of KS macros

I was looking at https://github.com/mdn/kumascript/pull/771, which was a fix for a bug introduced in https://github.com/mdn/kumascript/pull/755, which broke Add-on sidebars by making the macro emit scrambled HTML.

If we could lint the HTML output of KS macros, we could make this whole class of problems less likely to happen. It would be great to do this once for all macros, but I’d be happy enough to have a test for each macro that linted the output explicitly. It seems like this would be doable if there was a package we could use in the KS test environment, but I don’t know of any.

Does this sound like a good idea? Does anyone have any good suggestions for tools we could use?

2 Likes

I came across this, but it wasn’t updated in a year and is still in the 0.x SemVer version range:

https://www.npmjs.com/package/ejs-lint

I think this is a pretty good idea. It would be nice if it could be automatically done as part of the commit process, sort of like how interactive examples go through an automated linting or testing cycle during the pre-commit stage.

1 Like

I came across this [ejs-lint]

Thanks for the pointer, but that wasn’t my suggestion. We do already lint KS macros, and use ejs-lint to do so. But KS macros generally work by building some HTML, which then gets inserted into the document. If we were able to test that the HTML is well-formed, we might be able to find bugs like https://github.com/mdn/kumascript/issues/769.

The nearest I found was https://github.com/validator/validator, but it seems like it would be tricky to get that working in our environment.

1 Like

The first step is to write an automated test for the Add-on sidebar. You can then later add a linting step for the test output, if you think it is still needed.

1 Like

I’d be happy to put some time into helping find a solution for this.

The nearest I found was https://github.com/validator/validator, but it seems like it would be tricky to get that working in our environment.

There’s a downloadable standalone vnu.jar distribution of it that can be called from the command line:

https://validator.github.io/validator/#usage

There’s also a grunt plugin, a gulp plugin, a python pip package, and a Docker file.

Alternatively, we could just use the HTTP (REST) API that Web-based instances of it expose — either using https://checker.html5.org/ or https://validator.w3.org/nu/. (One downside of the https://validator.w3.org/nu/ instance is that does rate limiting; if it receives more than a certain number of request per minute from the same IP range, it temporarily blocks further requests from that IP range for some period of time.)

1 Like

I was aware actually that the validator is yours, and I did consider asking you about it :). We can use npm modules in KumaScript tests, and it looks like there is an npm distribution of it (?) (https://www.npmjs.com/package/vnu-jar)

I’ll try to dig into this when I get some time, but will certainly ask for help if I get stuck :).

2 Likes

Yeah, that’s essentially just a distribution of the vnu.jar file with a convenience wrapper around it. To use it, it’d b necessary in your script to use exec(java -jar …) or such to run the jar, and write your own code for handling the output (or just send it to stdout/stderr).

https://github.com/validator/validator/blob/master/npm.md#example has a simple example.

@rjohnson has filed this https://github.com/mdn/kumascript/pull/1078 - I’m so excited to get this testing capability. Thanks for creating it @sideshowbarker and for integrating it @rjohnson !

1 Like

I’m very glad to see the vnu.jar distribution of the HTML checker being put to good use for development of the MDN backend. :grinning:

3 Likes