~jtv/lazr-js/bug-427263

« back to all changes in this revision

Viewing changes to src-js/lazrjs/anim/tests/anim.js

  • Committer: Launchpad Patch Queue Manager
  • Date: 2009-11-13 16:42:19 UTC
  • mfrom: (124.4.9 anim-multi-node)
  • Revision ID: launchpad@pqm.canonical.com-20091113164219-j2w7v1rioslswbo1
[r=rockstar] Make it possible to pass a nodelist, node or a css
        selector (resolving to either a node or a nodelist) to
        anim.*_flash ; also add tests and examples for the anim module.

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
/* Copyright (c) 2009, Canonical Ltd. All rights reserved. */
 
2
 
 
3
YUI({
 
4
    base: '../../yui/current/build/',
 
5
    filter: 'raw',
 
6
    combine: false
 
7
    }).use('lazr.anim', 'lazr.testing.runner', 'node',
 
8
           'event', 'event-simulate', 'console', function(Y) {
 
9
 
 
10
var Assert = Y.Assert;  // For easy access to isTrue(), etc.
 
11
 
 
12
var suite = new Y.Test.Suite("Anim Tests");
 
13
 
 
14
suite.add(new Y.Test.Case({
 
15
 
 
16
    name: 'anim_basics',
 
17
 
 
18
    setUp: function() {
 
19
        this.workspace = Y.one('#workspace');
 
20
        if (!this.workspace){
 
21
            Y.one(document.body).appendChild(Y.Node.create(
 
22
                '<div id="workspace">'
 
23
                + '<table id="anim-table">'
 
24
                + '<tr id="anim-table-tr">'
 
25
                + '<td id="anim-table-td1" style="background: #eeeeee">foo</td>'
 
26
                + '<td id="anim-table-td2" style="background: #eeeeee">bar</td>'
 
27
                + '</tr></table></div>'));
 
28
            this.workspace = Y.one('#workspace');
 
29
        }
 
30
    },
 
31
 
 
32
    tearDown: function() {
 
33
        this.workspace.get('parentNode').removeChild(this.workspace);
 
34
    },
 
35
 
 
36
    test_resolveNodeListFrom_selector: function() {
 
37
        var nodelist = Y.lazr.anim.resolveNodeListFrom('#anim-table-td1');
 
38
        var nodelist_nodes = (nodelist._nodes !== undefined);
 
39
        Assert.isTrue(nodelist_nodes, 'Not a nodelist from a selector');
 
40
    },
 
41
 
 
42
    test_resolveNodeListFrom_node: function() {
 
43
        var node = Y.one('#anim-table-td1');
 
44
        var nodelist = Y.lazr.anim.resolveNodeListFrom(node);
 
45
        var nodelist_nodes = (nodelist._nodes !== undefined);
 
46
        Assert.isTrue(nodelist_nodes, 'Not a nodelist from a Node');
 
47
    },
 
48
 
 
49
    test_resolveNodeListFrom_node_list: function() {
 
50
        var nodelist = Y.all('#anim-table td');
 
51
        var nodelist = Y.lazr.anim.resolveNodeListFrom(nodelist);
 
52
        var nodelist_nodes = (nodelist._nodes !== undefined);
 
53
        Assert.isTrue(nodelist_nodes, 'Not a nodelist from a NodeList');
 
54
    },
 
55
 
 
56
    test_resolveNodeListFrom_anythine_else: function() {
 
57
        var succeed = true;
 
58
        try {
 
59
            var nodelist = Y.lazr.anim.resolveNodeListFrom(
 
60
                {crazy: true, broken: 'definitely'});
 
61
        } catch(e) {
 
62
            succeed = false;
 
63
        }
 
64
        Assert.isFalse(succeed, "Somehow, we're cleverer than we thought.");
 
65
    },
 
66
 
 
67
    test_green_flash_td1: function() {
 
68
        // works as expected on a single node,
 
69
        // without coercion into a NodeList here
 
70
        var node = Y.one('#anim-table-td1');
 
71
        var bgcolor = node.getStyle('backgroundColor');
 
72
        var anim = Y.lazr.anim.green_flash(
 
73
            {node: node,
 
74
             to: {backgroundColor: bgcolor},
 
75
             duration: 0.2}
 
76
        );
 
77
        anim.run();
 
78
        this.wait(function() {
 
79
            Assert.areEqual(
 
80
                bgcolor,
 
81
                node.getStyle('backgroundColor'),
 
82
                'background colors do not match'
 
83
                );
 
84
            }, 500
 
85
        );
 
86
    },
 
87
 
 
88
    test_green_flash_td1_by_selector: function() {
 
89
        // works as expected on a single node selector,
 
90
        // without coercion into a NodeList here
 
91
        var node = Y.one('#anim-table-td1');
 
92
        var bgcolor = node.getStyle('backgroundColor');
 
93
        var anim = Y.lazr.anim.green_flash(
 
94
            {node: '#anim-table-td1',
 
95
             to: {backgroundColor: bgcolor},
 
96
             duration: 0.2}
 
97
        );
 
98
        anim.run();
 
99
        this.wait(function() {
 
100
            Assert.areEqual(
 
101
                bgcolor,
 
102
                node.getStyle('backgroundColor'),
 
103
                'background colors do not match'
 
104
                );
 
105
            }, 500
 
106
        );
 
107
    },
 
108
 
 
109
    test_green_flash_multi: function() {
 
110
        // works with a native NodeList as well
 
111
        var nodelist = Y.all('#anim-table td');
 
112
        var red = '#ff0000';
 
113
        var backgrounds = [];
 
114
        Y.each(nodelist, function(n) {
 
115
                   backgrounds.push({bg: n.getStyle('backgroundColor'), node: n});
 
116
               });
 
117
        var anim = Y.lazr.anim.green_flash(
 
118
            {node: nodelist,
 
119
             to: {backgroundColor: red},
 
120
             duration: 5}
 
121
        );
 
122
        anim.run();
 
123
        this.wait(function() {
 
124
                Assert.areNotEqual(
 
125
                    backgrounds[0].node.getStyle('backgroundColor'),
 
126
                    red,
 
127
                    'background of 0 has mysteriously jumped to the end color.'
 
128
                );
 
129
                Assert.areNotEqual(
 
130
                    backgrounds[1].node.getStyle('backgroundColor'),
 
131
                    red,
 
132
                    'background of 1 has mysteriously jumped to the end color.'
 
133
                );
 
134
                Assert.areNotEqual(
 
135
                    backgrounds[0].node.getStyle('backgroundColor'),
 
136
                    backgrounds[0].bg,
 
137
                    'background of 0 has not changed at all.'
 
138
                );
 
139
                Assert.areNotEqual(
 
140
                    backgrounds[1].node.getStyle('backgroundColor'),
 
141
                    backgrounds[1].bg,
 
142
                    'background of 1 has not changed at all.'
 
143
                );
 
144
            }, 1500
 
145
        );
 
146
    },
 
147
 
 
148
    test_green_flash_multi_by_selector: function() {
 
149
        // works with a native NodeList as well
 
150
        var nodelist = Y.all('#anim-table td');
 
151
        var red = '#ff0000';
 
152
        var backgrounds = [];
 
153
        Y.each(nodelist, function(n) {
 
154
                   backgrounds.push({bg: n.getStyle('backgroundColor'), node: n});
 
155
               });
 
156
        var anim = Y.lazr.anim.green_flash(
 
157
            {node: '#anim-table td',
 
158
             to: {backgroundColor: red},
 
159
             duration: 2}
 
160
        );
 
161
        anim.run();
 
162
        this.wait(function() {
 
163
                Assert.areNotEqual(
 
164
                    backgrounds[0].node.getStyle('backgroundColor'),
 
165
                    red,
 
166
                    'background of 0 has mysteriously jumped to the end color.'
 
167
                );
 
168
                Assert.areNotEqual(
 
169
                    backgrounds[1].node.getStyle('backgroundColor'),
 
170
                    red,
 
171
                    'background of 1 has mysteriously jumped to the end color.'
 
172
                );
 
173
                Assert.areNotEqual(
 
174
                    backgrounds[0].node.getStyle('backgroundColor'),
 
175
                    backgrounds[0].bg,
 
176
                    'background of 0 has not changed at all.'
 
177
                );
 
178
                Assert.areNotEqual(
 
179
                    backgrounds[1].node.getStyle('backgroundColor'),
 
180
                    backgrounds[1].bg,
 
181
                    'background of 1 has not changed at all.'
 
182
                );
 
183
            }, 500
 
184
        );
 
185
    }
 
186
    }));
 
187
 
 
188
Y.lazr.testing.Runner.add(suite);
 
189
Y.lazr.testing.Runner.run();
 
190
 
 
191
});