add data-testid to legend switches, sidebar-legend, calculator selectors

Author: adibarra

packages/app/src/components/calculator/ThroughputCalculatorDisplay.tsx

@@ -513,18 +513,21 @@ export default function ThroughputCalculatorDisplay() {
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
                 <ModelSelector
                   id="calc-model"
+                  data-testid="calc-model-selector"
                   value={selectedModel}
                   onChange={handleModelChange}
                   availableModels={availableModels}
                 />
                 <SequenceSelector
                   id="calc-sequence"
+                  data-testid="calc-sequence-selector"
                   value={selectedSequence}
                   onChange={handleSequenceChange}
                   availableSequences={availableSequences}
                 />
                 <PrecisionSelector
                   id="calc-precision"
+                  data-testid="calc-precision-selector"
                   value={selectedPrecisions}
                   onChange={handlePrecisionChange}
                   availablePrecisions={availablePrecisions}
@@ -537,7 +540,11 @@ export default function ThroughputCalculatorDisplay() {
                     tooltip="The pricing tier used to calculate cost per million tokens. Hyperscaler (e.g. AWS/GCP), Neocloud (e.g. CoreWeave), or 3-year rental."
                   />
                   <Select value={costProvider} onValueChange={handleCostProviderChange}>
-                    <SelectTrigger id="calc-cost" className="w-full">
+                    <SelectTrigger
+                      id="calc-cost"
+                      data-testid="calc-cost-selector"
+                      className="w-full"
+                    >
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -557,7 +564,11 @@ export default function ThroughputCalculatorDisplay() {
                     tooltip="Whether to show costs for total tokens, input tokens only, or output tokens only."
                   />
                   <Select value={costType} onValueChange={handleCostTypeChange}>
-                    <SelectTrigger id="calc-cost-type" className="w-full">
+                    <SelectTrigger
+                      id="calc-cost-type"
+                      data-testid="calc-cost-type-selector"
+                      className="w-full"
+                    >
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>

packages/app/src/components/ui/chart-legend.tsx

@@ -234,7 +234,12 @@ export default function ChartLegend({
       >
         {switches.map((sw) => (
           <div key={sw.id} className="mt-2 flex items-center gap-2">
-            <Switch id={sw.id} checked={sw.checked} onCheckedChange={sw.onCheckedChange} />
+            <Switch
+              id={sw.id}
+              data-testid={sw.id}
+              checked={sw.checked}
+              onCheckedChange={sw.onCheckedChange}
+            />
             <Label
               htmlFor={sw.id}
               className="text-xs text-muted-foreground hover:text-foreground cursor-pointer"
@@ -461,7 +466,7 @@ export default function ChartLegend({
 
   const content = (
     <div className={isSidebar ? 'h-full' : 'relative'}>
-      <div className={outerClasses} style={outerStyle}>
+      <div data-testid="chart-legend" className={outerClasses} style={outerStyle}>
         {searchInput}
         {scrollContent}
         {bottomControls}