From 2443e35c188d41d2e2eb65827c8d7213a2c8952b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Rizio?= <gaetan@rizio.fr>
Date: Fri, 27 May 2016 22:46:19 +0200
Subject: [PATCH] Updates to latest i18next version (^3.1.0) and adds unit
 test.

---
 bower.json                   |   9 +-
 gulpfile.js                  | 231 +++++++++++++++++++----------------
 package.json                 |   3 +-
 test/auto/base.html          | 123 +++++++++++++++++++
 test/auto/context.html       | 100 +++++++++++++++
 test/auto/interpolation.html |  81 ++++++++++++
 test/auto/nesting.html       |  68 +++++++++++
 test/auto/plural.html        | 108 ++++++++++++++++
 wct.conf.json                |   9 ++
 9 files changed, 626 insertions(+), 106 deletions(-)
 create mode 100644 test/auto/base.html
 create mode 100644 test/auto/context.html
 create mode 100644 test/auto/interpolation.html
 create mode 100644 test/auto/nesting.html
 create mode 100644 test/auto/plural.html
 create mode 100644 wct.conf.json

diff --git a/bower.json b/bower.json
index 310fb8e..a2c9119 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "kwc-i18next",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A web component used to manage internationalization – replaces kwc-i18n",
   "license": "MIT",
   "main": "kwc-i18next.html",
@@ -19,10 +19,13 @@
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.0.0",
-    "i18next": "^2.5.1"
+    "i18next": "^3.1.0"
   },
   "homepage": "https://github.com/successk/kwc-i18next",
   "authors": [
     "Gaëtan Rizio <gaetan@rizio.fr>"
-  ]
+  ],
+  "devDependencies": {
+    "i18next-xhr-backend": "^0.5.4"
+  }
 }
diff --git a/gulpfile.js b/gulpfile.js
index ee5f5dd..731cd98 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,53 +5,59 @@ const gutil = require("gulp-util");
 const watch = require("gulp-watch");
 const babel = require("gulp-babel");
 const webserver = require("gulp-webserver");
-var uglify = require("gulp-uglify");
-var minifyInline = require("gulp-minify-inline");
-var htmlmin = require("gulp-htmlmin");
-var inlinesource = require("gulp-inline-source");
+const uglify = require("gulp-uglify");
+const minifyInline = require("gulp-minify-inline");
+const htmlmin = require("gulp-htmlmin");
+const inlinesource = require("gulp-inline-source");
+const wct = require("web-component-tester");
 
 /// Constants
 const tasks = Object.freeze({
-  devHTML: "compileHTML",
-  devSrcHTML: "devSrcHTML",
-  devDemoHTML: "devDemoHTML",
-  devJS: "compileJS",
-  devSrcJS: "devSrcJS",
-  devDemoJS: "devDemoJS",
-  devDemoJSON: "devDemoJSON",
-  devDependencies: "devDependencies",
-  dev: "dev",
-
-  buildHTML: "buildHTML",
-  buildJS: "buildJS",
+  // Build
+  compileHtml: "compileHtml",
+  compileJs: "compileJs",
   inline: "inline",
+
+  // Minify
+  minify: "minify",
+  minifyInline: "minifyInline",
   build: "build",
 
-  // used to check validity of built version
-  verifyBuild: "verifyBuild",
-  verifyDependencies: "verifyDependencies",
-  verifyDemoHTML: "verifyDemoHTML",
-  verifyDemoJS: "verifyDemoJS",
-  verifyDemoJSON: "verifyDemoJSON",
-  verify: "verify"
+  // Manual test
+  copyTestToTest: "copyTestToTest",
+  copyDependenciesToTest: "copyDependenciesToTest",
+  copyToTest: "copyToTest",
+
+  // Demo
+  copyToDemo: "copyToDemo",
+  copyDependenciesToDemo: "copyDependenciesToDemo",
+  copyDemoToDemo: "copyDemoToDemo",
+  demo: "demo",
+
+  // Tests
+  manualTest: "manualTest"
 });
 
 const paths = Object.freeze({
+  src: "src/**",
   srcHTML: "src/*.html",
   srcJS: "src/*.js",
-  demoHTML: "demo/**/*.html",
-  demoJS: "demo/**/*.js",
-  demoJSON: "demo/**/*.json",
-
-  dev: "build/dev",
-  devComponent: "build/dev/" + bowerConfig.name,
-  devDemo: "build/dev/demo",
 
   build: "build/compile",
-  builtHTML: "build/compile/*.html",
-
-  verifyDemo: "build/verify/demo",
-  verify: "build/verify"
+  buildHTML: "build/compile/*.html",
+  buildFiles: "build/compile/**",
+
+  // Manual test files
+  testSrc: "test/**",
+  test: "build/test",
+  testComponent: "build/test/" + bowerConfig.name,
+  testTest: "build/test/test",
+
+  // Demo files
+  demoSrc: "demo/**",
+  demo: "build/demo",
+  demoComponent: "build/demo/" + bowerConfig.name,
+  demoDemo: "build/demo/demo"
 });
 
 /// Helpers
