@dcrackel/hematournamentui 1.0.712 → 1.0.714

package/src/stories/Organisms/Cards/TableauBoutCard/TableauBoutCard.stories.js

@@ -1,60 +1,77 @@
-import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
-import TableauBoutCard from './TableauBoutCard.vue';
-
-const baseBout = getDEWithBouts.pools[0].Bouts[2];
-
-export default {
-  title: 'Organisms/Cards/TableauBoutCard',
-  component: TableauBoutCard,
-  tags: ['autodocs'],
-  args: {
-    bout: baseBout,
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    roundName: baseBout.RoundLabel,
-    bracketSize: 'Table of 8'
-  },
-  argTypes: {
-    bout: {
-      control: 'object',
-      description: 'Bout containing both fencers, scores, status, and bracket links'
-    },
-    hostingClubColors: {
-      control: 'object',
-      description: 'Hosting-club colors used for the seed strips'
-    },
-    roundName: {
-      control: 'text',
-      description: 'Name of the displayed round'
-    },
-    bracketSize: {
-      control: 'text',
-      description: 'Name of the opening bracket round'
-    }
-  }
-};
-
-export const Default = {};
-
-export const Active = {
-  args: {
-    bout: {
-      ...baseBout,
-      Status: 'Active',
-      RingName: 'Ring 3',
-      TimeLeft: 95,
-      TimerStatus: 'running'
-    }
-  }
-};
-
-export const Completed = {
-  args: {
-    bout: { ...baseBout, Status: 'Completed' }
-  }
-};
-
-export const Bye = {
-  args: {
-    bout: getDEWithBouts.pools[0].Bouts[0]
-  }
-};
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+import TableauBoutCard from './TableauBoutCard.vue';
+
+const baseBout = getDEWithBouts.pools[0].Bouts[2];
+
+export default {
+  title: 'Organisms/Cards/TableauBoutCard',
+  component: TableauBoutCard,
+  tags: ['autodocs'],
+  args: {
+    showBoutDirectorAssignment: true,
+    bout: baseBout,
+    hostingClubColors: getDEWithBouts.hostingClubColors,
+    roundName: baseBout.RoundLabel,
+    bracketSize: 'Table of 8'
+  },
+  argTypes: {
+    showBoutDirectorAssignment: { control: 'boolean' },
+    plannedDirectorName: { control: 'text', description: 'Assigned director shown above the assignment action' },
+    plannedDirectorColor: {
+      control: 'color',
+      description: 'Director name color matching the planned ring and connectors'
+    },
+    bout: {
+      control: 'object',
+      description: 'Bout containing both fencers, scores, status, and bracket links'
+    },
+    hostingClubColors: {
+      control: 'object',
+      description: 'Hosting-club colors used for the seed strips'
+    },
+    roundName: {
+      control: 'text',
+      description: 'Name of the displayed round'
+    },
+    bracketSize: {
+      control: 'text',
+      description: 'Name of the opening bracket round'
+    }
+  }
+};
+
+export const Default = {};
+
+export const HoverActions = {
+  args: {
+    bout: { ...baseBout, Status: 'Scheduled', RoundLabel: 'Semifinal' },
+    roundName: 'Semifinal',
+    showBoutDirectorAssignment: true,
+    plannedDirectorName: 'Dave Smith',
+    plannedDirectorColor: '#059669'
+  }
+};
+
+export const Active = {
+  args: {
+    bout: {
+      ...baseBout,
+      Status: 'Active',
+      RingName: 'Ring 3',
+      TimeLeft: 95,
+      TimerStatus: 'running'
+    }
+  }
+};
+
+export const Completed = {
+  args: {
+    bout: { ...baseBout, Status: 'Completed' }
+  }
+};
+
+export const Bye = {
+  args: {
+    bout: getDEWithBouts.pools[0].Bouts[0]
+  }
+};

package/src/stories/Organisms/Cards/TableauBoutCard/TableauBoutCard.test.js

