From b668ba3757fbf2c364bbe9ffe8b67f3b5dd5ece0 Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Tue, 12 Nov 2024 16:14:12 +0200
Subject: [PATCH] chore(html): add test for notification with icon and long
 text

---
 .../html/src/notification/tests/notification.tsx     | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/html/src/notification/tests/notification.tsx b/packages/html/src/notification/tests/notification.tsx
index a1074c31675..90ada051488 100644
--- a/packages/html/src/notification/tests/notification.tsx
+++ b/packages/html/src/notification/tests/notification.tsx
@@ -16,7 +16,7 @@ const styles = `
 export default () => (
     <>
         <style>{styles}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-4">
+        <div id="test-area" className="k-d-grid k-grid-cols-5">
 
             <span className="k-colspan-all k-col-span-full">LTR</span>
             <div>
@@ -39,6 +39,11 @@ export default () => (
                     <IconNotificationClosable text="Closable notification with icon" />
                 </AnimationContainer>
             </div>
+            <div>
+                <AnimationContainer>
+                    <IconNotificationClosable text="Closable notification with icon and very long text start ............. ............ .................... .......... ............ end" />
+                </AnimationContainer>
+            </div>
 
             <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
@@ -61,6 +66,11 @@ export default () => (
                     <IconNotificationClosable text="Closable notification with icon" />
                 </AnimationContainer>
             </div>
+            <div dir="rtl">
+                <AnimationContainer>
+                    <IconNotificationClosable text="Closable notification with icon and very long text start ............. ............ .................... .......... ............ end" />
+                </AnimationContainer>
+            </div>
 
         </div>
     </>