Addon-docs: Fix Vue source snippets for function attributes

[leettaylor]

Followup to the excellent work done in #12812 by @pocka

What I did

The sourceDecorator currently throws an error if for some reason the value of an attribute is a function so I've added a simple check for the typeof the value:

Failed to generate dynamic story source: TypeError: Cannot read property 'includes' of undefined

I'm not sure what the underlying issue is that causes the type to be a function but it seems to be related to event handlers.

Here's some example code for a component/story (Not committed to the repo as it breaks storyshot tests) that causes the source to not be generated.

Example component:

<template>
  <div class="pagination">
    <button :disabled="isPreviousButtonDisabled" @click="previousPage">
      « Previous
    </button>

    <button :disabled="isNextButtonDisabled" @click="nextPage">
      Next »
    </button>
  </div>
</template>

<script>
export default {
  name: 'simple-pagination',
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    pageCount: {
      type: Number,
      required: true,
    },
  },
  computed: {
    isPreviousButtonDisabled() {
      return this.currentPage === 1;
    },
    isNextButtonDisabled() {
      return this.currentPage >= this.pageCount;
    },
  },
  methods: {
    nextPage() {
      this.$emit('next-page');
    },
    previousPage() {
      this.$emit('previous-page');
    },
  },
};
</script>

import SimplePagination from './SimplePagination.vue';

export default {
  title: 'Components/Pagination/SimplePagination',
  component: SimplePagination,
  argTypes: {
    nextPage: { action: 'Next page' },
    previousPage: { action: 'Previous page' },
  },
  args: {
    currentPage: 2,
    pageCount: 3,
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { SimplePagination },
  template:
    '<simple-pagination @next-page="nextPage" @previous-page="previousPage" v-bind="$props" />',
});

export const Default = Template.bind({});

For some reason the value of the @previous-page attribute is being passed through as a function instead of just being undefined like @next-page:

 actionHandler() {
    var channel = _addons.addons.getChannel();

    var id = (0, _uuid.v4)();
    var minDepth = 5; // anything less is really just storybook internals

    for (var _len = argument…

How to test

• Is this testable with Jest or Chromatic screenshots? yes
• Does this need a new example in the kitchen sink apps? no
• Does this need an update to the documentation? no

If your answer is yes to any of these, please make sure to include it in your PR. ... done (addons/docs/src/frameworks/vue/sourceDecorator.test.ts)

[pocka]

@leettaylor
Thank you for the fix! Could you add a test at sourceDecorator.test.ts?

[leettaylor]

Thank you for the fix! Could you add a test at sourceDecorator.test.ts?

@pocka I've now updated the attributes test to have coverage for a prop being set to a function, undefined, or true.

[pocka]

LGTM 👍