Making i18n specs more maintainable. Covering additional use case. (#366)

* chore: refactor i18n to demonstrate i18n loader vs json-only loader. Generate tests and source

Author: JessicaSachs

cypress/component/advanced/i18n/README.md

@@ -1,8 +1,7 @@
 # i18n example
 
-Using [vue-i18n](https://kazupon.github.io/vue-i18n/) and [@intlify/vue-i18n-loader](https://github.com/intlify/vue-i18n-loader/tree/master) stable.
-
-See [TranslatedMessage.vue](TranslatedMessage.vue) and its test in [spec.js](spec.js)
+* For JSON-only, see [TranslatedJSONMessage.vue](TranslatedJSONMessage.vue) and its test in [spec.js](spec.js)
+* From i18n support loading, see [TranslatedI18nMessage.vue](TranslatedI18nMessage.vue) and its test in [spec.js](spec.js)
 
 ![i18n test in action](./images/i18n.gif)
 

cypress/component/advanced/i18n/TranslatedI18nMessage.vue

@@ -0,0 +1,16 @@
+<!-- uses special loader to load i18n blocks -->
+<!-- see https://github.com/intlify/vue-i18n-loader -->
+<!-- You can also inline the translations like <i18n>{...}</i18n> -->
+<i18n src="./translations.json"/>
+
+<template>
+  <div id="app">
+    <label for="locale">locale</label>
+    <select v-model="$i18n.locale" id="locale">
+      <option v-for="locale in $i18n.availableLocales" :key="locale">
+        {{ locale }}
+      </option>
+    </select>
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>

cypress/component/advanced/i18n/TranslatedJSONMessage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <label for="locale">locale</label>
+    <select v-model="$i18n.locale" id="locale">
+      <option v-for="locale in $i18n.availableLocales" :key="locale">
+        {{ locale }}
+      </option>
+    </select>
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>

cypress/component/advanced/i18n/spec.js

@@ -1,31 +1,43 @@
 /// <reference types="cypress" />
 import Vue from 'vue'
-import TranslatedMessage from './TranslatedMessage.vue'
+import TranslatedMessageWithJSON from './TranslatedJSONMessage.vue'
+import TranslatedMessageI18nBlock from './TranslatedI18nMessage.vue'
 import VueI18n from 'vue-i18n'
-import { mountCallback } from 'cypress-vue-unit-test'
+import { mount } from 'cypress-vue-unit-test'
+import messages from './translations.json'
 
-Vue.use(VueI18n)
-const i18n = new VueI18n({ locale: 'en' })
+function expectHelloWorldGreeting() {
+  cy.viewport(400, 200)
+  const allLocales = Cypress.vue.$i18n.availableLocales
 
-describe('VueI18n', () => {
-  beforeEach(mountCallback(TranslatedMessage, { i18n }))
-
-  it('shows English, Japanese and Russian greeting', () => {
-    cy.viewport(400, 200)
+  // ensure we don't strip locales
+  expect(Object.keys(messages)).to.have.members(allLocales)
 
-    cy.get('select').select('en').should('have.value', 'en')
-    cy.contains('message: hello')
+  allLocales.forEach((locale) => {
+    cy.get('select').select(locale).should('have.value', locale)
+    const hello = messages[locale].hello
+    cy.contains(hello)
+  })
+}
 
-    cy.get('select').select('fa').should('have.value', 'fa')
-    cy.contains('message: سلام دنیا')
+describe('VueI18n', () => {
+  Vue.use(VueI18n)
 
-    cy.get('select').select('ja').should('have.value', 'ja')
-    cy.contains('message: こんにちは、世界')
+  describe('with i18n block', () => {
+    beforeEach(() => {
+      const i18n = new VueI18n({ locale: 'en' })
+      mount(TranslatedMessageI18nBlock, { i18n })
+    })
 
-    cy.get('select').select('ru').should('have.value', 'ru')
-    cy.contains('message: Привет мир')
+    it('shows HelloWorld for all locales', expectHelloWorldGreeting)
   })
 
-  // TODO how to load messages not from i18n block but from external JSON file?
-  // then we could reuse the messages to check the contents
+  describe('with messages argument', () => {
+    beforeEach(() => {
+      const i18n = new VueI18n({ locale: 'en', messages })
+      mount(TranslatedMessageWithJSON, { i18n })
+    })
+
+    it('shows HelloWorld for all locales', expectHelloWorldGreeting)
+  })
 })

cypress/component/advanced/i18n/translations.json

@@ -0,0 +1,14 @@
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "fa": {
+    "hello": "سلام دنیا"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  },
+  "ru": {
+    "hello": "Привет мир"
+  }
+}

package-lock.json

@@ -71,7 +71,7 @@
     "tailwindcss": "1.1.4",
     "typescript": "3.9.6",
     "vue": "2.6.11",
-    "vue-i18n": "7.8.1",
+    "vue-i18n": "8.9.0",
     "vue-loader": "15.9.3",
     "vue-router": "3.0.5",
     "vue-style-loader": "4.1.2",