fix: update i18n plugin to work (#352)

Author: bahmutov

README.md

@@ -596,6 +596,7 @@ Spec | Description
 <!-- prettier-ignore-start -->
 Spec | Description
 --- | ---
+[i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
 [mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party module imports, like `axios` for fetching data
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests
 [mocking-imports](cypress/component/advanced/mocking-imports) | Stub ES6 imports from the tests

cypress/component/advanced/i18n/README.md

@@ -0,0 +1,9 @@
+# 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)
+
+![i18n test in action](./images/i18n.gif)
+
+**Note:** the `vue-i18n-loader` requires a webpack rule, see Webpack config in the root folder.

cypress/component/basic/TranslatedMessage.vue renamed to cypress/component/advanced/i18n/TranslatedMessage.vue

@@ -1,5 +1,5 @@
 <!-- uses special loader to load i18n blocks -->
-<!-- see http://kazupon.github.io/vue-i18n/en/sfc.html -->
+<!-- see https://github.com/intlify/vue-i18n-loader -->
 <i18n>
 {
   "en": {

cypress/component/advanced/i18n/images/i18n.gif

@@ -1,13 +1,10 @@
 /// <reference types="cypress" />
 
-// testing i18n component
-// http://kazupon.github.io/vue-i18n
 import TranslatedMessage from './TranslatedMessage.vue'
 import VueI18n from 'vue-i18n'
 import { mountCallback } from 'cypress-vue-unit-test'
 
-// https://github.com/bahmutov/cypress-vue-unit-test/issues/332
-describe.skip('VueI18n', () => {
+describe('VueI18n', () => {
   // need to use VueI18n as a plugin
   const extensions = {
     plugins: [VueI18n],
@@ -24,16 +21,17 @@ describe.skip('VueI18n', () => {
     cy.viewport(400, 200)
 
     cy.get('select').select('en').should('have.value', 'en')
-    cy.contains('message: hello')
+    // wait for good demo movie
+    cy.contains('message: hello').wait(1000)
 
     cy.get('select').select('fa').should('have.value', 'fa')
-    cy.contains('message: سلام دنیا')
+    cy.contains('message: سلام دنیا').wait(1000)
 
     cy.get('select').select('ja').should('have.value', 'ja')
-    cy.contains('message: こんにちは、世界')
+    cy.contains('message: こんにちは、世界').wait(1000)
 
     cy.get('select').select('ru').should('have.value', 'ru')
-    cy.contains('message: Привет мир')
+    cy.contains('message: Привет мир').wait(1000)
   })
 
   // TODO how to load messages not from i18n block but from external JSON file?

cypress/component/basic/translated-message-spec.js renamed to cypress/component/advanced/i18n/spec.js

@@ -88,7 +88,7 @@
     "@babel/plugin-transform-modules-commonjs": "7.10.4",
     "@cypress/code-coverage": "3.8.1",
     "@cypress/webpack-preprocessor": "5.4.1",
-    "@kazupon/vue-i18n-loader": "0.5.0",
+    "@intlify/vue-i18n-loader": "1.0.0",
     "babel-plugin-istanbul": "6.0.0",
     "common-tags": "1.8.0",
     "debug": "4.1.1",

package-lock.json

@@ -16,20 +16,19 @@ module.exports = {
       {
         test: /\.vue$/,
         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',
-          },
-        },
       },
       // this will apply to both plain `.css` files
       // AND `<style>` blocks in `.vue` files
       {
         test: /\.css$/,
         use: ['vue-style-loader', 'css-loader'],
       },
+      // https://github.com/intlify/vue-i18n-loader
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        loader: '@intlify/vue-i18n-loader',
+      },
     ],
   },
   plugins: [