@@ -60,108 +66,129 @@ function handleError(e) {
   this.emit("end");
 }
 
-function compileJS(source, dest) {
-  "use strict";
-  return gulp.src(source)
+/// Demo tasks
+gulp.task(tasks.compileJs, () =>
+  gulp.src(paths.srcJS)
     .pipe(babel({
       presets: ["es2015"]
     }))
     .on("error", handleError)
-    .pipe(gulp.dest(dest));
-}
-
-function compileHTML(source, dest) {
-  "use strict";
-  return gulp.src(source)
-    .on("error", handleError)
-    .pipe(gulp.dest(dest));
-}
+    .pipe(gulp.dest(paths.build))
+);
 
-function dependencies(dest) {
-  "use strict";
-  return gulp.src("bower_components/**/*")
+gulp.task(tasks.compileHtml, () =>
+  gulp.src(paths.srcHTML)
     .on("error", handleError)
-    .pipe(gulp.dest(dest));
-}
-
-/// Dev tasks
-gulp.task(tasks.devSrcJS, () => compileJS(paths.srcJS, paths.devComponent));
+    .pipe(gulp.dest(paths.build))
+);
 
-gulp.task(tasks.devDemoJS, () => compileJS(paths.demoJS, paths.devDemo));
+gulp.task(tasks.inline, [tasks.compileHtml, tasks.compileJs], () =>
+  gulp.src(paths.buildHTML)
+    .pipe(inlinesource())
+    .pipe(gulp.dest(paths.build))
+);
 
-gulp.task(tasks.devDemoJSON, () => gulp.src(paths.demoJSON).pipe(gulp.dest(paths.devDemo)));
+gulp.task(tasks.minifyInline, [tasks.inline], () =>
+  gulp.src(paths.buildHTML)
+    .pipe(minifyInline())
+    .pipe(gulp.dest(paths.build))
+);
 
-gulp.task(tasks.devSrcHTML, () => compileHTML(paths.srcHTML, paths.devComponent));
+gulp.task(tasks.minify, [tasks.minifyInline], () =>
+  gulp.src(paths.buildHTML)
+    .pipe(htmlmin({collapseWhitespace: true}))
+    .pipe(gulp.dest(paths.build))
+);
 
-gulp.task(tasks.devDemoHTML, () => compileHTML(paths.demoHTML, paths.devDemo));
+gulp.task(tasks.build, [tasks.minify], () =>
+  gulp.src(paths.buildHTML)
+    .pipe(gulp.dest("."))
+);
 
-gulp.task(tasks.devDependencies, () => dependencies(paths.dev));
+// Automatic tests
+wct.gulp.init(gulp, [tasks.build]);
 
