@dcrackel/hematournamentui 1.0.708 → 1.0.710

package/src/stories/Templates/PersonManagement/PersonManagement.stories.js

@@ -1,103 +1,156 @@
-import PersonManagement from './PersonManagement.vue';
-import clubGetAllMock from '../../../mocks/clubGetAllMock.js';
-import personsMock from '../../../mocks/personsMock.js';
-import attendance from '../../../mocks/getAttendance.js';
-import allPersonsMock from '../../../mocks/personGetAllMock.js';
-
-export default {
-  title: 'Templates/PersonManagement/PersonManagement',
-  component: PersonManagement,
-  tags: ['autodocs'],
-  args: {
-    personProfile: personsMock,
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test.png',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'https://meyersquaredimages.com/uploads/',
-    userLevel: 'user'
-  },
-  argTypes: {
-    personProfile: { control: { type: 'object' } },
-    fencingClubs: { control: { type: 'object' } },
-    attendance: { control: { type: 'object' } },
-    uploadImageName: { control: { type: 'text' } },
-    uploadServer: { control: { type: 'text' } },
-    imageServer: { control: { type: 'text' } },
-    userLevel: { control: { type: 'string' } }
-  }
-};
-
-export const Default = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'User'
-  }
-};
-
-export const admin = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin'
-  }
-};
-
-export const clubAdmin = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    people: allPersonsMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Club'
-  }
-};
-
-export const adminWithLoading = {
-  args: {
-    personProfile: personsMock,
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin',
-    loading: true
-  }
-};
-
-export const emptyProfile = {
-  args: {
-    personProfile: {
-      DisplayName: '',
-      LegalName: '',
-      EmailAddress: '',
-      Club: { Name: 'No Club Affiliation ', ClubId: '17' },
-      AccessLevel: 'User',
-      ShareData: true,
-      ShowData: true
-    },
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin',
-    loading: false
-  }
-};
+import { ref } from 'vue';
+import PersonManagement from './PersonManagement.vue';
+import clubGetAllMock from '../../../mocks/clubGetAllMock.js';
+import personsMock from '../../../mocks/personsMock.js';
+import attendance from '../../../mocks/getAttendance.js';
+import allPersonsMock from '../../../mocks/personGetAllMock.js';
+
+export default {
+  title: 'Templates/PersonManagement/PersonManagement',
+  component: PersonManagement,
+  tags: ['autodocs'],
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'https://meyersquaredimages.com/uploads/',
+    userLevel: 'User',
+    saving: false,
+    disabled: false,
+    draftResetKey: 0
+  },
+  argTypes: {
+    personProfile: { control: { type: 'object' } },
+    fencingClubs: { control: { type: 'object' } },
+    attendance: { control: { type: 'object' } },
+    uploadImageName: { control: { type: 'text' } },
+    uploadServer: { control: { type: 'text' } },
+    imageServer: { control: { type: 'text' } },
+    userLevel: { control: { type: 'select' }, options: ['User', 'Club', 'Admin'] },
+    saving: { control: 'boolean', description: 'Disables editing and actions while the parent saves.' },
+    disabled: { control: 'boolean', description: 'Disables the entire profile form.' },
+    draftResetKey: { control: 'number', description: 'Change after a confirmed reload to replace the draft.' },
+    'submit:person': { action: 'submit:person' },
+    'update:image': { action: 'update:image' },
+    'error:image': { action: 'error:image' }
+  }
+};
+
+export const Default = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'User'
+  }
+};
+
+export const admin = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin'
+  }
+};
+
+export const clubAdmin = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    people: allPersonsMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Club'
+  }
+};
+
+export const adminWithLoading = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: true
+  }
+};
+
+export const Saving = {
+  args: { ...admin.args, saving: true }
+};
+
+export const Disabled = {
+  args: { ...Default.args, disabled: true }
+};
+
+export const CurrentDraft = {
+  args: {
+    ...admin.args,
+    personProfile: {
+      ...personsMock[1],
+      LegalName: 'Updated Legal Name',
+      EmailAddress: 'draft@example.com',
+      HemaRatingsId: null,
+      Images: []
+    }
+  }
+};
+
+export const ResetDraft = {
+  args: { ...admin.args },
+  render: args => ({
+    components: { PersonManagement },
+    setup() {
+      const revision = ref(0);
+      const resetDraft = () => {
+        revision.value += 1;
+      };
+      return { args, revision, resetDraft };
+    },
+    template: `
+      <div>
+        <button type="button" class="mb-4 rounded border border-dropdownSelect p-2 text-quinary" @click="resetDraft">
+          Reset unsaved changes to supplied profile
+        </button>
+        <PersonManagement v-bind="args" :draftResetKey="revision" />
+      </div>
+    `
+  })
+};
+
+export const emptyProfile = {
+  args: {
+    personProfile: {
+      DisplayName: '',
+      LegalName: '',
+      EmailAddress: '',
+      Club: { Name: 'No Club Affiliation ', ClubId: '17' },
+      AccessLevel: 'User',
+      ShareData: true,
+      ShowData: true
+    },
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: false
+  }
+};

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

