test: setup tests for components

diff --git a/__tests__/helper.js b/__tests__/helper.js
index 97c3ac1bd614c4c719ec28f0cd7d579718aff4b6..1ba01ea92b8977e7a09523785b8827a20120b750 100644 (file)
--- a/__tests__/helper.js
+++ b/__tests__/helper.js
@@ -1,3 +1,4 @@
+'use strict'
 // make tests compatible with mocha so we can write using jest syntax
 if (typeof global !== 'undefined' && typeof global.beforeAll === 'undefined') {
   global.beforeAll = global.before

diff --git a/__tests__/router-view.spec.js b/__tests__/router-view.spec.js
new file mode 100644 (file)
index 0000000..075436b
--- /dev/null
+++ b/__tests__/router-view.spec.js
@@ -0,0 +1,34 @@
+/**
+ * @jest-environment jsdom
+ *
+ */
+// @ts-check
+require("./helper");
+const expect = require("expect");
+const { default: RouterView } = require("../src/components/View");
+const { components, isMocha } = require("./utils");
+
+describe("RouterView", () => {
+  // skip these tests on mocha because @vue/test-utils
+  // do not work correctly
+  if (isMocha()) return;
+  const { mount } = require("@vue/test-utils");
+
+  it("displays current route component", async () => {
+    const wrapper = await mount(RouterView, {
+      mocks: {
+        $route: {
+          fullPath: "/",
+          name: undefined,
+          path: "/",
+          query: {},
+          params: {},
+          hash: "",
+          meta: {},
+          matched: [{ component: components.Home, path: "/", name: undefined }]
+        }
+      }
+    });
+    expect(wrapper.html()).toMatchInlineSnapshot(`"<div>Home</div>"`);
+  });
+});

diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 5220564d8703e187662fe5efe9ee32a14d3b645e..6110a6ae5d28b52a8a57c1d5f316a97857b6457b 100644 (file)
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -1,5 +1,6 @@
 import { JSDOM, ConstructorOptions } from 'jsdom'
 import { NavigationGuard } from '../src/types'
+import { Component } from 'vue'
 
 export { HistoryMock } from './HistoryMock'
 
@@ -32,8 +33,14 @@ export const noGuard: NavigationGuard = (to, from, next) => {
   next()
 }
 
-export const components = {
-  Home: { template: `<div>Home</div>` },
-  Foo: { template: `<div>Foo</div>` },
-  Bar: { template: `<div>Bar</div>` },
+export const components: Record<string, Component> = {
+  Home: { render: h => h('div', {}, 'Home') },
+  Foo: { render: h => h('div', {}, 'Foo') },
+  Bar: { render: h => h('div', {}, 'Bar') },
 }
+
+// allow using a .jest modifider to skip some tests on mocha
+// specifically, skip component tests as they are a pain to correctly
+// adapt to mocha
+// @ts-ignore
+export const isMocha = () => typeof global.before === 'function'

diff --git a/package.json b/package.json
index 0cbf99cadc54996faf293ab2b0596353789aa6b1..6de03dd68a0ed3655cc87a63514638af05f5fd17 100644 (file)
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@types/jest": "^24.0.15",
     "@types/jsdom": "^12.2.4",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "consola": "^2.9.0",
     "expect": "^24.8.0",
     "faked-promise": "^2.1.0",
@@ -40,6 +41,7 @@
     "ts-node": "^8.3.0",
     "typescript": "^3.5.2",
     "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10",
     "webpack": "^4.35.0",
     "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2"

diff --git a/src/components/View.ts b/src/components/View.ts
index 23df951a056942f29d5700ad212f806f5301c513..db04a5a7c9897e1f264bed2887329c631ef8758f 100644 (file)
--- a/src/components/View.ts
+++ b/src/components/View.ts
@@ -1,8 +1,8 @@
 // @ts-nocheck
 
-import { FunctionalComponentOptions } from 'vue'
+import { Component } from 'vue'
 
-const View: FunctionalComponentOptions = {
+const View: Component = {
   name: 'RouterView',
   functional: true,
 
@@ -17,8 +17,6 @@ const View: FunctionalComponentOptions = {
     // @ts-ignore
     const route = parent.$route
 
-    console.log('rendering', route)
-
     // TODO: support nested router-views
     const matched = route.matched[0]
 

diff --git a/yarn.lock b/yarn.lock
index 31917969a56e3e4169628d23c17155b193658c37..e781099f70afd5321c3db97e674860ed1287ac68 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -420,6 +420,14 @@
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.11.tgz#a090d88e1f40a910e6443c95493c1c035c76ebdc"
   integrity sha512-IsU1TD+8cQCyG76ZqxP0cVFnofvfzT8p/wO8ENT4jbN/KKN3grsHFgHNl/U+08s33ayX4LwI85cEhYXCOlOkMw==
 
+"@vue/test-utils@^1.0.0-beta.29":
+  version "1.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0"
+  integrity sha512-yX4sxEIHh4M9yAbLA/ikpEnGKMNBCnoX98xE1RwxfhQVcn0MaXNSj1Qmac+ZydTj6VBSEVukchBogXBTwc+9iA==
+  dependencies:
+    dom-event-types "^1.0.0"
+    lodash "^4.17.4"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -1622,6 +1630,11 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1824,6 +1837,11 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -2665,7 +2683,7 @@ he@1.1.x:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
   integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
 
-he@1.2.0:
+he@1.2.0, he@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -3818,7 +3836,7 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-lodash@^4.17.11:
+lodash@^4.17.11, lodash@^4.17.4:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -6355,6 +6373,14 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-template-compiler@^2.6.10:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
+  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.1.0"
+
 vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"