Skip to content

Commit

Permalink
Fix tests after template breaking change
Browse files Browse the repository at this point in the history
  • Loading branch information
@indrimuska
indrimuska committed May 13, 2017
1 parent 3cfb8cb commit 5ff1c5d
Show file tree
Hide file tree
Showing 10 changed files with 53 additions and 68 deletions.
5 changes: 4 additions & 1 deletion src/directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,10 @@ export default class Directive implements ng.IDirective {
$scope.input.attr('tabindex', 0);
($scope.position || '').split(' ').forEach((className: string) => $scope.picker.addClass(className));
if (!$scope.inline) $scope.picker[0].parentNode.removeChild($scope.picker[0]);
else $scope.picker.addClass('inline');
else {
$element.after($scope.picker);
$scope.picker.addClass('inline');
}

// transclude scope to template additions
this.$timeout(() => {
Expand Down
3 changes: 2 additions & 1 deletion src/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
@selected-bg-image: linear-gradient(#45b1e8, #3097de);
@selected-border-color: #3ca0dd;

.moment-picker-reference { cursor: pointer; }
.moment-picker-reference,
.moment-picker-input { cursor: pointer; }
.moment-picker {
position: absolute;
z-index: 1000;
Expand Down
35 changes: 10 additions & 25 deletions tests/elementCreation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,29 @@ describe('Element creation', () => {
test.bootstrap();

// creating directive
it('should create a .moment-picker element that transclude content', () => {
it('should create a `.moment-picker-reference` element that transclude content', () => {
let $element = test.buildTemplate('div', { class: 'my-content' }),
$children = [],
content;

expect($element).toBeDefined();
expect($element.hasClass('moment-picker')).toBe(true);

// it should have 2 children
expect($element.children().length).toEqual(2);
angular.forEach($element.children(), (element: ng.IAugmentedJQuery) => $children.push(angular.element(element)));

// first child contains transcluded content
expect($children[0].hasClass('moment-picker-contents')).toBe(true);
content = $children[0].children();
expect(content.length).toEqual(1);
expect(angular.element(content[0]).hasClass('my-content')).toBe(true);

// second child contains picker container
expect($children[1].hasClass('moment-picker-container')).toBe(true);
expect($element.hasClass('moment-picker-reference')).toBe(true);
expect($element.hasClass('my-content')).toBe(true);
});

// check transcluded DIV content
it('should transclude DIV content', () => {
let $element = test.buildTemplate('div', { class: 'my-content' }, 'My content'),
$contents = $element.find('.moment-picker-contents').children();
let $element = test.buildTemplate('div', { class: 'my-content' }, 'My content');

expect($contents.length).toEqual(1);
expect(angular.element($contents[0]).hasClass('my-content')).toBe(true);
expect(angular.element($contents[0]).text()).toEqual('My content');
expect($element.length).toEqual(1);
expect(angular.element($element[0]).hasClass('my-content')).toBe(true);
expect(angular.element($element[0]).text()).toEqual('My content');
});

// check transcluded INPUT content
it('should transclude INPUT content', () => {
let $element = test.buildTemplate('input', { class: 'my-content' }),
$contents = $element.find('.moment-picker-contents').children();
let $element = test.buildTemplate('input', { class: 'my-content' });

expect($contents.length).toEqual(1);
expect(angular.element($contents[0]).hasClass('my-content')).toBe(true);
expect($element.length).toEqual(1);
expect(angular.element($element[0]).hasClass('my-content')).toBe(true);
});
});
32 changes: 14 additions & 18 deletions tests/openClosePicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import * as test from './utility';

describe('Open / close picker', () => {

let $inputPicker: ng.IAugmentedJQuery;
let $inputContent: ng.IAugmentedJQuery;
let $divPicker: ng.IAugmentedJQuery;
let $divContent: ng.IAugmentedJQuery;

// init test
Expand All @@ -14,52 +12,50 @@ describe('Open / close picker', () => {
// create two pickers for all tests
beforeEach(() => {
// tslint:disable-next-line:no-unused-expression
$inputPicker = test.buildTemplate('input', { class: 'input-picker' });
$inputContent = $inputPicker.find('.moment-picker-input');
$divPicker = test.buildTemplate('div', { class: 'div-picker' });
$divContent = $divPicker.find('.moment-picker-input');
$inputContent = test.buildTemplate('input', { class: 'input-picker' });
$divContent = test.buildTemplate('div', { class: 'div-picker' });
});

const isVisible = ($element: ng.IAugmentedJQuery) => !$element.find('.moment-picker-container').hasClass('ng-hide');
const isVisible = ($element: ng.IAugmentedJQuery) => test.getPicker($element).is(':visible');

// open picker on click
it('should open the picker on click', () => {
test.trigger($inputContent, 'click');
expect(isVisible($inputPicker)).toBe(true);
expect(isVisible($inputContent)).toBe(true);

test.trigger($divContent, 'click');
expect(isVisible($divPicker)).toBe(true);
expect(isVisible($divContent)).toBe(true);
});

// open picker on focus
// it('should open the picker on focus', () => {
// test.trigger($inputContent, 'focus');
// expect(isVisible($inputPicker)).toBe(true);
// expect(isVisible($inputContent)).toBe(true);

// test.trigger($divContent, 'focus');
// expect(isVisible($divPicker)).toBe(true);
// expect(isVisible($divContent)).toBe(true);
// });

// close picker on blur
it('should close the picker on blur', () => {
test.trigger($inputContent, 'click');
expect(isVisible($inputPicker)).toBe(true);
expect(isVisible($inputContent)).toBe(true);
test.trigger($inputContent, 'blur');
expect(isVisible($inputPicker)).toBe(false);
expect(isVisible($inputContent)).toBe(false);

test.trigger($divContent, 'click');
expect(isVisible($divPicker)).toBe(true);
expect(isVisible($divContent)).toBe(true);
test.trigger($divContent, 'blur');
expect(isVisible($divPicker)).toBe(false);
expect(isVisible($divContent)).toBe(false);
});

// close picker clicking on another one
it('should close a picker when clicking to another picker', () => {
test.trigger($inputContent, 'click');
expect(isVisible($inputPicker)).toBe(true);
expect(isVisible($inputContent)).toBe(true);

test.trigger($divContent, 'click');
expect(isVisible($divPicker)).toBe(true);
expect(isVisible($inputPicker)).toBe(false);
expect(isVisible($divContent)).toBe(true);
expect(isVisible($inputContent)).toBe(false);
});
});
2 changes: 1 addition & 1 deletion tests/properties/isOpen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('Property `isOpen`', () => {
$rootScope = _$rootScope_;
}));

const isVisible = ($element: ng.IAugmentedJQuery) => !$element.find('.moment-picker-container').hasClass('ng-hide');
const isVisible = ($element: ng.IAugmentedJQuery) => test.getPicker($element).is(':visible');

it('should open the picker when set to `true`', () => {
let $picker = test.buildTemplate('input', { isOpen: true });
Expand Down
19 changes: 8 additions & 11 deletions tests/properties/keyboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe('Keyboard', () => {
let $input: ng.IAugmentedJQuery;

beforeEach(() => {
$input = test.buildTemplate('input', { keyboard: 'true', class: 'input-picker' }).find('.input-picker');
$input = test.buildTemplate('input', { keyboard: 'true' });
});

// prevent default event
Expand All @@ -63,14 +63,12 @@ describe('Keyboard', () => {
});

describe('picker open/close', () => {
let $picker: ng.IAugmentedJQuery;
let $input: ng.IAugmentedJQuery;

const isOpen = () => !$picker.find('.moment-picker-container').hasClass('ng-hide');
const isOpen = () => test.getPicker($input).is(':visible');

beforeEach(inject(($rootScope) => {
$picker = test.buildTemplate('input', { keyboard: 'true', class: 'input-picker' });
$input = $picker.find('.input-picker');
$input = test.buildTemplate('input', { keyboard: 'true' });
}));

// close picker on pressing ESC
Expand Down Expand Up @@ -105,7 +103,7 @@ describe('Keyboard', () => {

const pickerViews = ['decade', 'year', 'month', 'day', 'hour', 'minute'];
const commonOpts = { keyboard: 'true', ngModel: 'date', format: 'YYYY-MM-DD HH:mm:ss', class: 'input-picker', locale: locale };
const getHighlightedText = ($element: ng.IAugmentedJQuery) => $element.find('.moment-picker-container td.highlighted').text();
const getHighlightedText = ($element: ng.IAugmentedJQuery) => test.getPicker($element).find('td.highlighted').text();

// get formats from momentPickerProvider
beforeEach(inject(($rootScope: ng.IRootScopeService, momentPicker: IProviderOptions) => { // tslint:disable-line:variable-name
Expand Down Expand Up @@ -138,9 +136,9 @@ describe('Keyboard', () => {
// highlight on open
it('should highlight the selected ' + view + ' on picker open', () => {
let options = angular.extend({ startView: view }, commonOpts),
$picker = test.buildTemplate('input', options, undefined, $scope);
$input = test.buildTemplate('input', options, undefined, $scope);

expect(getHighlightedText($picker)).toBe(date.format(formats[view]));
expect(getHighlightedText($input)).toBe(date.format(formats[view]));
});

// highlight on key press
Expand All @@ -151,12 +149,11 @@ describe('Keyboard', () => {

it(title, () => {
let options = angular.extend({ startView: view }, commonOpts),
$picker = test.buildTemplate('input', options, undefined, $scope),
$input = $picker.find('.input-picker'),
$input = test.buildTemplate('input', options, undefined, $scope),
finalDate = date.clone()[operation](datesToShift, viewPrecision);

sendKey($input, key);
expect(getHighlightedText($picker)).toBe(finalDate.format(formats[view]));
expect(getHighlightedText($input)).toBe(finalDate.format(formats[view]));
});
});
});
Expand Down
8 changes: 4 additions & 4 deletions tests/properties/locale.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,20 @@ describe('Property `locale`', () => {
expectedHeaders.hour [locale] = localeDate.startOf('hour').format('lll');
});

const getHeader = ($element: ng.IAugmentedJQuery) => Array.prototype.slice.call($element.find('.moment-picker-container th'), 0)
const getHeader = ($element: ng.IAugmentedJQuery) => Array.prototype.slice.call(test.getPicker($element).find('th'), 0)
.map((e: Node) => e.textContent)
.filter((s: string) => s != '←' && s != '→')
.join(stringDivider);

it('should change locale dinamically', () => {
angular.forEach(expectedHeaders, (header, view: string) => {
let $scope = $rootScope.$new(),
$picker = test.buildTemplate('input', { locale: '\{\{locale\}\}', format: format, startView: view, startDate: startDate }, undefined, $scope);
let $scope = $rootScope.$new(),
$input = test.buildTemplate('input', { locale: '\{\{locale\}\}', format: format, startView: view, startDate: startDate }, undefined, $scope);

angular.forEach(header, (expectedHeader: string, locale: string) => {
$scope['locale'] = locale;
$scope.$apply();
expect(getHeader($picker)).toBe(expectedHeader);
expect(getHeader($input)).toBe(expectedHeader);
});
});
});
Expand Down
6 changes: 3 additions & 3 deletions tests/properties/startDate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ describe('Property `startDate`', () => {
// init test
test.bootstrap();

const getHeaderText = ($element: ng.IAugmentedJQuery) => angular.element($element.find('.header-view th')[1]).text();
const getHeaderText = ($element: ng.IAugmentedJQuery) => angular.element(test.getPicker($element).find('.header-view th')[1]).text();

// test all views
angular.forEach(expectedHeaders, (expectedHeader, view) => {
let viewName = view[0].toUpperCase() + view.slice(1),
title = 'should open ' + viewName + ' View in ' + expectedHeader;

it(title, () => {
let $propAsMoment = test.buildTemplate('div', { locale: 'en', format: format, startView: view, startDate: startDate }),
$propAsString = test.buildTemplate('div', { locale: 'en', format: format, startView: view, startDate: startDateStr });
let $propAsMoment = test.buildTemplate('div', { locale: 'en', format: format, startView: view, startDate: startDate }),
$propAsString = test.buildTemplate('div', { locale: 'en', format: format, startView: view, startDate: startDateStr });

// Moment object input
expect(getHeaderText($propAsMoment)).toBe(expectedHeader);
Expand Down
3 changes: 3 additions & 0 deletions tests/utility.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as angular from 'angular';
import { IDirectiveScopeInternal } from '../src/definitions';

let $compile, $timeout, $rootScope;

Expand Down Expand Up @@ -56,6 +57,8 @@ export const buildTemplate = (tag: string, options?: any, content?: any, $scope?
return $element;
};

export const getPicker = (element: ng.IAugmentedJQuery) => (<IDirectiveScopeInternal>element.isolateScope()).picker;

// wrap jquery trigger fn: event trigger + digest stimulation
export const trigger = (element: ng.IAugmentedJQuery, event: string | JQueryEventObject) => {
// use jquey trigger method to propagate event to parent nodes
Expand Down
8 changes: 4 additions & 4 deletions tests/value.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('Value', () => {
// same picker settings for all tests in this suite
beforeEach(inject(($rootScope: ng.IRootScopeService) => {
$scope = $rootScope.$new();
$input = test.buildTemplate('input', { momentPicker: 'dateStr', ngModel: 'dateObj', format: format, class: 'input-picker' }, undefined, $scope).find('.input-picker');
$input = test.buildTemplate('input', { momentPicker: 'dateStr', ngModel: 'dateObj', format: format }, undefined, $scope);
}));

// set Model Value from View Value
Expand Down Expand Up @@ -77,7 +77,7 @@ describe('Value', () => {
let date = moment('2017-01-12', format);

$scope['date'] = date;
$input = test.buildTemplate('input', { momentPicker: 'date', ngModel: 'date', format: format, class: 'input-picker' }, undefined, $scope).find('.input-picker');
$input = test.buildTemplate('input', { momentPicker: 'date', ngModel: 'date', format: format }, undefined, $scope);
expect($scope['date'].isSame(date)).toBe(true);
expect($input.val()).toBe(date.format(format));
});
Expand All @@ -86,8 +86,8 @@ describe('Value', () => {
it('should sync model updates across pickers', () => {
let dateFormat = 'YYYY-MM-DD',
timeFormat = 'HH:mm',
$date = test.buildTemplate('input', { momentPicker: 'date', ngModel: 'datetime', format: dateFormat, class: 'date-picker' }, undefined, $scope).find('.date-picker'),
$time = test.buildTemplate('input', { momentPicker: 'time', ngModel: 'datetime', format: timeFormat, class: 'time-picker' }, undefined, $scope).find('.time-picker');
$date = test.buildTemplate('input', { momentPicker: 'date', ngModel: 'datetime', format: dateFormat }, undefined, $scope),
$time = test.buildTemplate('input', { momentPicker: 'time', ngModel: 'datetime', format: timeFormat }, undefined, $scope);

$scope['datetime'] = moment('2017-01-12 20:32', dateFormat + ' ' + timeFormat);
$scope.$digest();
Expand Down

0 comments on commit 5ff1c5d

Please sign in to comment.