code-pushup / cli

A CLI to run all kinds of code quality measurements to align your team with company goals

https://code-pushup.dev

MIT License

255 stars 14 forks source link

refactor(plugin-lighthouse): format audit value #794

Closed hanna-skryl closed 3 months ago

hanna-skryl commented 3 months ago

Closes #774

[x] Update value and displayValue formatting and test the change
[x] Refactor toAuditOutputs by extracting base audit output formatting and details processing into functions

github-actions[bot] commented 3 months ago

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared target commit 605d384bc4bc2e6b5df28accf4025900c21726e4 with source commit da41f1873bd38b5cef4eac659b03747372b2aae9.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category	⭐ Previous score	⭐ Current score	🔄 Score change
Performance	🟡 51	🟡 54
Code coverage	🟡 90	🟡 90
Custom checks	🟡 67	🟡 67	–
Security	🟢 100	🟢 100	–
Updates	🟡 78	🟡 78	–
Accessibility	🟢 91	🟢 91	–
Best Practices	🟢 100	🟢 100	–
SEO	🟡 61	🟡 61	–
Bug prevention	🟢 100	🟢 100	–
Code style	🟢 99	🟢 99	–

🗃️ Groups

👍 2 groups improved

| 🔌 Plugin | 🗃️ Group | ⭐ Previous score | ⭐ Current score | 🔄 Score change | | :--------------------------------------------------------------------------- | :-------------------- | :--------------: | :-------------: | :--------------------------------------------------------------: | | Lighthouse | Performance | 🟡 51 | 🟡 **54** | ![↑ +2.9](https://img.shields.io/badge/%E2%86%91%20%2B2.9-green) | | [Code coverage](https://www.npmjs.com/package/@code-pushup/coverage-plugin/) | Code coverage metrics | 🟡 90 | 🟡 **90** | ![↑ +0](https://img.shields.io/badge/%E2%86%91%20%2B0-green) | 18 other groups are unchanged.

🛡️ Audits

👍 6 audits improved, 👎 2 audits regressed, 79 audits changed without impacting score

| 🔌 Plugin | 🛡️ Audit | 📏 Previous value | 📏 Current value | 🔄 Value change | | :--------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------: | :----------------------------------: | :--------------------------------------------------------------------------------: | | Lighthouse | Speed Index | 🟥 8.5 s | 🟥 **6.3 s** | ![↓ −26 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%9226%E2%80%89%25-green) | | Lighthouse | First Contentful Paint | 🟨 2.8 s | 🟨 **2.9 s** | ![↑ +6 %](https://img.shields.io/badge/%E2%86%91%20%2B6%E2%80%89%25-red) | | Lighthouse | First Meaningful Paint | 🟨 2.8 s | 🟨 **2.9 s** | ![↑ +6 %](https://img.shields.io/badge/%E2%86%91%20%2B6%E2%80%89%25-red) | | Lighthouse | Largest Contentful Paint | 🟨 3.1 s | 🟨 **2.9 s** | ![↓ −5 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%925%E2%80%89%25-green) | | Lighthouse | Time to Interactive | 🟥 16.4 s | 🟥 **15.6 s** | ![↓ −5 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%925%E2%80%89%25-green) | | [Code coverage](https://www.npmjs.com/package/@code-pushup/coverage-plugin/) | Branch coverage | 🟨 84.4 % | 🟨 **84.4 %** | ![↑ +0 %](https://img.shields.io/badge/%E2%86%91%20%2B0%E2%80%89%25-green) | | [Code coverage](https://www.npmjs.com/package/@code-pushup/coverage-plugin/) | Function coverage | 🟩 92.1 % | 🟩 **92.1 %** | ![↑ +0 %](https://img.shields.io/badge/%E2%86%91%20%2B0%E2%80%89%25-green) | | [Code coverage](https://www.npmjs.com/package/@code-pushup/coverage-plugin/) | Line coverage | 🟩 91.6 % | 🟩 **91.6 %** | ![↑ +0 %](https://img.shields.io/badge/%E2%86%91%20%2B0%E2%80%89%25-green) | | Lighthouse | Minimizes main-thread work | 🟥 23.4 s | 🟥 **18.9 s** | ![↓ −19 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%9219%E2%80%89%25-gray) | | Lighthouse | Total Blocking Time | 🟥 8,820 ms | 🟥 **6,400 ms** | ![↓ −27 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%9227%E2%80%89%25-gray) | | Lighthouse | Avoids enormous network payloads | 🟩 Total size was 1,806 KiB | 🟩 **Total size was 1,807 KiB** | ![↑ +0 %](https://img.shields.io/badge/%E2%86%91%20%2B0%E2%80%89%25-gray) | | Lighthouse | JavaScript execution time | 🟥 9.2 s | 🟥 **8.5 s** | ![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-gray) | | Lighthouse | Metrics | 🟩 16353 | 🟩 **100%** | ![↓ −5 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%925%E2%80%89%25-gray) | | Lighthouse | Eliminate render-blocking resources | 🟥 Potential savings of 360 ms | 🟥 **Potential savings of 1,040 ms** | ![↑ +191 %](https://img.shields.io/badge/%E2%86%91%20%2B191%E2%80%89%25-gray) | | Lighthouse | Server Backend Latencies | 🟩 120 ms | 🟩 **770 ms** | ![↑ +555 %](https://img.shields.io/badge/%E2%86%91%20%2B555%E2%80%89%25-gray) | | Lighthouse | Uses efficient cache policy on static assets | 🟨 28 resources found | 🟨 **28 resources found** | ![↑ +0 %](https://img.shields.io/badge/%E2%86%91%20%2B0%E2%80%89%25-gray) | | Lighthouse | Max Potential First Input Delay | 🟥 2,810 ms | 🟥 **2,580 ms** | ![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-gray) | | Lighthouse | Initial server response time was short | 🟩 Root document took 370 ms | 🟩 **Root document took 450 ms** | ![↑ +20 %](https://img.shields.io/badge/%E2%86%91%20%2B20%E2%80%89%25-gray) | | Lighthouse | Network Round Trip Times | 🟩 10 ms | 🟩 **70 ms** | ![↑ +414 %](https://img.shields.io/badge/%E2%86%91%20%2B414%E2%80%89%25-gray) | | Lighthouse | Reduce unused CSS | 🟥 Potential savings of 105 KiB | 🟥 **Potential savings of 105 KiB** | ![↓ −2 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%922%E2%80%89%25-gray) | | Lighthouse | Uses HTTPS | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Has a `` tag with `width` or `initial-scale` | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Screenshot Thumbnails | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Final Screenshot | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | No browser errors logged to the console | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoid chaining critical requests | 🟩 10 chains found | 🟩 **10 chains found** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Displays images with correct aspect ratio | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Serves images with appropriate resolution | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoids deprecated APIs | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoids third-party cookies | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Preconnect to required origins | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | All text remains visible during webfont loads | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Diagnostics | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Network Requests | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Tasks | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Resources Summary | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoid long main-thread tasks | 🟩 20 long tasks found | 🟩 **20 long tasks found** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Page has valid source maps | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Ensure CSP is effective against XSS attacks | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Script Treemap Data | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[aria-*]` attributes match their roles | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Values assigned to `role=""` are valid ARIA roles. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | ARIA attributes are used as specified for the element's role | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Deprecated ARIA roles were not used | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[aria-hidden="true"]` is not present on the document `` | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[aria-hidden="true"]` elements do not contain focusable descendents | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[role]`s have all required `[aria-*]` attributes | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Elements with an ARIA `[role]` that require children to contain a specific `[role]` have all required children. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[role]` values are valid | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | ARIA `tooltip` elements have accessible names | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[aria-*]` attributes have valid values | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[aria-*]` attributes are valid and not misspelled | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Buttons have an accessible name | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Document has a `` element | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Heading elements appear in a sequentially-descending order | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `<html>` element has a `[lang]` attribute | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `<html>` element has a valid value for its `[lang]` attribute | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Identical links have the same purpose. | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Image elements do not have `[alt]` attributes that are redundant text. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Links are distinguishable without relying on color. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Lists contain only `<li>` elements and script supporting elements (`<script>` and `<template>`). | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | List items (`<li>`) are contained within `<ul>`, `<ol>` or `<menu>` parent elements | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `[user-scalable="no"]` is not used in the `<meta name="viewport">` element and the `[maximum-scale]` attribute is not less than 5. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | No element has a `[tabindex]` value greater than 0 | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Tables have different content in the summary attribute and `<caption>`. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Tables use `<caption>` instead of cells with the `[colspan]` attribute to indicate a caption. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `<td>` elements in a large `<table>` have one or more table headers. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table. | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | `<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe. | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Page has the HTML doctype | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Properly defines charset | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoids requesting the geolocation permission on page load | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | No issues in the `Issues` panel in Chrome Devtools | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoids `document.write()` | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Detected JavaScript libraries | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Avoids requesting the notification permission on page load | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Allows users to paste into input fields | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Uses passive listeners to improve scrolling performance | 🟩 0 | 🟩 **100%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Document has a meta description | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Page has successful HTTP status code | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Document uses legible font sizes | 🟩 99.65% legible text | 🟩 **99.65% legible text** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Links have descriptive text | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Links are crawlable | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | robots.txt is valid | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Document has a valid `hreflang` | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Document has a valid `rel=canonical` | 🟩 0 | 🟩 **passed** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | | Lighthouse | Image elements have explicit `width` and `height` | 🟨 0 | 🟨 **50%** | ![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-gray) | 422 other audits are unchanged. </details>  </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>