Setup jest + first test

Author: chollier

Diff for: jestEnvironment.js

@@ -0,0 +1,2 @@
+require.requireActual('babel/polyfill')
+

Diff for: package.json

@@ -13,8 +13,7 @@
     "build": "NODE_ENV=production webpack --output-file react-bootstrap-datetimepicker.js",
     "build-min": "NODE_ENV=production COMPRESS=1 webpack --output-file react-bootstrap-datetimepicker.min.js",
     "examples": "webpack-dev-server --config ./examples/webpack.config.js",
-    "test-watch": "./node_modules/.bin/grunt watch 2>&1 >/dev/null & karma start karma.dev.js",
-    "test": "./node_modules/.bin/grunt build && karma start karma.ci.js",
+    "test": "jest",
     "lint": "eslint ."
   },
   "keywords": [
@@ -29,14 +28,38 @@
   "peerDependencies": {
     "react": ">=0.12"
   },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "unmockedModulePathPatterns": [
+      "core-js/.*",
+      "<rootDir>/node_modules/react",
+      "babel",
+      "<rootDir>/node_modules/babel"
+    ],
+    "setupEnvScriptFile": "<rootDir>/jestEnvironment.js",
+    "testFileExtensions": [
+      "es6",
+      "js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "es6"
+    ],
+    "testPathDirs": [
+      "src/"
+    ]
+  },
   "devDependencies": {
     "babel": "^5.6.14",
     "babel-core": "^5.6.17",
     "babel-eslint": "^3.1.23",
+    "babel-jest": "^5.3.0",
     "babel-loader": "^5.3.1",
     "babel-runtime": "^5.6.18",
     "envify": "~3.2.0",
     "eslint": "^0.24.1",
+    "eslint-plugin-jasmine": "^1.1.0",
     "eslint-plugin-react": "^2.7.0",
     "grunt": "~0.4.2",
     "grunt-amd-wrap": "^1.0.1",
@@ -50,6 +73,7 @@
     "grunt-react": "~0.10.0",
     "grunt-shell": "~0.6.4",
     "html-webpack-plugin": "^1.1.0",
+    "jest-cli": "facebook/jest#0.5.x",
     "jsx-loader": "^0.12.2",
     "react": "^0.13.3",
     "requirejs": "~2.1.9",

Diff for: src/__tests__/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "jasmine": true
+  },
+  plugins: [
+    "jasmine"
+  ]
+}

Diff for: src/__tests__/DateTimePickerMonths-test.js

@@ -0,0 +1,86 @@
+jest.dontMock("moment");
+import React from "react/addons";
+jest.dontMock("../DateTimePickerMonths.js");
+const { TestUtils } = React.addons;
+
+describe("DateTimePickerMonths", function() {
+  const moment = require("moment");
+  const DateTimePickerMonths = require("../DateTimePickerMonths.js");
+  let subtractYearMock, addYearMock, setViewMonthMock, showYearsMock, months;
+
+  beforeEach(() => {
+    subtractYearMock = jest.genMockFunction();
+    addYearMock = jest.genMockFunction();
+    showYearsMock = jest.genMockFunction();
+    setViewMonthMock = jest.genMockFunction();
+    months = TestUtils.renderIntoDocument(
+      <DateTimePickerMonths
+        addYear={addYearMock}
+        selectedDate={moment()}
+        setViewMonth={setViewMonthMock}
+        showYears={showYearsMock}
+        subtractYear={subtractYearMock}
+        viewDate={moment()}
+       />
+    );
+  });
+
+  describe("Controls", function() {
+     it("calls subtractYear when clicking the prev arrow", function() {
+       const prevArrow = TestUtils.findRenderedDOMComponentWithClass(months, "prev");
+       TestUtils.Simulate.click(prevArrow);
+       expect(subtractYearMock.mock.calls.length).toBe(1);
+      });
+
+     it("calls addYear when clicking the next arrow", function() {
+       const nextArrow = TestUtils.findRenderedDOMComponentWithClass(months, "next");
+       TestUtils.Simulate.click(nextArrow);
+       expect(addYearMock.mock.calls.length).toBe(1);
+      });
+
+     it("calls showYears when clicking the year", function() {
+       const year = TestUtils.findRenderedDOMComponentWithClass(months, "switch");
+       TestUtils.Simulate.click(year);
+       expect(showYearsMock.mock.calls.length).toBe(1);
+      });
+
+     it("calls setViewMonth when clicking a month", function() {
+       const month = TestUtils.findRenderedDOMComponentWithClass(months, "active");
+       TestUtils.Simulate.click(month);
+       expect(setViewMonthMock.mock.calls.length).toBe(1);
+      });
+  });
+
+  describe('UI', function() {
+    it('renders 12 months', function() {
+      const monthList = TestUtils.scryRenderedDOMComponentsWithClass(months, "month");
+      expect(monthList.length).toBe(12);
+    });
+
+    it('rendersJanuary through December', function() {
+      const monthList = TestUtils.scryRenderedDOMComponentsWithClass(months, "month");
+      expect(monthList.map((x) => x.props.children)).toEqual(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]);
+    });
+
+    it("has an active month that is now's month", function() {
+      const active = TestUtils.findRenderedDOMComponentWithClass(months, "active");
+      expect(active.props.children).toBe(moment().format("MMM"));
+    });
+
+    it("has no active month that if viewDate is another year than selectedDate", function() {
+      months = TestUtils.renderIntoDocument(
+        <DateTimePickerMonths
+          addYear={addYearMock}
+          selectedDate={moment()}
+          setViewMonth={setViewMonthMock}
+          showYears={showYearsMock}
+          subtractYear={subtractYearMock}
+          viewDate={moment().add(2, 'year')}
+         />
+      );
+      const active = TestUtils.scryRenderedDOMComponentsWithClass(months, "active");
+      expect(active.length).toBe(0);
+    });
+  });
+
+});