How do I test a composable that uses onMounted and other injections.

[MarkTallentire]

Hi,

I have this composable

import { QTableProps } from 'quasar';
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getNumberFromRouteURL } from 'src/router/routeHelpers';
import { PaginationModel } from 'src/models/pagination/paginationTypes';
import { APIFilter } from 'src/models/apimodels/APIFilter';
import { APIPagedResponse } from 'src/models/apimodels/PagedResponse';
import useNotify from 'src/components/Shared/composables/notify';

export default <T>(
  DataFetchFunction: (
    page: number,
    limit: number,
    innerFilters: APIFilter
  ) => Promise<APIPagedResponse<T>>,
  innerFilter: APIFilter,
  modifyURL = true,
  afterRequest?: () => void
) => {
  const { notifyError } = useNotify();

  const innerFilters = ref(innerFilter);
  const router = useRouter();
  const route = useRoute();

  const data = ref<T[]>();
  const loading = ref<boolean>(false);

  const pagination = ref<PaginationModel>({
    page: 1,
    sortBy: '',
    descending: false,
    rowsNumber: 100,
    rowsPerPage: 10,
  });

  const onRequest: QTableProps['onRequest'] = async (props) => {
    loading.value = true;

    const _pagination = props.pagination;
    if (pagination.value) {
      pagination.value.rowsPerPage = _pagination.rowsPerPage;
      pagination.value.page = _pagination.page;
    }

    const returnedData = ref<APIPagedResponse<T>>();
    try {
      returnedData.value = await DataFetchFunction(
        _pagination.page,
        _pagination.rowsPerPage,
        innerFilters.value
      );
    } catch (error) {
      console.error(error);
      notifyError('Unable to fetch data', 'Please contact Exis Technologies');
    }

    data.value = returnedData.value?.data;
    pagination.value.rowsNumber = returnedData.value?.totalCount || 0;

    if (modifyURL) {
      console.log('Second push');
      router
        .push({
          path: route.path,
          query: {
            page: _pagination.page,
            limit: pagination.value.rowsPerPage,
            ...innerFilters.value,
          },
        })
        .catch((error) => {
          throw new Error(error);
        });
    }

    if (afterRequest) afterRequest();

    loading.value = false;
  };

  const assignFromRoute = () => {
    pagination.value.page = getNumberFromRouteURL(route.fullPath);
    pagination.value.rowsPerPage = Math.min(
      50,
      getNumberFromRouteURL(route.fullPath, 'limit', 10)
    );

    const objectEntries = Object.entries(route.query).filter(([key]) => {
      return key !== 'page' && key !== 'limit';
    });

    const finalFilterEntries = objectEntries.filter(([, value]) => {
      if (Array.isArray(value)) {
        return !value.some((x) => x === null);
      } else {
        return value !== '' && value !== null;
      }
    }) as [string, string | string[]][];

    const finalFilter = finalFilterEntries.reduce((accum, [k, v]) => {
      accum[k] = v;
      return accum;
    }, {} as APIFilter);

    Object.assign(innerFilters, finalFilter);
  };

  watch(
    innerFilters.value,
    () => {
      TriggerOnRequest();
    },
    { deep: true }
  );

  onMounted(() => {
    modifyURL && assignFromRoute();
    TriggerOnRequest();
  });

  const TriggerOnRequest = () => {
    onRequest({
      pagination: pagination.value,
      //FIXME Come back to this when Quasar fix type.
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      filter: undefined,
    });
  };

  return { onRequest, loading, data, pagination };
};

As you can see it relies on some vue specific behaviours such as Watch and OnMounted. I have been unable to test this component due to this as it throws errors, so I'm unsure how I can test it, any tips/hints?

[freakzlike]

Create a simple test component which only uses the composable you want to test. You can pass the parameters as props and return the results directly from the setup method.

Here a quick example:

import { defineComponent } from 'vue'

const TestComponent = defineComponent({
  props: {
    dataFetchFunction: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    return usePagination(props.dataFetchFunction)
  }
})

it('should fetch data on mount', () => {
  const dataFetchFunction = jest.fn()
  const wrapper = mount(TestComponent, {
    props: {
      dataFetchFunction
    }
  })

  expect(dataFetchFunction).toHaveBeenCalledTimes(1)
  expect(wrapper.vm.pagination.page).toBe(1)
})

For useNotify either test the real output if possible or mock the whole module with jest.mock

[ebisbe]

Is the same for Vue 2.7? If I use it like your code it asks for a template or render function. I'm trying to add something like:

render: function() {
      console.log(this.response);
      return this.response;
    }

But I can't manage to get the response in the wrapper from the jest mount function. Any ideas?

[freakzlike]

You can add a dummy template

const TestComponent = defineComponent({
  props: {
    dataFetchFunction: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    return usePagination(props.dataFetchFunction)
  },
  template: '<div/>'
})

[ebisbe]

ok, that solves it. My other issue is that is was not clear to me how to access the returned values. But now I see that they are exposed under wrapper.vm.