fix: precise truncation assertions

src/content/components/virtual-preview-list.ts

@@ -275,6 +275,12 @@ export class VirtualPreviewList extends LitElement {
       white-space: nowrap;
     }
 
+    .old-name.old-name-secondary {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .new-name {
       font-size: 14px;
       color: var(--cdr-text, #262626);
@@ -287,7 +293,8 @@ export class VirtualPreviewList extends LitElement {
       gap: 8px;
     }
 
-    .new-name-text {
+    .new-name-text,
+    .new-name.new-name-primary .new-name-text {
       flex: 1;
       min-width: 0;
       overflow: hidden;

tests/unit/virtual-preview-list.test.ts

@@ -150,7 +150,7 @@ describe('VirtualPreviewList pending preview mapping', () => {
     element.remove();
   });
 
-  it('locks preview-item/preview-content structure with secondary/primary name classes and truncation styles', async () => {
+  it('locks preview-item structure with semantic classes and target-specific truncation rules', async () => {
     const element = new VirtualPreviewList();
     element.items = [
       {
@@ -170,25 +170,39 @@ describe('VirtualPreviewList pending preview mapping', () => {
     document.body.appendChild(element);
     await element.updateComplete;
 
-    const previewItem = element.shadowRoot?.querySelector('.preview-item[data-preview-item="true"]');
+
+    const previewItem = element.shadowRoot?.querySelector('.preview-item');
     expect(previewItem).toBeTruthy();
 
-    const previewContent = previewItem?.querySelector('.preview-content[data-preview-content="true"]');
+    const previewContent = previewItem?.querySelector('.preview-content');
     expect(previewContent).toBeTruthy();
 
     const oldName = previewContent?.querySelector('.old-name.old-name-secondary');
     expect(oldName).toBeTruthy();
 
-    const newName = previewContent?.querySelector('.new-name.new-name-primary');
+    const newNameText = previewContent?.querySelector('.new-name-text');
-    expect(newName).toBeTruthy();
-    const newNameText = newName?.querySelector('.new-name-text');
     expect(newNameText).toBeTruthy();
+
     const styleContent = Array.from(element.shadowRoot?.querySelectorAll('style') ?? [])
       .map((style) => style.textContent ?? '')
       .join(' ');
-    expect(styleContent).toContain('overflow: hidden');
+    const extractBlock = (selector: string) => {
-    expect(styleContent).toContain('text-overflow: ellipsis');
+      const start = styleContent.indexOf(selector);
-    expect(styleContent).toContain('white-space: nowrap');
+      expect(start, `missing ${selector}`).toBeGreaterThan(-1);
+      const braceOpen = styleContent.indexOf('{', start);
+      const braceClose = styleContent.indexOf('}', braceOpen);
+      return styleContent.slice(braceOpen + 1, braceClose);
+    };
+
+    const oldNameDeclarations = extractBlock('.old-name.old-name-secondary');
+    expect(oldNameDeclarations).toContain('overflow: hidden');
+    expect(oldNameDeclarations).toContain('text-overflow: ellipsis');
+    expect(oldNameDeclarations).toContain('white-space: nowrap');
+
+    const newNameDeclarations = extractBlock('.new-name.new-name-primary .new-name-text');
+    expect(newNameDeclarations).toContain('overflow: hidden');
+    expect(newNameDeclarations).toContain('text-overflow: ellipsis');
+    expect(newNameDeclarations).toContain('white-space: nowrap');
 
     element.remove();
   });