diff --git a/apps/showcase_ui/src/app/components/test-result-badge/test-result-card.component.spec.ts b/apps/showcase_ui/src/app/components/test-result-badge/test-result-card.component.spec.ts
new file mode 100644
index 0000000..3fff247
--- /dev/null
+++ b/apps/showcase_ui/src/app/components/test-result-badge/test-result-card.component.spec.ts
@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { TestResultCardComponent } from './test-result-card.component';
+
+describe('用例测试结果卡片', () => {
+  it('显式展示不通过及原因，允许展开证据', () => {
+    const fixture = TestBed.createComponent(TestResultCardComponent);
+    fixture.componentRef.setInput('result', {status: 'failed', reason: '预期英文，实际为中文。', evidence: ['截图显示搜索设置']});
+    fixture.detectChanges();
+    const view: HTMLElement = fixture.nativeElement;
+    expect(view.querySelector('[aria-label="用例测试结果"]')).not.toBeNull();
+    expect(view.querySelector('.prominent')?.textContent).toContain('测试不通过');
+    expect(view.querySelector('.reason')?.textContent).toContain('预期英文，实际为中文。');
+    const details = view.querySelector('details')!;
+    expect(details.open).toBeFalse();
+    details.querySelector('summary')!.click();
+    expect(details.open).toBeTrue();
+    expect(details.textContent).toContain('截图显示搜索设置');
+  });
+});