From 9af74ffb15cc52499b75feb5493b0050834cc557 Mon Sep 17 00:00:00 2001
From: daryl <darylcoleoffice@gmail.com>
Date: Wed, 17 Jul 2019 17:05:59 +0900
Subject: [PATCH 1/3] Add vue-i18n library

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index e69913f4..cb330800 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "lint-staged": "^8.1.7",
     "prettier": "^1.17.1",
     "vee-validate": "^2.2.9",
+    "vue-i18n": "^8.12.0",
     "vue-jest": "^3.0.4",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"

From d43c4b5b8243547356726ede7d0b94b1d62572fe Mon Sep 17 00:00:00 2001
From: daryl <darylcoleoffice@gmail.com>
Date: Wed, 17 Jul 2019 17:07:07 +0900
Subject: [PATCH 2/3] Add component and test for vue i18n

---
 tests/__tests__/components/VueI18n.vue | 21 +++++++++++++++++++
 tests/__tests__/vueI18n.js             | 29 ++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 tests/__tests__/components/VueI18n.vue
 create mode 100644 tests/__tests__/vueI18n.js

diff --git a/tests/__tests__/components/VueI18n.vue b/tests/__tests__/components/VueI18n.vue
new file mode 100644
index 00000000..582ca482
--- /dev/null
+++ b/tests/__tests__/components/VueI18n.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2 data-testid="section-header">{{ $t('Hello') }}</h2>
+    <button data-testid="button-en" @click="switchLocale('en')">English</button>
+    <button data-testid="button-ja" @click="switchLocale('ja')">
+      Japanese
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VueI18n',
+
+  methods: {
+    switchLocale(locale) {
+      this.$i18n.locale = locale
+    }
+  }
+}
+</script>
diff --git a/tests/__tests__/vueI18n.js b/tests/__tests__/vueI18n.js
new file mode 100644
index 00000000..58c3de6e
--- /dev/null
+++ b/tests/__tests__/vueI18n.js
@@ -0,0 +1,29 @@
+import 'jest-dom/extend-expect'
+import { cleanup, render, fireEvent } from '@testing-library/vue'
+import Vuei18n from 'vue-i18n'
+import VueI18n from './components/VueI18n'
+
+afterEach(cleanup)
+
+const ja = {
+  Hello: 'こんにちは'
+}
+
+test('can render en and ja text in header', async () => {
+  const { queryByTestId, getByTestId } = render(VueI18n, {}, vue => {
+    vue.use(Vuei18n)
+    const i18n = new Vuei18n({
+      locale: 'en',
+      messages: {
+        ja
+      }
+    })
+    return { i18n }
+  })
+
+  expect(queryByTestId('section-header')).toHaveTextContent('Hello')
+
+  await fireEvent.click(getByTestId('button-ja'))
+
+  expect(queryByTestId('section-header')).toHaveTextContent('こんにちは')
+})

From 3489e0d202958eba2cd061dc4d4697e4183893ea Mon Sep 17 00:00:00 2001
From: daryl <darylcoleoffice@gmail.com>
Date: Wed, 17 Jul 2019 23:30:55 +0900
Subject: [PATCH 3/3] Add suggested fixes

---
 tests/__tests__/components/VueI18n.vue |  6 +++---
 tests/__tests__/vueI18n.js             | 25 ++++++++++++++++---------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/tests/__tests__/components/VueI18n.vue b/tests/__tests__/components/VueI18n.vue
index 582ca482..d23a693d 100644
--- a/tests/__tests__/components/VueI18n.vue
+++ b/tests/__tests__/components/VueI18n.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h2 data-testid="section-header">{{ $t('Hello') }}</h2>
-    <button data-testid="button-en" @click="switchLocale('en')">English</button>
-    <button data-testid="button-ja" @click="switchLocale('ja')">
+    <h2>{{ $t('Hello') }}</h2>
+    <button @click="switchLocale('en')">English</button>
+    <button @click="switchLocale('ja')">
       Japanese
     </button>
   </div>
diff --git a/tests/__tests__/vueI18n.js b/tests/__tests__/vueI18n.js
index 58c3de6e..e65649bd 100644
--- a/tests/__tests__/vueI18n.js
+++ b/tests/__tests__/vueI18n.js
@@ -5,25 +5,32 @@ import VueI18n from './components/VueI18n'
 
 afterEach(cleanup)
 
-const ja = {
-  Hello: 'こんにちは'
+const messages = {
+  en: {
+    Hello: 'Hello'
+  },
+  ja: {
+    Hello: 'こんにちは'
+  }
 }
 
 test('can render en and ja text in header', async () => {
-  const { queryByTestId, getByTestId } = render(VueI18n, {}, vue => {
+  const { queryByText, getByText } = render(VueI18n, {}, vue => {
     vue.use(Vuei18n)
     const i18n = new Vuei18n({
       locale: 'en',
-      messages: {
-        ja
-      }
+      fallbackLocale: 'en',
+      messages
     })
+    //return i18n object so that it will be available as an additional option on the created vue instance
     return { i18n }
   })
 
-  expect(queryByTestId('section-header')).toHaveTextContent('Hello')
+  expect(getByText('Hello')).toBeInTheDocument()
 
-  await fireEvent.click(getByTestId('button-ja'))
+  await fireEvent.click(getByText('Japanese'))
 
-  expect(queryByTestId('section-header')).toHaveTextContent('こんにちは')
+  expect(getByText('こんにちは')).toBeInTheDocument()
+
+  expect(queryByText('Hello')).toBeNull()
 })