summaryrefslogtreecommitdiff
path: root/addons/web/static/tests/core/dom_tests.js
blob: c57ced52099ae334f2ac98b968bc97c82c0a2b63 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
odoo.define('web.dom_tests', function (require) {
"use strict";

var dom = require('web.dom');
var testUtils = require('web.test_utils');

/**
 * Create an autoresize text area with 'border-box' as box sizing rule.
 * The minimum height of this autoresize text are is 1px.
 *
 * @param {Object} [options={}]
 * @param {integer} [options.borderBottomWidth=0]
 * @param {integer} [options.borderTopWidth=0]
 * @param {integer} [options.padding=0]
 */
function prepareAutoresizeTextArea(options) {
    options = options || {};
    var $textarea = $('<textarea>');
    $textarea.css('box-sizing', 'border-box');
    $textarea.css({
        padding: options.padding || 0,
        borderTopWidth: options.borderTopWidth || 0,
        borderBottomWidth: options.borderBottomWidth || 0,
    });
    $textarea.appendTo($('#qunit-fixture'));
    dom.autoresize($textarea, { min_height: 1 });
    return $textarea;
}

QUnit.module('core', {}, function () {
QUnit.module('dom', {}, function () {

    QUnit.module('autoresize', {
        afterEach: function () {
            $('#qunit-fixture').find('textarea').remove();
        },
    });

    QUnit.test('autoresize (border-box): no padding + no border', function (assert) {
        assert.expect(3);
        var $textarea = prepareAutoresizeTextArea();
        assert.strictEqual($('textarea').length, 2,
            "there should be two textareas in the DOM");

        $textarea = $('textarea:eq(0)');
        var $fixedTextarea = $('textarea:eq(1)');
        assert.strictEqual($textarea.css('height'),
            $fixedTextarea[0].scrollHeight + 'px',
            "autoresized textarea should have height of fixed textarea + padding (0 line)");

        testUtils.fields.editInput($textarea, 'a\nb\nc\nd');
        assert.strictEqual($textarea.css('height'),
            $fixedTextarea[0].scrollHeight + 'px',
            "autoresized textarea should have height of fixed textarea + padding (4 lines)");
    });

    QUnit.test('autoresize (border-box): padding + no border', function (assert) {
        assert.expect(3);
        var $textarea = prepareAutoresizeTextArea({ padding: 10 });
        assert.strictEqual($('textarea').length, 2,
            "there should be two textareas in the DOM");

        $textarea = $('textarea:eq(0)');
        var $fixedTextarea = $('textarea:eq(1)');
        // twice the padding of 10px
        var expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + 2*10;
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + padding (0 line)");

        testUtils.fields.editInput($textarea, 'a\nb\nc\nd');
        // twice the padding of 10px
        expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + 2*10;
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + padding (4 lines)");
    });

    QUnit.test('autoresize (border-box): no padding + border', function (assert) {
        assert.expect(3);
        var $textarea = prepareAutoresizeTextArea({
            borderTopWidth: 2,
            borderBottomWidth: 3,
        });
        assert.strictEqual($('textarea').length, 2,
            "there should be two textareas in the DOM");

        $textarea = $('textarea:eq(0)');
        var $fixedTextarea = $('textarea:eq(1)');
        // top (2px) + bottom (3px) borders
        var expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + (2 + 3);
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + border (0 line)");

        testUtils.fields.editInput($textarea, 'a\nb\nc\nd');
        // top (2px) + bottom (3px) borders
        expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + (2 + 3);
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + border (4 lines)");
    });

    QUnit.test('autoresize (border-box): padding + border', function (assert) {
        assert.expect(3);
        var $textarea = prepareAutoresizeTextArea({
            padding: 10,
            borderTopWidth: 2,
            borderBottomWidth: 3,
        });
        assert.strictEqual($('textarea').length, 2,
            "there should be two textareas in the DOM");

        $textarea = $('textarea:eq(0)');
        var $fixedTextarea = $('textarea:eq(1)');
        // twice padding (10px) + top (2px) + bottom (3px) borders
        var expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + (2*10 + 2 + 3);
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + border (0 line)");

        testUtils.fields.editInput($textarea, 'a\nb\nc\nd');
        // twice padding (10px) + top (2px) + bottom (3px) borders
        expectedTextAreaHeight = $fixedTextarea[0].scrollHeight + (2*10 + 2 + 3);
        assert.strictEqual($textarea.css('height'),
            expectedTextAreaHeight + 'px',
            "autoresized textarea should have height of fixed textarea + border (4 lines)");
    });

});

});
});