From 430ceefdae7d0b99633d7081364d22547ca179a3 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Fri, 3 Jun 2022 16:58:00 -0500
Subject: [PATCH 1/4] 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
---
 packages/app/src/specs/SpecItem.vue         |  4 +--
 packages/app/src/specs/SpecsList.vue        | 33 +++++++--------------
 packages/app/src/specs/SpecsListRowItem.vue | 30 +++++++++++++++++--
 3 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
index de4cf155a414..42be3a90c4e8 100644
--- a/packages/app/src/specs/SpecItem.vue
+++ b/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
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index d87d28ae9425..0a9a1b29a300 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/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
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index 316651212891..00aaf26b1696 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -1,7 +1,13 @@
 <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"
+  <component
+    :is="isLeaf ? 'RouterLink' : 'div'"
+    class="h-full outline-none border-gray-50 ring-inset grid group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+    :class="[isLeaf ? 'grid-cols-2' : 'grid-cols-1']"
+    :to="route"
     data-cy="specs-list-row"
+    @click="emit('toggleRow')"
+    @click.meta.prevent="handleCtrlClick"
+    @click.ctrl.prevent="handleCtrlClick"
   >
     <div>
       <slot name="file" />
@@ -10,5 +16,23 @@
     <div>
       <slot name="git-info" />
     </div>
-  </div>
+  </component>
 </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>

From 7bcd321d1732e9d2d98f8c5e3899da40a7d85a5f Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Mon, 6 Jun 2022 08:48:58 -0500
Subject: [PATCH 2/4] Add missing data-cy selector

---
 packages/app/src/specs/SpecsListRowItem.vue | 36 +++++++++++----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index 00aaf26b1696..0b7a7119179c 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -1,22 +1,24 @@
 <template>
-  <component
-    :is="isLeaf ? 'RouterLink' : 'div'"
-    class="h-full outline-none border-gray-50 ring-inset grid group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
-    :class="[isLeaf ? 'grid-cols-2' : 'grid-cols-1']"
-    :to="route"
-    data-cy="specs-list-row"
-    @click="emit('toggleRow')"
-    @click.meta.prevent="handleCtrlClick"
-    @click.ctrl.prevent="handleCtrlClick"
-  >
-    <div>
-      <slot name="file" />
-    </div>
+  <div data-cy="specs-list-row">
+    <component
+      :is="isLeaf ? 'RouterLink' : 'div'"
+      class="h-full outline-none border-gray-50 ring-inset grid group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      :class="[isLeaf ? 'grid-cols-2' : 'grid-cols-1']"
+      :to="route"
+      :data-cy="isLeaf ? 'spec-item-link' : 'spec-item-directory'"
+      @click="emit('toggleRow')"
+      @click.meta.prevent="handleCtrlClick"
+      @click.ctrl.prevent="handleCtrlClick"
+    >
+      <div>
+        <slot name="file" />
+      </div>
 
-    <div>
-      <slot name="git-info" />
-    </div>
-  </component>
+      <div>
+        <slot name="git-info" />
+      </div>
+    </component>
+  </div>
 </template>
 
 <script setup lang="ts">

From 3c945414076d8cef96357fa28397e1d74a3da217 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Mon, 6 Jun 2022 10:23:25 -0500
Subject: [PATCH 3/4] Add tests for row expansion behaviors

---
 .../app/src/specs/SpecsListRowItem.cy.tsx     | 53 +++++++++++++++++++
 packages/app/src/specs/SpecsListRowItem.vue   |  4 +-
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 packages/app/src/specs/SpecsListRowItem.cy.tsx

diff --git a/packages/app/src/specs/SpecsListRowItem.cy.tsx b/packages/app/src/specs/SpecsListRowItem.cy.tsx
new file mode 100644
index 000000000000..381be356afb3
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index 0b7a7119179c..2060af3e2929 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -10,11 +10,11 @@
       @click.meta.prevent="handleCtrlClick"
       @click.ctrl.prevent="handleCtrlClick"
     >
-      <div>
+      <div data-cy="specs-list-row-file">
         <slot name="file" />
       </div>
 
-      <div>
+      <div data-cy="specs-list-row-git-info">
         <slot name="git-info" />
       </div>
     </component>

From ad0ac9d044c58f4e72b956862fbc072b34c08902 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mikep@cypress.io>
Date: Tue, 7 Jun 2022 08:02:18 -0500
Subject: [PATCH 4/4] Fix directory row styling issues

---
 packages/app/src/specs/RowDirectory.vue     | 2 +-
 packages/app/src/specs/SpecsListRowItem.vue | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
index 97a6f33c822c..20336aec371b 100644
--- a/packages/app/src/specs/RowDirectory.vue
+++ b/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"
   >
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index 2060af3e2929..85dd1d930895 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -2,8 +2,7 @@
   <div data-cy="specs-list-row">
     <component
       :is="isLeaf ? 'RouterLink' : 'div'"
-      class="h-full outline-none border-gray-50 ring-inset grid group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
-      :class="[isLeaf ? 'grid-cols-2' : 'grid-cols-1']"
+      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')"