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

…ue (#4901) * fix(TDOPS-872): VList content cell should display a tooltip for 0 value * enhance proptypes and fix tests * Cleanup
Talend · Sep 22, 2023 · 387afd9 · 387afd9
1 parent 9435bbc
commit 387afd9
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 7 deletions.
diff --git a/.changeset/tall-beds-relax.md 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/...ts/src/VirtualizedList/CellMappedData/__snapshots__/CellMappedData.component.test.js.snap b/...ts/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>