From 387afd9fd01c039d878d8ccb0d77c4268562a3dc Mon Sep 17 00:00:00 2001
From: Gbacc <Gbacc@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:55:28 +0200
Subject: [PATCH] fix(TDOPS-872): VList content cell should display a tooltip
 for 0 value (#4901)

* fix(TDOPS-872): VList content cell should display a tooltip for 0 value

* enhance proptypes and fix tests

* Cleanup
---
 .changeset/tall-beds-relax.md                 |  5 +++
 .../CellMappedData.component.test.js.snap     |  2 ++
 .../src/VirtualizedList/Content.component.js  | 20 ++++++++----
 .../VirtualizedList/Content.component.test.js | 32 +++++++++++++++++++
 .../__snapshots__/ListGrid.test.js.snap       | 13 ++++++++
 .../__snapshots__/ListTable.test.js.snap      | 13 ++++++++
 .../__snapshots__/RowLarge.test.js.snap       |  4 +++
 .../Content.component.test.js.snap            | 12 +++++++
 .../RendererSelector.test.js.snap             | 13 ++++++++
 .../VirtualizedList.test.js.snap              | 13 ++++++++
 10 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/tall-beds-relax.md
 create mode 100644 packages/components/src/VirtualizedList/Content.component.test.js
 create mode 100644 packages/components/src/VirtualizedList/__snapshots__/Content.component.test.js.snap

diff --git a/.changeset/tall-beds-relax.md b/.changeset/tall-beds-relax.md
new file mode 100644
index 0000000000..a2acf416db
--- /dev/null
+++ b/.changeset/tall-beds-relax.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+TDOPS-872 - VList cell content should display a tooltip for 0 value as well
diff --git a/packages/components/src/VirtualizedList/CellMappedData/__snapshots__/CellMappedData.component.test.js.snap b/packages/components/src/VirtualizedList/CellMappedData/__snapshots__/CellMappedData.component.test.js.snap
index 1e179cba78..a581fd217d 100644
--- a/packages/components/src/VirtualizedList/CellMappedData/__snapshots__/CellMappedData.component.test.js.snap
+++ b/packages/components/src/VirtualizedList/CellMappedData/__snapshots__/CellMappedData.component.test.js.snap
@@ -4,6 +4,8 @@ exports[`CellMappedData should render checked mapped data cell for a string valu
 <div
   aria-describedby="42"
   class="tc-virtualizedlist-default-cell"
+  data-test="tc-virtualizedlist-default-cell-tooltip"
+  data-testid="tc-virtualizedlist-default-cell-tooltip"
 >
   Value 1
 </div>
diff --git a/packages/components/src/VirtualizedList/Content.component.js b/packages/components/src/VirtualizedList/Content.component.js
index 9bef194eac..a924a0e6d6 100644
--- a/packages/components/src/VirtualizedList/Content.component.js
+++ b/packages/components/src/VirtualizedList/Content.component.js
@@ -5,23 +5,29 @@ import TooltipTrigger from '../TooltipTrigger';
 
 function DefaultRenderer({ cellData, columnData, rowData }) {
 	const { getTooltipLabel } = columnData;
-	let tooltipLabel = columnData.tooltipLabel || cellData;
+	let tooltipLabel = columnData.tooltipLabel != null ? columnData.tooltipLabel : cellData;
 	if (typeof getTooltipLabel === 'function') {
 		tooltipLabel = getTooltipLabel(rowData);
 	}
-	return tooltipLabel ? (
+	return tooltipLabel != null ? (
 		<TooltipTrigger label={tooltipLabel} tooltipPlacement={columnData.tooltipPlacement || 'top'}>
-			<div className="tc-virtualizedlist-default-cell">{cellData}</div>
+			<div
+				className="tc-virtualizedlist-default-cell"
+				data-test="tc-virtualizedlist-default-cell-tooltip"
+				data-testid="tc-virtualizedlist-default-cell-tooltip"
+			>
+				{cellData}
+			</div>
 		</TooltipTrigger>
 	) : (
 		<div className="tc-virtualizedlist-default-cell">{cellData}</div>
 	);
 }
 DefaultRenderer.propTypes = {
-	cellData: PropTypes.string,
+	cellData: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	rowData: PropTypes.object,
 	columnData: PropTypes.shape({
-		tooltipLabel: PropTypes.string,
+		tooltipLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		tooltipPlacement: PropTypes.string,
 		getTooltipLabel: PropTypes.func,
 	}),
@@ -41,11 +47,11 @@ export default function Content() {
 Content.displayName = 'Content';
 Content.defaultProps = defaultColumnConfiguration;
 Content.propTypes = {
-	label: PropTypes.string.isRequired,
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 	dataKey: PropTypes.string.isRequired,
 	width: PropTypes.number.isRequired,
 	columnData: PropTypes.shape({
-		tooltipLabel: PropTypes.string,
+		tooltipLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 		tooltipPlacement: PropTypes.string,
 		getTooltipLabel: PropTypes.func,
 	}).isRequired,
diff --git a/packages/components/src/VirtualizedList/Content.component.test.js b/packages/components/src/VirtualizedList/Content.component.test.js
new file mode 100644
index 0000000000..e2bf48bdd4
--- /dev/null
+++ b/packages/components/src/VirtualizedList/Content.component.test.js
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import { defaultColumnConfiguration } from './Content.component';
+
+jest.unmock('@talend/design-system');
+
+describe('CellLabel', () => {
+	const CellContent = defaultColumnConfiguration.cellRenderer;
+	it('should default render a label', () => {
+		// given
+		const label = 'my label';
+		// when
+		const { container } = render(<CellContent cellData={label} columnData={{}} />);
+		// then
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	it('should render a tooltip if available', () => {
+		// given
+		const label = 'my label';
+		// when
+		render(
+			<CellContent
+				cellData={label}
+				columnData={{
+					tooltipLabel: 0,
+				}}
+			/>,
+		);
+		// then
+		expect(screen.getByTestId('tc-virtualizedlist-default-cell-tooltip')).toBeVisible();
+	});
+});
diff --git a/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap b/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap
index 68447312d3..e4ee2c8019 100644
--- a/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap
+++ b/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap
@@ -47,7 +47,10 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               class="theme-field-value"
             >
               <div
+                aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 0
               </div>
@@ -69,6 +72,8 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               <div
                 aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 Title with icon and actions
               </div>
@@ -90,6 +95,8 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               <div
                 aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 Simple row with icon and actions
               </div>
@@ -132,6 +139,8 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               <div
                 aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 1
               </div>
@@ -153,6 +162,8 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               <div
                 aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 Title without actions
               </div>
@@ -174,6 +185,8 @@ exports[`ListGrid should render react-virtualized list 1`] = `
               <div
                 aria-describedby="42"
                 class="tc-virtualizedlist-default-cell"
+                data-test="tc-virtualizedlist-default-cell-tooltip"
+                data-testid="tc-virtualizedlist-default-cell-tooltip"
               >
                 Simple row without actions
               </div>
diff --git a/packages/components/src/VirtualizedList/ListTable/__snapshots__/ListTable.test.js.snap b/packages/components/src/VirtualizedList/ListTable/__snapshots__/ListTable.test.js.snap
index ca7ed8805b..c36926919a 100644
--- a/packages/components/src/VirtualizedList/ListTable/__snapshots__/ListTable.test.js.snap
+++ b/packages/components/src/VirtualizedList/ListTable/__snapshots__/ListTable.test.js.snap
@@ -73,7 +73,10 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           style="overflow: hidden; flex: 0 1 0px;"
         >
           <div
+            aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             0
           </div>
@@ -87,6 +90,8 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Title with icon and actions
           </div>
@@ -100,6 +105,8 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Simple row with icon and actions
           </div>
@@ -120,6 +127,8 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             1
           </div>
@@ -133,6 +142,8 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Title without actions
           </div>
@@ -146,6 +157,8 @@ exports[`ListGrid should render react-virtualized table 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Simple row without actions
           </div>
diff --git a/packages/components/src/VirtualizedList/RowLarge/__snapshots__/RowLarge.test.js.snap b/packages/components/src/VirtualizedList/RowLarge/__snapshots__/RowLarge.test.js.snap
index 1aafd8e415..2123b7c34d 100644
--- a/packages/components/src/VirtualizedList/RowLarge/__snapshots__/RowLarge.test.js.snap
+++ b/packages/components/src/VirtualizedList/RowLarge/__snapshots__/RowLarge.test.js.snap
@@ -83,6 +83,8 @@ exports[`RowLarge should render large row 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             1
           </div>
@@ -104,6 +106,8 @@ exports[`RowLarge should render large row 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Title from second item
           </div>
diff --git a/packages/components/src/VirtualizedList/__snapshots__/Content.component.test.js.snap b/packages/components/src/VirtualizedList/__snapshots__/Content.component.test.js.snap
new file mode 100644
index 0000000000..b7c3cca6cb
--- /dev/null
+++ b/packages/components/src/VirtualizedList/__snapshots__/Content.component.test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellLabel should default render a label 1`] = `
+<div
+  aria-describedby="42"
+  class="tc-virtualizedlist-default-cell"
+  data-test="tc-virtualizedlist-default-cell-tooltip"
+  data-testid="tc-virtualizedlist-default-cell-tooltip"
+>
+  my label
+</div>
+`;
diff --git a/packages/components/src/VirtualizedList/__snapshots__/RendererSelector.test.js.snap b/packages/components/src/VirtualizedList/__snapshots__/RendererSelector.test.js.snap
index b0f062e0a5..f92e650629 100644
--- a/packages/components/src/VirtualizedList/__snapshots__/RendererSelector.test.js.snap
+++ b/packages/components/src/VirtualizedList/__snapshots__/RendererSelector.test.js.snap
@@ -100,7 +100,10 @@ exports[`RendererSelector should render table list by default 1`] = `
           style="overflow: hidden; flex: 0 0 50px;"
         >
           <div
+            aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             0
           </div>
@@ -114,6 +117,8 @@ exports[`RendererSelector should render table list by default 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Title with icon and actions
           </div>
@@ -127,6 +132,8 @@ exports[`RendererSelector should render table list by default 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Simple row with icon and actions
           </div>
@@ -149,6 +156,8 @@ exports[`RendererSelector should render table list by default 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             1
           </div>
@@ -162,6 +171,8 @@ exports[`RendererSelector should render table list by default 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Title without actions
           </div>
@@ -175,6 +186,8 @@ exports[`RendererSelector should render table list by default 1`] = `
           <div
             aria-describedby="42"
             class="tc-virtualizedlist-default-cell"
+            data-test="tc-virtualizedlist-default-cell-tooltip"
+            data-testid="tc-virtualizedlist-default-cell-tooltip"
           >
             Simple row without actions
           </div>
diff --git a/packages/components/src/VirtualizedList/__snapshots__/VirtualizedList.test.js.snap b/packages/components/src/VirtualizedList/__snapshots__/VirtualizedList.test.js.snap
index bc0ceb71aa..6396602d95 100644
--- a/packages/components/src/VirtualizedList/__snapshots__/VirtualizedList.test.js.snap
+++ b/packages/components/src/VirtualizedList/__snapshots__/VirtualizedList.test.js.snap
@@ -141,7 +141,10 @@ exports[`VirtualizedList should render 1`] = `
             style="overflow: hidden; flex: 0 0 50px;"
           >
             <div
+              aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               0
             </div>
@@ -155,6 +158,8 @@ exports[`VirtualizedList should render 1`] = `
             <div
               aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               Title with icon and actions
             </div>
@@ -168,6 +173,8 @@ exports[`VirtualizedList should render 1`] = `
             <div
               aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               Simple row with icon and actions
             </div>
@@ -221,6 +228,8 @@ exports[`VirtualizedList should render 1`] = `
             <div
               aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               1
             </div>
@@ -234,6 +243,8 @@ exports[`VirtualizedList should render 1`] = `
             <div
               aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               Title without actions
             </div>
@@ -247,6 +258,8 @@ exports[`VirtualizedList should render 1`] = `
             <div
               aria-describedby="42"
               class="tc-virtualizedlist-default-cell"
+              data-test="tc-virtualizedlist-default-cell-tooltip"
+              data-testid="tc-virtualizedlist-default-cell-tooltip"
             >
               Simple row without actions
             </div>