@@ -1,143 +1,144 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import { describe, expect, it, vi } from 'vitest';
-import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
-import TableauBoutCard from './TableauBoutCard.vue';
-
-const createBout = status => ({
-  BoutId: 42,
-  DEBoutId: 7,
-  Status: status,
-  Score1: 4,
-  Score2: 3,
-  Person1: { PersonId: 1, DisplayName: 'Fencer One', EventPersons: [] },
-  Person2: { PersonId: 2, DisplayName: 'Fencer Two', EventPersons: [] }
-});
-
-const mountCard = bout =>
-  shallowMount(TableauBoutCard, {
-    props: {
-      bout,
-      hostingClubColors: {},
-      roundName: 'Final',
-      bracketSize: 'Final'
-    }
-  });
-
-describe('TableauBoutCard selection', () => {
-  it('keeps the fencer layout outside the native selection button', () => {
-    const wrapper = mount(TableauBoutCard, {
-      props: {
-        bout: createBout('Scheduled'),
-        hostingClubColors: {},
-        roundName: 'Final',
-        bracketSize: 'Final'
-      }
-    });
-    const button = wrapper.find('[data-testid="tableau-bout"]');
-
-    expect(button.element.tagName).toBe('BUTTON');
-    expect(button.attributes('aria-label')).toBe('Fencer One versus Fencer Two');
-    expect(button.find('div, section').exists()).toBe(false);
-    expect(wrapper.findAllComponents(TableauFencerCard)).toHaveLength(2);
-  });
-
-  it('emits directing intent for a scheduled bout', async () => {
-    const bout = createBout('Scheduled');
-    const wrapper = mountCard(bout);
-
-    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
-
-    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
-    expect(wrapper.emitted('action:editBout')).toBeUndefined();
-  });
-
-  it('does not draw planned-assignment color over the fencer card', () => {
-    const wrapper = mountCard(createBout('Scheduled'));
-
-    expect(wrapper.find('[data-testid="planned-assignment-indicator"]').exists()).toBe(false);
-  });
-
-  it('emits editing intent for a completed bout', async () => {
-    const bout = createBout('Completed');
-    const wrapper = mountCard(bout);
-
-    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
-
-    expect(wrapper.emitted('action:editBout')).toEqual([[bout]]);
-    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
-  });
-
-  it('emits directing intent for an active bout', async () => {
-    const bout = createBout('Active');
-    const wrapper = mountCard(bout);
-
-    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
-
-    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
-  });
-
-  it('does not emit directing intent for a BYE bout', async () => {
-    const bout = {
-      ...createBout('Scheduled'),
-      Person2: { PersonId: 0, DisplayName: 'BYE', EventPersons: [] }
-    };
-    const wrapper = mountCard(bout);
-
-    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
-
-    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
-    expect(wrapper.find('[data-testid="tableau-bout"]').attributes('disabled')).toBeDefined();
-  });
-
-  it('rounds the outside corners and highlights the whole bout on hover', () => {
-    const wrapper = mountCard(createBout('Scheduled'));
-    const fencerRows = wrapper.findAllComponents(TableauFencerCard);
-    const boutButton = wrapper.find('[data-testid="tableau-bout"]');
-
-    expect(fencerRows.map(row => row.props('corners'))).toEqual(['top', 'bottom']);
-    expect(boutButton.classes()).toContain('hover:ring-bright');
-    expect(boutButton.classes()).toContain('hover:ring-2');
-  });
-
-  it('shows the assigned ring and time for an active bout', () => {
-    const wrapper = mountCard({
-      ...createBout('Active'),
-      RingName: 'Ring 3',
-      TimeLeft: 95,
-      TimerStatus: 'stopped'
-    });
-
-    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(true);
-    expect(wrapper.find('[data-testid="active-ring"] base-text-stub').attributes('text')).toBe('Ring 3');
-    expect(wrapper.find('[data-testid="active-time"] base-text-stub').attributes('text')).toBe('1:35');
-  });
-
-  it('hides active chrome after its ring and timer display fields are cleared', () => {
-    const wrapper = mountCard({
-      ...createBout('Active'),
-      RingName: '',
-      TimeLeft: 0,
-      TimerStatus: 'stopped'
-    });
-
-    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(false);
-    expect(wrapper.find('[data-testid="active-time"]').exists()).toBe(false);
-  });
-
-  it('ticks the presentation timer without mutating the bout prop', async () => {
-    vi.useFakeTimers();
-    const bout = { ...createBout('Active'), TimeLeft: 90, TimerStatus: 'running' };
-    const wrapper = mountCard(bout);
-
-    try {
-      vi.advanceTimersByTime(1000);
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.displayTime).toBe('1:29');
-      expect(bout.TimeLeft).toBe(90);
-    } finally {
-      wrapper.unmount();
-      vi.useRealTimers();
-    }
-  });
-});
+import { mount, shallowMount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+import TableauBoutCard from './TableauBoutCard.vue';
+
+const createBout = status => ({
+  BoutId: 42,
+  DEBoutId: 7,
+  Status: status,
+  Score1: 4,
+  Score2: 3,
+  Person1: { PersonId: 1, DisplayName: 'Fencer One', EventPersons: [] },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two', EventPersons: [] }
+});
+
+const mountCard = bout =>
+  shallowMount(TableauBoutCard, {
+    global: { renderStubDefaultSlot: true },
+    props: {
+      bout,
+      hostingClubColors: {},
+      roundName: 'Final',
+      bracketSize: 'Final'
+    }
+  });
+
+describe('TableauBoutCard selection', () => {
+  it('keeps the fencer layout outside the native selection button', () => {
+    const wrapper = mount(TableauBoutCard, {
+      props: {
+        bout: createBout('Scheduled'),
+        hostingClubColors: {},
+        roundName: 'Final',
+        bracketSize: 'Final'
+      }
+    });
+    const button = wrapper.find('[data-testid="tableau-bout"]');
+
+    expect(button.element.tagName).toBe('BUTTON');
+    expect(button.attributes('aria-label')).toBe('Fencer One versus Fencer Two');
+    expect(button.find('div, section').exists()).toBe(false);
+    expect(wrapper.findAllComponents(TableauFencerCard)).toHaveLength(2);
+  });
+
+  it('emits directing intent for a scheduled bout', async () => {
+    const bout = createBout('Scheduled');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:editBout')).toBeUndefined();
+  });
+
+  it('does not draw planned-assignment color over the fencer card', () => {
+    const wrapper = mountCard(createBout('Scheduled'));
+
+    expect(wrapper.find('[data-testid="planned-assignment-indicator"]').exists()).toBe(false);
+  });
+
+  it('emits editing intent for a completed bout', async () => {
+    const bout = createBout('Completed');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:editBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+  });
+
+  it('emits directing intent for an active bout', async () => {
+    const bout = createBout('Active');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+  });
+
+  it('does not emit directing intent for a BYE bout', async () => {
+    const bout = {
+      ...createBout('Scheduled'),
+      Person2: { PersonId: 0, DisplayName: 'BYE', EventPersons: [] }
+    };
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+    expect(wrapper.find('[data-testid="tableau-bout"]').attributes('disabled')).toBeDefined();
+  });
+
+  it('rounds the outside corners and highlights the whole bout on hover', () => {
+    const wrapper = mountCard(createBout('Scheduled'));
+    const fencerRows = wrapper.findAllComponents(TableauFencerCard);
+    const boutButton = wrapper.find('[data-testid="tableau-bout"]');
+
+    expect(fencerRows.map(row => row.props('corners'))).toEqual(['top', 'bottom']);
+    expect(boutButton.classes()).toContain('hover:ring-bright');
+    expect(boutButton.classes()).toContain('hover:ring-2');
+  });
+
+  it('shows the assigned ring and time for an active bout', () => {
+    const wrapper = mountCard({
+      ...createBout('Active'),
+      RingName: 'Ring 3',
+      TimeLeft: 95,
+      TimerStatus: 'stopped'
+    });
+
+    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="active-ring"] base-text-stub').attributes('text')).toBe('Ring 3');
+    expect(wrapper.find('[data-testid="active-time"] base-text-stub').attributes('text')).toBe('1:35');
+  });
+
+  it('hides active chrome after its ring and timer display fields are cleared', () => {
+    const wrapper = mountCard({
+      ...createBout('Active'),
+      RingName: '',
+      TimeLeft: 0,
+      TimerStatus: 'stopped'
+    });
+
+    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="active-time"]').exists()).toBe(false);
+  });
+
+  it('ticks the presentation timer without mutating the bout prop', async () => {
+    vi.useFakeTimers();
+    const bout = { ...createBout('Active'), TimeLeft: 90, TimerStatus: 'running' };
+    const wrapper = mountCard(bout);
+
+    try {
+      vi.advanceTimersByTime(1000);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.displayTime).toBe('1:29');
+      expect(bout.TimeLeft).toBe(90);
+    } finally {
+      wrapper.unmount();
+      vi.useRealTimers();
+    }
+  });
+});