@dcrackel/hematournamentui 1.0.712 → 1.0.713

package/src/stories/Organisms/Containers/Tableau/Tableau.stories.js

@@ -5,6 +5,7 @@ export default {
   title: 'Organisms/Containers/Tableau',
   component: Tableau,
   args: {
+    showBoutDirectorAssignment: true,
     bouts: getDEWithBouts.pools[0].Bouts,
     bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
     hostingClubColors: getDEWithBouts.hostingClubColors

package/src/stories/Organisms/Containers/Tableau/Tableau.test.js

@@ -1,204 +1,247 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import getDEWithBouts42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
-import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
-import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
-import BoutCard from '../../Cards/BoutCard/BoutCard.vue';
-import TableauColumn from '../TableauColumn/TableauColumn.vue';
-import Tableau from './Tableau.vue';
-
-const bout = {
-  BoutId: 42,
-  DEBoutId: 1,
-  RoundLabel: 'Final',
-  Status: 'Scheduled',
-  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
-  Person2: { PersonId: 2, DisplayName: 'Fencer Two' }
-};
-
-const mountListView = () =>
-  shallowMount(Tableau, {
-    props: {
-      bouts: [bout],
-      bracketSize: 'Final',
-      hostingClubColors: {},
-      listView: true
-    }
-  });
-
-describe('Tableau list view', () => {
-  it('enables bout interaction and emits the full bout when starting', async () => {
-    const wrapper = mountListView();
-    const boutCard = wrapper.findComponent(BoutCard);
-
-    expect(boutCard.props('editMode')).toBe(true);
-
-    boutCard.vm.$emit('action:startBout', { BoutId: bout.BoutId });
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
-  });
-
-  it('routes active bout resume through the directing event', async () => {
-    const activeBout = { ...bout, Status: 'Active' };
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: [activeBout],
-        bracketSize: 'Final',
-        hostingClubColors: {},
-        listView: true
-      }
-    });
-
-    wrapper.findComponent(BoutCard).vm.$emit('action:resumeBout', { BoutId: activeBout.BoutId });
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('action:directingBout')).toEqual([[activeBout]]);
-  });
-
-  it('bubbles the viewer suggestions to the top without removing other scheduled bouts', () => {
-    const viewerBout = { ...bout, BoutId: 43, DEBoutId: 2 };
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: [bout, viewerBout],
-        bracketSize: 'Final',
-        hostingClubColors: {},
-        listView: true,
-        plannedDirectingStations: [
-          {
-            RingId: 7,
-            RingName: 'Ring 7',
-            Color: '#2563eb',
-            Director: { PersonId: 99, DisplayName: 'Viewer Director' }
-          }
-        ],
-        plannedBoutAssignments: [{ DEBoutId: viewerBout.DEBoutId, RingId: 7 }],
-        viewerPersonId: '99'
-      }
-    });
-
-    expect(wrapper.vm.listSections[0]).toMatchObject({
-      key: 'suggested-for-viewer',
-      label: 'Suggested for You',
-      bouts: [viewerBout]
-    });
-    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([viewerBout, bout]);
-  });
-});
-
-describe('Tableau bracket view', () => {
-  it('routes a scheduled tableau bout through the same directing event', async () => {
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: [bout],
-        bracketSize: 'Final',
-        hostingClubColors: {},
-        listView: false
-      }
-    });
-
-    wrapper.findComponent(TableauColumn).vm.$emit('action:directingBout', bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
-  });
-
-  it('spaces each rendered round by its actual column depth', () => {
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: [bout],
-        bracketSize: 'Table of 8',
-        hostingClubColors: {},
-        listView: false
-      }
-    });
-
-    expect(wrapper.vm.getRoundLayout(0)).toEqual({ gapPx: 16, padTopPx: 0 });
-    expect(wrapper.vm.getRoundLayout(1)).toEqual({ gapPx: 89, padTopPx: 36.5 });
-    expect(wrapper.vm.getRoundLayout(2)).toEqual({ gapPx: 235, padTopPx: 109.5 });
-  });
-
-  it('orders the current 42-fencer fixture through Table of 8 without a legacy quarterfinal', () => {
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: getDEWithBouts42Fencers.pools[0].Bouts,
-        bracketSize: 'Table of 64',
-        hostingClubColors: getDEWithBouts42Fencers.hostingClubColors,
-        listView: false
-      }
-    });
-
-    expect(wrapper.vm.winnerRoundEntries.map(([roundName]) => roundName)).toEqual([
-      'Table of 64',
-      'Table of 32',
-      'Table of 16',
-      'Table of 8',
-      'Semifinal',
-      'Final'
-    ]);
-  });
-
-  it('renders a current Table of 64 fixture with the expected bout count per round', () => {
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: getDEBoutsTableOf64.pools[0].Bouts,
-        bracketSize: 'Table of 64',
-        hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
-        listView: false
-      }
-    });
-
-    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
-      ['Table of 64', 32],
-      ['Table of 32', 16],
-      ['Table of 16', 8],
-      ['Table of 8', 4],
-      ['Semifinal', 2],
-      ['Final', 1]
-    ]);
-
-    const openingRound = wrapper.vm.winnerRoundEntries[0][1];
-    const openingFencers = openingRound.flatMap(roundBout => [roundBout.Person1, roundBout.Person2]);
-    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
-
-    expect(assignedFencerIds.size).toBe(61);
-    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(3);
-  });
-
-  it('renders a complete Table of 128 fixture for large-bracket layout coverage', () => {
-    const wrapper = shallowMount(Tableau, {
-      props: {
-        bouts: getDEBoutsTableOf128.pools[0].Bouts,
-        bracketSize: 'Table of 128',
-        hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
-        listView: false
-      }
-    });
-
-    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
-      ['Table of 128', 64],
-      ['Table of 64', 32],
-      ['Table of 32', 16],
-      ['Table of 16', 8],
-      ['Table of 8', 4],
-      ['Semifinal', 2],
-      ['Final', 1]
-    ]);
-
-    const allBouts = getDEBoutsTableOf128.pools[0].Bouts;
-    const openingFencers = wrapper.vm.winnerRoundEntries[0][1].flatMap(roundBout => [
-      roundBout.Person1,
-      roundBout.Person2
-    ]);
-    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
-    const boutIds = new Set(allBouts.map(roundBout => roundBout.DEBoutId));
-    const missingNextBouts = allBouts.filter(
-      roundBout => roundBout.DENextBoutId && !boutIds.has(roundBout.DENextBoutId)
-    );
-
-    expect(allBouts).toHaveLength(127);
-    expect(assignedFencerIds.size).toBe(67);
-    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(61);
-    expect(missingNextBouts).toEqual([]);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import getDEWithBouts42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
+import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
+import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
+import BoutCard from '../../Cards/BoutCard/BoutCard.vue';
+import TableauColumn from '../TableauColumn/TableauColumn.vue';
+import Tableau from './Tableau.vue';
+
+const bout = {
+  BoutId: 42,
+  DEBoutId: 1,
+  RoundLabel: 'Final',
+  Status: 'Scheduled',
+  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two' }
+};
+
+const mountListView = () =>
+  shallowMount(Tableau, {
+    global: { renderStubDefaultSlot: true },
+    props: {
+      bouts: [bout],
+      bracketSize: 'Final',
+      hostingClubColors: {},
+      listView: true,
+      showBoutDirectorAssignment: false
+    }
+  });
+
+describe('Tableau list view', () => {
+  it('enables bout interaction and emits the full bout when starting', async () => {
+    const wrapper = mountListView();
+    const boutCard = wrapper.findComponent(BoutCard);
+
+    expect(boutCard.props('editMode')).toBe(true);
+
+    boutCard.vm.$emit('action:startBout', { BoutId: bout.BoutId });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+  });
+
+  it('routes active bout resume through the directing event', async () => {
+    const activeBout = { ...bout, Status: 'Active' };
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: [activeBout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        listView: true
+      }
+    });
+
+    wrapper.findComponent(BoutCard).vm.$emit('action:resumeBout', { BoutId: activeBout.BoutId });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[activeBout]]);
+  });
+
+  it('bubbles the viewer suggestions to the top without removing other scheduled bouts', () => {
+    const viewerBout = { ...bout, BoutId: 43, DEBoutId: 2 };
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: [bout, viewerBout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        listView: true,
+        plannedDirectingStations: [
+          {
+            RingId: 7,
+            RingName: 'Ring 7',
+            Color: '#2563eb',
+            Director: { PersonId: 99, DisplayName: 'Viewer Director' }
+          }
+        ],
+        plannedBoutAssignments: [{ DEBoutId: viewerBout.DEBoutId, RingId: 7 }],
+        viewerPersonId: '99'
+      }
+    });
+
+    expect(wrapper.vm.listSections[0]).toMatchObject({
+      key: 'suggested-for-viewer',
+      label: 'Suggested for You',
+      bouts: [viewerBout]
+    });
+    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([viewerBout, bout]);
+  });
+});
+
+describe('Tableau bracket view', () => {
+  it('routes a scheduled tableau bout through the same directing event', async () => {
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: [bout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        listView: false
+      }
+    });
+
+    wrapper.findComponent(TableauColumn).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+  });
+
+  it('spaces each rendered round by its actual column depth', () => {
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: [bout],
+        bracketSize: 'Table of 8',
+        hostingClubColors: {},
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.getRoundLayout(0)).toEqual({ gapPx: 16, padTopPx: 0 });
+    expect(wrapper.vm.getRoundLayout(1)).toEqual({ gapPx: 89, padTopPx: 36.5 });
+    expect(wrapper.vm.getRoundLayout(2)).toEqual({ gapPx: 235, padTopPx: 109.5 });
+  });
+
+  it('orders the current 42-fencer fixture through Table of 8 without a legacy quarterfinal', () => {
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: getDEWithBouts42Fencers.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEWithBouts42Fencers.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName]) => roundName)).toEqual([
+      'Table of 64',
+      'Table of 32',
+      'Table of 16',
+      'Table of 8',
+      'Semifinal',
+      'Final'
+    ]);
+  });
+
+  it('renders a current Table of 64 fixture with the expected bout count per round', () => {
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: getDEBoutsTableOf64.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const openingRound = wrapper.vm.winnerRoundEntries[0][1];
+    const openingFencers = openingRound.flatMap(roundBout => [roundBout.Person1, roundBout.Person2]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+
+    expect(assignedFencerIds.size).toBe(61);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(3);
+  });
+
+  it('renders a complete Table of 128 fixture for large-bracket layout coverage', () => {
+    const wrapper = shallowMount(Tableau, {
+      global: { renderStubDefaultSlot: true },
+      props: {
+        bouts: getDEBoutsTableOf128.pools[0].Bouts,
+        bracketSize: 'Table of 128',
+        hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 128', 64],
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const allBouts = getDEBoutsTableOf128.pools[0].Bouts;
+    const openingFencers = wrapper.vm.winnerRoundEntries[0][1].flatMap(roundBout => [
+      roundBout.Person1,
+      roundBout.Person2
+    ]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+    const boutIds = new Set(allBouts.map(roundBout => roundBout.DEBoutId));
+    const missingNextBouts = allBouts.filter(
+      roundBout => roundBout.DENextBoutId && !boutIds.has(roundBout.DENextBoutId)
+    );
+
+    expect(allBouts).toHaveLength(127);
+    expect(assignedFencerIds.size).toBe(67);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(61);
+    expect(missingNextBouts).toEqual([]);
+  });
+});
+
+describe('Tableau completed bout disclosure', () => {
+  it('keeps completed bouts out of the main list and routes corrections to editing', async () => {
+    const completedBout = { ...bout, BoutId: 43, DEBoutId: 2, Status: 'Completed' };
+    const wrapper = mountListView();
+    await wrapper.setProps({ bouts: [bout, completedBout] });
+    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([bout]);
+    const disclosure = wrapper.get('details');
+    expect(disclosure.attributes('open')).toBeUndefined();
+    expect(disclosure.get('summary').text()).toBe('Completed bouts (1)');
+    disclosure.findComponent(BoutCard).vm.$emit('action:editBout', { BoutId: 43 });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('action:editBout')).toEqual([[completedBout]]);
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+    await wrapper.setProps({ bouts: [bout] });
+    expect(wrapper.find('details').exists()).toBe(false);
+    wrapper.unmount();
+  });
+});
+
+describe('Tableau directing list eligibility', () => {
+  it('omits future and BYE pairings from the directing list', async () => {
+    const wrapper = mountListView();
+    await wrapper.setProps({
+      bouts: [
+        bout,
+        { ...bout, BoutId: 43, Person2: null },
+        { ...bout, BoutId: 44, Person1: { PersonId: 0, DisplayName: 'BYE' } }
+      ]
+    });
+    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([bout]);
+    wrapper.unmount();
+  });
+});