Add unit testing example

nicolo-ribaudo · nicolo-ribaudo · commit 272a2253110a · 2017-05-22T23:37:56.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,7 @@ node_modules
 .vscode
 
 examples/*/dist
-examples/*/dist-play
+examples/*/dist-*
 
 # yarn.lock should not be committed in libraries
 yarn.lock
diff --git a/examples/03-testing/package.json b/examples/03-testing/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "vue-extract-loader.03-testing",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "scripts": {
+        "build": "webpack"
+    },
+    "devDependencies": {
+        "css-loader": "^0.28.2",
+        "html-webpack-plugin": "^2.28.0",
+        "mocha": "^3.4.1",
+        "mocha-loader": "^1.1.1",
+        "vue-loader": "^12.1.0",
+        "vue-template-compiler": "^2.3.3",
+        "webpack": "^2.5.1"
+    },
+    "dependencies": {
+        "vue": "^2.3.3"
+    }
+}
diff --git a/examples/03-testing/src/component.vue b/examples/03-testing/src/component.vue
@@ -0,0 +1,66 @@
+<template>
+    <p class="text">{{ message }}</p>
+</template>
+
+<script>
+
+export default {
+    data: () => ({
+        message: "Hello World!",
+    }),
+}
+
+</script>
+
+<style>
+
+.text {
+    color: blue;
+}
+
+</style>
+
+<unit-test>
+
+import assert from "assert";
+
+import Vue from "vue";
+import Component from "./component.vue";
+
+describe("component.vue", () => {
+    it("exports an object", () => {
+        assert.equal(typeof Component, "object");
+    });
+
+    describe("#data", () => {
+        it("is a function", () => {
+            assert.equal(typeof Component.data, "function");
+        });
+
+        it("sets the default values", () => {
+            assert.equal(Component.data().message, "Hello World!");
+        });
+    });
+
+    describe("rendering", () => {
+        it("renders the correct message", () => {
+            const Ctor = Vue.extend(Component);
+            const el = document.createElement("div");
+
+            const vm = new Ctor({ el }).$mount();
+
+            assert.equal(vm.$el.textContent, "Hello World!");
+        });
+
+        it("renders the message with the correct class", () => {
+            const Ctor = Vue.extend(Component);
+            const el = document.createElement("div");
+
+            const vm = new Ctor({ el }).$mount();
+
+            assert(vm.$el.classList.contains("text"));
+        });
+    });
+});
+
+</unit-test>
diff --git a/examples/03-testing/test/index.html b/examples/03-testing/test/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>vue-extract-loader example</title>
+    </head>
+    <body>
+        <div id="mocha"></div>
+    </body>
+</html>
diff --git a/examples/03-testing/test/index.js b/examples/03-testing/test/index.js
@@ -0,0 +1 @@
+import "../src/component.vue";
diff --git a/examples/03-testing/webpack.config.js b/examples/03-testing/webpack.config.js
@@ -0,0 +1,42 @@
+"use strict";
+
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    entry: "./test/index.js",
+    output: {
+        filename: "./bundle.js",
+        path: path.resolve("dist-test"),
+    },
+
+    resolve: {
+        extensions: [ ".js", ".vue" ],
+    },
+
+    resolveLoader: {
+        alias: {
+            // This is only needed in order to alias "vue-extract-loader" to
+            // the root folder of this package.
+            // You shouldn't do this in your project.
+            "vue-extract-loader": require.resolve("../../"),
+        },
+    },
+
+    module: {
+        rules: [ {
+            test: /.vue$/,
+            issuer: path.join(__dirname, "test/index.js"),
+            loader: "mocha-loader!vue-extract-loader?block=unit-test",
+        }, {
+            test: /\.vue$/,
+            loader: "vue-loader",
+        } ],
+    },
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: require.resolve("./test/index.html"),
+        }),
+    ],
+};
