Add unit tests for App component (#186)

* Add unit tests, fix e2e tests on two components

* Fix linting errors

Co-authored-by: Olga Bulat <obulat@gmail.com>

Author: Ari Madian

tests/e2e/specs/LicenseCode.js

@@ -31,7 +31,7 @@ module.exports = {
             })
             .getAttribute('p > span > a:nth-child(4)', 'href', function(result) {
                 const urlString = result.value.split('/').slice(3).join('/')
-                this.assert.equal(urlString, 'licenses/by-sa/4.0/?ref=ccchooser')
+                this.assert.equal(urlString, 'licenses/by-sa/4.0/?ref=chooser-v1')
             })
     },
     'Check if the text is displayed under the print attribution': function(browser) {

tests/e2e/specs/LicenseDetailsCard.js

@@ -16,7 +16,7 @@ module.exports = {
         browser
             .assert.elementPresent('a[class="license-name"]')
             .getAttribute('a[class="license-name"]', 'href', function(result) {
-                this.assert.equal(result.value, 'https://creativecommons.org/licenses/by-sa/4.0/?ref=ccchooser')
+                this.assert.equal(result.value, 'https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1')
             })
     }
 }

tests/unit/specs/components/App.spec.js

@@ -0,0 +1,51 @@
+import { shallowMount, createLocalVue, config } from '@vue/test-utils'
+import App from '@/App'
+import Buefy from 'buefy'
+import VueI18n from 'vue-i18n'
+import Vuex from 'vuex'
+import Vue from 'vue'
+import store from '@/store'
+
+describe('App.vue', () => {
+    let wrapper
+    let localVue
+
+    // Always creates a shallow instance of component
+    beforeEach(() => {
+        localVue = createLocalVue()
+        localVue.use(Vuex)
+        localVue.use(Buefy)
+        Vue.use(VueI18n)
+        const messages = require('@/locales/en.json')
+        const i18n = new VueI18n({
+            locale: 'en',
+            fallbackLocale: 'en',
+            messages: messages
+        })
+
+        config.mocks.i18n = i18n
+
+        config.mocks.$t = key => {
+            // key is a string (eg. 'stepper.ND.question')
+            // this line converts it into an object reference
+            // eg. messages['stepper.ND.question'] -> messages.stepper.ND.question
+            return key.split('.').reduce((messages, k) => messages[k], i18n.messages)
+        }
+        wrapper = shallowMount(App, {
+            store,
+            localVue
+        })
+        wrapper.vm.$on('input', (newVal) => {
+            wrapper.setProps({ value: newVal })
+        })
+    })
+
+    it('Check if App.vue component renders without any errors', () => {
+        expect(wrapper.isVueInstance()).toBeTruthy()
+    })
+
+    // Snapshot tests
+    it('Check if the App.vue component has the expected UI', () => {
+        expect(wrapper).toMatchSnapshot()
+    })
+})

tests/unit/specs/components/__snapshots__/App.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App.vue Check if the App.vue component has the expected UI 1`] = `
+<div id="app">
+  <header-section-stub></header-section-stub>
+  <div id="site-container" class="container">
+    <div class="page-head">
+      <div class="select-license-column">
+        <h2 class="vocab">
+          SELECT YOUR LICENSE
+        </h2>
+        <p class="stepper-instructions vocab-body body-bigger">
+          Follow the steps to select the appropriate license for your work.
+        </p>
+      </div>
+      <localechooser-stub class="locale-chooser"></localechooser-stub>
+    </div>
+    <div class="columns">
+      <stepper-stub value="0"></stepper-stub>
+      <div class="column">
+        <div class="fixed-right-column">
+          <!---->
+          <!---->
+          <helpsection-stub></helpsection-stub>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer-section-stub></footer-section-stub>
+</div>
+`;