Add initial set of tests and move linting to Grunt task

Fixes #1

Author: kborchers

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015"]
+}

.eslintrc

@@ -2,6 +2,7 @@
   "env": {
     "browser": true,
     "es6": true,
+    "mocha": true,
     "node": true
   },
   "extends": [
@@ -15,6 +16,7 @@
     "indent": 2,
     "no-console": 1,
     "no-trailing-spaces": 2,
+    "no-unused-vars": [0, {"ignore": ["React"]}],
     "quotes": [2, "double"],
     "semi": 1
   }

Gruntfile.js

@@ -1,5 +1,7 @@
 module.exports = function(grunt) {
     grunt.loadNpmTasks("grunt-esperanto");
+    grunt.loadNpmTasks("grunt-mocha-test");
+    grunt.loadNpmTasks("grunt-eslint");
 
     grunt.initConfig({
         esperanto: {
@@ -21,6 +23,18 @@ module.exports = function(grunt) {
                 src : ["**.js"],
                 dest: "dist/"
             }
+        },
+        mochaTest: {
+            test: {
+                options: {
+                    colors: true,
+                    require: ["babel-register", "./test/test_setup.js"]
+                },
+                src: ["test/**/*.js"]
+            }
+        },
+        eslint: {
+            target: ["Gruntfile.js", "test", "src"]
         }
     });
 
@@ -38,5 +52,7 @@ module.exports = function(grunt) {
     });
 
     grunt.registerTask("build", ["esperanto", "esperanto-cjs-cleanup"]);
+    grunt.registerTask("lint", ["eslint"]);
+    grunt.registerTask("test", ["lint", "build", "mochaTest"]);
     grunt.registerTask("default", ["build"]);
 };

package.json

@@ -10,9 +10,7 @@
     "README.md",
     "src/"
   ],
-  "scripts": {
-    "test": "eslint Gruntfile.js src"
-  },
+  "scripts": {},
   "keywords": [
     "react",
     "globalize",
@@ -36,12 +34,24 @@
   },
   "devDependencies": {
     "babel-eslint": "^4.1.6",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-register": "^6.7.2",
+    "chai": "^3.5.0",
     "cldr-data": ">=25",
     "cldrjs": "^0.4.3",
+    "enzyme": "^1.2.0",
     "eslint": "^1.10.3",
     "eslint-config-defaults": "^7.1.1",
     "eslint-plugin-react": "^3.11.2",
+    "globalize": "1.1.x",
     "grunt": "^0.4.5",
-    "grunt-esperanto": "^0.4.0"
+    "grunt-eslint": "^18.0.0",
+    "grunt-esperanto": "^0.4.0",
+    "grunt-mocha-test": "^0.12.7",
+    "mocha": "^2.4.5",
+    "react": ">= 0.13.0 < 1.0.0",
+    "react-addons-test-utils": "^0.14.7",
+    "react-dom": "^0.14.7"
   }
 }

test/formatCurrency.spec.js

@@ -0,0 +1,14 @@
+/*global expect React shallow Globalize*/
+import FormatCurrency from "../dist/currency";
+
+describe("formatCurrency Component", () => {
+    it("renders as a <span>", () => {
+        const wrapper = shallow(<FormatCurrency currency="USD">{150}</FormatCurrency>);
+        expect(wrapper.type()).to.equal("span");
+    });
+
+    it("formats 150 as $150.00", () => {
+        const wrapper = shallow(<FormatCurrency currency="USD">{150}</FormatCurrency>);
+        expect(wrapper.text()).to.equal("$150.00");
+    });
+});

test/formatDate.spec.js

@@ -0,0 +1,19 @@
+/*global expect React shallow Globalize*/
+import FormatDate from "../dist/date";
+
+describe("formatDate Component", () => {
+    it("renders as a <span>", () => {
+        const wrapper = shallow(<FormatDate options={{date: "medium"}}>{new Date()}</FormatDate>);
+        expect(wrapper.type()).to.equal("span");
+    });
+
+    it("formats date using default pattern as 1/1/2016", () => {
+        const wrapper = shallow(<FormatDate>{new Date("Jan 01 2016")}</FormatDate>);
+        expect(wrapper.text()).to.equal("1/1/2016");
+    });
+
+    it("formats date using options 'Jan 1, 2016'", () => {
+        const wrapper = shallow(<FormatDate options={{date: "medium"}}>{new Date(2016, 0, 1)}</FormatDate>);
+        expect(wrapper.text()).to.equal("Jan 1, 2016");
+    });
+});

