chore: SVG badge, responsive design, data util

Author: eladroz

e2e-report/app/badge/route.js

@@ -0,0 +1,47 @@
+import { ImageResponse } from 'next/og'
+import testData from '@/utils/data'
+
+export const dynamic = 'force-static'
+
+const labelStyle = {
+  background: 'linear-gradient(#2e51ed, #316bf4)',
+  color: 'white',
+}
+
+const bgStyles = {
+  ok: { background: 'linear-gradient(to bottom, #22c55e, #86efac)' },
+  warning: { background: 'linear-gradient(to bottom, #ca8a04, #fef08a)' },
+  error: { background: 'linear-gradient(to bottom, #dc2626, #f87171)', color: 'white' },
+}
+
+// Generate an SVG badge with test status and target Next.js version
+export async function GET(request) {
+  const valueStyle =
+    bgStyles[testData.failed === 0 ? 'ok' : testData.unknownFailuresCount > 0 ? 'error' : 'warning']
+
+  const badge = (
+    <Badge
+      label="Next.js runtime v5"
+      labelStyle={labelStyle}
+      value={testData.nextVersion}
+      valueStyle={valueStyle}
+    />
+  )
+  return new ImageResponse(badge, {
+    width: 400,
+    height: 60,
+  })
+}
+
+function Badge({ label, labelStyle, value, valueStyle }) {
+  return (
+    <div tw="flex items-center w-full h-full text-[28px] rounded-md overflow-hidden bg-transparent">
+      <span tw="items-center h-full p-3.5" style={labelStyle}>
+        {label}
+      </span>
+      <span tw="items-center h-full flex-grow justify-center" style={valueStyle}>
+        {value}
+      </span>
+    </div>
+  )
+}

e2e-report/app/globals.css

@@ -19,7 +19,7 @@
   }
 
   .table.issues-table :where(td:nth-last-child(-n + 4)) {
-    @apply text-center;
+    @apply text-center p-1 md:p-4;
   }
 
   .table.issues-table :where(td:nth-last-child(-n + 3)) {
@@ -30,4 +30,4 @@
     @apply font-bold;
     @apply text-3xl;
   }
-}
+}

e2e-report/app/page.js

@@ -2,48 +2,40 @@ import Image from 'next/image'
 import Table from '@/components/table'
 import ComponentSwitcher from '@/components/switcher'
 import StatsRow from '@/components/stats'
-
-import testData from '@/data/test-results.json'
+import testData from '@/utils/data'
 
 export default function Home() {
-  const tableComponents = createTableComponents(testData)
+  // User can switch between two test suite tables: one with all non-empty suites,
+  // and another showing only suites with failed tests (and the failed cases in them)
+  const tableComponents = {
+    'All suites': <Table suites={testData.nonEmptySuites} />,
+    'Failed tests only': <Table suites={testData.suitesWithIssues} />,
+  }
 
   return (
-    <div className="flex flex-col w-full items-center font-primary">
+    <div className="flex flex-col w-full items-center font-primary overflow-x-hidden">
       <Header />
       <StatsRow testData={testData} />
-      <div className="max-w-5xl w-full p-8">
+      <div className="max-w-5xl w-full py-4 px-0 md:p-8">
         <ComponentSwitcher components={tableComponents} />
       </div>
     </div>
   )
 }
 
-// User can switch between two test suite tables: one with all non-empty suites,
-// and another showing only suites with failed tests (and the failed cases in them)
-function createTableComponents(testData) {
-  testData.results.forEach((suite) => {
-    suite.failedKnown =
-      suite.testCases?.filter((t) => t.status === 'failed' && t.reason).length || 0
-    suite.failedUnknown = suite.failed - suite.failedKnown
-  })
-  const nonEmptySuites = testData.results.filter((suite) => suite.testCases?.length > 0)
-  const suitesWithIssues = nonEmptySuites.filter((suite) => suite.failed > 0)
-  suitesWithIssues.forEach((suite) => {
-    suite.testCases = suite.testCases.filter((t) => t.status === 'failed')
-  })
-
-  return {
-    'All suites': <Table suites={nonEmptySuites} />,
-    'Failed tests only': <Table suites={suitesWithIssues} />,
-  }
-}
-
 function Header() {
   return (
-    <div className="flex w-full items-center gap-4 bg-primary text-base-100 p-4">
-      <Image alt="netlify logo" src="/logo.svg" width={97} height={40} />
-      <span className="text-lg font-bold uppercase">Next.js E2E Tests on Netlify Runtime v5</span>
+    <div className="flex w-full items-center gap-4 bg-primary text-base-100 p-2 md:p-4 justify-center">
+      <Image
+        alt="netlify logo"
+        src="/logo.svg"
+        width={97}
+        height={40}
+        className="hidden md:block"
+      />
+      <span className="md:text-lg font-bold uppercase">
+        Next.js E2E Tests on Netlify Runtime v5
+      </span>
     </div>
   )
 }

e2e-report/components/stats.js

