Testing

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>
+`;