feat: implement cart icon component with quantity badge and integrate into store header for improved UI

src/app/shared/components/cart-icon/cart-icon.component.spec.ts

@@ -0,0 +1,60 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { CartIconComponent } from './cart-icon.component';
+
+describe('CartIconComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CartIconComponent]
+    }).compileComponents();
+  });
+
+  function setup(quantity?: number | null, disabled = false) {
+    const fixture = TestBed.createComponent(CartIconComponent);
+    if (quantity !== undefined) {
+      fixture.componentRef.setInput('quantity', quantity);
+    }
+    fixture.componentRef.setInput('disabled', disabled);
+    fixture.detectChanges();
+
+    return {
+      fixture,
+      element: fixture.nativeElement as HTMLElement
+    };
+  }
+
+  it('renders the cart shopping icon', () => {
+    const { element } = setup();
+    expect(element.querySelector('.fa-cart-shopping')).not.toBeNull();
+  });
+
+  it('does not render the badge when quantity is undefined', () => {
+    const { element } = setup();
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('does not render the badge when quantity is 0', () => {
+    const { element } = setup(0);
+    expect(element.querySelector('[data-testid="cart-badge"]')).toBeNull();
+  });
+
+  it('renders the badge with correct quantity when positive', () => {
+    const { element } = setup(3);
+    const badge = element.querySelector('[data-testid="cart-badge"]');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent?.trim()).toBe('3');
+  });
+
+  it('disables the button when disabled is true', () => {
+    const { element } = setup(undefined, true);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(true);
+  });
+
+  it('enables the button when disabled is false', () => {
+    const { element } = setup(undefined, false);
+    const button = element.querySelector('button');
+    expect(button?.disabled).toBe(false);
+  });
+});