From 2871be50a3af3679b72455b261ed2b8c44419bcc Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 20 Dec 2023 13:39:50 +0100
Subject: [PATCH] Improve unit tests

---
 .../components/src/truncate/test/index.tsx    | 81 ++++++++++++-------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/truncate/test/index.tsx b/packages/components/src/truncate/test/index.tsx
index 082b6aa232d47..275b0fc3182fe 100644
--- a/packages/components/src/truncate/test/index.tsx
+++ b/packages/components/src/truncate/test/index.tsx
@@ -8,36 +8,63 @@ import { render, screen } from '@testing-library/react';
  */
 import { Truncate } from '..';
 
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
-	} );
+describe( 'Truncate', () => {
+	describe( 'with string or number children', () => {
+		test( 'should pass through when no truncation props are set', () => {
+			render( <Truncate>Lorem ipsum</Truncate> );
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 
-	test( 'should render limit', () => {
-		render(
-			<Truncate limit={ 1 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'L…' ) ).toBeVisible();
-	} );
+		test( 'should render numbers correctly', () => {
+			render( <Truncate>{ 14 }</Truncate> );
+			expect( screen.getByText( '14' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the start when the limit prop is set and the ellipsizeMode is tail', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="tail">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( 'L…' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the end when the limit prop is set and the ellipsizeMode is head', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="head">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( '…m' ) ).toBeVisible();
+		} );
+
+		test( 'should render custom ellipsis', () => {
+			render(
+				<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		} );
 
-	test( 'should render custom ellipsis', () => {
-		render(
-			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		test( 'should render custom ellipsizeMode', () => {
+			render(
+				<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+		} );
 	} );
 
-	test( 'should render custom ellipsizeMode', () => {
-		render(
-			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+	describe( 'with other children types', () => {
+		test( 'should no-op', () => {
+			render(
+				<Truncate>
+					<>Lorem ipsum</>
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 	} );
 } );