@rpg-engine/long-bow 0.8.171 → 0.8.173

package/src/components/Store/__test__/CountdownTimer.spec.tsx

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { CountdownTimer } from '../CountdownTimer';
+
+jest.mock('styled-components', () => {
+  const styled = new Proxy({}, {
+    get: () => () => (props) => props.children ?? null,
+  });
+  styled.span = (strings) => ({ children, ...props }) => <span {...props}>{children}</span>;
+  return { default: styled, keyframes: () => '' };
+});
+
+describe('CountdownTimer', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    jest.useRealTimers();
+  });
+
+  it('should show EXPIRED for past dates', () => {
+    const past = new Date(Date.now() - 10000).toISOString();
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={past} />, container);
+    });
+    expect(container.textContent).toContain('EXPIRED');
+  });
+
+  it('should call onExpired immediately for past dates', () => {
+    const onExpired = jest.fn();
+    const past = new Date(Date.now() - 1000).toISOString();
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={past} onExpired={onExpired} />, container);
+    });
+    expect(onExpired).toHaveBeenCalledTimes(1);
+  });
+
+  it('should display remaining time for future dates', () => {
+    const future = new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(); // 2 hours
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={future} />, container);
+    });
+    expect(container.textContent).not.toContain('EXPIRED');
+    expect(container.textContent).toContain('h');
+    expect(container.textContent).toContain('m');
+  });
+
+  it('should include seconds when less than a day remains', () => {
+    const future = new Date(Date.now() + 5 * 60 * 1000).toISOString(); // 5 minutes
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={future} />, container);
+    });
+    expect(container.textContent).toContain('s');
+  });
+
+  it('should not show seconds when more than a day remains', () => {
+    const future = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(); // 2 days
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={future} />, container);
+    });
+    expect(container.textContent).toContain('d');
+    expect(container.textContent).not.toContain('s');
+  });
+
+  it('should call onExpired when timer reaches zero', () => {
+    const onExpired = jest.fn();
+    const future = new Date(Date.now() + 1500).toISOString(); // 1.5 seconds
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={future} onExpired={onExpired} />, container);
+    });
+    expect(onExpired).not.toHaveBeenCalled();
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    expect(onExpired).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render EXPIRED after timer runs out', () => {
+    const future = new Date(Date.now() + 1500).toISOString();
+    act(() => {
+      ReactDOM.render(<CountdownTimer endsAt={future} />, container);
+    });
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    expect(container.textContent).toContain('EXPIRED');
+  });
+});

package/src/components/Store/__test__/FeaturedBanner.spec.tsx

