Testing

tests/unit/.eslintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
   env: {
     jest: true
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 'off'
   }
 };

tests/unit/App.test.js

@@ -0,0 +1,11 @@
+import { shallowMount } from '@vue/test-utils';
+import App from '@/App.vue';
+
+describe('App.vue', () => {
+  test('Render default contents', () => {
+    const wrapper = shallowMount(App);
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+});

tests/unit/__snapshots__/App.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App.vue Render default contents 1`] = `
+<div id="app">
+  <img src="@/assets/vue.png" alt="Vue.js logo" title="Vue.js" class="logo">
+  <img src="@/assets/nw.png" alt="NW.js logo" title="NW.js" class="logo">
+  <helloworld-stub msg="Welcome to your Vue.js Desktop App in NW.js!"></helloworld-stub>
+</div>
+`;

tests/unit/components/HelloWorld.test.js

@@ -0,0 +1,39 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
+
+describe('HelloWorld.vue', () => {
+  test('Render props.msg', () => {
+    const msg = 'new message';
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    });
+
+    expect(wrapper.find('[data-test="message"]').text())
+      .toEqual(msg);
+  });
+
+  test('Render default contents', () => {
+    const wrapper = mount(HelloWorld);
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+
+  test('Activate dev tools', () => {
+    const wrapper = shallowMount(HelloWorld);
+
+    const button = wrapper.find('[data-test="toggleDevTools"]');
+
+    button.trigger('click');
+    wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="toggleDevTools').html())
+      .toMatchSnapshot('hide');
+
+    button.trigger('click');
+    wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="toggleDevTools').html())
+      .toMatchSnapshot('show');
+  });
+});

tests/unit/components/LinkList.test.js

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils';
+import LinkList from '@/components/LinkList.vue';
+
+describe('LinkList.vue', () => {
+  const link = {
+    name: 'Site',
+    url: 'https://nwjs.io'
+  };
+
+  test('Validate props', () => {
+    const wrapper = shallowMount(LinkList);
+    const links = wrapper.vm.$options.props.links;
+
+    expect(links.required)
+      .toBeFalsy();
+
+    expect(links.type)
+      .toBe(Array);
+
+    expect(links.default)
+      .toBeNull();
+
+    expect(links.validator && links.validator([{ name: '', url: '' }]))
+      .toBeFalsy();
+
+    expect(links.validator && links.validator([link]))
+      .toBeTruthy();
+  });
+
+  test('Render default contents', () => {
+    const wrapper = shallowMount(LinkList, {
+      propsData: { links: [link] }
+    });
+
+    expect(wrapper.html())
+      .toMatchSnapshot();
+  });
+
+  test('Click link', () => {
+    const wrapper = shallowMount(LinkList, {
+      propsData: { links: [link] }
+    });
+
+    let domLink = wrapper.findAll('[data-test="link"]').at(0);
+    domLink.trigger('click');
+
+    expect(window.nw.Shell.openExternal)
+      .toHaveBeenCalledWith('https://nwjs.io');
+  });
+});

tests/unit/components/__snapshots__/HelloWorld.test.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelloWorld.vue Activate dev tools: hide 1`] = `
+<button>
+  Hide
+
+  Developer Tools
+</button>
+`;
+
+exports[`HelloWorld.vue Activate dev tools: show 1`] = `
+<button>
+  Show
+
+  Developer Tools
+</button>
+`;
+
+exports[`HelloWorld.vue Render default contents 1`] = `
+<div class="hello">
+  <h1>Welcome to your Vue Desktop App in NW.js!</h1>
+  <h3>
+    You are using
+    Vue.js (v2.6.10),
+    NW.js (v0.40.2-sdk),
+    Node.js (v12.9.1),
+    and
+    Chromium (v76.0.3809.132).
+  </h3>
+  <button>
+    Show
+
+    Developer Tools
+  </button>
+  <p>You can use the resources below to find more information around building your Vue App.</p>
+  <ul>
+    <li title="github.com/nwutils/nw-vue-cli-example">
+      <a href="#">
+        nw-vue-cli-example
+      </a>
+    </li>
+    <li title="nwjs.io">
+      <a href="#">
+        NW.js
+      </a>
+    </li>
+    <li title="github.com/nwutils/nw-vue-devtools">
+      <a href="#">
+        nw-vue-devtools
+      </a>
+    </li>
+    <li title="github.com/evshiron/nwjs-builder-phoenix">
+      <a href="#">
+        nwjs-builder-phoenix
+      </a>
+    </li>
+    <li title="cli.vuejs.org">
+      <a href="#">
+        vue-cli
+      </a>
+    </li>
+  </ul>
+  <h3>Installed CLI Plugins</h3>
+  <ul>
+    <li title="github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel">
+      <a href="#">
+        babel
+      </a>
+    </li>
+    <li title="github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint">
+      <a href="#">
+        eslint
+      </a>
+    </li>
+    <li title="github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest">
+      <a href="#">
+        unit-jest
+      </a>
+    </li>
+    <li title="github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress">
+      <a href="#">
+        e2e-cypress
+      </a>
+    </li>
+  </ul>
+  <h3>Essential Links</h3>
+  <ul>
+    <li title="vuejs.org">
+      <a href="#">
+        Core Docs
+      </a>
+    </li>
+    <li title="forum.vuejs.org">
+      <a href="#">
+        Forum
+      </a>
+    </li>
+    <li title="chat.vuejs.org">
+      <a href="#">
+        Community Chat
+      </a>
+    </li>
+    <li title="twitter.com/vuejs">
+      <a href="#">
+        Twitter
+      </a>
+    </li>
+    <li title="news.vuejs.org">
+      <a href="#">
+        News
+      </a>
+    </li>
+  </ul>
+  <h3>Ecosystem</h3>
+  <ul>
+    <li title="router.vuejs.org">
+      <a href="#">
+        vue-router
+      </a>
+    </li>
+    <li title="vuex.vuejs.org">
+      <a href="#">
+        vuex
+      </a>
+    </li>
+    <li title="github.com/vuejs/vue-devtools#vue-devtools">
+      <a href="#">
+        vue-devtools
+      </a>
+    </li>
+    <li title="vue-loader.vuejs.org">
+      <a href="#">
+        vue-loader
+      </a>
+    </li>
+    <li title="github.com/vuejs/awesome-vue">
+      <a href="#">
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;

tests/unit/components/__snapshots__/LinkList.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinkList.vue Render default contents 1`] = `
+<ul>
+  <li title="nwjs.io">
+    <a href="#">
+      Site
+    </a>
+  </li>
+</ul>
+`;

