Improve coverage of YearPicker & DatePicker. Fix some issues.

HybirdCorp · Feb 19, 2025 · 966be01 · 966be01
1 parent 04472ea
commit 966be01
Show file tree

Hide file tree

Showing 3 changed files with 211 additions and 4 deletions.
diff --git a/creme/creme_core/static/creme_core/js/tests/widgets/datetimepicker.js b/creme/creme_core/static/creme_core/js/tests/widgets/datetimepicker.js
@@ -33,6 +33,23 @@ QUnit.module("creme.widgets.datetime.js", new QUnitMixin(QUnitAjaxMixin,
             value: options.value || ''
         });
 
+        return html;
+    },
+
+    createDatePickerHtml: function(options) {
+        options = Object.assign({
+            format: 'dd-mm-yy'
+        }, options || {});
+
+        var html = (
+            '<input class="ui-creme-widget ui-creme-datepicker" widget="ui-creme-datepicker" type="text" format="${format}" value="${value}" ${readonly} ${disabled} />'
+        ).template({
+            readonly: options.readonly ? 'readonly' : '',
+            disabled: options.disabled ? 'disabled' : '',
+            format: options.format,
+            value: options.value ? String(options.value) : ''
+        });
+
         return html;
     }
 }));
@@ -143,4 +160,116 @@ QUnit.parametrize('creme.widget.DateTimePicker.val (from widget)', [
     equal(element.find('.minute input').val(), expected.minute);
 });
 
+QUnit.parameterize('creme.widget.DatePicker.create (initial)', [
+    [{format: 'dd-mm-yy', value: ''}, ''],
+    [{format: 'dd-mm-yy', value: '12-02-2025'}, '12-02-2025'],
+    [{format: 'dd/mm/yy', value: '12-02-2025'}, ''],
+    [{format: 'dd/mm/yy', value: '12/02/2025'}, '12/02/2025']
+], function(options, expected, assert) {
+    var element = $(this.createDatePickerHtml(options)).appendTo(this.qunitFixture());
+    var widget = creme.widget.create(element);
+
+    equal(element.hasClass('widget-active'), true);
+    equal(element.hasClass('widget-ready'), true);
+    equal(element.hasClass('hasDatepicker'), true);  // jquery datepicker is enabled
+
+    equal(element.is('[disabled]'), false);
+    equal(element.is('[readonly]'), false);
+
+    equal(expected, element.val());
+    equal(expected, widget.val());
+});
+
+QUnit.parameterize('creme.widget.DatePicker.create (disabled, readonly)', [
+    [{value: '12-02-2025', disabled: true, readonly: false}],
+    [{value: '12-02-2025', disabled: false, readonly: true}],
+    [{value: '12-02-2025', disabled: true, readonly: true}]
+], function(options, assert) {
+    var element = $(this.createDatePickerHtml(options)).appendTo(this.qunitFixture());
+    creme.widget.create(element);
+
+    equal(element.hasClass('widget-active'), true);
+    equal(element.hasClass('widget-ready'), true);
+    equal(element.hasClass('hasDatepicker'), true);  // jquery datepicker is enabled
+
+    equal(element.is('[disabled]'), options.disabled || options.readonly);
+    equal(element.is('[readonly]'), options.readonly);
+});
+
+QUnit.test('creme.widget.DatePicker.val (today)', function(assert) {
+    var element = $(this.createDatePickerHtml({
+        value: '12-02-2024'
+    })).appendTo(this.qunitFixture());
+    var widget = creme.widget.create(element);
+
+    equal(element.hasClass('widget-active'), true);
+    equal(element.hasClass('widget-ready'), true);
+
+    equal('12-02-2024', element.val());
+    equal('12-02-2024', widget.val());
+
+    widget.val('13-03-2023');
+
+    equal('13-03-2023', element.val());
+    equal('13-03-2023', widget.val());
+
+    equal(1, $('[name="today"]').length);
+
+    $('[name="today"]').trigger('click');
+
+    var today = moment().format('DD-MM-YYYY');
+
+    equal(today, element.val());
+    equal(today, widget.val());
+});
+
+QUnit.parameterize('creme.widget.YearPicker.create', [
+    [{value: '2025', disabled: false, readonly: false}],
+    [{value: '2025', disabled: true, readonly: false}],
+    [{value: '2025', disabled: false, readonly: true}],
+    [{value: '', disabled: false, readonly: false}]
+], function(options, assert) {
+    options = options || {};
+
+    var element = $((
+        '<input class="ui-creme-widget ui-creme-yearpicker" widget="ui-creme-yearpicker" type="text" value="${value}" ${readonly} ${disabled} />'
+    ).template({
+        readonly: options.readonly ? 'readonly' : '',
+        disabled: options.disabled ? 'disabled' : '',
+        value: options.value ? String(options.value) : ''
+    })).appendTo(this.qunitFixture());
+    var widget = creme.widget.create(element);
+
+    equal(element.hasClass('widget-active'), true);
+    equal(element.hasClass('widget-ready'), true);
+
+    equal(element.is('[disabled]'), options.disabled || false);
+    equal(element.is('[readonly]'), options.readonly || false);
+
+    equal(options.value, element.val());
+    equal(options.value, widget.val());
+});
+
+QUnit.test('creme.widget.YearPicker.val (current year)', function(assert) {
+    var element = $(
+        '<input class="ui-creme-widget ui-creme-yearpicker" widget="ui-creme-yearpicker" type="text" value="2025" />'
+    ).appendTo(this.qunitFixture());
+    var widget = creme.widget.create(element);
+
+    equal(element.hasClass('widget-active'), true);
+    equal(element.hasClass('widget-ready'), true);
+
+    widget.val('2024');
+
+    equal('2024', element.val());
+    equal('2024', widget.val());
+
+    equal(1, $('[name="current-year"]').length);
+
+    $('[name="current-year"]').trigger('click');
+
+    equal(String(new Date().getFullYear()), element.val());
+    equal(String(new Date().getFullYear()), widget.val());
+});
+
 }(jQuery));
