feat: vue-i18n example, close #69 (#70)

* feat: vue-i18n example, close #69

* feat: add Farsi to vue-i18n example

Author: bahmutov

README.md

@@ -32,6 +32,7 @@
 - [Spying On `window.alert`](#spying-window-alert)
 - [Tests](cypress/integration/counter-vuex-spec.js) for a component that [uses Vuex data store](components/Counter.vue)
 - [Tests](cypress/integration/router-spec.js) for a component that [uses vue-router](components/PizzaShop)
+- [translated-message-spec.js](cypress/integration/translated-message-spec.js) shows how to test [TranslatedMessage.vue](components/TranslatedMessage.vue) component that uses [Vue-i18n](http://kazupon.github.io/vue-i18n/en/)
 
 [Bundling](#bundling)
 - [Short Way](#short-way)

components/TranslatedMessage.vue

@@ -0,0 +1,43 @@
+<!-- uses special loader to load i18n blocks -->
+<!-- see http://kazupon.github.io/vue-i18n/en/sfc.html -->
+<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "fa": {
+    "hello": "سلام دنیا"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  },
+  "ru": {
+    "hello": "Привет мир"
+  }
+}
+</i18n>
+
+<template>
+  <div id="app">
+    <label for="locale">locale</label>
+    <select v-model="locale">
+      <option>en</option>
+      <option>fa</option>
+      <option>ja</option>
+      <option>ru</option>
+    </select>
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () { return { locale: 'en' } },
+  watch: {
+    locale (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>

cypress/integration/translated-message-spec.js

@@ -0,0 +1,39 @@
+// testing i18n component
+// http://kazupon.github.io/vue-i18n
+import TranslatedMessage from '../../components/TranslatedMessage.vue'
+import VueI18n from 'vue-i18n'
+import mountVue from '../..'
+
+/* eslint-env mocha */
+describe('VueI18n', () => {
+  // need to use VueI18n as a plugin
+  const extensions = {
+    plugins: [VueI18n],
+    components: {
+      TranslatedMessage
+    }
+  }
+
+  const template = '<translated-message />'
+
+  beforeEach(mountVue({template}, {extensions}))
+
+  it('shows English, Japanese and Russian greeting', () => {
+    cy.viewport(400, 200)
+
+    cy.get('select').select('en').should('have.value', 'en')
+    cy.contains('message: hello')
+
+    cy.get('select').select('fa').should('have.value', 'fa')
+    cy.contains('message: سلام دنیا')
+
+    cy.get('select').select('ja').should('have.value', 'ja')
+    cy.contains('message: こんにちは、世界')
+
+    cy.get('select').select('ru').should('have.value', 'ru')
+    cy.contains('message: Привет мир')
+  })
+
+  // TODO how to load messages not from i18n block but from external JSON file?
+  // then we could reuse the messages to check the contents
+})

package.json

@@ -78,10 +78,11 @@
     }
   },
   "devDependencies": {
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
     "axios": "0.18.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
     "ban-sensitive-files": "1.9.2",
     "css-loader": "0.28.11",
+    "cypress": "2.1.0",
     "dependency-check": "3.1.0",
     "deps-ok": "1.4.0",
     "git-issues": "1.3.1",
@@ -90,15 +91,15 @@
     "nsp": "3.2.1",
     "pre-git": "3.17.1",
     "prettier-standard": "8.0.1",
-    "simple-commit-message": "4.0.3",
     "semantic-release": "15.1.7",
+    "simple-commit-message": "4.0.3",
     "standard": "11.0.1",
     "vue": "2.5.16",
+    "vue-i18n": "7.6.0",
     "vue-loader": "14.2.2",
-    "vuex": "3.0.1",
     "vue-router": "3.0.1",
     "vue-template-compiler": "2.5.16",
-    "cypress": "2.1.0"
+    "vuex": "3.0.1"
   },
   "standard": {
     "globals": [
@@ -113,6 +114,7 @@
   },
   "dependencies": {
     "@cypress/webpack-preprocessor": "2.0.1",
-    "common-tags": "1.7.2"
+    "common-tags": "1.7.2",
+    "@kazupon/vue-i18n-loader": "0.3.0"
   }
 }

preprocessor/webpack.js

@@ -11,7 +11,14 @@ const webpackOptions = {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // you need to specify `i18n` loaders key with
+            // `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
       }
     ]
   }