Merge pull request quri#71 from quri/tests

Tests first pass

Author: chollier

jestEnvironment.js

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

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",

src/__tests__/.eslintrc

@@ -0,0 +1,11 @@
+{
+ "env": {
+ "jasmine": true
+ },
+ "globals": {
+ "jest": false
+ },
+ plugins: [
+ "jasmine"
+ ]
+}

src/__tests__/DateTimePickerHours-test.js

@@ -0,0 +1,94 @@
+import React from "react/addons";
+import Constants from "../Constants.js";
+jest.dontMock("../DateTimePickerHours.js");
+const { TestUtils } = React.addons;
+
+describe("DateTimePickerHours", function() {
+ const DateTimePickerHours = require("../DateTimePickerHours.js");
+ let hours, onSwitchMock, setSelectedHourMock;
+
+
+ describe("Controls", function() {
+
+ beforeEach(() => {
+ setSelectedHourMock = jest.genMockFunction();
+ onSwitchMock = jest.genMockFunction();
+ hours = TestUtils.renderIntoDocument(
+ <DateTimePickerHours
+ mode={Constants.MODE_TIME}
+ onSwitch={onSwitchMock}
+ setSelectedHour={setSelectedHourMock}
+ />
+ );
+ });
+
+ it("calls setSelectedHour when clicking a hour", function() {
+ const hour = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour")[0];
+ TestUtils.Simulate.click(hour);
+ expect(setSelectedHourMock.mock.calls.length).toBe(1);
+ });
+
+ it("calls onSwitch when clicking the switch", function() {
+ const switchIcon = TestUtils.findRenderedDOMComponentWithClass(hours, "picker-switch");
+ TestUtils.Simulate.click(switchIcon);
+ expect(onSwitchMock.mock.calls.length).toBe(1);
+ });
+ });
+
+ describe("UI", function() {
+ beforeEach(() => {
+ setSelectedHourMock = jest.genMockFunction();
+ onSwitchMock = jest.genMockFunction();
+ });
+
+ it("renders the switch if mode is time", function() {
+ hours = TestUtils.renderIntoDocument(
+ <DateTimePickerHours
+ mode={Constants.MODE_TIME}
+ onSwitch={onSwitchMock}
+ setSelectedHour={setSelectedHourMock}
+ />
+ );
+ const switchList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "list-unstyled");
+ expect(switchList.length).toBe(1);
+ });
+
+ it("does not render the switch if mode is date", function() {
+ hours = TestUtils.renderIntoDocument(
+ <DateTimePickerHours
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedHour={setSelectedHourMock}
+ />
+ );
+ const switchList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "list-unstyled");
+ expect(switchList.length).toBe(0);
+ });
+
+ it("renders 24 Hours", function() {
+ hours = TestUtils.renderIntoDocument(
+ <DateTimePickerHours
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedHour={setSelectedHourMock}
+ />
+ );
+ const hourList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour");
+ expect(hourList.length).toBe(24);
+ });
+
+ it("renders 01 to 24", function() {
+ hours = TestUtils.renderIntoDocument(
+ <DateTimePickerHours
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedHour={setSelectedHourMock}
+ />
+ );
+ const hourList = TestUtils.scryRenderedDOMComponentsWithClass(hours, "hour");
+ expect(hourList.map((x) => x.props.children)).toEqual(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"]);
+ });
+
+ });
+
+});

src/__tests__/DateTimePickerMinutes-test.js

@@ -0,0 +1,94 @@
+import React from "react/addons";
+import Constants from "../Constants.js";
+jest.dontMock("../DateTimePickerMinutes.js");
+const { TestUtils } = React.addons;
+
+describe("DateTimePickerMinutes", function() {
+ const DateTimePickerMinutes = require("../DateTimePickerMinutes.js");
+ let minutes, onSwitchMock, setSelectedMinuteMock;
+
+
+ describe("Controls", function() {
+
+ beforeEach(() => {
+ setSelectedMinuteMock = jest.genMockFunction();
+ onSwitchMock = jest.genMockFunction();
+ minutes = TestUtils.renderIntoDocument(
+ <DateTimePickerMinutes
+ mode={Constants.MODE_TIME}
+ onSwitch={onSwitchMock}
+ setSelectedMinute={setSelectedMinuteMock}
+ />
+ );
+ });
+
+ it("calls setSelectedMinute when clicking a minute", function() {
+ const minute = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute")[0];
+ TestUtils.Simulate.click(minute);
+ expect(setSelectedMinuteMock.mock.calls.length).toBe(1);
+ });
+
+ it("calls onSwitch when clicking the switch", function() {
+ const switchIcon = TestUtils.findRenderedDOMComponentWithClass(minutes, "picker-switch");
+ TestUtils.Simulate.click(switchIcon);
+ expect(onSwitchMock.mock.calls.length).toBe(1);
+ });
+ });
+
+ describe("UI", function() {
+ beforeEach(() => {
+ setSelectedMinuteMock = jest.genMockFunction();
+ onSwitchMock = jest.genMockFunction();
+ });
+
+ it("renders the switch if mode is time", function() {
+ minutes = TestUtils.renderIntoDocument(
+ <DateTimePickerMinutes
+ mode={Constants.MODE_TIME}
+ onSwitch={onSwitchMock}
+ setSelectedMinute={setSelectedMinuteMock}
+ />
+ );
+ const switchList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "list-unstyled");
+ expect(switchList.length).toBe(1);
+ });
+
+ it("does not render the switch if mode is date", function() {
+ minutes = TestUtils.renderIntoDocument(
+ <DateTimePickerMinutes
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedMinute={setSelectedMinuteMock}
+ />
+ );
+ const switchList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "list-unstyled");
+ expect(switchList.length).toBe(0);
+ });
+
+ it("renders 12 different Minutes", function() {
+ minutes = TestUtils.renderIntoDocument(
+ <DateTimePickerMinutes
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedMinute={setSelectedMinuteMock}
+ />
+ );
+ const minuteList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute");
+ expect(minuteList.length).toBe(12);
+ });
+
+ it("renders 01 to 24", function() {
+ minutes = TestUtils.renderIntoDocument(
+ <DateTimePickerMinutes
+ mode={Constants.MODE_DATE}
+ onSwitch={onSwitchMock}
+ setSelectedMinute={setSelectedMinuteMock}
+ />
+ );
+ const minuteList = TestUtils.scryRenderedDOMComponentsWithClass(minutes, "minute");
+ expect(minuteList.map((x) => x.props.children)).toEqual(["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]);
+ });
+
+ });
+
+});

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);
+ });
+ });
+
+});