@@ -0,0 +1,207 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { FeaturedBanner } from '../FeaturedBanner';
+
+jest.mock('../CountdownTimer', () => ({
+  CountdownTimer: ({ endsAt }) => <span data-testid="countdown">{endsAt}</span>,
+}));
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: ({ spriteKey }) => <div data-testid="sprite">{spriteKey}</div>,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick }) => <button onClick={onClick}>{label}</button>,
+}));
+
+jest.mock('../../shared/LabelPill/LabelPill', () => ({
+  LabelPill: ({ children }) => <span data-testid="badge">{children}</span>,
+}));
+
+jest.mock('styled-components', () => {
+  const makeEl = (tag) => () => ({ children, onClick, ...props }) =>
+    React.createElement(tag, { onClick, ...props }, children);
+  const styled = new Proxy({}, { get: (_, tag) => makeEl(tag) });
+  return { default: styled, keyframes: () => '' };
+});
+
+jest.mock('react-icons/fa', () => ({ FaBolt: () => <span>bolt</span> }));
+
+const featuredItems = [
+  { key: 'item-a', name: 'Item A', price: 4.99, originalPrice: 9.99, badge: 'SALE' },
+  { key: 'item-b', name: 'Item B', price: 14.99, badge: 'NEW' },
+];
+
+describe('FeaturedBanner', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render nothing when items array is empty', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={[]} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render featured item names', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('Item A');
+    expect(container.textContent).toContain('Item B');
+  });
+
+  it('should render item prices', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('4.99');
+    expect(container.textContent).toContain('14.99');
+  });
+
+  it('should render originalPrice with strikethrough when provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('9.99');
+  });
+
+  it('should render badge when provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    const badges = container.querySelectorAll('[data-testid="badge"]');
+    expect(badges.length).toBeGreaterThanOrEqual(1);
+    expect(container.textContent).toContain('SALE');
+  });
+
+  it('should call onSelectItem when card is clicked', () => {
+    const onSelectItem = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={onSelectItem} />,
+        container
+      );
+    });
+    // Click first card (div with onClick)
+    const cards = container.querySelectorAll('div[onclick], div');
+    act(() => {
+      const card = Array.from(container.querySelectorAll('*')).find(el =>
+        el.onclick && el.textContent.includes('Item A')
+      );
+      if (card) card.click();
+    });
+    expect(onSelectItem).toHaveBeenCalledWith(expect.objectContaining({ key: 'item-a' }));
+  });
+
+  it('should render Buy Now button when onQuickBuy provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner
+          items={featuredItems}
+          atlasJSON={{}}
+          atlasIMG=""
+          onSelectItem={jest.fn()}
+          onQuickBuy={jest.fn()}
+        />,
+        container
+      );
+    });
+    const buttons = container.querySelectorAll('button');
+    const buyNow = Array.from(buttons).find(b => b.textContent.includes('Buy Now'));
+    expect(buyNow).not.toBeUndefined();
+  });
+
+  it('should not render Buy Now button when onQuickBuy absent', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner items={featuredItems} atlasJSON={{}} atlasIMG="" onSelectItem={jest.fn()} />,
+        container
+      );
+    });
+    const buttons = container.querySelectorAll('button');
+    const buyNow = Array.from(buttons).find(b => b.textContent.includes('Buy Now'));
+    expect(buyNow).toBeUndefined();
+  });
+
+  it('should call onQuickBuy with correct item when Buy Now clicked', () => {
+    const onQuickBuy = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner
+          items={[featuredItems[0]]}
+          atlasJSON={{}}
+          atlasIMG=""
+          onSelectItem={jest.fn()}
+          onQuickBuy={onQuickBuy}
+        />,
+        container
+      );
+    });
+    const btn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent.includes('Buy Now')
+    );
+    act(() => { btn.click(); });
+    expect(onQuickBuy).toHaveBeenCalledWith(expect.objectContaining({ key: 'item-a' }));
+  });
+
+  it('should render CountdownTimer when endsAt provided', () => {
+    const future = new Date(Date.now() + 3600000).toISOString();
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner
+          items={[{ key: 'x', name: 'X', price: 1, endsAt: future }]}
+          atlasJSON={{}}
+          atlasIMG=""
+          onSelectItem={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.querySelector('[data-testid="countdown"]')).not.toBeNull();
+  });
+
+  it('should not render CountdownTimer when endsAt absent', () => {
+    act(() => {
+      ReactDOM.render(
+        <FeaturedBanner
+          items={[{ key: 'x', name: 'X', price: 1 }]}
+          atlasJSON={{}}
+          atlasIMG=""
+          onSelectItem={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.querySelector('[data-testid="countdown"]')).toBeNull();
+  });
+});

package/src/components/Store/__test__/PurchaseSuccess.spec.tsx

@@ -0,0 +1,174 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { PurchaseSuccess } from '../PurchaseSuccess';
+
+jest.mock('../../../mocks/atlas/entities/entities.json', () => ({ frames: {} }), { virtual: true });
+jest.mock('../../../mocks/atlas/entities/entities.png', () => 'entities.png', { virtual: true });
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({
+  SpriteFromAtlas: ({ spriteKey }) => <div data-testid="sprite">{spriteKey}</div>,
+}));
+
+jest.mock('../../shared/CTAButton/CTAButton', () => ({
+  CTAButton: ({ label, onClick }) => <button onClick={onClick}>{label}</button>,
+}));
+
+jest.mock('styled-components', () => {
+  const styled = new Proxy({}, {
+    get: () => () => ({ children, ...props }) => <div {...props}>{children}</div>,
+  });
+  styled.div = () => ({ children, ...props }) => <div {...props}>{children}</div>;
+  styled.h2 = () => ({ children }) => <h2>{children}</h2>;
+  styled.p = () => ({ children }) => <p>{children}</p>;
+  styled.span = () => ({ children }) => <span>{children}</span>;
+  return { default: styled, keyframes: () => '' };
+});
+
+jest.mock('react-icons/fa', () => ({
+  FaStar: () => <span>star</span>,
+  FaShoppingBag: () => <span>bag</span>,
+  FaTimes: () => <span>x</span>,
+}));
+
+const mockItems = [
+  { name: 'Life Potion', texturePath: 'items/life_potion.png', quantity: 2 },
+  { name: 'Sword', texturePath: 'items/sword.png', quantity: 1 },
+];
+
+describe('PurchaseSuccess', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render purchased item names', () => {
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={mockItems}
+          totalPrice={9.99}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={jest.fn()}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('Life Potion');
+    expect(container.textContent).toContain('Sword');
+  });
+
+  it('should show total price', () => {
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={mockItems}
+          totalPrice={19.98}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={jest.fn()}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('19.98');
+  });
+
+  it('should show quantity for items with qty > 1', () => {
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={[{ name: 'Potion', texturePath: 'potion.png', quantity: 5 }]}
+          totalPrice={4.99}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={jest.fn()}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('×5');
+  });
+
+  it('should not show quantity indicator for single items', () => {
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={[{ name: 'Sword', texturePath: 'sword.png', quantity: 1 }]}
+          totalPrice={9.99}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={jest.fn()}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+    expect(container.textContent).not.toContain('×1');
+  });
+
+  it('should call onContinueShopping when Continue Shopping clicked', () => {
+    const onContinueShopping = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={mockItems}
+          totalPrice={9.99}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={onContinueShopping}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+    const btn = Array.from(container.querySelectorAll('button')).find(b =>
+      b.textContent.includes('Continue Shopping')
+    );
+    act(() => { btn.click(); });
+    expect(onContinueShopping).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call onClose when Close Store clicked', () => {
+    const onClose = jest.fn();
+    act(() => {
+      ReactDOM.render(
+        <PurchaseSuccess
+          items={mockItems}
+          totalPrice={9.99}
+          atlasJSON={{}}
+          atlasIMG="items.png"
+          onContinueShopping={jest.fn()}
+          onClose={onClose}
+        />,
+        container
+      );
+    });
+    const closeLink = container.querySelector('[style]') ?? container.lastElementChild?.lastElementChild;
+    // Fire pointer down on the close link
+    const allDivs = container.querySelectorAll('div');
+    let found = false;
+    allDivs.forEach(div => {
+      if (div.textContent.includes('Close Store') && !found) {
+        act(() => { div.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true })); });
+        found = true;
+      }
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Store/__test__/StoreBadges.spec.tsx

@@ -0,0 +1,133 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { StoreBadges } from '../StoreBadges';
+
+jest.mock('../CountdownTimer', () => ({
+  CountdownTimer: ({ endsAt }) => <span data-testid="countdown">{endsAt}</span>,
+}));
+
+jest.mock('styled-components', () => {
+  const styled = new Proxy({}, {
+    get: () => () => ({ children, ...props }) => <div {...props}>{children}</div>,
+  });
+  return { default: styled, keyframes: () => '' };
+});
+
+jest.mock('../../shared/LabelPill/LabelPill', () => ({
+  LabelPill: ({ children }) => <span data-testid="label-pill">{children}</span>,
+}));
+
+describe('StoreBadges', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render nothing when no props provided', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges />, container);
+    });
+    expect(container.querySelectorAll('[data-testid="label-pill"]').length).toBe(0);
+  });
+
+  it('should render popular badge', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'popular' }]} />, container);
+    });
+    expect(container.textContent).toContain('Popular');
+  });
+
+  it('should render bestSeller badge', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'bestSeller' }]} />, container);
+    });
+    expect(container.textContent).toContain('Best Seller');
+  });
+
+  it('should render limited badge', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'limited' }]} />, container);
+    });
+    expect(container.textContent).toContain('Limited');
+  });
+
+  it('should render new badge', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'new' }]} />, container);
+    });
+    expect(container.textContent).toContain('New');
+  });
+
+  it('should render sale badge', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'sale' }]} />, container);
+    });
+    expect(container.textContent).toContain('Sale');
+  });
+
+  it('should use custom label when provided', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges badges={[{ type: 'limited', label: 'Only 2 left!' }]} />, container);
+    });
+    expect(container.textContent).toContain('Only 2 left!');
+  });
+
+  it('should render buy count when buyCount > 0', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges buyCount={42} />, container);
+    });
+    expect(container.textContent).toContain('42 bought');
+  });
+
+  it('should not render buy count when buyCount is 0', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges buyCount={0} />, container);
+    });
+    expect(container.textContent).not.toContain('bought');
+  });
+
+  it('should render viewers count when viewersCount > 1', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges viewersCount={5} />, container);
+    });
+    expect(container.textContent).toContain('5 viewing');
+  });
+
+  it('should not render viewers count when viewersCount is 1', () => {
+    act(() => {
+      ReactDOM.render(<StoreBadges viewersCount={1} />, container);
+    });
+    expect(container.textContent).not.toContain('viewing');
+  });
+
+  it('should render CountdownTimer when saleEndsAt provided', () => {
+    const endsAt = new Date(Date.now() + 3600000).toISOString();
+    act(() => {
+      ReactDOM.render(<StoreBadges saleEndsAt={endsAt} />, container);
+    });
+    expect(container.querySelector('[data-testid="countdown"]')).not.toBeNull();
+  });
+
+  it('should render multiple badges', () => {
+    act(() => {
+      ReactDOM.render(
+        <StoreBadges badges={[{ type: 'popular' }, { type: 'sale' }]} buyCount={10} />,
+        container
+      );
+    });
+    const pills = container.querySelectorAll('[data-testid="label-pill"]');
+    expect(pills.length).toBeGreaterThanOrEqual(3); // 2 badges + buy count
+  });
+});