test/formatMessage.spec.js

@@ -0,0 +1,59 @@
+/*global expect React shallow Globalize*/
+import FormatMessage from "../dist/message";
+
+Globalize.loadMessages({
+    en: {
+        salutations: {
+            hi: "Hi"
+        },
+        variables: {
+            hello: "Hello, {0} {1} {2}"
+        },
+        party: [
+            "{hostGender, select,",
+            "  female {{host} invites {guest} to her party}",
+            "    male {{host} invites {guest} to his party}",
+            "   other {{host} invites {guest} to their party}",
+            "}"
+        ],
+        task: [
+            "You have {count, plural,",
+            "     =0 {no tasks}",
+            "    one {one task}",
+            "  other {{formattedCount} tasks}",
+            "} remaining"
+        ]
+    }
+});
+
+describe("formatMessage Component", () => {
+    it("renders as a <span>", () => {
+        const wrapper = shallow(<FormatMessage path="salutations/hi" />);
+        expect(wrapper.type()).to.equal("span");
+    });
+
+    it("uses default message and prints 'Hi'", () => {
+        const wrapper = shallow(<FormatMessage>Hi</FormatMessage>);
+        expect(wrapper.text()).to.equal("Hi");
+    });
+
+    it("resolves path and prints 'Hi'", () => {
+        const wrapper = shallow(<FormatMessage path="salutations/hi" />);
+        expect(wrapper.text()).to.equal("Hi");
+    });
+
+    it("properly replaces variables", () => {
+        const wrapper = shallow(<FormatMessage path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />);
+        expect(wrapper.text()).to.equal("Hello, Wolfgang Amadeus Mozart");
+    });
+
+    it("uses proper gender inflection", () => {
+        const wrapper = shallow(<FormatMessage path="party" variables={{guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"other"}} />);
+        expect(wrapper.text()).to.equal("Beethoven invites Mozart to their party");
+    });
+
+    it("uses proper plural inflection", () => {
+        const wrapper = shallow(<FormatMessage path="task" variables={{count: 1}} />);
+        expect(wrapper.text()).to.equal("You have one task remaining");
+    });
+});

test/formatNumber.spec.js

@@ -0,0 +1,14 @@
+/*global expect React shallow Globalize*/
+import FormatNumber from "../dist/number";
+
+describe("formatNumber Component", () => {
+    it("renders as a <span>", () => {
+        const wrapper = shallow(<FormatNumber options={{ round: "floor" }}>{Math.PI}</FormatNumber>);
+        expect(wrapper.type()).to.equal("span");
+    });
+
+    it("formats pi as 3.141", () => {
+        const wrapper = shallow(<FormatNumber options={{ round: "floor" }}>{Math.PI}</FormatNumber>);
+        expect(wrapper.text()).to.equal("3.141");
+    });
+});

test/formatRelativeTime.spec.js

@@ -0,0 +1,14 @@
+/*global expect React shallow Globalize*/
+import FormatRelativeTime from "../dist/relative-time";
+
+describe("formatRelativeTime Component", () => {
+    it("renders as a <span>", () => {
+        const wrapper = shallow(<FormatRelativeTime unit="week">{1}</FormatRelativeTime>);
+        expect(wrapper.type()).to.equal("span");
+    });
+
+    it("formats value of 1 week from now as 'next week'", () => {
+        const wrapper = shallow(<FormatRelativeTime unit="week">{1}</FormatRelativeTime>);
+        expect(wrapper.text()).to.equal("next week");
+    });
+});

test/general.spec.js

@@ -0,0 +1,9 @@
+/*global expect React shallow Globalize*/
+import FormatCurrency from "../dist/currency";
+
+describe("General Functionality Tests", () => {
+    it("overrides default locale to format 150 as 150,00 €", () => {
+        const wrapper = shallow(<FormatCurrency locale="de" currency="EUR">{150}</FormatCurrency>);
+        expect(wrapper.text()).to.equal("150,00 €");
+    });
+});