Mounting only the slots of child components

[TheJaredWilcurt]

What problem does this feature solve?

We currently have a helper file in our codebase we pull in to testing files, it contains this beauty:

/**
 * Create a component stub that will render all included slots from the
 * parent component. This lets you test the slots you've included in child component
 * without having to fully mount the child component.
 *
 * * Notes on implementation *
 * There is no one place this is clearly laid out. This thread gave the starting point:
 *
 * https://github.com/vuejs/vue-test-utils/issues/85
 *
 * but modifying the function requires understanding Vue's functional components
 * and the `render` function:
 *
 * https://vuejs.org/v2/guide/render-function.html
 *
 * especially the arguments that `createElement` can take:
 *
 * https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
 *
 * In short, this produces a <div> with only the child components slots, but none of
 * its other functionality.
 *
 * @return {object} The functional component definition
 */
componentStubWithSlots: function (el) {
  if (!el || typeof(el) !== 'string') {
    el = 'div';
  }
  return {
    render: function (createElement) {
      return createElement(el, [Object.values(this.$slots)]);
    }
  };
}

It would be nice if there was a more elegant way of handling this, or at least better documented (not requiring links to 3 different places).

What does the proposed API look like?

That helper function gets used like so:

test('Show only mine checkbox adds showOnlyMine to the query params', async () => {
  const wrapper = shallow(reservationsList, {
    store,
    localVue,
    stubs: {
      RouterLink: RouterLinkStub,
      'base-table': helpers.componentStubWithSlots()
    },
    mocks: { $ga }
  });

  let checkbox = wrapper.find('[data-test="showOnlyMineCheckbox"]');
  checkbox.trigger('click');

  expect(wrapper.vm.paramsForGettingListItems)
    .toEqual({ showOnlyMine: true });
});

I think it would be nicer if there was something like that built in, so we could just do this:

test('Show only mine checkbox adds showOnlyMine to the query params', async () => {
  const wrapper = shallow(reservationsList, {
    store,
    localVue,
    stubs: {
      RouterLink: RouterLinkStub,
      stubComponentSlots: [ 'base-table' ]
    },
    mocks: { $ga }
  });

  let checkbox = wrapper.find('[data-test="showOnlyMineCheckbox"]');
  checkbox.trigger('click');

  expect(wrapper.vm.paramsForGettingListItems)
    .toEqual({ showOnlyMine: true });
});

[ebisbe]

#1564 (comment)