Vue properties test WIP

addons/docs/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.[jt]sx?$': '../../scripts/babel-jest.js',
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+    '^.+\\.vue$': 'vue-jest'
+  }
+};

addons/docs/package.json

@@ -87,9 +87,12 @@
     "cross-spawn": "^7.0.1",
     "jest-specific-snapshot": "^2.0.0",
     "lit-html": "^1.0.0",
+    "memory-fs": "^0.5.0",
     "require-from-string": "^2.0.2",
     "styled-components": "^5.0.1",
     "tmp": "^0.1.0",
+    "vue-jest": "^3.0.5",
+    "vue-loader": "^15.9.0",
     "web-component-analyzer": "^1.0.3"
   },
   "peerDependencies": {

addons/docs/src/frameworks/vue/__testfixtures__/sfc-component/input.vue

@@ -0,0 +1,70 @@
+<script>
+/**
+ * InfoButton component description
+ */
+export default {
+  props: {
+    /**
+     * Whether to disable button
+     */
+    disabled: {
+      type: Boolean,
+    },
+    /**
+     * Button type
+     */
+    type: {
+      type: String,
+      default: 'normal',
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    click(ev) {
+      /**
+       * Passthrough click event
+       * @type {Event}
+       */
+      this.$emit('click', ev);
+    },
+  },
+};
+</script>
+
+<template>
+  <button class="btn" :class="type" :disabled="disabled" @click="click">
+    <!-- @slot Default to label prop -->
+    <img width="60px" src="../../logo.png" />
+    <slot>
+      {{ label }}
+    </slot>
+  </button>
+</template>
+
+<style scoped>
+.btn {
+  padding: 3px 10px;
+
+  border: 3px solid #42b983;
+  border-radius: 5px;
+  background-color: #fff;
+  color: #333;
+}
+
+.btn:active {
+  opacity: 0.9;
+}
+
+.btn.primary {
+  background-color: #33f;
+  color: #fff;
+}
+
+.btn:disabled {
+  background-color: #eee;
+  color: #777;
+}
+</style>

addons/docs/src/frameworks/vue/vue-properties.test.ts

@@ -0,0 +1,110 @@
+import 'jest-specific-snapshot';
+import path from 'path';
+import fs from 'fs';
+import Memoryfs from 'memory-fs';
+import VueLoaderPlugin from 'vue-loader/lib/plugin';
+import webpack from 'webpack';
+
+import { transformFileSync, transformSync } from '@babel/core';
+import requireFromString from 'require-from-string';
+
+import { extractProps } from './extractProps';
+
+// File hierarchy:
+// __testfixtures__ / some-test-case / input.*
+const inputRegExp = /^input\..*$/;
+
+const transformToModule = (inputCode: string) => {
+  const options = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            esmodules: true,
+          },
+        },
+      ],
+    ],
+  };
+  const { code } = transformSync(inputCode, options);
+  return normalizeNewlines(code);
+};
+
+const annotateWithDocgen = (inputPath: string) => {
+  const options = {};
+  const compiler = webpack({
+    context: __dirname,
+    entry: inputPath,
+    output: {
+      path: path.resolve(__dirname),
+      filename: 'bundle.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [{ loader: 'vue-loader' }],
+        },
+        {
+          test: /\.vue$/,
+          enforce: 'post',
+          loader: 'vue-docgen-loader',
+          options,
+        },
+        {
+          test: /\.vue.js$/,
+          enforce: 'post',
+          loader: 'vue-docgen-loader',
+          options,
+        },
+      ],
+    },
+    plugins: [new VueLoaderPlugin()],
+  });
+
+  compiler.outputFileSystem = new Memoryfs();
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+
+      if (stats.hasErrors()) {
+        return reject(new Error(stats.toJson().errors.join(',')));
+      }
+
+      return resolve(stats);
+    });
+  });
+};
+
+const normalizeNewlines = (string: string) => string.replace(/\\r\\n/g, '\\n');
+
+describe('react component properties', () => {
+  const fixturesDir = path.join(__dirname, '__testfixtures__');
+  fs.readdirSync(fixturesDir, { withFileTypes: true }).forEach(testEntry => {
+    if (testEntry.isDirectory()) {
+      const testDir = path.join(fixturesDir, testEntry.name);
+      const testFile = fs.readdirSync(testDir).find(fileName => inputRegExp.test(fileName));
+      if (testFile) {
+        it(testEntry.name, async () => {
+          const inputPath = path.join(testDir, testFile);
+
+          // snapshot the output of babel-plugin-react-docgen
+          const docgenPretty = (await annotateWithDocgen(inputPath)) as string;
+          expect(docgenPretty).toMatchSpecificSnapshot(path.join(testDir, 'docgen.snapshot'));
+
+          // transform into an uglier format that's works with require-from-string
+          const docgenModule = transformToModule(docgenPretty);
+
+          // snapshot the output of component-properties/react
+          const { component } = requireFromString(docgenModule);
+          const properties = extractProps(component);
+          expect(properties).toMatchSpecificSnapshot(path.join(testDir, 'properties.snapshot'));
+        });
+      }
+    }
+  });
+});

addons/docs/src/typings.d.ts

@@ -8,6 +8,8 @@ declare module 'remark-slug';
 declare module 'remark-external-links';
 declare module 'babel-plugin-react-docgen';
 declare module 'require-from-string';
+declare module 'memory-fs';
+declare module 'vue-loader/lib/plugin';
 declare module 'tmp';
 declare module 'cross-spawn';
 declare module 'styled-components';