078516f682
- Test empty/occupied/expanded states - Test player name handling and initials - Test runner selection and catcher card expansion - Test team color integration - All 40 tests passing
578 lines
20 KiB
TypeScript
578 lines
20 KiB
TypeScript
import { describe, it, expect, beforeEach, vi } from "vitest";
|
|
import { mount } from "@vue/test-utils";
|
|
import { createPinia, setActivePinia } from "pinia";
|
|
import RunnersOnBase from "~/components/Game/RunnersOnBase.vue";
|
|
import RunnerCard from "~/components/Game/RunnerCard.vue";
|
|
import { useGameStore } from "~/store/game";
|
|
import type { LineupPlayerState, Lineup } from "~/types/game";
|
|
|
|
describe("RunnersOnBase", () => {
|
|
let pinia: ReturnType<typeof createPinia>;
|
|
|
|
beforeEach(() => {
|
|
pinia = createPinia();
|
|
setActivePinia(pinia);
|
|
});
|
|
|
|
const mockRunnerFirst: LineupPlayerState = {
|
|
lineup_id: 1,
|
|
batting_order: 1,
|
|
position: "LF",
|
|
card_id: 101,
|
|
};
|
|
|
|
const mockRunnerSecond: LineupPlayerState = {
|
|
lineup_id: 2,
|
|
batting_order: 2,
|
|
position: "CF",
|
|
card_id: 102,
|
|
};
|
|
|
|
const mockRunnerThird: LineupPlayerState = {
|
|
lineup_id: 3,
|
|
batting_order: 3,
|
|
position: "RF",
|
|
card_id: 103,
|
|
};
|
|
|
|
const mockCatcher: Lineup = {
|
|
id: 1,
|
|
lineup_id: 4,
|
|
team_id: 1,
|
|
batting_order: 4,
|
|
position: "C",
|
|
is_active: true,
|
|
player: {
|
|
id: 104,
|
|
name: "Buster Posey",
|
|
image: "https://example.com/posey.jpg",
|
|
headshot: "https://example.com/posey-headshot.jpg",
|
|
},
|
|
};
|
|
|
|
const mockFieldingLineup: Lineup[] = [mockCatcher];
|
|
|
|
describe("component visibility", () => {
|
|
it("does not render when no runners on base", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: { first: null, second: null, third: null },
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find(".runners-on-base-container").exists()).toBe(
|
|
false,
|
|
);
|
|
});
|
|
|
|
it("renders when at least one runner on base", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: null,
|
|
second: mockRunnerSecond,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find(".runners-on-base-container").exists()).toBe(
|
|
true,
|
|
);
|
|
});
|
|
|
|
it("renders when bases loaded", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: mockRunnerSecond,
|
|
third: mockRunnerThird,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find(".runners-on-base-container").exists()).toBe(
|
|
true,
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("runner cards", () => {
|
|
it("renders three RunnerCard components", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
expect(runnerCards).toHaveLength(3);
|
|
});
|
|
|
|
it("passes correct base labels to RunnerCard components", async () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
expect(runnerCards.length).toBeGreaterThanOrEqual(3);
|
|
expect(runnerCards[0].props("base")).toBe("1B");
|
|
expect(runnerCards[1].props("base")).toBe("2B");
|
|
expect(runnerCards[2].props("base")).toBe("3B");
|
|
});
|
|
|
|
it("passes runner data to RunnerCard components", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: mockRunnerSecond,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
expect(runnerCards[0].props("runner")).toEqual(mockRunnerFirst);
|
|
expect(runnerCards[1].props("runner")).toEqual(mockRunnerSecond);
|
|
expect(runnerCards[2].props("runner")).toBeNull();
|
|
});
|
|
|
|
it("passes team color to RunnerCard components", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#ff0000",
|
|
fieldingTeamColor: "#00ff00",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
runnerCards.forEach((card) => {
|
|
expect(card.props("teamColor")).toBe("#ff0000");
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("catcher display", () => {
|
|
it("shows collapsed catcher card by default", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
// Collapsed state shows border-l-4, expanded state shows .matchup-card
|
|
expect(wrapper.find(".border-l-4.border-gray-600").exists()).toBe(
|
|
true,
|
|
);
|
|
expect(wrapper.find(".matchup-card").exists()).toBe(false);
|
|
});
|
|
|
|
it("displays catcher name", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.text()).toContain("Buster Posey");
|
|
});
|
|
|
|
it('shows "Unknown Catcher" when no catcher in lineup', () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: [],
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.text()).toContain("Unknown Catcher");
|
|
});
|
|
});
|
|
|
|
describe("runner selection", () => {
|
|
it("expands catcher card when runner is selected", async () => {
|
|
const gameStore = useGameStore();
|
|
gameStore.setGameState({
|
|
id: 1,
|
|
home_team_id: 1,
|
|
away_team_id: 2,
|
|
status: "active",
|
|
inning: 1,
|
|
half: "top",
|
|
outs: 0,
|
|
home_score: 0,
|
|
away_score: 0,
|
|
home_team_abbrev: "NYY",
|
|
away_team_abbrev: "BOS",
|
|
home_team_dice_color: "3b82f6",
|
|
current_batter: null,
|
|
current_pitcher: null,
|
|
on_first: null,
|
|
on_second: null,
|
|
on_third: null,
|
|
decision_phase: "idle",
|
|
play_count: 0,
|
|
});
|
|
gameStore.updateLineup(1, [
|
|
{
|
|
id: 1,
|
|
lineup_id: 1,
|
|
team_id: 1,
|
|
batting_order: 1,
|
|
position: "LF",
|
|
is_active: true,
|
|
player: {
|
|
id: 101,
|
|
name: "Mike Trout",
|
|
image: "https://example.com/trout.jpg",
|
|
},
|
|
},
|
|
]);
|
|
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
await runnerCards[0].trigger("click");
|
|
|
|
// When runner selected, collapsed state hidden and expanded state shown
|
|
expect(wrapper.find(".border-l-4.border-gray-600").exists()).toBe(
|
|
false,
|
|
);
|
|
expect(wrapper.find(".matchup-card").exists()).toBe(true);
|
|
});
|
|
|
|
it("collapses catcher card when runner is deselected", async () => {
|
|
const gameStore = useGameStore();
|
|
gameStore.setGameState({
|
|
id: 1,
|
|
home_team_id: 1,
|
|
away_team_id: 2,
|
|
status: "active",
|
|
inning: 1,
|
|
half: "top",
|
|
outs: 0,
|
|
home_score: 0,
|
|
away_score: 0,
|
|
home_team_abbrev: "NYY",
|
|
away_team_abbrev: "BOS",
|
|
home_team_dice_color: "3b82f6",
|
|
current_batter: null,
|
|
current_pitcher: null,
|
|
on_first: null,
|
|
on_second: null,
|
|
on_third: null,
|
|
decision_phase: "idle",
|
|
play_count: 0,
|
|
});
|
|
gameStore.updateLineup(1, [
|
|
{
|
|
id: 1,
|
|
lineup_id: 1,
|
|
team_id: 1,
|
|
batting_order: 1,
|
|
position: "LF",
|
|
is_active: true,
|
|
player: {
|
|
id: 101,
|
|
name: "Mike Trout",
|
|
image: "https://example.com/trout.jpg",
|
|
},
|
|
},
|
|
]);
|
|
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
|
|
// Click to expand
|
|
await runnerCards[0].trigger("click");
|
|
expect(wrapper.find(".matchup-card").exists()).toBe(true);
|
|
|
|
// Click again to collapse
|
|
await runnerCards[0].trigger("click");
|
|
expect(wrapper.find(".border-l-4.border-gray-600").exists()).toBe(
|
|
true,
|
|
);
|
|
expect(wrapper.find(".matchup-card").exists()).toBe(false);
|
|
});
|
|
|
|
it("switches selection when clicking different runner", async () => {
|
|
const gameStore = useGameStore();
|
|
gameStore.setGameState({
|
|
id: 1,
|
|
home_team_id: 1,
|
|
away_team_id: 2,
|
|
status: "active",
|
|
inning: 1,
|
|
half: "top",
|
|
outs: 0,
|
|
home_score: 0,
|
|
away_score: 0,
|
|
home_team_abbrev: "NYY",
|
|
away_team_abbrev: "BOS",
|
|
home_team_dice_color: "3b82f6",
|
|
current_batter: null,
|
|
current_pitcher: null,
|
|
on_first: null,
|
|
on_second: null,
|
|
on_third: null,
|
|
decision_phase: "idle",
|
|
play_count: 0,
|
|
});
|
|
gameStore.updateLineup(1, [
|
|
{
|
|
id: 1,
|
|
lineup_id: 1,
|
|
team_id: 1,
|
|
batting_order: 1,
|
|
position: "LF",
|
|
is_active: true,
|
|
player: {
|
|
id: 101,
|
|
name: "Mike Trout",
|
|
image: "https://example.com/trout.jpg",
|
|
},
|
|
},
|
|
{
|
|
id: 2,
|
|
lineup_id: 2,
|
|
team_id: 1,
|
|
batting_order: 2,
|
|
position: "CF",
|
|
is_active: true,
|
|
player: {
|
|
id: 102,
|
|
name: "Aaron Judge",
|
|
image: "https://example.com/judge.jpg",
|
|
},
|
|
},
|
|
]);
|
|
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: mockRunnerSecond,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
|
|
// Select first runner
|
|
await runnerCards[0].trigger("click");
|
|
expect(runnerCards[0].props("isExpanded")).toBe(true);
|
|
expect(runnerCards[1].props("isExpanded")).toBe(false);
|
|
|
|
// Select second runner
|
|
await runnerCards[1].trigger("click");
|
|
expect(runnerCards[0].props("isExpanded")).toBe(false);
|
|
expect(runnerCards[1].props("isExpanded")).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe("team information", () => {
|
|
it("displays team abbreviations when provided", async () => {
|
|
const gameStore = useGameStore();
|
|
gameStore.setGameState({
|
|
id: 1,
|
|
home_team_id: 1,
|
|
away_team_id: 2,
|
|
status: "active",
|
|
inning: 1,
|
|
half: "top",
|
|
outs: 0,
|
|
home_score: 0,
|
|
away_score: 0,
|
|
home_team_abbrev: "NYY",
|
|
away_team_abbrev: "BOS",
|
|
home_team_dice_color: "3b82f6",
|
|
current_batter: null,
|
|
current_pitcher: null,
|
|
on_first: null,
|
|
on_second: null,
|
|
on_third: null,
|
|
decision_phase: "idle",
|
|
play_count: 0,
|
|
});
|
|
gameStore.updateLineup(1, [
|
|
{
|
|
id: 1,
|
|
lineup_id: 1,
|
|
team_id: 1,
|
|
batting_order: 1,
|
|
position: "LF",
|
|
is_active: true,
|
|
player: {
|
|
id: 101,
|
|
name: "Mike Trout",
|
|
image: "https://example.com/trout.jpg",
|
|
},
|
|
},
|
|
]);
|
|
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
battingTeamColor: "#3b82f6",
|
|
fieldingTeamColor: "#10b981",
|
|
battingTeamAbbrev: "BOS",
|
|
fieldingTeamAbbrev: "NYY",
|
|
},
|
|
});
|
|
|
|
// Click runner to expand and show team abbreviation
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
await runnerCards[0].trigger("click");
|
|
|
|
expect(wrapper.text()).toContain("NYY");
|
|
});
|
|
|
|
it("uses default colors when not provided", () => {
|
|
const wrapper = mount(RunnersOnBase, {
|
|
global: { plugins: [pinia] },
|
|
props: {
|
|
runners: {
|
|
first: mockRunnerFirst,
|
|
second: null,
|
|
third: null,
|
|
},
|
|
fieldingLineup: mockFieldingLineup,
|
|
},
|
|
});
|
|
|
|
const runnerCards = wrapper.findAllComponents(RunnerCard);
|
|
expect(runnerCards[0].props("teamColor")).toBe("#3b82f6");
|
|
});
|
|
});
|
|
});
|