bedrock

bedrock copied to clipboard

Description

We should lint HTML for any elements that have data attributes (example: data-cta-position) and check them against standards that we define (TBD)

This will prevent unnoticed errors and keep our google analytics consistent.

Tasks

• [ ] Define and document standards for data attributes for GTM.
• [ ] Write test to parse all HTML in bedrock to check data attributes, identify issues/discrepancies.
• [ ] Write helper function and accompanying test(s) to ensure data attribute standards are followed on CTAs.

This seems helpful: https://github.com/fb55/htmlparser2 Example: https://astexplorer.net/#/gist/df0cfffa6713760e1a877320e67d4d43/8009fb3d586a988b02e737ed3b4222d064fb07b1

@alexgibson was wondering if you had thoughts on where a file like this could live? afaik, it's not exactly a functional or unit test. Should this file be defined in karma.conf.js? Feel a little unsure how to proceed.

We already use a library called pyQuery (a python html parser with a jQuery like syntax) in some of our unit tests. Doing it in python means you can request a view, and then parse a response. That might be easier to do in circle CI vs trying to get JS to load a rendered HTML document (plus it’s not adding a new dependency).

Example test https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/tests/test_views.py#L555

We should probably also pick some key URLs to run this type of test on, as opposed to try and do it for every page on the site.

After some discussion, I believe that rather than this be a test it should be a helper function that has unit tests for CTAs to standardize data attribute values. Which avoids us scraping all pages repeatedly to verify.

This will become more defined once we finalize a set of rules for data attributes for google tag manager, which will be documented.

However, I do think that we should write a test to scrape all of bedrock once to fix any discrepancies initially and to discover any patterns of behavior that we may need to account for in the helper function.

(Updated issue title & description)

I am new to mozilla. Can I work on this?

Closing as we covered the base events for Firefox in https://github.com/mozilla/bedrock/issues/11321