Add full testing infrastructure and remove coverage exclusions

.github/workflows/ci.yml

@@ -16,6 +16,7 @@ jobs:
           cache: "npm"
       - run: npm ci
       - run: npm run test:coverage
+      - run: npm run test:crap
       - run: npm run build
       - run: npx playwright install --with-deps chromium
       - run: npm run test:e2e

eslint.config.js

@@ -23,6 +23,8 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/explicit-function-return-type": "warn",
     },
   },
 );

package.json

@@ -11,7 +11,8 @@
     "prepare": "husky install",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage && tsx scripts/crap-score.ts",
+    "test:coverage": "vitest run --coverage",
+    "test:crap": "vitest run --coverage && tsx scripts/crap-score.ts",
     "test:e2e": "npx bddgen && npx playwright test",
     "prod-config": "ampx generate outputs --app-id dx58fjke2s86k --branch main --profile personal",
     "sandbox": "ampx sandbox --profile personal --once",

src/App.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+vi.mock("aws-amplify", () => ({
+  Amplify: { configure: vi.fn() },
+}));
+
+vi.mock("amazon-chime-sdk-component-library-react", () => ({
+  MeetingProvider: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="meeting-provider">{children}</div>
+  ),
+  FeaturedVideoTileProvider: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("@aws-amplify/ui-react", () => ({
+  Card: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  View: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  useTheme: () => ({
+    tokens: { space: { medium: "1rem" } },
+  }),
+}));
+
+vi.mock("./components/Header", () => ({
+  Header: () => <div data-testid="header">Header</div>,
+}));
+
+vi.mock("./components/LandingPage", () => ({
+  LandingPage: () => <div data-testid="landing-page">LandingPage</div>,
+}));
+
+vi.mock("./components/MeetingControlBar", () => ({
+  default: () => <div data-testid="control-bar">ControlBar</div>,
+}));
+
+vi.mock("./components/VideoMeeting", () => ({
+  default: () => <div data-testid="video-meeting">VideoMeeting</div>,
+}));
+
+vi.mock("./components/CopyLink", () => ({
+  CopyLink: () => <div data-testid="copy-link">CopyLink</div>,
+}));
+
+vi.mock("./components/AttendeeList", () => ({
+  AttendeeList: () => <div data-testid="attendee-list">AttendeeList</div>,
+}));
+
+vi.mock("./components/ChatPanel", () => ({
+  ChatPanel: () => <div data-testid="chat-panel">ChatPanel</div>,
+}));
+
+vi.mock("./context/AttendeeNamesContext", () => ({
+  AttendeeNamesProvider: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  useAttendeeNamesContext: () => ({
+    broadcastNameChange: vi.fn(),
+  }),
+}));
+
+vi.mock("./context/ChatContext", () => ({
+  ChatProvider: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+let mockUseMeeting = {
+  joinedMeetingId: null as string | null,
+  loadingAction: null,
+  error: null,
+  handleJoinMeeting: vi.fn(),
+  handleStartMeeting: vi.fn(),
+  attendeeName: "Test User",
+  setAttendeeName: vi.fn(),
+};
+
+vi.mock("./hooks/useMeeting", () => ({
+  useMeeting: () => mockUseMeeting,
+}));
+
+import App from "./App";
+
+describe("App", () => {
+  it("renders MeetingProvider wrapper", () => {
+    render(<App />);
+    expect(screen.getByTestId("meeting-provider")).toBeInTheDocument();
+  });
+
+  it("shows LandingPage when not in a meeting", () => {
+    mockUseMeeting = { ...mockUseMeeting, joinedMeetingId: null };
+    render(<App />);
+    expect(screen.getByTestId("landing-page")).toBeInTheDocument();
+    expect(screen.queryByTestId("video-meeting")).not.toBeInTheDocument();
+  });
+
+  it("shows meeting UI when joined", () => {
+    mockUseMeeting = { ...mockUseMeeting, joinedMeetingId: "meeting-123" };
+    render(<App />);
+    expect(screen.getByTestId("video-meeting")).toBeInTheDocument();
+    expect(screen.getByTestId("attendee-list")).toBeInTheDocument();
+    expect(screen.getByTestId("copy-link")).toBeInTheDocument();
+    expect(screen.getByTestId("chat-panel")).toBeInTheDocument();
+    expect(screen.queryByTestId("landing-page")).not.toBeInTheDocument();
+  });
+
+  it("always renders Header", () => {
+    render(<App />);
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+  });
+});

src/amplify-outputs.d.ts

@@ -0,0 +1,4 @@
+declare module "*/amplify_outputs.json" {
+  const value: Record<string, unknown>;
+  export default value;
+}

src/components/AttendeeList.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+vi.mock("amazon-chime-sdk-component-library-react", () => ({
+  MicrophoneActivity: ({ attendeeId }: { attendeeId: string }) => (
+    <div data-testid={`mic-${attendeeId}`} />
+  ),
+  RosterCell: ({ name, microphone }: { name: string; microphone: React.ReactNode }) => (
+    <div data-testid="roster-cell">{name}{microphone}</div>
+  ),
+  useAttendeeStatus: () => ({
+    muted: false,
+    videoEnabled: true,
+    sharingContent: false,
+  }),
+  useRosterState: () => ({
+    roster: {
+      "attendee-1": { name: "Alice" },
+      "attendee-2": { name: "Bob" },
+    },
+  }),
+}));
+
+vi.mock("../context/AttendeeNamesContext", () => ({
+  useAttendeeNamesContext: () => ({
+    getAttendeeName: (id: string) => `Display-${id}`,
+  }),
+}));
+
+import { AttendeeList } from "./AttendeeList";
+
+describe("AttendeeList", () => {
+  it("renders a row for each attendee", () => {
+    render(<AttendeeList />);
+    const cells = screen.getAllByTestId("roster-cell");
+    expect(cells).toHaveLength(2);
+  });
+
+  it("displays attendee names from context", () => {
+    render(<AttendeeList />);
+    expect(screen.getByText("Display-attendee-1")).toBeInTheDocument();
+    expect(screen.getByText("Display-attendee-2")).toBeInTheDocument();
+  });
+
+  it("renders microphone activity for each attendee", () => {
+    render(<AttendeeList />);
+    expect(screen.getByTestId("mic-attendee-1")).toBeInTheDocument();
+    expect(screen.getByTestId("mic-attendee-2")).toBeInTheDocument();
+  });
+});

src/components/ChatMessage.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("react-markdown", () => ({
+  default: ({ children }: { children: string }) => <div>{children}</div>,
+}));
+
+vi.mock("remark-gfm", () => ({
+  default: () => null,
+}));
+
+vi.mock("@aws-amplify/ui-react", () => ({
+  Text: ({ children }: { children: React.ReactNode }) => (
+    <span>{children}</span>
+  ),
+  Flex: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  Button: ({
+    children,
+    onClick,
+    title,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    title?: string;
+  }) => (
+    <button onClick={onClick} title={title}>
+      {children}
+    </button>
+  ),
+}));
+
+import { ChatMessageItem } from "./ChatMessage";
+
+describe("ChatMessageItem", () => {
+  const defaultProps = {
+    id: "msg-1",
+    senderName: "Alice",
+    text: "Hello world",
+    timestamp: new Date("2025-01-15T10:30:00").getTime(),
+    reactions: {} as Record<string, string[]>,
+    onReaction: vi.fn(),
+  };
+
+  it("renders sender name and message text", () => {
+    render(<ChatMessageItem {...defaultProps} />);
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+  });
+
+  it("renders existing reactions with counts", () => {
+    const props = {
+      ...defaultProps,
+      reactions: { "\u{1F44D}": ["Bob", "Charlie"] },
+    };
+    render(<ChatMessageItem {...props} />);
+    expect(screen.getByTitle("Bob, Charlie")).toBeInTheDocument();
+  });
+
+  it("calls onReaction when clicking an existing reaction", () => {
+    const onReaction = vi.fn();
+    const props = {
+      ...defaultProps,
+      reactions: { "\u{1F44D}": ["Bob"] },
+      onReaction,
+    };
+    render(<ChatMessageItem {...props} />);
+    fireEvent.click(screen.getByTitle("Bob"));
+    expect(onReaction).toHaveBeenCalledWith("msg-1", "\u{1F44D}");
+  });
+
+  it("shows emoji picker on + button click", () => {
+    render(<ChatMessageItem {...defaultProps} />);
+    fireEvent.click(screen.getByText("+"));
+    expect(screen.getByText("\u{1F44D}")).toBeInTheDocument();
+    expect(screen.getByText("\u{2764}\u{FE0F}")).toBeInTheDocument();
+  });
+
+  it("calls onReaction and hides picker when selecting emoji", () => {
+    const onReaction = vi.fn();
+    render(<ChatMessageItem {...defaultProps} onReaction={onReaction} />);
+    fireEvent.click(screen.getByText("+"));
+    fireEvent.click(screen.getByText("\u{1F525}"));
+    expect(onReaction).toHaveBeenCalledWith("msg-1", "\u{1F525}");
+  });
+});