-gulp.task(tasks.dev, [tasks.devSrcJS, tasks.devDemoJS, tasks.devDemoJSON, tasks.devSrcHTML, tasks.devDemoHTML, tasks.devDependencies], function () {
-  gulp.watch(paths.demoJS, [tasks.devDemoJS]);
-  gulp.watch(paths.demoJSON, [tasks.devDemoJSON]);
-  gulp.watch(paths.srcJS, [tasks.devSrcJS]);
-  gulp.watch(paths.demoHTML, [tasks.devDemoHTML]);
-  gulp.watch(paths.srcHTML, [tasks.devSrcHTML]);
+// Manual tests
+gulp.task(tasks.manualTest, [tasks.build], () => {
+  gulp.watch(paths.demoJS, [tasks.build]);
+  gulp.watch(paths.srcJS, [tasks.build]);
+  gulp.watch(paths.demoHTML, [tasks.build]);
+  gulp.watch(paths.srcHTML, [tasks.build]);
 
-  gulp.src(paths.dev)
+  gulp.src(".")
     .pipe(webserver({
       host: "localhost",
       port: 8000,
       livereload: true,
       directoryListing: true,
-      open: "http://localhost:8000/demo"
+      open: "http://localhost:8000/test/manual"
     }));
 });
 
-/// Build tasks
-gulp.task(tasks.buildHTML, () =>
-  gulp.src(paths.srcHTML)
-    .pipe(minifyInline())
-    .pipe(htmlmin({collapseWhitespace: true}))
-    .pipe(gulp.dest(paths.build))
-);
+// Manual tests
+gulp.task(tasks.copyTestToTest, () => {
+  return gulp.src(paths.testSrc)
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.testTest));
+});
 
-gulp.task(tasks.buildJS, () =>
-  gulp.src(paths.srcJS)
-    .pipe(babel({
-      presets: ["es2015"]
-    }))
-    .pipe(uglify())
-    .pipe(gulp.dest(paths.build))
+gulp.task(tasks.copyDependenciesToTest, () =>
+  gulp.src("bower_components/**/*")
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.test))
 );
 
-gulp.task(tasks.inline, [tasks.buildHTML, tasks.buildJS], () =>
-  gulp.src(paths.builtHTML)
-    .pipe(inlinesource())
-    .pipe(gulp.dest(paths.build))
+gulp.task(tasks.copyToTest, [tasks.compileHtml, tasks.compileJs], () =>
+  gulp.src(paths.buildFiles)
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.testComponent))
 );
 
-gulp.task(tasks.build, [tasks.inline], () =>
-  gulp.src(paths.builtHTML)
-    .pipe(gulp.dest("."))
-);
+gulp.task(tasks.manualTest, [tasks.copyToTest, tasks.copyTestToTest, tasks.copyDependenciesToTest], () => {
+  const dep = [tasks.copyToTest, tasks.copyTestToTest, tasks.copyDependenciesToTest];
+  gulp.watch(paths.src, dep);
+  gulp.watch(paths.testSrc, dep);
 
-gulp.task(tasks.verifyBuild, [tasks.build], () =>
-  gulp.src("./*.html")
-    .pipe(gulp.dest("bower_components/" + bowerConfig.name))
-);
+  gulp.src(paths.test)
+    .pipe(webserver({
+      host: "localhost",
+      port: 8000,
+      livereload: true,
+      directoryListing: true,
+      open: "http://localhost:8000/test/manual"
+    }));
+});
 
-gulp.task(tasks.verifyDependencies, [tasks.verifyBuild], () => dependencies(paths.verify));
+// Demo
+gulp.task(tasks.copyDemoToDemo, () => {
+  return gulp.src(paths.demoSrc)
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.demoDemo));
+});
 
-gulp.task(tasks.verifyDemoJS, () => compileJS(paths.demoJS, paths.verifyDemo));
+gulp.task(tasks.copyDependenciesToDemo, () =>
+  gulp.src("bower_components/**/*")
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.demo))
+);
 
-gulp.task(tasks.verifyDemoJSON, () => gulp.src(paths.demoJSON).pipe(gulp.dest(paths.verifyDemo)));
+gulp.task(tasks.copyToDemo, [tasks.build], () =>
+  gulp.src(paths.buildHTML)
+    .on("error", handleError)
+    .pipe(gulp.dest(paths.demoComponent))
+);
 
