ui: Test ids for sandwich view components (#6133)

* Test ids for sandwich view components

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -20,6 +20,7 @@ import {Tooltip} from 'react-tooltip';
 import {useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
+import {TEST_IDS} from '@parca/test-utils';
 import {getLastItem} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
@@ -187,6 +188,7 @@ const ContextMenu = ({
       {enableSandwichView === true && (
         <Item
           id="show-in-sandwich"
+          data-testid={TEST_IDS.CONTEXT_MENU_SHOW_IN_SANDWICH}
           onClick={() => {
             if (functionName === '' || functionName == null) {
               return;

ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx

@@ -205,7 +205,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
 
     if (isLoading && !isInvalidFlameChartQuery) {
       return (
-        <div className="h-auto overflow-clip">
+        <div className="h-auto overflow-clip" data-testid={TEST_IDS.FLAMEGRAPH_SKELETON}>
           {isRenderedAsFlamegraph ? (
             <SandwichFlameGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
           ) : (

ui/packages/shared/profile/src/Sandwich/components/CalleesSection.tsx

@@ -13,6 +13,8 @@
 
 import React from 'react';
 
+import {TEST_IDS, testId} from '@parca/test-utils';
+
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {type ProfileSource} from '../../ProfileSource';
@@ -35,7 +37,11 @@ export function CalleesSection({
   setCurPathArrow,
 }: CalleesSectionProps): JSX.Element {
   return (
-    <div className="flex relative items-start flex-row" ref={calleesRef}>
+    <div
+      className="flex relative items-start flex-row"
+      ref={calleesRef}
+      {...testId(TEST_IDS.SANDWICH_CALLEES_SECTION)}
+    >
       <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left">
         {'<-'} Callees
       </div>

ui/packages/shared/profile/src/Sandwich/components/CallersSection.tsx

@@ -17,6 +17,7 @@ import {Vector, tableFromIPC} from 'apache-arrow';
 import {Tooltip} from 'react-tooltip';
 
 import {Button} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import ProfileFlameGraph from '../../ProfileFlameGraph';
 import {type CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
@@ -90,7 +91,11 @@ export function CallersSection({
           <Tooltip id="show-more-frames" />
         </Button>
       )}
-      <div className="flex relative flex-row overflow-hidden" ref={callersRef}>
+      <div
+        className="flex relative flex-row overflow-hidden"
+        ref={callersRef}
+        {...testId(TEST_IDS.SANDWICH_CALLERS_SECTION)}
+      >
         <div className="[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0">
           Callers {'->'}
         </div>

ui/packages/shared/profile/src/Sandwich/index.tsx

@@ -16,6 +16,7 @@ import React, {useRef, useState} from 'react';
 import {AnimatePresence, motion} from 'framer-motion';
 
 import {useURLState} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {ProfileSource} from '../ProfileSource';
 import {useDashboard} from '../ProfileView/context/DashboardContext';
@@ -46,7 +47,7 @@ const Sandwich = React.memo(function Sandwich({
   const {curPathArrow, setCurPathArrow} = useVisualizationState();
 
   return (
-    <section className="flex flex-row h-full w-full">
+    <section className="flex flex-row h-full w-full" {...testId(TEST_IDS.SANDWICH_CONTAINER)}>
       <AnimatePresence>
         <motion.div
           className="h-full w-full"
@@ -78,7 +79,10 @@ const Sandwich = React.memo(function Sandwich({
                 />
               </div>
             ) : (
-              <div className="items-center justify-center flex h-full w-full">
+              <div
+                className="items-center justify-center flex h-full w-full"
+                {...testId(TEST_IDS.SANDWICH_NO_FUNCTION_SELECTED)}
+              >
                 <p className="text-sm">
                   {dashboardItems.includes('table') ? (
                     'Please select a function to view its callers and callees.'

ui/packages/shared/test-utils/src/test-ids.ts

@@ -134,6 +134,19 @@ export const TEST_IDS = {
   // Diff Legend
   DIFF_LEGEND: 'diff-legend',
 
+  // Sandwich View
+  SANDWICH_CONTAINER: 'sandwich-container',
+  SANDWICH_CALLERS_SECTION: 'sandwich-callers-section',
+  SANDWICH_CALLEES_SECTION: 'sandwich-callees-section',
+  SANDWICH_NO_FUNCTION_SELECTED: 'sandwich-no-function-selected',
+
+  // Loading Skeletons
+  FLAMEGRAPH_SKELETON: 'flamegraph-skeleton',
+
+  // Flamegraph Context Menu
+  FLAMEGRAPH_CONTEXT_MENU: 'flamegraph-context-menu',
+  CONTEXT_MENU_SHOW_IN_SANDWICH: 'context-menu-show-in-sandwich',
+
   // Common Interactive Elements
   SELECT_DROPDOWN: 'select-dropdown',
   SELECT_OPTION: 'select-option',