79216701

Date: 2024-11-22 22:07:30
Score: 2.5
Natty:
Report link

I found a solution to my problem and wanted to post it here for anyone having a similar issue. Basically, I restructured the component by moving the logic out of the lifecycle hook and testing the new method directly.

Here is the new method:

  const onMountedHandlerAsync = async () => {
    applicationStore.updateShowSpinner(true);
    if (await disclosureStore.getDisclosuresListAsync()) {
      disclosures.value = disclosureStore.disclosures;
      if (
        disclosures.value.length > 0 &&
        disclosures.value.length === selectedDisclosures.value.length
      ) {
        emit('form-status-updated', true, null);
      }
      applicationStore.updateShowSpinner(false);
      goTo(0, { duration: 200, easing: 'linear' });
    }
  };

Here is the restructured lifecycle hook:

  onMounted(async () => {
    await onMountedHandlerAsync();
  });

Here is the unit test:

  it('should get disclosures from the disclosureStore and populates the component disclosures on the onMounted lifecycle', async () => {
    // Arrange
    const appStore = mockedStore(useApplicationStore);
    appStore.updateShowSpinner.mockImplementation(() => {});
    const disclosureStore = mockedStore(useDisclosureStore);
    disclosureStore.updateSelectedDisclosures.mockImplementation((selected: IDisclosure[]) => {
      const store = useDisclosureStore();
      store.$state.selectedDisclosures = selected;
    });
    disclosureStore.getDisclosuresListAsync.mockResolvedValue(true)
    disclosureStore.disclosures = [
      <IDisclosure>{
        id: 1,
        name: 'Disclosure 1',
        displayName: 'Disclosure 1',
        url: 'http://localhost/api/disclosures/disclosure-1',
      },
      <IDisclosure>{
        id: 2,
        name: 'Disclosure 2',
        displayName: 'Disclosure 2',
        url: 'http://localhost/api/disclosures/disclosure-2',
      },
      <IDisclosure>{
        id: 3,
        name: 'Disclosure 3',
        displayName: 'Disclosure 3',
        url: 'http://localhost/api/disclosures/disclosure-3',
      },
    ];
    wrapper.vm.selectedDisclosures = [
      <IDisclosure>{
        id: 1,
        name: 'Disclosure 1',
        displayName: 'Disclosure 1',
        url: 'http://localhost/api/disclosures/disclosure-1',
      },
      <IDisclosure>{
        id: 2,
        name: 'Disclosure 2',
        displayName: 'Disclosure 2',
        url: 'http://localhost/api/disclosures/disclosure-2',
      },
      <IDisclosure>{
        id: 3,
        name: 'Disclosure 3',
        displayName: 'Disclosure 3',
        url: 'http://localhost/api/disclosures/disclosure-3',
      },
    ];

    // Act
    await wrapper.vm.onMountedHandlerAsync();
    await flushPromises();

    const disclosures = wrapper.vm.disclosures;

    // Assert
    expect(disclosureStore.getDisclosuresListAsync).toHaveBeenCalled();
    expect(disclosures.length).equals(3)
  });
Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): having a similar issue
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Joe King