refactor spec file name into its own component

Author: mabela416

packages/reporter/src/OpenFileInIDEButton.tsx

@@ -164,43 +164,6 @@ $color-transition: color 150ms ease-out;
     align-items: center;
     flex: 1;
 
-    .runnable-header-file-name {
-      display: inline-flex;
-      align-items: center;
-      flex: 1;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      position: relative;
-      background: $gray-1100;
-
-      &:after {
-        content: none;
-      }
-
-      .spec-name {
-        color: $white;
-        font-weight: 500;
-      }
-
-      .spec-file-extension {
-        color: $gray-300;
-        font-weight: 300;
-      }
-
-      &:hover,
-      &:focus-visible {
-        .open-in-ide-button {
-          opacity: 1;
-        }
-
-        .button-hover-shadow {
-          opacity: 1;
-        }
-      }
-    }
-
     span > span > a > svg {
       margin-bottom: -2px;
       margin-right: 8px;
@@ -219,7 +182,7 @@ $color-transition: color 150ms ease-out;
       }
     }
   }
-
+  
   .toggle-specs-wrapper {
     .toggle-specs-button {
       padding: 0;

packages/reporter/src/header/header.scss

@@ -2,11 +2,10 @@ import { observer } from 'mobx-react'
 import React, { ReactElement } from 'react'
 
 import type { StatsStore } from '../header/stats-store'
-import { getFilenameParts } from '../lib/util'
 import { RunnablesStore } from './runnables-store'
 import { DebugDismiss } from '../header/DebugDismiss'
-import { OpenFileInIDEButton } from '../header/OpenFileInIDEButton'
 import { Duration } from '../duration/duration'
+import { SpecFileName } from '../shared/SpecFileName'
 
 const renderRunnableHeader = (children: ReactElement) => <div className="runnable-header" data-cy="runnable-header">{children}</div>
 
@@ -17,8 +16,6 @@ interface RunnableHeaderProps {
 }
 
 const RunnableHeader: React.FC<RunnableHeaderProps> = observer(({ spec, statsStore, runnablesStore }) => {
-  const relativeSpecPath = spec.relative
-
   if (spec.relative === '__all') {
     if (spec.specFilter) {
       return renderRunnableHeader(
@@ -31,31 +28,9 @@ const RunnableHeader: React.FC<RunnableHeaderProps> = observer(({ spec, statsSto
     )
   }
 
-  const displayFileName = () => {
-    const specParts = getFilenameParts(spec.name)
-
-    return (
-      <>
-        <span className='spec-name'>{specParts[0]}</span><span className='spec-file-extension'>{specParts[1]}</span>
-      </>
-    )
-  }
-
-  const fileDetails = {
-    absoluteFile: spec.absolute,
-    column: 0,
-    displayFile: displayFileName(),
-    line: 0,
-    originalFile: relativeSpecPath,
-    relativeFile: relativeSpecPath,
-  }
-
   return renderRunnableHeader(
     <>
-      <div className='runnable-header-file-name'>
-        {fileDetails.displayFile || fileDetails.originalFile}{!!fileDetails.line && `:${fileDetails.line}`}{!!fileDetails.column && `:${fileDetails.column}`}
-        <OpenFileInIDEButton fileDetails={fileDetails} />
-      </div>
+      <SpecFileName spec={spec} />
       {runnablesStore.testFilter && runnablesStore.totalTests > 0 && <DebugDismiss matched={runnablesStore.totalTests} total={runnablesStore.totalUnfilteredTests} />}
       <Duration duration={statsStore.duration} />
     </>,

packages/reporter/src/runnables/runnable-header.tsx

@@ -0,0 +1,36 @@
+.spec-file-name {
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  background: $gray-1100;
+
+  &:after {
+    content: none;
+  }
+
+  .spec-name {
+    color: $white;
+    font-weight: 500;
+  }
+
+  .spec-file-extension {
+    color: $gray-500;
+    font-weight: 400;
+  }
+
+  &:hover,
+  &:focus-visible {
+    .open-in-ide-button {
+      opacity: 1;
+    }
+
+    .button-hover-shadow {
+      opacity: 1;
+    }
+  }
+}

packages/reporter/src/shared/SpecFileName.scss

@@ -0,0 +1,31 @@
+import React from 'react'
+import { getFilenameParts } from '../lib/util'
+import { OpenFileInIDEButton } from '../header/OpenFileInIDEButton'
+
+const displayFileName = (spec: Cypress.Cypress['spec']) => {
+  const specParts = getFilenameParts(spec.name)
+
+  return (
+    <>
+      <span className='spec-name'>{specParts[0]}</span><span className='spec-file-extension'>{specParts[1]}</span>
+    </>
+  )
+}
+
+export const SpecFileName = ({ spec }: { spec: Cypress.Cypress['spec'] }) => {
+  const relativeSpecPath = spec.relative
+
+  const fileDetails = {
+    absoluteFile: spec.absolute,
+    column: 0,
+    displayFile: displayFileName(spec),
+    line: 0,
+    originalFile: relativeSpecPath,
+    relativeFile: relativeSpecPath,
+  }
+
+  return <div className='spec-file-name'>
+    {fileDetails.displayFile || fileDetails.originalFile}{!!fileDetails.line && `:${fileDetails.line}`}{!!fileDetails.column && `:${fileDetails.column}`}
+    <OpenFileInIDEButton fileDetails={fileDetails} />
+  </div>
+}

packages/reporter/src/shared/SpecFileName.tsx

@@ -25,8 +25,8 @@ describe('StudioTestHeader', () => {
 
     cy.get('.studio-header').should('be.visible')
     cy.get('.studio-header__file-section').should('be.visible')
-    cy.get('.studio-header__file-content').should('be.visible')
-    cy.get('[data-cy="studio-single-test-file-name"]').should('contain.text', 'example.cy.ts')
+    cy.get('.spec-file-name').should('be.visible')
+    cy.get('.spec-file-name').should('contain.text', 'example.cy.ts')
     cy.get('[data-cy="studio-back-button"]').should('be.visible')
     cy.percySnapshot()
   })

packages/reporter/src/studio/StudioTestHeader.cy.tsx

@@ -14,24 +14,8 @@
     font-size: 14px;
     line-height: 20px;
     color: $gray-500;
-  
-    .studio-header__file-content {
-      position: relative;
-      width: 100%;
-  
-      &:hover,
-      &:focus-visible {
-        .open-in-ide-button {
-          opacity: 1;
-        }
-      }
-    }
-  
-    .studio-header__file-name {
-      font-weight: 300;
-      flex-grow: 1;
-    }
-  
+
+    
     .studio-header__back-button {
       padding: 0;
       width: 32px;

packages/reporter/src/studio/StudioTestHeader.scss

@@ -1,27 +1,15 @@
 import React, { useCallback } from 'react'
 import { observer } from 'mobx-react'
-import { getFilenameParts } from '../lib/util'
 import Button from '@cypress-design/react-button'
 import { IconArrowLeft } from '@cypress-design/react-icon'
-import { OpenFileInIDEButton } from '../header/OpenFileInIDEButton'
 import events from '../lib/events'
+import { SpecFileName } from '../shared/SpecFileName'
 
 interface StudioHeaderProps {
   spec: Cypress.Cypress['spec']
 }
 
 export const StudioTestHeader = observer(({ spec }: StudioHeaderProps) => {
-  const specParts = getFilenameParts(spec.name)
-  const relativeSpecPath = spec.relative
-
-  const fileDetails = {
-    absoluteFile: spec.absolute,
-    column: 0,
-    line: 0,
-    originalFile: relativeSpecPath,
-    relativeFile: relativeSpecPath,
-  }
-
   const handleBackButton = useCallback((e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
 
@@ -35,10 +23,7 @@ export const StudioTestHeader = observer(({ spec }: StudioHeaderProps) => {
           <Button data-cy='studio-back-button' size='32' variant='outline-dark' className='studio-header__back-button' onClick={handleBackButton}>
             <IconArrowLeft size='16' strokeColor='gray-500' />
           </Button>
-          <div className='studio-header__file-content'>
-            <span data-cy='studio-single-test-file-name' className='studio-header__file-name'>{specParts[0]}{specParts[1]}</span>
-            <OpenFileInIDEButton fileDetails={fileDetails} />
-          </div>
+          <SpecFileName spec={spec} />
         </div>
       </header>
     </>