feat(ui): add tests summary in the dashboard (#2133)

Co-authored-by: userquin <userquin@gmail.com>

packages/ui/client/components/dashboard/DashboardEntry.cy.tsx

@@ -5,20 +5,20 @@ const body = () => (<div data-testid="body-content">{ faker.lorem.words(2) }</di
 const header = () => (<div data-testid="header-content">{ faker.hacker.phrase() }</div>)
 const bodySelector = '[data-testid=body-content]'
 const headerSelector = '[data-testid=header-content]'
-const tailSelector = '[data-testid=tail]'
+// const tailSelector = '[data-testid=tail]'
 
 describe('DashboardEntry', () => {
-  it('tail is rendered by default', () => {
-    cy.mount(<DashboardEntry v-slots={{ body, header }}/>)
-      .get(tailSelector)
-      .should('exist')
-  })
+  // it('tail is rendered by default', () => {
+  //   cy.mount(<DashboardEntry v-slots={{ body, header }}/>)
+  //     .get(tailSelector)
+  //     .should('exist')
+  // })
 
-  it('tail is not shown when true', () => {
-    cy.mount(<DashboardEntry tail v-slots={{ body, header }}/>)
-      .get(tailSelector)
-      .should('not.exist')
-  })
+  // it('tail is not shown when true', () => {
+  //   cy.mount(<DashboardEntry tail v-slots={{ body, header }}/>)
+  //     .get(tailSelector)
+  //     .should('not.exist')
+  // })
 
   it('renders the body and header slots', () => {
     cy.mount(<DashboardEntry v-slots={{ body, header }}/>)

packages/ui/client/components/dashboard/DashboardEntry.vue

@@ -5,13 +5,15 @@ withDefaults(defineProps<{ tail?: boolean }>(), { tail: false })
 <template>
   <div p-2 text-center flex>
     <div>
-      <div text-4xl>
+      <div text-4xl min-w-2em>
         <slot name="body" />
       </div>
       <div text-md>
         <slot name="header" />
       </div>
     </div>
-    <div v-if="!tail" data-testid="tail" my-2 op50 w-1px bg-current origin-center rotate-15 translate-x-3 />
+<!--
+    <div v-if="!tail" data-testid="tail" my-0 op50 w-2px bg-current origin-center rotate-0 translate-x-3 />
+-->
   </div>
 </template>

packages/ui/client/components/dashboard/TestsFilesContainer.vue

@@ -1,10 +1,10 @@
 <template>
   <div gap-0 flex="~ col gap-4" h-full justify-center items-center>
-    <div bg-header rounded-lg p="y4 x2">
-      <!-- <section aria-labelledby="tests" m="y-4 x-2">
-        <TestsEntry />
-      </section> -->
-      <TestFilesEntry />
-    </div>
+    <!-- <div bg-header rounded-lg p="y4 x2"> -->
+    <section aria-labelledby="tests" m="y-4 x-2">
+      <TestsEntry />
+    </section>
+    <TestFilesEntry />
+    <!-- </div> -->
   </div>
 </template>