docs(table-chart): improve comments and test consistency

Addresses additional code review feedback:
- Fix misleading comment in sanitizeHeaderId: clarify transformation example
  ('percentpct_nice' → '%pct_nice' → 'percentpct_nice' for accuracy)
- Fix misleading use of "preserved" in test comments (characters are
  REPLACED with words, not preserved)
- Replace all it() with test() for consistency with codebase standards
  (30 instances updated to follow CLAUDE.md guidelines)

No functional changes - pure documentation and style improvements.

Tests: 45 passed (13 unit + 2 integration + 30 existing)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: sadpandajoe

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -154,7 +154,7 @@ export function sanitizeHeaderId(columnId: string): string {
   return (
     columnId
       // Semantic replacements first: preserve meaning in IDs for readability
-      // (e.g., 'percentpct_nice' instead of '_pct_nice')
+      // (e.g., '%pct_nice' → 'percentpct_nice' instead of '_pct_nice')
       .replace(/%/g, 'percent')
       .replace(/#/g, 'hash')
       .replace(/△/g, 'delta')

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -94,8 +94,8 @@ test('sanitizeHeaderId should handle inputs with only special characters', () =>
   expect(sanitizeHeaderId('@@')).toBe('');
   expect(sanitizeHeaderId('   ')).toBe('');
   expect(sanitizeHeaderId('!@$')).toBe('');
-  expect(sanitizeHeaderId('!@#$')).toBe('hash'); // # → 'hash' is preserved (semantic replacement)
-  // Semantic replacements should be preserved even when alone
+  expect(sanitizeHeaderId('!@#$')).toBe('hash'); // # is replaced with 'hash' (semantic replacement)
+  // Semantic replacements produce readable output even when alone
   expect(sanitizeHeaderId('%')).toBe('percent');
   expect(sanitizeHeaderId('#')).toBe('hash');
   expect(sanitizeHeaderId('△')).toBe('delta');
@@ -104,7 +104,7 @@ test('sanitizeHeaderId should handle inputs with only special characters', () =>
 
 describe('plugin-chart-table', () => {
   describe('transformProps', () => {
-    it('should parse pageLength to pageSize', () => {
+    test('should parse pageLength to pageSize', () => {
       expect(transformProps(testData.basic).pageSize).toBe(20);
       expect(
         transformProps({
@@ -120,13 +120,13 @@ describe('plugin-chart-table', () => {
       ).toBe(0);
     });
 
-    it('should memoize data records', () => {
+    test('should memoize data records', () => {
       expect(transformProps(testData.basic).data).toBe(
         transformProps(testData.basic).data,
       );
     });
 
-    it('should memoize columns meta', () => {
+    test('should memoize columns meta', () => {
       expect(transformProps(testData.basic).columns).toBe(
         transformProps({
           ...testData.basic,
@@ -135,14 +135,14 @@ describe('plugin-chart-table', () => {
       );
     });
 
-    it('should format timestamp', () => {
+    test('should format timestamp', () => {
       // eslint-disable-next-line no-underscore-dangle
       const parsedDate = transformProps(testData.basic).data[0]
         .__timestamp as DateWithFormatter;
       expect(String(parsedDate)).toBe('2020-01-01 12:34:56');
       expect(parsedDate.getTime()).toBe(1577882096000);
     });
-    it('should process comparison columns when time_compare and comparison_type are set', () => {
+    test('should process comparison columns when time_compare and comparison_type are set', () => {
       const transformedProps = transformProps(testData.comparison);
       const comparisonColumns = transformedProps.columns.filter(
         col =>
@@ -164,7 +164,7 @@ describe('plugin-chart-table', () => {
       expect(comparisonColumns.some(col => col.label === '%')).toBe(true);
     });
 
-    it('should not process comparison columns when time_compare is empty', () => {
+    test('should not process comparison columns when time_compare is empty', () => {
       const propsWithoutTimeCompare = {
         ...testData.comparison,
         rawFormData: {
@@ -187,7 +187,7 @@ describe('plugin-chart-table', () => {
       expect(comparisonColumns.length).toBe(0);
     });
 
-    it('should correctly apply column configuration for comparison columns', () => {
+    test('should correctly apply column configuration for comparison columns', () => {
       const transformedProps = transformProps(testData.comparisonWithConfig);
 
       const comparisonColumns = transformedProps.columns.filter(
@@ -225,7 +225,7 @@ describe('plugin-chart-table', () => {
       expect(percentMetricConfig?.config).toEqual({ d3NumberFormat: '.3f' });
     });
 
-    it('should correctly format comparison columns using getComparisonColFormatter', () => {
+    test('should correctly format comparison columns using getComparisonColFormatter', () => {
       const transformedProps = transformProps(testData.comparisonWithConfig);
       const comparisonColumns = transformedProps.columns.filter(
         col =>
@@ -256,7 +256,7 @@ describe('plugin-chart-table', () => {
       expect(formattedPercentMetric).toBe('0.123');
     });
 
-    it('should set originalLabel for comparison columns when time_compare and comparison_type are set', () => {
+    test('should set originalLabel for comparison columns when time_compare and comparison_type are set', () => {
       const transformedProps = transformProps(testData.comparison);
 
       // Check if comparison columns are processed
@@ -343,7 +343,7 @@ describe('plugin-chart-table', () => {
     });
 
     describe('TableChart', () => {
-      it('render basic data', () => {
+      test('render basic data', () => {
         render(
           <TableChart {...transformProps(testData.basic)} sticky={false} />,
         );
@@ -362,7 +362,7 @@ describe('plugin-chart-table', () => {
         expect(cells[8]).toHaveTextContent('N/A');
       });
 
-      it('render advanced data', () => {
+      test('render advanced data', () => {
         render(
           <TableChart {...transformProps(testData.advanced)} sticky={false} />,
         );
@@ -379,7 +379,7 @@ describe('plugin-chart-table', () => {
         expect(cells[4]).toHaveTextContent('2.47k');
       });
 
-      it('render advanced data with currencies', () => {
+      test('render advanced data with currencies', () => {
         render(
           ProviderWrapper({
             children: (
@@ -399,7 +399,7 @@ describe('plugin-chart-table', () => {
         expect(cells[4]).toHaveTextContent('$ 2.47k');
       });
 
-      it('render data with a bigint value in a raw record mode', () => {
+      test('render data with a bigint value in a raw record mode', () => {
         render(
           ProviderWrapper({
             children: (
@@ -420,7 +420,7 @@ describe('plugin-chart-table', () => {
         expect(cells[3]).toHaveTextContent('1234567890123456789');
       });
 
-      it('render raw data', () => {
+      test('render raw data', () => {
         const props = transformProps({
           ...testData.raw,
           rawFormData: { ...testData.raw.rawFormData },
@@ -437,7 +437,7 @@ describe('plugin-chart-table', () => {
         expect(cells[1]).toHaveTextContent('0');
       });
 
-      it('render raw data with currencies', () => {
+      test('render raw data with currencies', () => {
         const props = transformProps({
           ...testData.raw,
           rawFormData: {
@@ -462,7 +462,7 @@ describe('plugin-chart-table', () => {
         expect(cells[2]).toHaveTextContent('$ 0');
       });
 
-      it('render small formatted data with currencies', () => {
+      test('render small formatted data with currencies', () => {
         const props = transformProps({
           ...testData.raw,
           rawFormData: {
@@ -504,14 +504,14 @@ describe('plugin-chart-table', () => {
         expect(cells[2]).toHaveTextContent('$ 0.61');
       });
 
-      it('render empty data', () => {
+      test('render empty data', () => {
         render(
           <TableChart {...transformProps(testData.empty)} sticky={false} />,
         );
         expect(screen.getByText('No records found')).toBeInTheDocument();
       });
 
-      it('render color with column color formatter', () => {
+      test('render color with column color formatter', () => {
         render(
           ProviderWrapper({
             children: (
@@ -541,7 +541,7 @@ describe('plugin-chart-table', () => {
         expect(getComputedStyle(screen.getByTitle('2467')).background).toBe('');
       });
 
-      it('render cell without color', () => {
+      test('render cell without color', () => {
         const dataWithEmptyCell = cloneDeep(testData.advanced.queriesData[0]);
         dataWithEmptyCell.data.push({
           __timestamp: null,
@@ -582,7 +582,7 @@ describe('plugin-chart-table', () => {
         );
         expect(getComputedStyle(screen.getByText('N/A')).background).toBe('');
       });
-      it('should display original label in grouped headers', () => {
+      test('should display original label in grouped headers', () => {
         const props = transformProps(testData.comparison);
 
         render(<TableChart {...props} sticky={false} />);
@@ -597,7 +597,7 @@ describe('plugin-chart-table', () => {
         expect(hasMetricHeaders).toBe(true);
       });
 
-      it('should set meaningful header IDs for time-comparison columns', () => {
+      test('should set meaningful header IDs for time-comparison columns', () => {
         // Test time-comparison columns have proper IDs
         // Uses originalLabel (e.g., "metric_1") which is sanitized for CSS safety
         const props = transformProps(testData.comparison);
@@ -653,7 +653,7 @@ describe('plugin-chart-table', () => {
         });
       });
 
-      it('should set meaningful header IDs for regular table columns', () => {
+      test('should set meaningful header IDs for regular table columns', () => {
         // Test regular (non-time-comparison) columns have proper IDs
         // Uses fallback to column.key since originalLabel is undefined
         const props = transformProps(testData.advanced);
@@ -732,7 +732,7 @@ describe('plugin-chart-table', () => {
         });
       });
 
-      it('render cell bars properly, and only when it is toggled on in both regular and percent metrics', () => {
+      test('render cell bars properly, and only when it is toggled on in both regular and percent metrics', () => {
         const props = transformProps({
           ...testData.raw,
           rawFormData: { ...testData.raw.rawFormData },
@@ -782,7 +782,7 @@ describe('plugin-chart-table', () => {
         cells = document.querySelectorAll('td');
       });
 
-      it('render color with string column color formatter(operator begins with)', () => {
+      test('render color with string column color formatter(operator begins with)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -814,7 +814,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('render color with string column color formatter (operator ends with)', () => {
+      test('render color with string column color formatter (operator ends with)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -843,7 +843,7 @@ describe('plugin-chart-table', () => {
         expect(getComputedStyle(screen.getByText('Joe')).background).toBe('');
       });
 
-      it('render color with string column color formatter (operator containing)', () => {
+      test('render color with string column color formatter (operator containing)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -872,7 +872,7 @@ describe('plugin-chart-table', () => {
         expect(getComputedStyle(screen.getByText('Joe')).background).toBe('');
       });
 
-      it('render color with string column color formatter (operator not containing)', () => {
+      test('render color with string column color formatter (operator not containing)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -903,7 +903,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('render color with string column color formatter (operator =)', () => {
+      test('render color with string column color formatter (operator =)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -934,7 +934,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('render color with string column color formatter (operator None)', () => {
+      test('render color with string column color formatter (operator None)', () => {
         render(
           ProviderWrapper({
             children: (
@@ -967,7 +967,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('render color with column color formatter to entire row', () => {
+      test('render color with column color formatter to entire row', () => {
         render(
           ProviderWrapper({
             children: (
@@ -1003,7 +1003,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('display text color using column color formatter', () => {
+      test('display text color using column color formatter', () => {
         render(
           ProviderWrapper({
             children: (
@@ -1036,7 +1036,7 @@ describe('plugin-chart-table', () => {
         );
       });
 
-      it('display text color using column color formatter for entire row', () => {
+      test('display text color using column color formatter for entire row', () => {
         render(
           ProviderWrapper({
             children: (