Skip to content

Instantly share code, notes, and snippets.

@antruongnguyen

antruongnguyen/Code coverage.md

Forked from mems/Code coverage.md
Created October 26, 2020 03:36
Show Gist options
  • Save antruongnguyen/f7cc548d08a205b4059f76d8d29f314f to your computer and use it in GitHub Desktop.
Save antruongnguyen/f7cc548d08a205b4059f76d8d29f314f to your computer and use it in GitHub Desktop.
Download ZIP
Web frontend code coverage
Raw
Code coverage.md

Every line of code we write today will end up as someone’s legacy code.

Everything that you write is going to disappears some day

RUM Code coverage, chose a 1h timeframe (per day) where 1% traffic run that the test

JS coverage

FES javascript instrimentation visualization

Create babel plugin that inject in code with visitors for functions and control flow (loops and switchs): Function, IfStatement, (Terminatorless, SwitchCase, Loop, TryStatement)

Or as standalone tool:

Other:

CSS coverage

Aka unused CSS RUM

Can't support easily CSSOM changes

Parse + generate result client side (use webworker):

  1. get CSSOM (for external and inlined stylesheets) from DOM (see step 4)
  2. download CSS + map
  3. parse stylesheet to CSSOM: ruleset, selectors, values, etc. (for results from step 1 and 2)
  4. find which rules/properties has been ignored by the browser (compare results from step 3)
  5. apply it to a virtual DOM
  6. apply document updates to the virtual DOM based on MutationObserver (for added or removed external and inlined style sheets too, see steps 1, 2 and 3)
  7. apply source map
  8. generate LCOV report + send to server (navigator.sendBeacon()) with generated version (git commit hash)

Server side:

  1. merge reports https://github.com/mweibel/lcov-result-merger https://gist.github.com/xseignard/5420661
  2. apply later changes (commits diffs, in that case, the final report should used carefully)

Based on Webdev tools code (Firefox / Chrome):

An other method to detect ruleset usage is to add a rarely used property with a custom value and get style with void selector (could be enabled and disabled synchronously): voice-family: "my custom value" (could be also font-family, content, quotes but could add layout impact). This method could be hard to implement if the stylesheet use attribute selectors (should detect which element or its parent has attribute change and list which attribute changes to "listen") It could also use a tracker image with some properties (CSS background or content property)) to direct tracking element but generate too much traffic (each document elements and pseudo element call a beacon).

Similar tools

Code coverage in IDE

In Intellij IDEA/WebStorm/PHPStorm:

In Visual Studio Code:

In Visual Studio:

Libs and tools

LCOV

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment