Skip to content

Commit

Permalink
Add missing tests for a DateBox widget (#11733)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexander-kotov-dx
alexander-kotov-dx committed Jan 29, 2020
1 parent ca65f29 commit 86fc854
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 15 deletions.
1 change: 1 addition & 0 deletions js/ui/date_box/ui.date_box.base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -686,6 +686,7 @@ const DateBox = DropDownEditor.inherit({
break;
case 'showDropDownButton':
this._formatValidationIcon();
this.callBase.apply(this, arguments);
break;
case 'readOnly':
this.callBase.apply(this, arguments);
Expand Down
140 changes: 125 additions & 15 deletions testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const BUTTONS_CONTAINER_CLASS = 'dx-texteditor-buttons-container';
const TODAY_CELL_CLASS = 'dx-calendar-today';
const GESTURE_COVER_CLASS = 'dx-gesture-cover';
const DROP_DOWN_BUTTON_CLASS = 'dx-dropdowneditor-button';
const DROP_DOWN_BUTTON_VISIBLE_CLASS = 'dx-dropdowneditor-button-visible';

const CALENDAR_APPLY_BUTTON_SELECTOR = '.dx-popup-done.dx-button';

Expand Down Expand Up @@ -905,6 +906,24 @@ QUnit.module('options changed callbacks', moduleConfig, () => {
assert.deepEqual(secondValue, calendar.option('value'), 'value in calendar is changed');
});

QUnit.test('dxDateBox should hide or show its DDButton on showDropDownButton option change', function(assert) {
const $dateBox = $('#dateBox').dxDateBox({
showDropDownButton: true,
value: new Date(),
type: 'date',
pickerType: 'calendar'
});
const dateBox = $dateBox.dxDateBox('instance');

assert.ok($dateBox.hasClass(DROP_DOWN_BUTTON_VISIBLE_CLASS));

dateBox.option('showDropDownButton', false);
assert.notOk($dateBox.hasClass(DROP_DOWN_BUTTON_VISIBLE_CLASS));

dateBox.option('showDropDownButton', true);
assert.ok($dateBox.hasClass(DROP_DOWN_BUTTON_VISIBLE_CLASS));
});

QUnit.test('buttons are removed after applyValueMode option is changed', function(assert) {
const dateBox = $('#dateBox').dxDateBox({
type: 'date',
Expand Down Expand Up @@ -1480,7 +1499,7 @@ QUnit.module('widget sizing render', {}, () => {

QUnit.test('component width calculation should consider buttons containers element', function(assert) {
const $parent = $('#parent-div');
$parent.css('width', 200);
$parent.css('display', 'inline-block');

const $element = $('#dateBox').appendTo($parent);
const component = $('#dateBox').dxDateBox({
Expand Down Expand Up @@ -2775,25 +2794,80 @@ QUnit.module('datebox with time component', {
}
});

QUnit.test('date box should have compact view when showAnalogClock option is false', function(assert) {
const $element = $('#dateBox').dxDateBox({
type: 'datetime',
pickerType: 'calendar'
[true, false].forEach((adaptivityEnabledValue) => {
QUnit.test(`date box should change behavior if adaptivityEnabled option is changed to ${adaptivityEnabledValue} at runtime`, function(assert) {
const widthStub = sinon.stub(renderer.fn, 'width').returns(300);

try {
const $element = $('#dateBox').dxDateBox({
type: 'datetime',
pickerType: 'calendar',
adaptivityEnabled: !adaptivityEnabledValue,
opened: true
});
const instance = $element.dxDateBox('instance');

instance.option('adaptivityEnabled', adaptivityEnabledValue);
instance.close();
instance.open();

const $content = $(instance._popup.$content());
const box = Box.getInstance($content.find(`.${BOX_CLASS}`));
const $clock = $content.find(`.${TIMEVIEW_CLOCK_CLASS}`);
const timeViewExpectedMessage = `timeview is ${adaptivityEnabledValue ? '' : 'not'} rendered`;
const clockExpectedMessage = `clock is ${adaptivityEnabledValue ? 'not' : ''} rendered`;

assert.strictEqual(box.itemElements().eq(0).find(`.${TIMEVIEW_CLASS}`).length, (adaptivityEnabledValue ? 1 : 0), timeViewExpectedMessage);
assert.strictEqual($clock.length, (adaptivityEnabledValue ? 0 : 1), clockExpectedMessage);
} finally {
widthStub.restore();
}
});
});

const instance = $element.dxDateBox('instance');
[true, false].forEach((showAnalogClockValue) => {
const timeViewExpectedMessage = `timeview is ${showAnalogClockValue ? 'not' : ''} rendered`;
const clockExpectedMessage = `clock is ${showAnalogClockValue ? '' : 'not'} rendered`;

instance.option('showAnalogClock', false);
instance.open();
QUnit.test(`date box should ${showAnalogClockValue ? 'not' : ''} have compact view when showAnalogClock option is ${showAnalogClockValue}`, function(assert) {
const $element = $('#dateBox').dxDateBox({
type: 'datetime',
pickerType: 'calendar',
showAnalogClock: showAnalogClockValue
});

const $content = $(instance._popup.$content());
const box = Box.getInstance($content.find('.' + BOX_CLASS));
const $clock = $content.find('.dx-timeview-clock');
const instance = $element.dxDateBox('instance');
instance.open();

assert.equal(box.option('direction'), 'row', 'correct box direction specified');
assert.ok(box.itemElements().eq(0).find('.' + CALENDAR_CLASS).length, 'calendar rendered');
assert.ok(box.itemElements().eq(0).find('.' + TIMEVIEW_CLASS).length, 'timeview rendered');
assert.equal($clock.length, 0, 'clock was not rendered');
const $content = $(instance._popup.$content());
const box = Box.getInstance($content.find(`.${BOX_CLASS}`));
const $clock = $content.find('.dx-timeview-clock');

assert.strictEqual(box.option('direction'), 'row', 'correct box direction specified');
assert.strictEqual(box.itemElements().eq(0).find(`.${CALENDAR_CLASS}`).length, 1, 'calendar rendered');
assert.strictEqual(box.itemElements().eq(0).find(`.${TIMEVIEW_CLASS}`).length, (showAnalogClockValue ? 0 : 1), timeViewExpectedMessage);
assert.strictEqual($clock.length, (showAnalogClockValue ? 1 : 0), clockExpectedMessage);
});

QUnit.test(`date box should change behavior if showAnalogClock option is changed to ${showAnalogClockValue} at runtime`, function(assert) {
const $element = $('#dateBox').dxDateBox({
type: 'datetime',
pickerType: 'calendar',
showAnalogClock: !showAnalogClockValue,
opened: true
});
const instance = $element.dxDateBox('instance');

instance.option('showAnalogClock', showAnalogClockValue);
instance.close();
instance.open();

const $content = $(instance._popup.$content());
const box = Box.getInstance($content.find(`.${BOX_CLASS}`));
const $clock = $content.find(`.${TIMEVIEW_CLOCK_CLASS}`);
assert.strictEqual(box.itemElements().eq(0).find(`.${TIMEVIEW_CLASS}`).length, (showAnalogClockValue ? 0 : 1), timeViewExpectedMessage);
assert.strictEqual($clock.length, (showAnalogClockValue ? 1 : 0), clockExpectedMessage);
});
});

QUnit.test('date box wrapper adaptivity class depends on the screen size', function(assert) {
Expand Down Expand Up @@ -4167,6 +4241,24 @@ QUnit.module('datebox validation', {}, () => {
assert.equal(validationError, 'A lorem ipsum...', 'validation message is correct');
});

QUnit.test('change invalidDateMessage at runtime', function(assert) {
const $dateBox = $('#dateBox').dxDateBox({
pickerType: 'calendar',
invalidDateMessage: 'test message'
});
const dateBox = $dateBox.dxDateBox('instance');
const $input = $dateBox.find(`.${TEXTEDITOR_INPUT_CLASS}`);

$input.val('ips');
$($input).trigger('change');

dateBox.option('invalidDateMessage', 'another test message');
$($input).trigger('change');

const validationError = $dateBox.dxDateBox('instance').option('validationError').message;
assert.equal(validationError, 'another test message', 'validation message is correct');
});

QUnit.test('dateOutOfRangeMessage', function(assert) {
const $dateBox = $('#dateBox').dxDateBox({
dateOutOfRangeMessage: 'A lorem ipsum...',
Expand All @@ -4183,6 +4275,24 @@ QUnit.module('datebox validation', {}, () => {
assert.equal(validationError, 'A lorem ipsum...', 'validation message is correct');
});

QUnit.test('change dateOutOfRangeMessage at runtime', function(assert) {
const $dateBox = $('#dateBox').dxDateBox({
dateOutOfRangeMessage: 'test message',
min: new Date(2015, 5, 5),
max: new Date(2016, 5, 5),
value: new Date(2017, 5, 5)
});
const dateBox = $dateBox.dxDateBox('instance');
const $input = $dateBox.find(`.${TEXTEDITOR_INPUT_CLASS}`);

$($input).trigger('change');
dateBox.option('dateOutOfRangeMessage', 'another test message');
$($input).trigger('change');

const validationError = dateBox.option('validationError.message');
assert.equal(validationError, 'another test message', 'validation message is correct');
});

QUnit.test('year is too big', function(assert) {
const $dateBox = $('#dateBox').dxDateBox({
displayFormat: 'd/M/y',
Expand Down

0 comments on commit 86fc854

Please sign in to comment.