feat(core): expose items making computed properties: imageIssues, ari…

…aIssues
harlan-zw · Jan 20, 2022 · d62a7b6 · d62a7b6
1 parent 94cbfec
commit d62a7b6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 39 deletions.
diff --git a/packages/client/components/Results/ResultsCell.vue b/packages/client/components/Results/ResultsCell.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { UnlighthouseColumn, UnlighthouseRouteReport } from '@unlighthouse/core'
 import { get } from 'lodash-es'
-import { useColumnClasses } from '../../logic/column'
 
 const props = defineProps<{
   report: UnlighthouseRouteReport
@@ -14,24 +13,38 @@ const value = computed(() => {
 
 </script>
 <template>
-  <div
+<div
     :class="[`col-span-${column.cols || '2'}`, ...(column.classes ? column.classes : [])]"
     class="flex items-center"
-  >
-    <slot />
-    <audit-result v-if="value?.scoreDisplayMode === 'error'" :value="{ score: 0, displayValue: value.errorMessage }" />
-    <audit-result v-else-if="value?.scoreDisplayMode === 'notApplicable'" :value="{ score: null, displayValue: 'n/a' }" />
-    <component :is="column.component" v-else-if="column.component" :report="report" :column="column" :value="value" />
-    <template v-else-if="!!value">
-      <div v-if="typeof value === 'number'" class="text-base font-mono">
-        {{ value }}
+>
+  <slot />
+  <audit-result v-if="value?.scoreDisplayMode === 'error'" :value="{ score: 0, displayValue: value.errorMessage }" />
+  <audit-result v-else-if="value?.scoreDisplayMode === 'notApplicable'" :value="{ score: null, displayValue: 'n/a' }" />
+  <component :is="column.component" v-else-if="column.component" :report="report" :column="column" :value="value" />
+  <template v-else-if="!!value">
+  <tooltip>
+    <div v-if="typeof value === 'number'" class="text-base font-mono">
+      {{ value }}
+    </div>
+    <div v-else-if="typeof value === 'string'" class="text-xs opacity-80 font-mono">
+      {{ value }}
+    </div>
+    <audit-result v-else-if="typeof value.displayValue !== 'undefined'" :value="value" />
+    <audit-result-items-length v-else-if="!!value.details?.items" :value="value" />
+    <audit-result v-else-if="typeof value.score !== 'undefined'" :value="{ score: value.score }" />
+    <template #tooltip>
+    <div v-if="!!value.details?.items" v-for="(item, key) in value.details.items" :key="key" class="mb-2 flex text-xs ">
+      <div class="mb-2" v-if="item.node?.nodeLabel">
+        <div class="break-all mb-1">{{ item.node?.nodeLabel }}</div>
+        <div class="break-all opacity-80">{{ item.node.snippet }}</div>
       </div>
-      <div v-else-if="typeof value === 'string'" class="text-xs opacity-80 font-mono">
-        {{ value }}
+      <div class="mb-2" v-else-if="item.description && item.sourceLocation">
+        <div class="break-all mb-1">{{ item.description }}</div>
+        <div class="break-all opacity-80">{{ item.sourceLocation.url }}</div>
       </div>
-      <audit-result v-else-if="typeof value.displayValue !== 'undefined'" :value="value" />
-      <audit-result-items-length v-else-if="!!value.details?.items" :value="value" />
-      <audit-result v-else-if="typeof value.score !== 'undefined'" :value="{ score: value.score }" />
+    </div>
     </template>
-  </div>
+  </tooltip>
+  </template>
+</div>
 </template>
diff --git a/packages/core/src/puppeteer/tasks/lighthouse.ts b/packages/core/src/puppeteer/tasks/lighthouse.ts
@@ -1,6 +1,6 @@
 import fs from 'fs-extra'
 import type { LH } from 'lighthouse'
-import { pick, sum, sumBy } from 'lodash-es'
+import {flatten, pick, sumBy} from 'lodash-es'
 import { computeMedianRun } from 'lighthouse/lighthouse-core/lib/median-run.js'
 import type { LighthouseReport, PuppeteerTask } from '../../types'
 import { useUnlighthouse } from '../../unlighthouse'
@@ -17,18 +17,18 @@ export const normaliseLighthouseResult = (result: LH.Result): LighthouseReport =
     .filter(c => !!c.key)
     .map(c => c.key?.replace('report.', '')) as string[]
 
-  const imageIssues = sum([
-    result.audits['unsized-images']?.details?.items?.length || 0,
-    result.audits['preload-lcp-image']?.details?.items?.length || 0,
-    result.audits['offscreen-images']?.details?.items?.length || 0,
-    result.audits['modern-image-formats']?.details?.items?.length || 0,
-    result.audits['uses-optimized-images']?.details?.items?.length || 0,
-    result.audits['efficient-animated-content']?.details?.items?.length || 0,
-    result.audits['uses-responsive-images']?.details?.items?.length || 0,
+  const imageIssues = flatten([
+    result.audits['unsized-images']?.details?.items || [],
+    result.audits['preload-lcp-image']?.details?.items || [],
+    result.audits['offscreen-images']?.details?.items || [],
+    result.audits['modern-image-formats']?.details?.items || [],
+    result.audits['uses-optimized-images']?.details?.items || [],
+    result.audits['efficient-animated-content']?.details?.items || [],
+    result.audits['uses-responsive-images']?.details?.items || [],
   ])
-  const ariaIssues = sum(Object.values(result.audits)
+  const ariaIssues = flatten(Object.values(result.audits)
     .filter(a => a && a.id.startsWith('aria-') && a.details?.items?.length > 0)
-    .map(a => a.details?.items?.length),
+    .map(a => a.details?.items),
   )
   // map the json report to what values we actually need
   return {
@@ -45,12 +45,18 @@ export const normaliseLighthouseResult = (result: LH.Result): LighthouseReport =
     ]),
     computed: {
       imageIssues: {
-        displayValue: imageIssues,
-        score: imageIssues > 0 ? 0 : 1,
+        details: {
+          items: imageIssues,
+        },
+        displayValue: imageIssues.length,
+        score: imageIssues.length > 0 ? 0 : 1,
       },
       ariaIssues: {
-        displayValue: ariaIssues,
-        score: ariaIssues > 0 ? 0 : 1,
+        details: {
+          items: ariaIssues,
+        },
+        displayValue: ariaIssues.length,
+        score: ariaIssues.length > 0 ? 0 : 1,
       },
     },
     score: Math.round(sumBy(measuredCategories, 'score') / measuredCategories.length * 100) / 100,

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -41,6 +41,13 @@ export interface NormalisedRoute {
   definition: RouteDefinition
 }
 
+export type ComputedLighthouseReportAudit = {
+  details?: {
+    items?: any[]
+  },
+  displayValue: string|number
+  score: number
+}
 /**
  * An augmented Lighthouse Report type, we add custom types to the base report for specific functionality on the
  * @unlighthouse/client.
@@ -54,14 +61,8 @@ export type LighthouseReport = Partial<LH.Result> & {
     /**
      * An aggregation of multiple image audit results.
      */
-    imageIssues: {
-      displayValue: string|number
-      score: number
-    }
-    ariaIssues: {
-      displayValue: string|number
-      score: number
-    }
+    imageIssues: ComputedLighthouseReportAudit
+    ariaIssues: ComputedLighthouseReportAudit
   }
 }