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
|
/* bender-tags: editor */
/* bender-ckeditor-plugins: button,toolbar */
bender.editor = {
config: {
toolbar: [ [ 'custom_btn', 'disabled_btn', 'haspopup_btn', 'arrow_btn' ] ],
on: {
'pluginsLoaded': function( evt ) {
var editor = evt.editor;
editor.ui.addButton( 'custom_btn', {
label: 'aria label'
} );
editor.ui.addButton( 'disabled_btn', {
label: 'disabled button',
modes: {} // This button should be disabled because it does not work in any of modes.
} );
editor.ui.addButton( 'haspopup_btn', {
hasArrow: 'menu'
} );
editor.ui.addButton( 'arrow_btn', {
label: 'arrow button'
} );
}
}
}
};
bender.test( {
setUp: function() {
// Standard aria attributes for button element.
this.typicalButtonAttributes = {
'aria-disabled': 'false',
'role': 'button',
'aria-haspopup': 'false',
'aria-labelledby': /^cke_\d+_label$/
};
},
'test default button attributes': function() {
var btn = this.getUiItem( 'custom_btn' ),
expectedAttributes = this.typicalButtonAttributes;
this.assertAttribtues( expectedAttributes, btn );
},
'test disabled button': function() {
var btn = this.getUiItem( 'disabled_btn' ),
expectedAttributes = this.typicalButtonAttributes;
expectedAttributes[ 'aria-disabled' ] = 'true';
this.assertAttribtues( expectedAttributes, btn );
},
'test button label': function() {
var btn = this.getButtonDomElement( this.getUiItem( 'custom_btn' ) ),
label = CKEDITOR.document.getById( btn.getAttribute( 'aria-labelledby' ) );
assert.isTrue( !!label, 'Label element not found' );
assert.areEqual( 'aria label', label.getText(), 'innerText of label doesn\'t match' );
},
// WAI-ARIA 1.1 has added new values for aria-haspopup property (#2072).
'test aria-haspopup': function() {
var btn = this.getUiItem( 'haspopup_btn' ),
btnEl = CKEDITOR.document.getById( btn._.id );
assert.areEqual( btnEl.getAttribute( 'aria-haspopup' ), 'menu' );
},
// (#421)
'test button label with arrow': function() {
var button = this.getUiItem( 'arrow_btn' ),
expectedAttributes = {
'aria-expanded': 'true'
};
button.hasArrow = true;
button.setState( CKEDITOR.TRISTATE_ON );
var buttonEl = this.getButtonDomElement( button ),
label = CKEDITOR.document.getById( buttonEl.getAttribute( 'aria-labelledby' ) );
this.assertAttribtues( expectedAttributes, button );
assert.areEqual( 'arrow button', label.getText(), 'innerText of label doesn\'t match' );
},
// Asserts that button has given attributes, with given values.
// Expected attribute value may be a regexp.
// @param {Object} expectedAttributes
// @param {CKEDITOR.ui.button} button UI button to be tested.
assertAttribtues: function( expectedAttributes, button ) {
var buttonElement = this.getButtonDomElement( button ),
expectedValue,
attributeValue;
for ( var attrName in expectedAttributes ) {
assert.isTrue( buttonElement.hasAttribute( attrName ), 'Button HTML element does not contain ' + attrName + ' attribute.' );
expectedValue = expectedAttributes[ attrName ];
attributeValue = buttonElement.getAttribute( attrName );
if ( expectedValue instanceof RegExp )
assert.isTrue( expectedValue.test( attributeValue ), 'Attribute ' + attrName + ' did not matched expected ' + expectedValue + ' regex' );
else
assert.areSame( expectedValue, attributeValue, 'Invalid value for attribute ' + attrName + '.' );
}
},
// Returns button object.
// @param {String} name Name of the button in ui.
// @return {CKEDITOR.ui.button}
getUiItem: function( name ) {
return this.editor.ui.get( name );
},
// Returns html element for given menu.
// @param {CKEDITOR.ui.button} uiButton
// @return {CKEDITOR.dom.element}
getButtonDomElement: function( uiButton ) {
return CKEDITOR.document.getById( uiButton._.id );
}
} );
|
