diff --git a/src/app/shared/utils.spec.ts b/src/app/shared/utils.spec.ts
index 5d6ce0b..c88a21f 100644
--- a/src/app/shared/utils.spec.ts
+++ b/src/app/shared/utils.spec.ts
@@ -2,15 +2,31 @@ import { SelectItem } from 'primeng/api'
 import { dropDownSortItemsByLabel, filterObject, limitText, prepareUrlPath, bffImageUrl } from './utils'
 import { RefType } from './generated'
 
-describe('utils', () => {
-  it('should limit text if text too long', () => {
-    const result = limitText('textData', 4)
-    expect(result).toBe('text...')
-  })
+describe('util functions', () => {
+  describe('limitText', () => {
+    it('should truncate text that exceeds the specified limit', () => {
+      const result = limitText('hello', 4)
+
+      expect(result).toEqual('hell...')
+    })
+
+    it('should return the original text if it does not exceed the limit', () => {
+      const result = limitText('hello', 6)
+
+      expect(result).toEqual('hello')
+    })
+
+    it('should return an empty string for undefined input', () => {
+      const str: any = undefined
+      const result = limitText(str, 5)
 
-  it('should handle zero length text', () => {
-    const result = limitText(null, 4)
-    expect(result).toBe('')
+      expect(result).toEqual('')
+    })
+
+    it('should handle zero length text', () => {
+      const result = limitText(null, 4)
+      expect(result).toEqual('')
+    })
   })
 
   it('should exclude props', () => {
diff --git a/src/app/theme/theme-designer/theme-designer.component.spec.ts b/src/app/theme/theme-designer/theme-designer.component.spec.ts
index 7929716..1ba0ccd 100644
--- a/src/app/theme/theme-designer/theme-designer.component.spec.ts
+++ b/src/app/theme/theme-designer/theme-designer.component.spec.ts
@@ -184,22 +184,22 @@ describe('ThemeDesignerComponent', () => {
 
       component.autoApply = true
 
-      const fontFormControlEl = fixture.debugElement.query(By.css('#theme_detail_font-family'))
+      const fontFormControlEl = fixture.debugElement.query(By.css('#th_designer_font-family'))
       expect(fontFormControlEl).toBeDefined()
       fontFormControlEl.nativeElement.value = 'newFamily'
       fontFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const generalFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color_primary-color'))
+      const generalFormControlEl = fixture.debugElement.query(By.css('#th_designer_item_color_primary-color'))
       expect(generalFormControlEl).toBeDefined()
       generalFormControlEl.nativeElement.value = 'rgba(0, 0, 0, 0.87)'
       generalFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const topbarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color_topbar-bg-color'))
+      const topbarFormControlEl = fixture.debugElement.query(By.css('#th_designer_item_color_topbar-bg-color'))
       expect(topbarFormControlEl).toBeDefined()
       topbarFormControlEl.nativeElement.value = '#000000'
       topbarFormControlEl.nativeElement.dispatchEvent(new Event('input'))
 
-      const sidebarFormControlEl = fixture.debugElement.query(By.css('#theme_detail_item_color_menu-text-color'))
+      const sidebarFormControlEl = fixture.debugElement.query(By.css('#th_designer_item_color_menu-text-color'))
       expect(sidebarFormControlEl).toBeDefined()
       sidebarFormControlEl.nativeElement.value = '#102030'
       sidebarFormControlEl.nativeElement.dispatchEvent(new Event('input'))