package/src/components/Store/__test__/TrustBar.spec.tsx

@@ -0,0 +1,85 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { TrustBar } from '../TrustBar';
+
+jest.mock('styled-components', () => {
+  const styled = new Proxy({}, {
+    get: () => () => ({ children, ...props }) => <div {...props}>{children}</div>,
+  });
+  return { default: styled, keyframes: () => '' };
+});
+
+jest.mock('react-icons/fa', () => ({
+  FaLock: () => <span>lock</span>,
+  FaRocket: () => <span>rocket</span>,
+  FaHeadset: () => <span>headset</span>,
+}));
+
+describe('TrustBar', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+  });
+
+  it('should render default trust signals when no signals prop provided', () => {
+    act(() => {
+      ReactDOM.render(<TrustBar />, container);
+    });
+    expect(container.textContent).toContain('Secure Payment');
+    expect(container.textContent).toContain('Instant Delivery');
+    expect(container.textContent).toContain('24/7 Support');
+  });
+
+  it('should render custom signals when provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <TrustBar signals={[{ label: 'SSL Encrypted' }, { label: 'No subscriptions' }]} />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('SSL Encrypted');
+    expect(container.textContent).toContain('No subscriptions');
+  });
+
+  it('should not render default signals when custom signals provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <TrustBar signals={[{ label: 'Custom' }]} />,
+        container
+      );
+    });
+    expect(container.textContent).not.toContain('Secure Payment');
+  });
+
+  it('should render signal with custom icon', () => {
+    act(() => {
+      ReactDOM.render(
+        <TrustBar signals={[{ icon: <span data-testid="custom-icon" />, label: 'Custom' }]} />,
+        container
+      );
+    });
+    expect(container.querySelector('[data-testid="custom-icon"]')).not.toBeNull();
+  });
+
+  it('should render signal without icon when icon not provided', () => {
+    act(() => {
+      ReactDOM.render(
+        <TrustBar signals={[{ label: 'No Icon Signal' }]} />,
+        container
+      );
+    });
+    expect(container.textContent).toContain('No Icon Signal');
+  });
+});