Add test helper for date-picker

README.md

@@ -26,5 +26,15 @@ An Ember add-on which provides pure Ember-based date picker components.
 
 The date picker can also display custom options, e.g. 'Last 7 days'.
 
+It also provides test helpers to easily interact with the date picker in integration & acceptance tests:
+
+```js
+import interactWithDatePicker from 'ember-date-components/helpers/interactWithDatePicker';
+
+let datepicker = interactWithDatePicker(this.$('.datepicker'));
+datepicker.toggle();
+datepicker.select(moment());
+```
+
 For more detailed instructions and examples,
 please visit the [documentation](http://mydea.github.io/ember-date-components/).

addon/helpers/interact-with-date-picker.js

@@ -0,0 +1,33 @@
+import $ from 'jquery';
+
+export const interactWithDatePicker = function(element) {
+  let $el = $(element);
+  let $button = $el.find('[data-test="date-picker-toggle-button"]');
+
+  return {
+    buttonText() {
+      return $button.text().trim();
+    },
+
+    toggle() {
+      $button.click();
+    },
+
+    select(date) {
+      $el.find(`button[data-test="day-${date.month()}-${date.date()}"]`).click();
+    },
+
+    nextMonth() {
+      $el.find('.date-picker__header__button--next').click();
+    },
+
+    previousMonth() {
+      $el.find('.date-picker__header__button--previous').click();
+    },
+
+    element: $el,
+    buttonElement: $button
+  };
+};
+
+export default interactWithDatePicker;

tests/dummy/app/application/template.hbs

@@ -39,6 +39,11 @@
             Custom Options
           {{/link-to}}
         </li>
+        <li>
+          {{#link-to 'usage.testing'}}
+            Testing
+          {{/link-to}}
+        </li>
       </ul>
       <ul class="navbar-nav nav navbar-right">
         <li>

tests/dummy/app/router.js

@@ -16,6 +16,7 @@ Router.map(function() {
     this.route('date-range-picker');
     this.route('time-picker');
     this.route('custom-options');
+    this.route('testing');
   });
   this.route('examples', function() {
     this.route('date-picker');

tests/dummy/app/usage/testing/controller.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import moment from 'moment';
+
+const {
+  Controller
+} = Ember;
+
+export default Controller.extend({
+
+  myOptions: ['clear',
+    'today',
+    'thisWeek',
+    {
+      action: 'selectDateRange',
+      label: 'Last 3 days',
+      actionValue: [moment().startOf('day').subtract(3, 'days'), moment().startOf('day')]
+    }
+  ],
+
+  actions: {
+    updateDateRange(vals) {
+      console.log(vals);
+    },
+    updateDate(val) {
+      console.log(val);
+    }
+  }
+});

tests/dummy/app/usage/testing/route.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const {
+  Route
+} = Ember;
+
+export default Route.extend({});

tests/dummy/app/usage/testing/template.hbs

@@ -0,0 +1,26 @@
+{{title 'Testing'}}
+
+<h1>Testing</h1>
+
+<p>
+  In integration & acceptance tests, a helper is provided to make working with the date picker easier.
+</p>
+
+{{#code-block
+  language='javascript'}}import interactWithDatePicker from 'ember-date-components/helpers/interact-with-date-picker';
+
+// Give the containing DOM element of the date picker as argument
+let datepicker = interactWithDatePicker(this.$('.date-picker__wrapper'));
+
+// Open/close the date picker
+datepicker.toggle();
+
+// Try to select the provided date. If the date is not on the current page, this will do nothing
+datepicker.select(moment());
+
+// Go to the next/previous month
+datepicker.nextMonth();
+datepicker.previousMonth();
+
+// The current text displayed on the date picker
+datepicker.buttonText();{{/code-block}}