-gulp.task(tasks.verifyDemoHTML, () => compileHTML(paths.demoHTML, paths.verifyDemo));
+gulp.task(tasks.demo, [tasks.copyToDemo, tasks.copyDemoToDemo, tasks.copyDependenciesToDemo], () => {
+  const dep = [tasks.copyToDemo, tasks.copyDemoToDemo, tasks.copyDependenciesToDemo]
+  gulp.watch(paths.src, dep);
+  gulp.watch(paths.demoSrc, dep);
 
-gulp.task(tasks.verify, [tasks.verifyDependencies, tasks.verifyDemoJS, tasks.verifyDemoJSON, tasks.verifyDemoHTML], () =>
-  gulp.src(paths.verify)
+  gulp.src(paths.demo)
     .pipe(webserver({
       host: "localhost",
       port: 8000,
-      livereload: false,
+      livereload: true,
       directoryListing: true,
       open: "http://localhost:8000/demo"
-    }))
-);
\ No newline at end of file
+    }));
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 21f0a1b..d4020bf 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.5",
-    "gulp-webserver": "^0.9.1"
+    "gulp-webserver": "^0.9.1",
+    "web-component-tester": "^4.2.2"
   }
 }
diff --git a/test/auto/base.html b/test/auto/base.html
new file mode 100644
index 0000000..cf88ad2
--- /dev/null
+++ b/test/auto/base.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <link rel="import" href="../../kwc-i18next.html">
+</head>
+<body>
+
+<kwc-i18next key="test:title" show id="show1"></kwc-i18next>
+<kwc-i18next key="test:body" show id="show2"></kwc-i18next>
+<kwc-i18next key="key" show id="show3"></kwc-i18next>
+<kwc-i18next key="undefined" show id="show4"></kwc-i18next>
+
+<kwc-i18next key="test:title" id="var1"></kwc-i18next>
+<kwc-i18next key="test:body" id="var2"></kwc-i18next>
+<kwc-i18next key="key" id="var3"></kwc-i18next>
+<kwc-i18next key="undefined" id="var4"></kwc-i18next>
+
+<script src="../../bower_components/i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .init({
+          lng: "en",
+          fallbackLng: "en",
+          resources: {
+            en: {
+              test: {
+                title: "My title",
+                body: "My body"
+              },
+              default: {
+                key: "A value"
+              },
+              global: {
+                undefined: "Please give a value"
+              }
+            }
+          },
+          defaultNS: "default",
+          fallbackNS: "global"
+        });
+  })()
+</script>
+<script>
+  suite("<kwc-i18next> base", function () {
+    test("test:title show", function (done) {
+      var show = document.querySelector("#show1");
+      flush(function () {
+        assert.equal(show.var, "My title");
+        assert.equal(show.textContent, "My title");
+        done();
+      });
+    });
+
+    test("test:body show", function (done) {
+      var show = document.querySelector("#show2");
+      flush(function () {
+        assert.equal(show.var, "My body");
+        assert.equal(show.textContent, "My body");
+        done();
+      });
+    });
+
+    test("key show", function (done) {
+      var show = document.querySelector("#show3");
+      flush(function () {
+        assert.equal(show.var, "A value");
+        assert.equal(show.textContent, "A value");
+        done();
+      });
+    });
+
+    test("undefined show", function (done) {
+      var show = document.querySelector("#show4");
+      flush(function () {
+        assert.equal(show.var, "Please give a value");
+        assert.equal(show.textContent, "Please give a value");
+        done();
+      });
+    });
+
+    test("test:title var", function (done) {
+      var nodeVar = document.querySelector("#var1");
+      flush(function () {
+        assert.equal(nodeVar.var, "My title");
+        assert.equal(nodeVar.textContent, "");
+        done();
+      });
+    });
+
+    test("test:body var", function (done) {
+      var nodeVar = document.querySelector("#var2");
+      flush(function () {
+        assert.equal(nodeVar.var, "My body");
+        assert.equal(nodeVar.textContent, "");
+        done();
+      });
+    });
+
+    test("key var", function (done) {
+      var nodeVar = document.querySelector("#var3");
+      flush(function () {
+        assert.equal(nodeVar.var, "A value");
+        assert.equal(nodeVar.textContent, "");
+        done();
+      });
+    });
+
+    test("undefined var", function (done) {
+      var nodeVar = document.querySelector("#var4");
+      flush(function () {
+        assert.equal(nodeVar.var, "Please give a value");
+        assert.equal(nodeVar.textContent, "");
+        done();
+      });
+    });
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/auto/context.html b/test/auto/context.html
new file mode 100644
index 0000000..110cd1a
--- /dev/null
+++ b/test/auto/context.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <link rel="import" href="../../kwc-i18next.html">
+</head>
+<body>
+
+<kwc-i18next key="context:friend" id="ctx1"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="male" id="ctx2"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="female" id="ctx3"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="male" p-count="1" id="ctx4"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="male" p-count="100" id="ctx5"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="female" p-count="1" id="ctx6"></kwc-i18next>
+<kwc-i18next key="context:friend" p-context="female" p-count="100" id="ctx7"></kwc-i18next>
+
+<script src="../../bower_components/i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .init({
+          lng: "en",
+          fallbackLng: "en",
+          resources: {
+            en: {
+              context: {
+                friend: "A friend",
+                friend_male: "A boyfriend",
+                friend_female: "A girlfriend",
+                friend_male_plural: "{{count}} boyfriends",
+                friend_female_plural: "{{count}} girlfriends"
+              }
+            }
+          }
+        });
+  })()
+</script>
+<script>
+  suite("<kwc-i18next> context", function () {
+    test("context:friend base", function (done) {
+      var ctx = document.querySelector("#ctx1");
+      flush(function () {
+        assert.equal(ctx.var, "A friend");
+        done();
+      });
+    });
+
+    test("context:friend male", function (done) {
+      var ctx = document.querySelector("#ctx2");
+      flush(function () {
+        assert.equal(ctx.var, "A boyfriend");
+        done();
+      });
+    });
+
+    test("context:friend female", function (done) {
+      var ctx = document.querySelector("#ctx3");
+      flush(function () {
+        assert.equal(ctx.var, "A girlfriend");
+        done();
+      });
+    });
+
+    test("context:friend male 1", function (done) {
+      var ctx = document.querySelector("#ctx4");
+      flush(function () {
+        assert.equal(ctx.var, "A boyfriend");
+        done();
+      });
+    });
+
+    test("context:friend male 100", function (done) {
+      var ctx = document.querySelector("#ctx5");
+      flush(function () {
+        assert.equal(ctx.var, "100 boyfriends");
+        done();
+      });
+    });
+
+    test("context:friend male 1", function (done) {
+      var ctx = document.querySelector("#ctx6");
+      flush(function () {
+        assert.equal(ctx.var, "A girlfriend");
+        done();
+      });
+    });
+
+    test("context:friend male 100", function (done) {
+      var ctx = document.querySelector("#ctx7");
+      flush(function () {
+        assert.equal(ctx.var, "100 girlfriends");
+        done();
+      });
+    });
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/auto/interpolation.html b/test/auto/interpolation.html
new file mode 100644
index 0000000..650ebbc
--- /dev/null
+++ b/test/auto/interpolation.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <link rel="import" href="../../kwc-i18next.html">
+</head>
+<body>
+
+<kwc-i18next key="interpolation:base" p-text="1" id="interpolation1"></kwc-i18next>
+<kwc-i18next key="interpolation:html" p-code="<u>underline</u>" id="interpolation2"></kwc-i18next>
+<kwc-i18next key="interpolation:dangerous" p-code="<span style='color:red'>BOOM!<span>" not-escape id="interpolation3"></kwc-i18next>
+<kwc-i18next key="interpolation:dangerous" p-code="<span style='color:red'>BOOM!<span>" id="interpolation4"></kwc-i18next>
+<kwc-i18next key="interpolation:deep" p-var='{"deep":{"deep":"Some var"}}' id="interpolation5"></kwc-i18next>
+
+<script src="../../bower_components/i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .init({
+          lng: "en",
+          fallbackLng: "en",
+          resources: {
+            en: {
+              interpolation: {
+                "base": "A random value: {{text}}",
+                "html": "A value in HTML: {{-code}}",
+                "dangerous": "Maybe this code is dangerous: {{code}}",
+                "deep": "A complex variable: {{var.deep.deep}}"
+              }
+            }
+          }
+        });
+  })()
+</script>
+<script>
+  suite("<kwc-i18next> interpolation", function () {
+    test("interpolation:base", function (done) {
+      var interpolation = document.querySelector("#interpolation1");
+      flush(function () {
+        assert.equal(interpolation.var, "A random value: 1");
+        done();
+      });
+    });
+
+    test("interpolation:html", function (done) {
+      var interpolation = document.querySelector("#interpolation2");
+      flush(function () {
+        assert.equal(interpolation.var, "A value in HTML: <u>underline</u>");
+        done();
+      });
+    });
+
+    test("interpolation:dangerous not-escape", function (done) {
+      var interpolation = document.querySelector("#interpolation3");
+      flush(function () {
+        assert.equal(interpolation.var, "Maybe this code is dangerous: <span style='color:red'>BOOM!<span>");
+        done();
+      });
+    });
+
+    test("interpolation:dangerous", function (done) {
+      var interpolation = document.querySelector("#interpolation4");
+      flush(function () {
+        assert.equal(interpolation.var, "Maybe this code is dangerous: &lt;span style=&#39;color:red&#39;&gt;BOOM!&lt;span&gt;");
+        done();
+      });
+    });
+
+    test("interpolation:deep", function (done) {
+      var interpolation = document.querySelector("#interpolation5");
+      flush(function () {
+        assert.equal(interpolation.var, "A complex variable: Some var");
+        done();
+      });
+    });
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/auto/nesting.html b/test/auto/nesting.html
new file mode 100644
index 0000000..cf68e0e
--- /dev/null
+++ b/test/auto/nesting.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <link rel="import" href="../../kwc-i18next.html">
+</head>
+<body>
+
+<kwc-i18next key="nesting:nesting1" show p-count="2" p-girls="3" id="nesting1"></kwc-i18next>
+<kwc-i18next key="nesting:girlsAndBoys" show p-count="2" p-girls="3" id="nesting2"></kwc-i18next>
+<kwc-i18next key="nesting:key2" show p-val="$t(nesting:key1)" id="nesting3"></kwc-i18next>
+
+<script src="../../bower_components/i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .init({
+          lng: "en",
+          fallbackLng: "en",
+          resources: {
+            en: {
+              nesting: {
+                "nesting1": "1 $t(nesting:nesting2)",
+                "nesting2": "2 $t(nesting:nesting3)",
+                "nesting3": "3",
+                "girlsAndBoys": "$t(nesting:girls, {\"count\": {{girls}} }) and {{count}} boy",
+                "girlsAndBoys_plural": "$t(nesting:girls, {\"count\": {{girls}} }) and {{count}} boys",
+                "girls": "{{count}} girl",
+                "girls_plural": "{{count}} girls",
+                "key1": "hello world",
+                "key2": "say: {{val}}"
+              }
+            }
+          }
+        });
+  })()
+</script>
+<script>
+  suite("<kwc-i18next> nesting", function () {
+    test("nesting:nesting1", function (done) {
+      var nesting = document.querySelector("#nesting1");
+      flush(function () {
+        assert.equal(nesting.var, "1 2 3");
+        done();
+      });
+    });
+
+    test("nesting:girlsAndBoys", function (done) {
+      var nesting = document.querySelector("#nesting2");
+      flush(function () {
+        assert.equal(nesting.var, "3 girls and 2 boys");
+        done();
+      });
+    });
+
+    test("nesting:key2", function (done) {
+      var nesting = document.querySelector("#nesting3");
+      flush(function () {
+        assert.equal(nesting.var, "say: hello world");
+        done();
+      });
+    });
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/auto/plural.html b/test/auto/plural.html
new file mode 100644
index 0000000..dce6e7d
--- /dev/null
+++ b/test/auto/plural.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <link rel="import" href="../../kwc-i18next.html">
+</head>
+<body>
+
+<kwc-i18next key="plural:key" p-count="0" id="plural0"></kwc-i18next>
+<kwc-i18next key="plural:key" p-count="1" id="plural1"></kwc-i18next>
+<kwc-i18next key="plural:key" p-count="5" id="plural5"></kwc-i18next>
+<kwc-i18next key="plural:key" p-count="100" id="plural100"></kwc-i18next>
+<kwc-i18next key="plural:keyWithCount" p-count="0" id="pluralCount0"></kwc-i18next>
+<kwc-i18next key="plural:keyWithCount" p-count="1" id="pluralCount1"></kwc-i18next>
+<kwc-i18next key="plural:keyWithCount" p-count="5" id="pluralCount5"></kwc-i18next>
+<kwc-i18next key="plural:keyWithCount" p-count="100" id="pluralCount100"></kwc-i18next>
+
+<script src="../../bower_components/i18next/i18next.min.js"></script>
+<script>
+  (function () {
+    i18next
+        .init({
+          lng: "en",
+          fallbackLng: "en",
+          resources: {
+            en: {
+              plural: {
+                "key": "item",
+                "key_plural": "items",
+                "keyWithCount": "{{count}} item",
+                "keyWithCount_plural": "{{count}} items"
+              }
+            }
+          }
+        });
+  })()
+</script>
+<script>
+  suite("<kwc-i18next> plural", function () {
+    test("plural:key 0", function (done) {
+      var plural = document.querySelector("#plural0");
+      flush(function () {
+        assert.equal(plural.var, "items");
+        done();
+      });
+    });
+
+    test("plural:key 1", function (done) {
+      var plural = document.querySelector("#plural1");
+      flush(function () {
+        assert.equal(plural.var, "item");
+        done();
+      });
+    });
+
+    test("plural:key 5", function (done) {
+      var plural = document.querySelector("#plural5");
+      flush(function () {
+        assert.equal(plural.var, "items");
+        done();
+      });
+    });
+
+    test("plural:key 100", function (done) {
+      var plural = document.querySelector("#plural100");
+      flush(function () {
+        assert.equal(plural.var, "items");
+        done();
+      });
+    });
+
+    test("plural:keyWithCount 0", function (done) {
+      var plural = document.querySelector("#pluralCount0");
+      flush(function () {
+        assert.equal(plural.var, "0 items");
+        done();
+      });
+    });
+
+    test("plural:keyWithCount 1", function (done) {
+      var plural = document.querySelector("#pluralCount1");
+      flush(function () {
+        assert.equal(plural.var, "1 item");
+        done();
+      });
+    });
+
+    test("plural:keyWithCount 5", function (done) {
+      var plural = document.querySelector("#pluralCount5");
+      flush(function () {
+        assert.equal(plural.var, "5 items");
+        done();
+      });
+    });
+
+    test("plural:keyWithCount 100", function (done) {
+      var plural = document.querySelector("#pluralCount100");
+      flush(function () {
+        assert.equal(plural.var, "100 items");
+        done();
+      });
+    });
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/wct.conf.json b/wct.conf.json
new file mode 100644
index 0000000..441844a
--- /dev/null
+++ b/wct.conf.json
@@ -0,0 +1,9 @@
+{
+  "verbose": false,
+  "suites": ["test/auto"],
+  "plugins": {
+    "local": {
+      "browsers": ["firefox", "chrome"]
+    }
+  }
+}
\ No newline at end of file