All files / blacktrigram/src/test test-utils.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { render, RenderOptions } from "@testing-library/react";
import { vi } from "vitest";

// Mock PixiJS components for testing
const MockApplication: React.FC<any> = ({ children, ...props }) => (
  <div data-testid="pixi-application" {...props}>
    {children}
  </div>
);

const MockContainer: React.FC<any> = ({ children, ...props }) => (
  <div data-testid="pixi-container" {...props}>
    {children}
  </div>
);

const MockGraphics: React.FC<any> = (props) => (
  <div data-testid="pixi-graphics" {...props} />
);

const MockText: React.FC<any> = ({ text, children, ...props }) => (
  <div data-testid="pixi-text" {...props}>
    {text || children}
  </div>
);

const MockSprite: React.FC<any> = (props) => (
  <div data-testid="pixi-sprite" {...props} />
);

// Mock PIXI components object
const mockPixiComponents = {
  Application: MockApplication,
  Container: MockContainer,
  Graphics: MockGraphics,
  Text: MockText,
  Sprite: MockSprite,
};

// Mock the @pixi/react module
vi.mock("@pixi/react", async (importOriginal) => {
  const actual = await importOriginal();
  return {
    ...actual,
    Application: ({ children }: any) => <>{children}</>,
    extend: vi.fn(),
    useApplication: () => ({ app: {} }),
    useTick: vi.fn(),
  };
});

// Stub out AudioProvider/useAudio so TrainingScreen sees a provider
vi.mock("../src/audio/AudioProvider", () => ({
  AudioProvider: ({ children }: any) => <>{children}</>,
  useAudio: () => ({
    playSoundEffect: vi.fn(),
    playMusic: vi.fn(),
    setVolume: vi.fn(),
    mute: vi.fn(),
    unmute: vi.fn(),
  }),
}));

// Custom render function for components that need PixiJS
export function renderWithPixi(
  ui: React.ReactElement,
  options: RenderOptions = {}
) {
  const Wrapper = ({ children }: { children: React.ReactNode }) => (
    <AudioProvider>
      <MockApplication width={800} height={600} data-testid="mock-pixi-app">
        {children}
      </MockApplication>
    </AudioProvider>
  );

  return render(ui, { wrapper: Wrapper, ...options });
}

// Re-export everything from testing library
export * from "@testing-library/react";
export { render } from "@testing-library/react";
export { renderWithPixi };