tests/unit/example.spec.js

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
-    });
-    expect(wrapper.text()).toMatch(msg);
-  });
-});

tests/unit/serializer.js

@@ -0,0 +1,42 @@
+// Based on jest-serializer-vue
+
+const beautify = require('pretty');
+
+function isHtmlString (received) {
+  return received && typeof(received) === 'string' && received.startsWith('<');
+}
+
+function isVueWrapper (received) {
+  return received && typeof(received) === 'object' && typeof(received.isVueInstance) === 'function';
+}
+
+// This removes data-test="whatever" from your snapshots
+// If you also want to remove them from your production builds, see:
+// https://forum.vuejs.org/t/how-to-remove-attributes-from-tags-inside-vue-components/24138
+function removeDataTestAttributes (html) {
+  // [-\w]+ will catch 1 or more instaces of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
+  return html.replace(/ data-test="[-\w]+"/g, '');
+}
+
+module.exports = {
+  test: function (received) {
+    return isHtmlString(received) || isVueWrapper(received);
+  },
+  print: function (received) {
+    let html = received || '';
+    if (isVueWrapper(received)) {
+      html = received.html();
+    }
+    html = removeDataTestAttributes(html);
+    // To see available options: https://github.com/beautify-web/js-beautify/blob/master/js/src/html/options.js
+    const options = {
+      indent_size: 2,
+      unformatted: ['code', 'pre'],
+      inline: [],
+      indent_inner_html: true,
+      indent_char: ' ',
+      sep: '\n'
+    };
+    return beautify(html, options);
+  }
+};

tests/unit/setup.js

@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+const { getComputedStyle } = window;
+
+Vue.config.productionTip = false;
+
+// Prevents console log message to install Vue DevTools
+Vue.config.devtools = false;
+
+// Monkeypatch JSDOM missing transition styles + vue-test-utils not properly stubbing transitions
+// in globally included libs (VeeValidate in our case)
+// https://github.com/vuejs/vue-test-utils/issues/839#issuecomment-410474714
+window.getComputedStyle = function getComputedStyleStub (el) {
+  return {
+    ...getComputedStyle(el),
+    transitionDelay: '',
+    transitionDuration: '',
+    animationDelay: '',
+    animationDuration: ''
+  };
+};
+
+global.beforeEach(() => {
+  window.process = {
+    env: {
+      NODE_ENV: 'development'
+    },
+    versions: {
+      chromium: '76.0.3809.132',
+      nw: '0.40.2',
+      'nw-flavor': 'sdk',
+      node: '12.9.1'
+    }
+  };
+  window.nw = {
+    Shell: {
+      openExternal: jest.fn()
+    },
+    Window: {
+      get: function () {
+        return {
+          showDevTools: jest.fn(),
+          closeDevTools: jest.fn()
+        };
+      }
+    }
+  };
+});
+
+global.afterEach(() => {
+  window.nw.Window.get().showDevTools.mockClear();
+});
+
+
+// Jest's setTimeout defaults to 5 seconds.
+// Bump the timeout to 60 seconds.
+jest.setTimeout(60 * 1000);