diff --git a/creme/creme_core/static/creme_core/js/widgets/datetime.js b/creme/creme_core/static/creme_core/js/widgets/datetime.js
@@ -1,6 +1,6 @@
 /*******************************************************************************
     Creme is a free/open-source Customer Relationship Management software
-    Copyright (C) 2009-2024  Hybird
+    Copyright (C) 2009-2025  Hybird
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as published by
@@ -21,7 +21,6 @@
 "use strict";
 
 /* TODO: factorise? */
-/* TODO: unit test */
 creme.widget.YearPicker = creme.widget.declare('ui-creme-yearpicker', {
     options: {
         readonly: false,
@@ -74,7 +73,12 @@ creme.widget.YearPicker = creme.widget.declare('ui-creme-yearpicker', {
     },
 
     val: function(element, value) {
-        return element.val(value);
+        if (value === undefined) {
+            return element.val();
+        }
+
+        element.val(value);
+        return this;
     }
 });
 
@@ -148,7 +152,12 @@ creme.widget.DatePicker = creme.widget.declare('ui-creme-datepicker', {
     },
 
     val: function(element, value) {
-        return element.val(value);
+        if (value === undefined) {
+            return element.val();
+        }
+
+        element.val(value);
+        return this;
     }
 });
 
@@ -201,6 +210,7 @@ creme.widget.DateTimePicker = creme.widget.declare('ui-creme-datetimepicker', {
         }
 
         $('input[type="hidden"]', element).val(value).trigger('change');
+        return this;
     }
 });
 