@@ -0,0 +1,329 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import PersonManagement from './PersonManagement.vue';
+import BasicEdit from './Basic/BasicEdit.vue';
+import Administration from './Admin/Administration/Administration.vue';
+import TitledInput from '../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import ImageCropper from '../../Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+import EditEventsTopMenu from '../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+
+enableAutoUnmount(afterEach);
+
+const createProfile = overrides => ({
+  PersonId: 1,
+  DisplayName: 'Original Fencer',
+  FirstName: 'Original',
+  LastName: 'Name',
+  Images: [],
+  Club: { Name: 'Example Club', ClubId: 17 },
+  AccessLevel: 'User',
+  HemaRatingsId: 123,
+  HEMARatings: [{ HemaRatingId: 123, Rating: 1600 }],
+  PersonEmails: [{ IsPrimary: true, EmailAddress: 'original@example.com' }],
+  ...overrides
+});
+
+const mountProfile = (personProfile = createProfile(), props = {}) =>
+  mount(PersonManagement, {
+    props: { personProfile, userLevel: 'Admin', ...props },
+    global: { stubs: { ImageCropper: true, EditEventsTopMenu: true, Attendance: true, MergeAccounts: true } }
+  });
+
+const findInput = (wrapper, label) =>
+  wrapper
+    .findAllComponents(TitledInput)
+    .find(input => input.props('title').startsWith(label))
+    .find('input');
+
+function typeImmediately(input, value) {
+  const element = input.element;
+  element.value = value;
+  element.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function saveImmediately(wrapper) {
+  wrapper
+    .findAllComponents(BaseButton)
+    .find(button => button.props('label') === 'Save')
+    .element.click();
+}
+
+async function selectTab(wrapper, tab) {
+  wrapper.findComponent(EditEventsTopMenu).vm.$emit('tabMenuClick', tab);
+  await nextTick();
+}
+
+describe('PersonManagement draft saves', () => {
+  it('supports the first Save of a profile without names, email relations, or images', () => {
+    const wrapper = mountProfile({});
+    typeImmediately(findInput(wrapper, 'Display Name'), 'New Fencer');
+    typeImmediately(findInput(wrapper, 'Legal Name'), 'New Legal Name');
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0]).toMatchObject({
+      DisplayName: 'New Fencer',
+      LegalName: 'New Legal Name',
+      EmailAddress: '',
+      FirstName: 'New',
+      LastName: 'Legal Name'
+    });
+  });
+  it.each(['mouse', 'programmatic'])('submits last-second edits for a %s Save', action => {
+    const profile = createProfile();
+    const wrapper = mountProfile(profile);
+    typeImmediately(findInput(wrapper, 'Display Name'), 'Latest Display Name');
+    typeImmediately(findInput(wrapper, 'Legal Name'), 'Latest Legal Name');
+    typeImmediately(findInput(wrapper, 'Email Address'), 'latest@example.com');
+
+    if (action === 'mouse') saveImmediately(wrapper);
+    if (action === 'programmatic') wrapper.vm.handleSubmit();
+
+    expect(wrapper.emitted('submit:person')[0][0]).toMatchObject({
+      DisplayName: 'Latest Display Name',
+      LegalName: 'Latest Legal Name',
+      FirstName: 'Latest',
+      LastName: 'Legal Name',
+      EmailAddress: 'latest@example.com'
+    });
+    expect(profile.FirstName).toBe('Original');
+    expect(profile.PersonEmails[0].EmailAddress).toBe('original@example.com');
+  });
+
+  it('keeps edited legal name and email after switching tabs immediately', async () => {
+    const wrapper = mountProfile();
+    typeImmediately(findInput(wrapper, 'Legal Name'), 'Edited Legal Name');
+    typeImmediately(findInput(wrapper, 'Email Address'), 'edited@example.com');
+    await selectTab(wrapper, 'Admin');
+    typeImmediately(findInput(wrapper, 'HEMA Rating ID'), '456');
+    await selectTab(wrapper, 'Basic');
+
+    expect(findInput(wrapper, 'Legal Name').element.value).toBe('Edited Legal Name');
+    expect(findInput(wrapper, 'Email Address').element.value).toBe('edited@example.com');
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0]).toMatchObject({
+      LegalName: 'Edited Legal Name',
+      EmailAddress: 'edited@example.com',
+      HemaRatingsId: '456'
+    });
+  });
+
+  it('preserves deliberately empty draft fields instead of rereading legacy values', async () => {
+    const wrapper = mountProfile(createProfile({ LegalName: '', EmailAddress: '', HemaRatingsId: null }));
+    expect(findInput(wrapper, 'Legal Name').element.value).toBe('');
+    expect(findInput(wrapper, 'Email Address').element.value).toBe('');
+    await selectTab(wrapper, 'Admin');
+    expect(findInput(wrapper, 'HEMA Rating ID').element.value).toBe('');
+  });
+
+  it('keeps a cleared HR ID blank through tab changes and submits the blank draft value', async () => {
+    const wrapper = mountProfile();
+    await selectTab(wrapper, 'Admin');
+    typeImmediately(findInput(wrapper, 'HEMA Rating ID'), '');
+    await selectTab(wrapper, 'Basic');
+    await selectTab(wrapper, 'Admin');
+    expect(findInput(wrapper, 'HEMA Rating ID').element.value).toBe('');
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0].HemaRatingsId).toBe('');
+  });
+
+  it('submits an explicitly null HR ID without repopulating stale ratings', () => {
+    const wrapper = mountProfile(createProfile({ HemaRatingsId: null }));
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0].HemaRatingsId).toBeNull();
+  });
+
+  it('submits a detached snapshot of the draft', () => {
+    const profile = createProfile();
+    const wrapper = mountProfile(profile);
+    saveImmediately(wrapper);
+    const submitted = wrapper.emitted('submit:person')[0][0];
+    submitted.Club.Name = 'Changed by parent';
+    submitted.Images.push({ URL: '/other.png' });
+    expect(profile.Club.Name).toBe('Example Club');
+    expect(wrapper.vm.person.Club.Name).toBe('Example Club');
+    expect(wrapper.vm.person.Images).toEqual([]);
+  });
+});
+
+describe('PersonManagement validation', () => {
+  it('does not open an unavailable Admin tab from validation feedback', async () => {
+    const wrapper = mountProfile(createProfile({ HemaRatingsId: 0 }), { userLevel: 'User' });
+    saveImmediately(wrapper);
+    await nextTick();
+    expect(wrapper.find('[data-testid="profile-validation-summary"] button').attributes('disabled')).toBeDefined();
+    wrapper.vm.handleTab('Admin');
+    expect(wrapper.findComponent(Administration).exists()).toBe(false);
+  });
+  it('explains an invalid Basic field when Save is clicked on Admin', async () => {
+    const wrapper = mountProfile();
+    typeImmediately(findInput(wrapper, 'Email Address'), 'invalid-email');
+    await selectTab(wrapper, 'Admin');
+    typeImmediately(findInput(wrapper, 'HEMA Rating ID'), '456');
+    saveImmediately(wrapper);
+    await nextTick();
+
+    expect(wrapper.emitted('submit:person')).toBeUndefined();
+    const summary = wrapper.find('[data-testid="profile-validation-summary"]');
+    expect(summary.text()).toContain('Email address');
+    expect(summary.text()).toContain('Basic tab');
+    await summary.find('button').trigger('click');
+    expect(wrapper.findComponent(BasicEdit).exists()).toBe(true);
+    expect(findInput(wrapper, 'Email Address').element.value).toBe('invalid-email');
+    await findInput(wrapper, 'Email Address').setValue('fixed@example.com');
+    expect(wrapper.find('[data-testid="profile-validation-summary"]').exists()).toBe(false);
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')).toHaveLength(1);
+  });
+
+  it.each(['0', '-1', '1.5', '1e3', 'abc', '9007199254740992'])(
+    'rejects invalid HR ID %s without changing the typed value',
+    async value => {
+      const wrapper = mountProfile();
+      await selectTab(wrapper, 'Admin');
+      await findInput(wrapper, 'HEMA Rating ID').setValue(value);
+      expect(findInput(wrapper, 'HEMA Rating ID').element.value).toBe(value);
+      expect(findInput(wrapper, 'HEMA Rating ID').attributes('aria-invalid')).toBe('true');
+      await selectTab(wrapper, 'Basic');
+      saveImmediately(wrapper);
+      await nextTick();
+      expect(wrapper.emitted('submit:person')).toBeUndefined();
+      expect(wrapper.find('[data-testid="profile-validation-summary"]').text()).toContain('Admin tab');
+      await wrapper.find('[data-testid="profile-validation-summary"] button').trigger('click');
+      expect(wrapper.findComponent(Administration).exists()).toBe(true);
+    }
+  );
+});
+
+describe('PersonManagement draft replacement', () => {
+  it('preserves unsaved edits on incidental updates for the same person', async () => {
+    const profile = createProfile();
+    const wrapper = mountProfile(profile);
+    typeImmediately(findInput(wrapper, 'Legal Name'), 'Unsaved Legal Name');
+    await wrapper.setProps({ personProfile: { ...profile, PersonId: '1', DisplayName: 'Server Name' } });
+    expect(findInput(wrapper, 'Legal Name').element.value).toBe('Unsaved Legal Name');
+    expect(wrapper.vm.person.DisplayName).toBe('Original Fencer');
+  });
+
+  it('replaces the draft and resets controls and errors when draftResetKey changes', async () => {
+    const profile = createProfile();
+    const wrapper = mountProfile(profile);
+    typeImmediately(findInput(wrapper, 'Email Address'), 'invalid');
+    saveImmediately(wrapper);
+    await selectTab(wrapper, 'Admin');
+    await wrapper.setProps({
+      personProfile: createProfile({
+        EmailAddress: 'saved@example.com',
+        HemaRatingsId: null,
+        ProfileImage: '/saved.png'
+      }),
+      draftResetKey: 1
+    });
+    expect(wrapper.find('[data-testid="profile-validation-summary"]').exists()).toBe(false);
+    expect(findInput(wrapper, 'HEMA Rating ID').element.value).toBe('');
+    expect(wrapper.findComponent(ImageCropper).props('urlToImage')).toBe('/saved.png');
+    await selectTab(wrapper, 'Basic');
+    expect(findInput(wrapper, 'Email Address').element.value).toBe('saved@example.com');
+  });
+
+  it('automatically resets when a different person is selected', async () => {
+    const wrapper = mountProfile();
+    typeImmediately(findInput(wrapper, 'Legal Name'), 'Unsaved Name');
+    await selectTab(wrapper, 'Admin');
+    await wrapper.setProps({ personProfile: createProfile({ PersonId: 2, LegalName: 'Second Person', Images: [] }) });
+    expect(wrapper.findComponent(BasicEdit).exists()).toBe(true);
+    expect(findInput(wrapper, 'Legal Name').element.value).toBe('Second Person');
+  });
+});
+
+describe('PersonManagement save state and images', () => {
+  it.each(['saving', 'disabled'])('disables editing and actions while %s', async prop => {
+    const wrapper = mountProfile(createProfile(), { [prop]: true });
+    expect(wrapper.find('fieldset').attributes('disabled')).toBeDefined();
+    expect(wrapper.find('fieldset').attributes('inert')).toBeDefined();
+    expect(wrapper.findComponent(ImageCropper).props('disabled')).toBe(true);
+    expect(wrapper.findAllComponents(BaseButton).every(button => button.attributes('disabled') !== undefined)).toBe(
+      true
+    );
+    wrapper.findComponent(BasicEdit).vm.$emit('update:person', { field: 'DisplayName', value: 'Blocked edit' });
+    wrapper.vm.handleSubmit();
+    wrapper.vm.handleDelete();
+    wrapper.vm.doMerge({ PersonId: 2 });
+    await selectTab(wrapper, 'Admin');
+    expect(wrapper.findComponent(BasicEdit).exists()).toBe(true);
+    expect(wrapper.vm.person.DisplayName).toBe('Original Fencer');
+    expect(wrapper.emitted('submit:person')).toBeUndefined();
+    expect(wrapper.emitted('delete:person')).toBeUndefined();
+    expect(wrapper.emitted('merge:merge')).toBeUndefined();
+    await wrapper.setProps({ [prop]: false });
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')).toHaveLength(1);
+  });
+
+  it('announces the saving state accessibly', () => {
+    const wrapper = mountProfile(createProfile(), { saving: true });
+    expect(wrapper.find('#person-management').attributes('aria-busy')).toBe('true');
+    expect(wrapper.find('[role="status"]').text()).toContain('Saving profile');
+  });
+
+  it.each([undefined, []])('handles missing or empty persisted images (%j)', images => {
+    const wrapper = mountProfile(createProfile({ Images: images }));
+    expect(wrapper.findComponent(ImageCropper).props('urlToImage')).toBe('');
+  });
+
+  it('previews an uploaded image and includes it only in the next explicit Save', async () => {
+    const wrapper = mountProfile(createProfile({ Images: [{ Type: 'Portrait', URL: '/old.png' }] }));
+    const cropper = wrapper.findComponent(ImageCropper);
+    expect(cropper.props('urlToImage')).toBe('/old.png');
+    cropper.vm.$emit('update:uploading', true);
+    await nextTick();
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')).toBeUndefined();
+    cropper.vm.$emit('update:url', 'https://images.example/new.png');
+    cropper.vm.$emit('update:uploading', false);
+    await nextTick();
+    expect(cropper.props('urlToImage')).toBe('https://images.example/new.png');
+    expect(wrapper.emitted('update:image')).toEqual([['https://images.example/new.png']]);
+    expect(wrapper.emitted('submit:person')).toBeUndefined();
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0].ProfileImage).toBe('https://images.example/new.png');
+  });
+
+  it('retains an upload started before the parent disables editing', async () => {
+    const wrapper = mountProfile();
+    const cropper = wrapper.findComponent(ImageCropper);
+    cropper.vm.$emit('update:uploading', true);
+    await wrapper.setProps({ disabled: true });
+    cropper.vm.$emit('update:url', 'https://images.example/finished.png');
+    cropper.vm.$emit('update:uploading', false);
+    await wrapper.setProps({ disabled: false });
+    saveImmediately(wrapper);
+    expect(wrapper.emitted('submit:person')[0][0].ProfileImage).toBe('https://images.example/finished.png');
+  });
+
+  it('ignores late image events after a draft reset', async () => {
+    const wrapper = mountProfile();
+    const cropper = wrapper.findComponent(ImageCropper);
+    await wrapper.setProps({ draftResetKey: 1 });
+    cropper.vm.$emit('update:url', 'https://images.example/stale.png');
+    expect(wrapper.vm.person.ProfileImage).toBeUndefined();
+    expect(wrapper.emitted('update:image')).toBeUndefined();
+  });
+
+  it.each(['load', 'upload'])('reports an image %s failure without changing the draft', async type => {
+    const wrapper = mountProfile(createProfile({ ProfileImage: '/draft.png' }));
+    const cropper = wrapper.findComponent(ImageCropper);
+    cropper.vm.$emit('update:uploading', true);
+    cropper.vm.$emit(`error:${type}`, { message: 'Image failure' });
+    cropper.vm.$emit('update:url', null);
+    await nextTick();
+    expect(wrapper.vm.person.ProfileImage).toBe('/draft.png');
+    expect(wrapper.emitted('update:image')).toBeUndefined();
+    expect(wrapper.emitted('error:image')).toEqual([[{ type, message: 'Image failure' }]]);
+    expect(wrapper.find('[role="alert"]').text()).toBe('Image failure');
+    if (type === 'upload') {
+      saveImmediately(wrapper);
+      expect(wrapper.emitted('submit:person')[0][0].ProfileImage).toBe('/draft.png');
+    }
+  });
+});