@@ -4,13 +4,6 @@ export default function StatsRow({ testData }) {
   const testsRun = testData.passed + testData.failed
   const passRate = ((testData.passed / testsRun) * 100).toFixed(1)
 
-  const allFailures = testData.results
-    .flatMap((suite) => {
-      return suite.testCases?.filter((t) => t.status === 'failed')
-    })
-    .filter(Boolean)
-  const knownFailuesCount = allFailures.filter((t) => !!t.reason).length
-
   return (
     <div className="stats stats-vertical lg:stats-horizontal border-b rounded w-full">
       <div className="stat">
@@ -40,7 +33,7 @@ export default function StatsRow({ testData }) {
           <div className="size-6">
             <InfoIcon />
           </div>
-          <span>{knownFailuesCount}</span>
+          <span>{testData.knownFailuresCount}</span>
         </div>
         <div className="stat-desc">mapped to GitHub issues</div>
       </div>
@@ -51,7 +44,7 @@ export default function StatsRow({ testData }) {
           <div className="size-6">
             <ErrorIcon />
           </div>
-          <span>{allFailures.length - knownFailuesCount}</span>
+          <span>{testData.unknownFailuresCount}</span>
         </div>
         <div className="stat-desc">not mapped to issues</div>
       </div>

e2e-report/components/switcher.js

@@ -10,7 +10,7 @@ export default function ComponentSwitcher({ components, defaultLabel }) {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex justify-end">
+      <div className="flex justify-center md:justify-end">
         <ToggleButtonGroup
           labels={labels}
           selectedLabel={selectedLabel}
@@ -28,7 +28,7 @@ function ToggleButtonGroup({ labels, selectedLabel, setSelectedLabel }) {
       {labels.map((label) => {
         return (
           <input
-            className="join-item btn btn-sm rounded"
+            className="join-item btn text-base md:btn-sm rounded"
             name="optionsGroup"
             key={label}
             type="radio"

e2e-report/components/table.js

@@ -3,16 +3,16 @@ import { GithubIcon } from './icons'
 
 // Show test suites and non-passing cases per each
 export default function Table({ suites }) {
-  const countColumns = ['Pass', 'Fail', 'Known fail', 'Skip']
+  const countColumns = ['Pass', 'Fail', 'Known', 'Skip']
 
   return (
     <table className="table issues-table text-base w-full">
       <thead>
         <tr>
-          <th>Test suite name</th>
+          <th className="p-2 md:p-4">Test suite name</th>
           {countColumns.map((col) => {
             return (
-              <th className="w-16 p-2 text-center" key={col}>
+              <th className="md:w-16 p-0 md:p-2 text-center" key={col}>
                 {col}
               </th>
             )
@@ -32,9 +32,11 @@ function TestSuiteRow({ suite, idx }) {
   const badgeClasses = 'badge font-bold rounded '
   return (
     <>
-      <tr key={'tr-' + idx}>
-        <td>
-          <Link href={suite.file}>{suite.name}</Link>
+      <tr key={'tr-' + idx} className="text-sm md:text-base">
+        <td className="p-2 md:p-4">
+          <Link href={suite.file} className="text-sm md:text-base">
+            {suite.name}
+          </Link>
         </td>
         <td>{suite.passed}</td>
         <td>
@@ -76,8 +78,8 @@ function IssueRow({ test }) {
 
   return (
     <tr>
-      <td colSpan={5} className="border bg-base-200/[.4] pl-6">
-        <div key={test.name} className="flex flex-col gap-1 text-neutral">
+      <td colSpan={5} className="border bg-base-200/[.4] md:pl-6">
+        <div key={test.name} className="flex flex-col gap-1 text-neutral text-left">
           <div className="flex gap-2 items-center py-1">
             {test.status == 'failed' ? (
               !!test.reason ? (
@@ -88,15 +90,18 @@ function IssueRow({ test }) {
             ) : (
               <div className="badge badge-accent rounded">Skipped</div>
             )}
-            <span className="flex gap-1 opacity-90">
-              <span className="font-bold">Test:</span>
-              {shorten(test.name)}
+            <span className="opacity-90 text-sm md:text-base">
+              <span className="font-bold">Test:</span> {shorten(test.name)}
             </span>
           </div>
           {!!test.reason && (
             <div className="flex justify-start text-neutral font-bold opacity-90">
               {test.link ? (
-                <Link href={test.link} target="_blank" className="flex gap-1 items-center">
+                <Link
+                  href={test.link}
+                  target="_blank"
+                  className="flex gap-1 items-center text-sm md:text-base"
+                >
                   <GithubIcon className="w-4" />
                   <span>{shorten(test.reason)}</span>
                 </Link>

e2e-report/utils/data.js

@@ -0,0 +1,42 @@
+import fileData from '@/data/test-results.json'
+
+const nonEmptySuites = fileData.results.filter((suite) => suite.testCases?.length > 0)
+nonEmptySuites.forEach((suite) => {
+  const actualFailed = suite.testCases?.filter((t) => t.status === 'failed') || []
+  if (actualFailed.length !== suite.failed) {
+    console.warn(
+      `In suite "${suite.name}", failed value is ${suite.failed} but count of actual failed cases found is ${actualFailed.length}`,
+    )
+    suite.failed = actualFailed.length
+  }
+
+  suite.failedKnown = actualFailed.filter((t) => !!t.reason).length || 0
+  suite.failedUnknown = suite.failed - suite.failedKnown
+})
+
+const suitesWithIssues = nonEmptySuites.filter((suite) => suite.failed > 0)
+suitesWithIssues.forEach((suite) => {
+  suite.testCases = suite.testCases.filter((t) => t.status === 'failed')
+})
+
+const allFailures = fileData.results
+  .flatMap((suite) => {
+    return suite.testCases?.filter((t) => t.status === 'failed')
+  })
+  .filter(Boolean)
+const knownFailuresCount = allFailures.filter((t) => !!t.reason).length
+const unknownFailuresCount = allFailures.length - knownFailuresCount
+
+const testData = {
+  passed: fileData.passed,
+  failed: fileData.failed,
+  skipped: fileData.skipped,
+  nextVersion: fileData.nextVersion,
+  testDate: fileData.testDate,
+  nonEmptySuites,
+  suitesWithIssues,
+  knownFailuresCount,
+  unknownFailuresCount,
+}
+
+export default testData