diff --git a/creme/creme_core/templates/creme_core/tests/test_datefield.html b/creme/creme_core/templates/creme_core/tests/test_datefield.html
@@ -0,0 +1,68 @@
+{% extends "creme_core/tests/testbase.html" %}
+
+{% block test_title %}Date fields{% endblock %}
+
+{% block test_header %}
+<style type="text/css">
+    p, h4 {
+        margin-left: 2em;
+    }
+</style>
+{% endblock %}
+
+{% block test_content %}
+<h4>creme.widget.YearPicker</h4>
+<p>
+    <label>Year<input type="text" class="ui-creme-widget ui-creme-yearpicker widget-auto" widget="ui-creme-yearpicker" /></label>
+    <label>Year (readonly)<input type="text" class="ui-creme-widget ui-creme-yearpicker widget-auto" widget="ui-creme-yearpicker" readonly/></label>
+    <label>Year (disabled)<input type="text" class="ui-creme-widget ui-creme-yearpicker widget-auto" widget="ui-creme-yearpicker" disabled/></label>
+</p>
+
+<h4>creme.widget.DatePicker</h4>
+<p>
+    <label>Date (dd-mm-yy)<input type="text" class="ui-creme-widget ui-creme-datepicker widget-auto" widget="ui-creme-datepicker" value="15-10-2025"/></label>
+    <label>Date (dd/mm/yy)<input type="text" class="ui-creme-widget ui-creme-datepicker widget-auto" format="dd/mm/yy" widget="ui-creme-datepicker" value="15/10/2025"/></label>
+    <label>Date (readonly)<input type="text" class="ui-creme-widget ui-creme-datepicker widget-auto" widget="ui-creme-datepicker" readonly/></label>
+    <label>Date (disabled)<input type="text" class="ui-creme-widget ui-creme-datepicker widget-auto" widget="ui-creme-datepicker" disabled/></label>
+</p>
+
+<h4>creme.widget.DateTimePicker</h4>
+<p>
+    <label>Now (dd-mm-yy)</label>
+    <ul class="ui-creme-widget widget-auto ui-creme-datetimepicker ui-layout hbox" widget="ui-creme-datetimepicker">
+        <li class="date"><input type="text" maxlength="12" value="15-10-2025"/><input type="hidden" /></li>
+        <li class="hour"><input type="number"/></li>
+        <li>h</li>
+        <li class="minute"><input type="number"/></li>
+        <li class="clear"><button type="button">Clean</button></li>
+        <li class="now"><button type="button">Now</button></li>
+    </ul>
+    <label>Now (dd/mm/yy)</label>
+    <ul class="ui-creme-widget widget-auto ui-creme-datetimepicker ui-layout hbox" widget="ui-creme-datetimepicker" format="dd/mm/yy">
+        <li class="date"><input type="text" maxlength="12" value="15/10/2025"/><input type="hidden" /></li>
+        <li class="hour"><input type="number"/></li>
+        <li>h</li>
+        <li class="minute"><input type="number"/></li>
+        <li class="clear"><button type="button">Clean</button></li>
+        <li class="now"><button type="button">Now</button></li>
+    </ul>
+    <label>Now (readonly)</label>
+    <ul class="ui-creme-widget widget-auto ui-creme-datetimepicker ui-layout hbox" widget="ui-creme-datetimepicker" readonly>
+        <li class="date"><input type="text" maxlength="12"/><input type="hidden" /></li>
+        <li class="hour"><input type="number"/></li>
+        <li>h</li>
+        <li class="minute"><input type="number"/></li>
+        <li class="clear"><button type="button">Clean</button></li>
+        <li class="now"><button type="button">Now</button></li>
+    </ul>
+    <label>Now (disabled)</label>
+    <ul class="ui-creme-widget widget-auto ui-creme-datetimepicker ui-layout hbox" widget="ui-creme-datetimepicker" disabled>
+        <li class="date"><input type="text" maxlength="12"/><input type="hidden" /></li>
+        <li class="hour"><input type="number"/></li>
+        <li>h</li>
+        <li class="minute"><input type="number"/></li>
+        <li class="clear"><button type="button">Clean</button></li>
+        <li class="now"><button type="button">Now</button></li>
+    </ul>
+</p>
+{% endblock %}