@dcrackel/hematournamentui 1.0.709 → 1.0.711

package/src/stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue

@@ -1,75 +1,91 @@
-<template>
-  <section>
-    <EditEventsTopMenu :currentTab="'Edit'" :tabs="tabs(userLevel, isMobile)" @tabMenuClick="handleTabMenuClick" />
-
-    <div class="w-full flex flex-row justify-center mt-3">
-      <EditEventWizard
-        :event="event"
-        :rules="rules"
-        :weapons="weapons"
-        :userLevel="userLevel"
-        @update:submit="handleSubmit"
-      />
-    </div>
-  </section>
-</template>
-
-<script>
-import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
-import EditEventWizard from '../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
-import { tabs } from '../../../Util/tabs.js';
-
-export default {
-  emits: ['tab:menu-click', 'update:submit'],
-  components: {
-    EditEventWizard,
-    EditEventsTopMenu
-  },
-  props: {
-    event: {
-      type: Object,
-      required: true
-    },
-    weapons: {
-      type: Array,
-      required: true
-    },
-    rules: {
-      type: Array,
-      required: true
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  data() {
-    return {
-      tabs,
-      windowWidth: window.innerWidth
-    };
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-  computed: {
-    isMobile() {
-      return this.windowWidth <= 748;
-    }
-  },
-  methods: {
-    handleTabMenuClick(value) {
-      this.$emit('tab:menu-click', value);
-    },
-    handleSubmit(value) {
-      this.$emit('update:submit', value);
-    },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-};
-</script>
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Edit'" :tabs="tabs(userLevel, isMobile)" @tabMenuClick="handleTabMenuClick" />
+
+    <div class="w-full flex flex-row justify-center mt-3">
+      <EditEventWizard
+        :event="event"
+        :rules="rules"
+        :weapons="weapons"
+        :userLevel="userLevel"
+        :editMode="editMode"
+        :step="step"
+        :saving="saving"
+        :saveError="saveError"
+        :saveNotice="saveNotice"
+        @save:step="$emit('save:step', $event)"
+        @navigate:step="$emit('navigate:step', $event)"
+        @update:dirty="$emit('update:dirty', $event)"
+        @update:cancel="$emit('update:cancel')"
+        @update:submit="handleSubmit"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import EditEventWizard from '../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
+import { tabs } from '../../../Util/tabs.js';
+
+export default {
+  emits: ['tab:menu-click', 'update:submit', 'save:step', 'navigate:step', 'update:dirty', 'update:cancel'],
+  components: {
+    EditEventWizard,
+    EditEventsTopMenu
+  },
+  props: {
+    editMode: { type: Boolean, default: false },
+    step: { type: Number, default: 1 },
+    saving: { type: Boolean, default: false },
+    saveError: { type: String, default: '' },
+    saveNotice: { type: String, default: '' },
+
+    event: {
+      type: Object,
+      required: true
+    },
+    weapons: {
+      type: Array,
+      required: true
+    },
+    rules: {
+      type: Array,
+      required: true
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    }
+  },
+  data() {
+    return {
+      tabs,
+      windowWidth: window.innerWidth
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  computed: {
+    isMobile() {
+      return this.windowWidth <= 748;
+    }
+  },
+  methods: {
+    handleTabMenuClick(value) {
+      if (this.saving) return;
+      this.$emit('tab:menu-click', value);
+    },
+    handleSubmit(value) {
+      this.$emit('update:submit', value);
+    },
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    }
+  }
+};
+</script>

package/src/stories/Templates/TournamentManagement/TournamentManagement.stories.js

@@ -1,83 +1,84 @@
-import TournamentManagement from './TournamentManagement.vue';
-import mockLocation from '../../../mocks/locationMock.js';
-import mockPersons from '../../../mocks/personsMock.js';
-import mockTournaments from '../../../mocks/tournamentMock.js';
-
-const existingTournament = {
-  ...mockTournaments[0],
-  HostedOnM2: true,
-  ResultsEnabled: false,
-  Visibility: 'Open',
-  WaiverScope: 'None'
-};
-
-export default {
-  title: 'Templates/TournamentManagement',
-  component: TournamentManagement,
-  tags: ['autodocs'],
-  args: {
-    tournament: existingTournament,
-    locations: mockLocation,
-    persons: mockPersons,
-    uploadImageName: 'tournament-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'https://meyersquaredimages.com/uploads/',
-    showTab: 'Basic',
-    userLevel: 'Club',
-    submitButtonLabel: 'Save'
-  },
-  argTypes: {
-    tournament: {
-      control: { type: 'object' }
-    },
-    locations: {
-      control: { type: 'object' }
-    },
-    persons: {
-      control: { type: 'object' }
-    },
-    showTab: {
-      control: { type: 'text' }
-    },
-    userLevel: {
-      control: { type: 'text' }
-    },
-    submitButtonLabel: {
-      control: { type: 'text' }
-    }
-  }
-};
-
-export const Default = {
-  args: {
-    tournament: existingTournament,
-    locations: mockLocation,
-    persons: mockPersons
-  }
-};
-
-export const EmptyTournament = {
-  args: {
-    tournament: {},
-    locations: mockLocation,
-    persons: mockPersons
-  }
-};
-
-export const StartOnDetails = {
-  args: {
-    tournament: existingTournament,
-    locations: mockLocation,
-    persons: mockPersons,
-    showTab: 'Hosting'
-  }
-};
-
-export const Saving = {
-  args: {
-    tournament: existingTournament,
-    locations: mockLocation,
-    persons: mockPersons,
-    submitButtonLabel: 'Saving...'
-  }
-};
+import TournamentManagement from './TournamentManagement.vue';
+import mockLocation from '../../../mocks/locationMock.js';
+import mockPersons from '../../../mocks/personsMock.js';
+import mockTournaments from '../../../mocks/tournamentMock.js';
+
+const existingTournament = {
+  ...mockTournaments[0],
+  BasePrice: 75.5,
+  HostedOnM2: true,
+  ResultsEnabled: false,
+  Visibility: 'Open',
+  WaiverScope: 'None'
+};
+
+export default {
+  title: 'Templates/TournamentManagement',
+  component: TournamentManagement,
+  tags: ['autodocs'],
+  args: {
+    tournament: existingTournament,
+    locations: mockLocation,
+    persons: mockPersons,
+    uploadImageName: 'tournament-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'https://meyersquaredimages.com/uploads/',
+    showTab: 'Basic',
+    userLevel: 'Club',
+    submitButtonLabel: 'Save'
+  },
+  argTypes: {
+    tournament: {
+      control: { type: 'object' }
+    },
+    locations: {
+      control: { type: 'object' }
+    },
+    persons: {
+      control: { type: 'object' }
+    },
+    showTab: {
+      control: { type: 'text' }
+    },
+    userLevel: {
+      control: { type: 'text' }
+    },
+    submitButtonLabel: {
+      control: { type: 'text' }
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    tournament: existingTournament,
+    locations: mockLocation,
+    persons: mockPersons
+  }
+};
+
+export const EmptyTournament = {
+  args: {
+    tournament: {},
+    locations: mockLocation,
+    persons: mockPersons
+  }
+};
+
+export const StartOnDetails = {
+  args: {
+    tournament: existingTournament,
+    locations: mockLocation,
+    persons: mockPersons,
+    showTab: 'Hosting'
+  }
+};
+
+export const Saving = {
+  args: {
+    tournament: existingTournament,
+    locations: mockLocation,
+    persons: mockPersons,
+    submitButtonLabel: 'Saving...'
+  }
+};

package/src/stories/Templates/TournamentManagement/TournamentManagement.test.js

@@ -0,0 +1,114 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TournamentManagement from './TournamentManagement.vue';
+import TitledInput from '../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+
+const wrappers = [];
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+function mountTournament(tournament = {}) {
+  const wrapper = mount(TournamentManagement, {
+    props: { tournament, locations: [], persons: [] },
+    global: {
+      stubs: {
+        EditEventsTopMenu: true,
+        TournamentPageTwo: true,
+        ImageCropper: true,
+        FindLocation: true,
+        FindPerson: true,
+        DatePicker: true,
+        TextBoxEditor: true
+      }
+    }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+}
+
+function priceField(wrapper) {
+  return wrapper.findAllComponents(TitledInput).find(field => field.props('title').startsWith('Base Price'));
+}
+
+function existingTournament(BasePrice) {
+  return { Name: 'Test Tournament', Address: { Name: 'Test Venue' }, BasePrice };
+}
+
+describe('tournament base price', () => {
+  it.each([
+    [45, '45.00'],
+    ['45', '45.00'],
+    [45.5, '45.50'],
+    ['45.5', '45.50']
+  ])('displays a saved base price of %s as %s', async (value, display) => {
+    const wrapper = mountTournament(existingTournament(value));
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe(display);
+  });
+
+  it('formats an entered price on blur and preserves the numeric submit payload', async () => {
+    const wrapper = mountTournament();
+    await wrapper.vm.$nextTick();
+    wrapper.vm.updateTournament({ Name: 'Test Tournament', Address: { Name: 'Test Venue' } });
+    const input = priceField(wrapper).find('input');
+    await input.setValue('45.');
+    expect(input.element.value).toBe('45.');
+    await input.setValue('45');
+    await input.trigger('focusout');
+    expect(input.element.value).toBe('45.00');
+    wrapper.vm.handleSubmit();
+    expect(wrapper.emitted('submit:tournament')[0][0].BasePrice).toBe(45);
+  });
+
+  it('retains decimal typing and submits the base price from a new tournament', async () => {
+    const wrapper = mountTournament();
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe('');
+    expect(priceField(wrapper).find('input').attributes('placeholder')).toBe('0.00');
+    wrapper.vm.updateTournament({ Name: 'Test Tournament', Address: { Name: 'Test Venue' } });
+    const input = priceField(wrapper).find('input');
+    await input.setValue('75.');
+    expect(input.element.value).toBe('75.');
+    await input.setValue('75.50');
+    wrapper.vm.handleNext();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.currentTab).toBe('Hosting');
+    wrapper.vm.handleSubmit();
+    expect(wrapper.emitted('submit:tournament')[0][0].BasePrice).toBe(75.5);
+  });
+
+  it('edits saved prices without mutating props and reconciles parent updates', async () => {
+    const tournament = existingTournament(50.25);
+    const wrapper = mountTournament(tournament);
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe('50.25');
+    await priceField(wrapper).find('input').setValue('80.75');
+    wrapper.vm.handleSubmit();
+    expect(wrapper.emitted('submit:tournament')[0][0].BasePrice).toBe(80.75);
+    expect(tournament.BasePrice).toBe(50.25);
+    await wrapper.setProps({ tournament: existingTournament(0) });
+    expect(priceField(wrapper).find('input').element.value).toBe('0.00');
+  });
+
+  it.each([undefined, null, 0])('allows free tournaments with an initial price of %s', async value => {
+    const wrapper = mountTournament(existingTournament(value));
+    await wrapper.vm.$nextTick();
+    expect(priceField(wrapper).find('input').element.value).toBe(value == null ? '' : '0.00');
+    expect(priceField(wrapper).find('input').attributes('placeholder')).toBe('0.00');
+    await priceField(wrapper).find('input').setValue('');
+    wrapper.vm.handleSubmit();
+    expect(wrapper.emitted('submit:tournament')[0][0].BasePrice).toBe(0);
+  });
+
+  it.each(['-5', 'invalid', 'Infinity'])('rejects invalid price %s and recovers after correction', async value => {
+    const wrapper = mountTournament(existingTournament(10));
+    await wrapper.vm.$nextTick();
+    await priceField(wrapper).find('input').setValue(value);
+    wrapper.vm.handleSubmit();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('submit:tournament')).toBeUndefined();
+    expect(priceField(wrapper).props('invalid')).toBe(true);
+    await priceField(wrapper).find('input').setValue('0');
+    wrapper.vm.handleSubmit();
+    expect(wrapper.emitted('submit:tournament')[0][0].BasePrice).toBe(0);
+  });
+});