fix(table chart): Show Cell Bars correctly #25625 (#25707)

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

@@ -76,6 +76,7 @@ describe('plugin-chart-table', () => {
       wrap = mount(
         <TableChart {...transformProps(testData.basic)} sticky={false} />,
       );
+
       tree = wrap.render(); // returns a CheerioWrapper with jQuery-like API
       const cells = tree.find('td');
       expect(cells).toHaveLength(12);
@@ -158,6 +159,7 @@ describe('plugin-chart-table', () => {
         }),
       );
       const cells = document.querySelectorAll('td');
+
       expect(document.querySelectorAll('th')[0]).toHaveTextContent('num');
       expect(cells[0]).toHaveTextContent('$ 1.23k');
       expect(cells[1]).toHaveTextContent('$ 10k');
@@ -242,4 +244,61 @@ describe('plugin-chart-table', () => {
       expect(getComputedStyle(screen.getByText('N/A')).background).toBe('');
     });
   });
+
+  it('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 },
+    });
+
+    props.columns[0].isMetric = true;
+
+    render(
+      ProviderWrapper({
+        children: <TableChart {...props} sticky={false} />,
+      }),
+    );
+    let cells = document.querySelectorAll('div.cell-bar');
+    cells.forEach(cell => {
+      expect(cell).toHaveClass('positive');
+    });
+    props.columns[0].isMetric = false;
+    props.columns[0].isPercentMetric = true;
+
+    render(
+      ProviderWrapper({
+        children: <TableChart {...props} sticky={false} />,
+      }),
+    );
+    cells = document.querySelectorAll('div.cell-bar');
+    cells.forEach(cell => {
+      expect(cell).toHaveClass('positive');
+    });
+
+    props.showCellBars = false;
+
+    render(
+      ProviderWrapper({
+        children: <TableChart {...props} sticky={false} />,
+      }),
+    );
+    cells = document.querySelectorAll('td');
+
+    cells.forEach(cell => {
+      expect(cell).toHaveClass('test-c7w8t3');
+    });
+
+    props.columns[0].isPercentMetric = false;
+    props.columns[0].isMetric = true;
+
+    render(
+      ProviderWrapper({
+        children: <TableChart {...props} sticky={false} />,
+      }),
+    );
+    cells = document.querySelectorAll('td');
+    cells.forEach(cell => {
+      expect(cell).toHaveClass('test-c7w8t3');
+    });
+  });
 });