Bug 2024075 Test Version Refactor: Moved subtest columns to test version strategy and test version files

src/__tests__/CompareResults/SubtestsRevisionRow.test.tsx

@@ -139,21 +139,21 @@ describe('SubtestsRevisionRow Component', () => {
     expect(await screen.findByText(/Normality Test/i)).toBeInTheDocument();
   });
 
-  it('renders subtests results defaulting to student-t with no testVersion', async () => {
+  it('renders subtests results defaulting to mann-whitney-u with no testVersion', async () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-    const { subtestsResult } = getTestData();
+    const { subtestsMannWhitneyResult } = getTestData();
     const mockGridTemplateColumns = '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr';
     renderWithRoute(
       <SubtestsRevisionRow
-        result={subtestsResult[0]}
+        result={subtestsMannWhitneyResult[0]}
         gridTemplateColumns={mockGridTemplateColumns}
         replicates={false}
       />,
     );
     const expandRowButton = await screen.findByTestId(/ExpandMoreIcon/);
     await user.click(expandRowButton);
 
-    expect(await screen.findByText(/Difference of means/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Normality Test/i)).toBeInTheDocument();
   });
 
   it('should display baseMean and newMean in subtests for student-t testVersion', async () => {
@@ -164,6 +164,7 @@ describe('SubtestsRevisionRow Component', () => {
         result={subtestsResult[0]}
         gridTemplateColumns={mockGridTemplateColumns}
         replicates={false}
+        testVersion='student-t'
       />,
     );
 

src/common/testVersions/index.ts

@@ -12,6 +12,10 @@ export interface TestVersionStrategy {
     newAvg: number | null;
   };
   renderColumns(result: CombinedResultsItemType): ReactNode;
+  renderSubtestColumns(
+    result: CombinedResultsItemType,
+    expanded: boolean,
+  ): ReactNode;
 }
 
 // Registry mapping each TestVersion to its concrete strategy.

src/common/testVersions/mannWhitney.tsx

@@ -2,14 +2,19 @@ import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import Box from '@mui/material/Box';
 
+import { FontSize } from '../../styles';
 import {
   CombinedResultsItemType,
   MannWhitneyResultsItem,
 } from '../../types/state';
 import { TableConfig } from '../../types/types';
+import { formatNumber } from '../../utils/format';
 import { capitalize } from '../../utils/helpers';
-import { getPlatformShortName } from '../../utils/platform';
-import { determineStatusHintClass } from '../../utils/revisionRowHelpers';
+import { getBrowserDisplay, getPlatformShortName } from '../../utils/platform';
+import {
+  determineSign,
+  determineStatusHintClass,
+} from '../../utils/revisionRowHelpers';
 import { defaultSortFunction } from '../../utils/sortFunctions';
 import {
   tooltipBaseMean,
@@ -202,6 +207,84 @@ export const mannWhitneyStrategy = {
     };
   },
 
+  renderSubtestColumns(result: CombinedResultsItemType, expanded: boolean) {
+    const {
+      test,
+      cliffs_delta,
+      mann_whitney_test,
+      cles,
+      direction_of_change,
+      base_measurement_unit: baseUnit,
+      new_measurement_unit: newUnit,
+      base_app: baseApp,
+      new_app: newApp,
+    } = result as MannWhitneyResultsItem;
+    const mann_whitney_interpretation = mann_whitney_test?.interpretation
+      ? capitalize(mann_whitney_test.interpretation)
+      : '-';
+    const clesVal = ((cles?.cles ?? 0) * 100).toFixed(2);
+    const baseAvgValue =
+      (result as MannWhitneyResultsItem).base_standard_stats?.mean ?? 0;
+    const newAvgValue =
+      (result as MannWhitneyResultsItem).new_standard_stats?.mean ?? 0;
+    return (
+      <>
+        <div title={test} className='subtests subtests-mannwhitney' role='cell'>
+          {test}
+        </div>
+        <div className='mann-witney-browser-name cell' role='cell'>
+          {formatNumber(baseAvgValue)} {baseUnit}
+          {getBrowserDisplay(baseApp, newApp, expanded) && (
+            <span className={FontSize.xSmall}>({baseApp})</span>
+          )}
+        </div>
+        <div className='comparison-sign cell' role='cell'>
+          {determineSign(baseAvgValue, newAvgValue)}
+        </div>
+        <div className='mann-witney-browser-name cell' role='cell'>
+          {formatNumber(newAvgValue)} {newUnit}
+          {getBrowserDisplay(baseApp, newApp, expanded) && (
+            <span className={FontSize.xSmall}>({newApp})</span>
+          )}
+        </div>
+        <div className='status cell' role='cell'>
+          <Box
+            sx={{
+              bgcolor:
+                direction_of_change === 'improvement'
+                  ? 'status.improvement'
+                  : direction_of_change === 'regression'
+                    ? 'status.regression'
+                    : 'none',
+            }}
+            className={`status-hint ${determineStatusHintClass(
+              direction_of_change === 'improvement',
+              direction_of_change === 'regression',
+            )}`}
+          >
+            {direction_of_change === 'improvement' ? (
+              <ThumbUpIcon color='success' />
+            ) : null}
+            {direction_of_change === 'regression' ? (
+              <ThumbDownIcon color='error' />
+            ) : null}
+            {capitalize(direction_of_change ?? '')}
+          </Box>
+        </div>
+        <div className='delta cell' role='cell'>
+          {' '}
+          {cliffs_delta || '-'}
+        </div>
+        <div className='significance cell' role='cell'>
+          {mann_whitney_interpretation}
+        </div>
+        <div className='effects cell' role='cell'>
+          {clesVal ? `${clesVal}% ` : '-'}
+        </div>
+      </>
+    );
+  },
+
   renderColumns(result: CombinedResultsItemType) {
     const { cliffs_delta, direction_of_change, mann_whitney_test, cles } =
       result as MannWhitneyResultsItem;

src/common/testVersions/studentT.tsx

@@ -5,10 +5,13 @@ import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import Box from '@mui/material/Box';
 
+import { FontSize } from '../../styles';
 import { CombinedResultsItemType, CompareResultsItem } from '../../types/state';
 import { TableConfig } from '../../types/types';
-import { getPlatformShortName } from '../../utils/platform';
+import { formatNumber } from '../../utils/format';
+import { getBrowserDisplay, getPlatformShortName } from '../../utils/platform';
 import {
+  determineSign,
   determineStatus,
   determineStatusHintClass,
 } from '../../utils/revisionRowHelpers';
@@ -154,6 +157,72 @@ export const studentTStrategy = {
     };
   },
 
+  renderSubtestColumns(result: CombinedResultsItemType, expanded: boolean) {
+    const {
+      test,
+      delta_percentage: deltaPercent,
+      confidence_text: confidenceText,
+      is_improvement: improvement,
+      is_regression: regression,
+      base_avg_value: baseAvgValue,
+      new_avg_value: newAvgValue,
+      base_app: baseApp,
+      new_app: newApp,
+      base_measurement_unit: baseUnit,
+      new_measurement_unit: newUnit,
+    } = result as CompareResultsItem;
+
+    return (
+      <>
+        <div title={test} className='subtests' role='cell'>
+          {test}
+        </div>
+        <div className='browser-name cell' role='cell'>
+          {formatNumber(baseAvgValue)} {baseUnit}
+          {getBrowserDisplay(baseApp, newApp, expanded) && (
+            <span className={FontSize.xSmall}>({baseApp})</span>
+          )}
+        </div>
+        <div className='comparison-sign cell' role='cell'>
+          {determineSign(baseAvgValue, newAvgValue)}
+        </div>
+        <div className='mann-witney-browser-name cell' role='cell'>
+          {formatNumber(newAvgValue)} {newUnit}
+          {getBrowserDisplay(baseApp, newApp, expanded) && (
+            <span className={FontSize.xSmall}>({newApp})</span>
+          )}
+        </div>
+        <div className='status cell' role='cell'>
+          <Box
+            sx={{
+              bgcolor: improvement
+                ? 'status.improvement'
+                : regression
+                  ? 'status.regression'
+                  : 'none',
+            }}
+            className={`status-hint ${determineStatusHintClass(
+              !!improvement,
+              !!regression,
+            )}`}
+          >
+            {improvement ? <ThumbUpIcon color='success' /> : null}
+            {regression ? <ThumbDownIcon color='error' /> : null}
+            {determineStatus(!!improvement, !!regression)}
+          </Box>
+        </div>
+        <div className='delta cell' role='cell'>
+          {' '}
+          {`${deltaPercent} % `}
+        </div>
+        <div className='confidence cell' role='cell'>
+          {confidenceText && confidenceIcons[confidenceText]}
+          {confidenceText || '-'}
+        </div>
+      </>
+    );
+  },
+
   renderColumns(result: CombinedResultsItemType) {
     const {
       is_improvement: improvement,

src/components/CompareResults/RevisionRow.tsx

@@ -26,6 +26,7 @@ import {
   getPlatformAndVersion,
   getBrowserDisplay,
 } from '../../utils/platform';
+import { determineSign } from '../../utils/revisionRowHelpers';
 import AndroidIcon from '../Shared/Icons/AndroidIcon';
 import LinuxIcon from '../Shared/Icons/LinuxIcon';
 import SubtestsIcon from '../Shared/Icons/SubtestsIcon';
@@ -120,12 +121,6 @@ const revisionRow = style({
   },
 });
 
-function determineSign(baseMedianValue: number, newMedianValue: number) {
-  if (baseMedianValue > newMedianValue) return '>';
-  if (baseMedianValue < newMedianValue) return '<';
-  return '';
-}
-
 const platformIcons: Record<PlatformShortName, ReactNode> = {
   Linux: <LinuxIcon />,
   macOS: <AppleIcon />,