Reverse Zen Coding

Question

I'm writing a JavaScript unit test suite and one of the features I'd like to add is the ability to assert that a certain element and its children match a given HTML structure.

My first idea is to use jQuery (well, Sizzle) and ask that users write Zen Code statements to make assertions. My first question is "Has this been done before? Can I steal it?". If not, is there a specification printed anywhere for how to parse a Zen Code statement? Are there any shortcuts I could make, given the power of Sizzle?

Gilliette

https://mcmap.net/q/1852588/-generate-emmet-code-from-html-reverse-action – Elnoraelnore

Answer 1

I think you can get there with sizzle + http://api.jquery.com/size/.

The example Zen Code query is "div#page>div.logo+ul#navigation>li*5>a". Testing if a page has that same structure in jQuery would be as easy as $("div#page > div.logo + ul#navigation > li > a").size() == 5.

Unless your users are already familiar with Zen Code, tests with an API like assertSelects(selector, number_of_returned_items) should be cozier.

Ratify

That's good, but it breaks down on slightly complicated expressions like div>(ul>li)+p>a – Gilliette

nickf: I'm not suggesting css selectors can do everything zen code can do, only that they are sufficient for telling if a node and it's children have a certain structure. – Ratify