fix: Make spec row clickable across entire width (#22105)

* fix: Make spec row clickable across entire width

* Move click-sensitive row action wrapper to surround entire row
* Add styles to highlight spec icon on hocus to match Figma
* Small text highlight style change to match Figma

* Add missing data-cy selector

* Add tests for row expansion behaviors

* Fix directory row styling issues

packages/app/src/specs/RowDirectory.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-transparent"
+    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-none"
     :data-cy="`row-directory-depth-${depth}`"
     :aria-expanded="expanded"
   >

packages/app/src/specs/SpecItem.vue

@@ -4,14 +4,14 @@
     data-cy="spec-item"
   >
     <i-cy-document-blank_x16
-      class="icon-light-gray-50 icon-dark-gray-200"
+      class="icon-light-gray-50 icon-dark-gray-200 group-hocus:icon-light-indigo-200 group-hocus:icon-dark-indigo-400"
     />
 
     <div class="text-gray-400 text-indigo-500 group-hocus:text-indigo-600">
       <HighlightedText
         :text="fileName"
         :indexes="indexes.filter((idx) => idx < fileName.length)"
-        class="font-medium text-indigo-500 group-hocus:text-indigo-600"
+        class="font-medium text-indigo-500 group-hocus:text-indigo-700"
         highlight-classes="text-gray-1000"
       />
       <HighlightedText

packages/app/src/specs/SpecsList.vue

@@ -69,24 +69,18 @@
           :key="row.index"
           :data-cy="row.data.isLeaf ? 'spec-list-file' : 'spec-list-directory'"
           :data-cy-row="row.data.data?.baseName"
+          :is-leaf="row.data.isLeaf"
+          :route="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
+          @toggleRow="row.data.toggle"
         >
           <template #file>
-            <RouterLink
-              v-if="row.data.isLeaf && row.data"
-              :key="row.data.data?.absolute"
-              class="focus:outline-transparent"
-              :to="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
-              data-cy="spec-item-link"
-              @click.meta.prevent="handleCtrlClick"
-              @click.ctrl.prevent="handleCtrlClick"
-            >
-              <SpecItem
-                :file-name="row.data.data?.fileName || row.data.name"
-                :extension="row.data.data?.specFileExtension || ''"
-                :indexes="row.data.data?.fileIndexes"
-                :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
-              />
-            </RouterLink>
+            <SpecItem
+              v-if="row.data.isLeaf"
+              :file-name="row.data.data?.fileName || row.data.name"
+              :extension="row.data.data?.specFileExtension || ''"
+              :indexes="row.data.data?.fileIndexes"
+              :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
+            />
 
             <RowDirectory
               v-else
@@ -96,7 +90,7 @@
               :style="{ paddingLeft: `${(row.data.depth - 2) * 10}px` }"
               :indexes="getDirIndexes(row.data)"
               :aria-controls="getIdIfDirectory(row)"
-              @click="row.data.toggle"
+              @click.stop="row.data.toggle"
             />
           </template>
 
@@ -241,11 +235,6 @@ const { containerProps, list, wrapperProps, scrollTo } = useVirtualList(treeSpec
 // reset scroll position to top of list
 watch(() => treeSpecList.value, () => scrollTo(0))
 
-function handleCtrlClick () {
-  // noop intended to reduce the chances of opening tests multiple tabs
-  // which is not a supported state in Cypress
-}
-
 function getIdIfDirectory (row) {
   if (row.data.isLeaf && row.data) {
     return undefined

packages/app/src/specs/SpecsListRowItem.cy.tsx

@@ -0,0 +1,53 @@
+import SpecsListRowItem from './SpecsListRowItem.vue'
+
+describe('SpecItem', () => {
+  it('renders a SpecsListRowItem as leaf', () => {
+    const toggleRowHandler = cy.stub()
+
+    cy.mount(() => (
+      <SpecsListRowItem
+        isLeaf={true}
+        route={{ path: '/specs/runner', query: { file: '' } }}
+        onToggleRow={toggleRowHandler}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          file: () => <span>File Name</span>,
+          'git-info': () => <span>Git Info</span>,
+        }}
+      />))
+
+    // Clicking directly on file name section should trigger row
+    cy.get('[data-cy="specs-list-row-file"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 1)
+
+    // Clicking directory on git info section should trigger row
+    cy.get('[data-cy="specs-list-row-git-info"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 2)
+
+    // Clicking elsewhere on row should trigger row
+    cy.get('[data-cy="spec-item-link"]').click('right')
+    cy.wrap(toggleRowHandler).should('have.callCount', 3)
+  })
+
+  it('renders a SpecsListRowItem as non-leaf', () => {
+    const toggleRowHandler = cy.stub()
+
+    cy.mount(() => (
+      <SpecsListRowItem
+        isLeaf={false}
+        onToggleRow={toggleRowHandler}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          file: () => <span>Directory Name</span>,
+        }}
+      />))
+
+    // Clicking directly on file name section should trigger row
+    cy.get('[data-cy="specs-list-row-file"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 1)
+
+    // Clicking elsewhere on row should trigger row
+    cy.get('[data-cy="spec-item-directory"]').click('right')
+    cy.wrap(toggleRowHandler).should('have.callCount', 2)
+  })
+})

packages/app/src/specs/SpecsListRowItem.vue

@@ -1,14 +1,39 @@
 <template>
-  <div
-    class="h-full outline-none border-gray-50 ring-inset grid grid-cols-2 group focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
-    data-cy="specs-list-row"
-  >
-    <div>
-      <slot name="file" />
-    </div>
-
-    <div>
-      <slot name="git-info" />
-    </div>
+  <div data-cy="specs-list-row">
+    <component
+      :is="isLeaf ? 'RouterLink' : 'div'"
+      class="h-full outline-none border-gray-50 ring-inset grid grid-cols-2 group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      :to="route"
+      :data-cy="isLeaf ? 'spec-item-link' : 'spec-item-directory'"
+      @click="emit('toggleRow')"
+      @click.meta.prevent="handleCtrlClick"
+      @click.ctrl.prevent="handleCtrlClick"
+    >
+      <div data-cy="specs-list-row-file">
+        <slot name="file" />
+      </div>
+
+      <div data-cy="specs-list-row-git-info">
+        <slot name="git-info" />
+      </div>
+    </component>
   </div>
 </template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  isLeaf: boolean
+  route?: RouteLocationRaw
+}>()
+
+const emit = defineEmits<{
+  (event: 'toggleRow'): void
+}>()
+
+function handleCtrlClick (): void {
+  // noop intended to reduce the chances of opening tests multiple tabs
+  // which is not a supported state in Cypress
+}
+</script>