@dcrackel/hematournamentui 1.0.707 → 1.0.708

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

@@ -1,98 +1,60 @@
-import TableauBoutCard from './TableauBoutCard.vue';
-import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
-
-export default {
-  title: 'Organisms/Cards/TableauBoutCard',
-  component: TableauBoutCard,
-  tags: ['autodocs'],
-  args: {
-    bout: getDEWithBouts.pools[0].Bouts[0],
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    large: true,
-    roundName: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-    bracketSize: 'Table of 8',
-    highLight: false
-  },
-  argTypes: {
-    bout: {
-      control: 'object',
-      description: 'Bout object containing fencers and scores'
-    },
-    hostingClubColors: {
-      control: 'object',
-      description: 'Colors for hosting club'
-    },
-    large: {
-      control: 'boolean',
-      description: 'Size of the card'
-    },
-    roundName: {
-      control: 'text',
-      description: 'Name of the round'
-    },
-    bracketSize: {
-      control: 'text',
-      description: 'Size of the bracket'
-    },
-    highLight: {
-      control: 'boolean',
-      description: 'Card is highlighed'
-    }
-  }
-};
-
-export const Default = {
-  args: {
-    bout: getDEWithBouts.pools[0].Bouts[2],
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    large: true,
-    roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-    bracketSize: 'Table of 8',
-    highLight: false
-  }
-};
-
-let modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Active' };
-export const ActiveBout = {
-  args: {
-    bout: modifiedBout,
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    large: true,
-    roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-    bracketSize: 'Table of 8',
-    highLight: false
-  }
-};
-
-export const smallCardBout = {
-  args: {
-    bout: getDEWithBouts.pools[0].Bouts[1],
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    large: false,
-    roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-    bracketSize: 'Table of 8',
-    highLight: false
-  }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Completed' };
-export const CompletedBout = {
-  args: {
-    bout: modifiedBout,
-    large: true,
-    roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-    highLight: false
-  }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[0], Status: 'Completed' };
-export const ByeBout = {
-  args: {
-    bout: modifiedBout,
-    hostingClubColors: getDEWithBouts.hostingClubColors,
-    large: false,
-    roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-    bracketSize: 'Table of 8',
-    highLight: false
-  }
-};
+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]
+  }
+};

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

@@ -1,9 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
+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,
@@ -22,23 +24,120 @@ const mountCard = bout =>
   });
 
 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('section section').trigger('click');
+    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('section section').trigger('click');
+    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();
+    }
+  });
 });