button/tests/button-test.js

	button-test.js revision 7a6ad76d2e039a8cbf25b4a0babafef7bbd54c01
4eeb28ea335313c708fe2730312f94978b07dd04Dav GlassYUI.add('button-test', function (Y) {
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glassvar Assert      = Y.Assert,
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    ArrayAssert = Y.ArrayAssert,
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    suite;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass// -- Suite --------------------------------------------------------------------
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glasssuite = new Y.Test.Suite('button');
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass// -- Widget ----------------------------------------------------------------
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glasssuite.add(new Y.Test.Case({
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    name: 'Basic',
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    setUp : function () {
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        Y.one("#container").setContent('<button id="testButton">Hello</button><button id="testToggleButton">Hello</button><button id="testCheckButton">Hello</button>');
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.button = new Y.Button({
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass            srcNode: '#testButton'
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        }).render();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.toggleButton = new Y.ToggleButton({
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass            srcNode: '#testToggleButton'
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        }).render();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.checkButton = new Y.ToggleButton({
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass            srcNode: '#testCheckButton',
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass            type: 'checkbox'
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        }).render();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    },
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    tearDown: function () {
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.button.destroy();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.toggleButton.destroy();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        this.checkButton.destroy();
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        delete this.button;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        delete this.toggleButton;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        delete this.checkButton;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    },
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    'Changing the label atrribute should trigger labelChange': function () {
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        var button = this.button;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        var eventsTriggered = 0;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        button.on('labelChange', function(){
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass            eventsTriggered+=1;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        });
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        Assert.areEqual(0, eventsTriggered);
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        button.set('label', 'foobar');
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        Assert.areEqual(1, eventsTriggered);
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    },
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass    'ToggleButton should have `toggle` role': function () {
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        var button = this.button;
4eeb28ea335313c708fe2730312f94978b07dd04Dav Glass        var toggleButton = this.toggleButton;

        var role = toggleButton.get('contentBox').get('role');
        Assert.areEqual('toggle', role);
    },

    'Selecting a toggleButton should add class `yui3-button-selected`': function () {
        var button = this.toggleButton;
        var cb = button.get('contentBox');

        Assert.isFalse(cb.hasClass('yui3-button-selected'));

        cb.simulate('click');
        Assert.isTrue(cb.hasClass('yui3-button-selected'));

        // Simulate the button click
        cb.simulate('click');
        Assert.isFalse(cb.hasClass('yui3-button-selected'));

        cb.simulate('click');
        Assert.isTrue(cb.hasClass('yui3-button-selected'));

        cb.simulate('click');
        Assert.isFalse(cb.hasClass('yui3-button-selected'));
    },

    'Select toggling a button should fire pressedChange': function () {
        var toggleButton = this.toggleButton;
        var cb = toggleButton.get('contentBox');
        var eventsTriggered = 0;

        toggleButton.on('pressedChange', function(){
            eventsTriggered+=1;
        });

        Assert.areEqual(0, eventsTriggered);

        cb.simulate('click');
        Assert.areEqual(1, eventsTriggered);

        cb.simulate('click');
        Assert.areEqual(2, eventsTriggered);
    },

    'disable() should set the disabled attribute to true': function () {
        var button = this.button;

        Assert.isFalse(button.get('disabled'));

        button.disable();
        Assert.isTrue(button.get('disabled'));
    },

    'enable() should set the disabled attribute to false': function () {
        var button = this.button;

        Assert.isFalse(button.get('disabled'));

        button.disable();
        Assert.isTrue(button.get('disabled'));

        button.enable();
        Assert.isFalse(button.get('disabled'));
    },

    'Setting `pressed` should toggle the `pressed` attribute': function () {
        var button = this.toggleButton;

        Assert.isFalse(button.get('pressed'));

        button.set('pressed', true);
        Assert.isTrue(button.get('pressed'));

        button.set('pressed', false);
        Assert.isFalse(button.get('pressed'));
    },

    'Setting `checked` should toggle the `checked` attribute': function () {
        var button = this.checkButton;

        Assert.isFalse(button.get('checked'));

        button.set('checked', true);
        Assert.isTrue(button.get('checked'));

        button.set('checked', false);
        Assert.isFalse(button.get('checked'));
    },

    'Toggle buttons should have proper ARIA data': function () {
        var button = this.toggleButton;
        var cb = button.get('contentBox');

        Assert.areSame('toggle', cb.get('role'));
        Assert.areSame('false', cb.get('aria-pressed'));

        cb.simulate('click');
        //button.set('pressed', true);
        Assert.areSame('true', cb.get('aria-pressed'));
    },

    'Checkbox buttons should have proper ARIA data': function () {
        var button = this.checkButton;
        var cb = button.get('contentBox');

        Assert.areSame('checkbox', cb.get('role'));
        Assert.areSame('false', cb.get('aria-checked'));

        cb.simulate('click');

        Assert.areSame('true', cb.get('aria-checked'));
    }
}));

// -- Config tests ----------------------------------------------------------------
suite.add(new Y.Test.Case({
    name: 'Config',

    setUp : function () {

    },

    tearDown: function () {
        Y.one("#container").empty(true);
    },

    'Passing `pressed=true` in with the config will default the button to a `pressed` state': function() {
        Y.one("#container").setContent('<input type="button" id="testButton" value="foo">');
        var button = new Y.ToggleButton({
            host: Y.one("#testButton"),
            pressed: true
        });

        Assert.isTrue(button.get('pressed'));
        Assert.isUndefined(button.get('checked'));

        button.toggle();

        Assert.isFalse(button.get('pressed'));
        Assert.isUndefined(button.get('checked'));
    },

    'Passing `checked=true` in with the config will default the button to a `checked` state': function() {
        Y.one("#container").setContent('<input type="button" id="testButton" value="foo">');
        var button = new Y.ToggleButton({
            host: Y.one("#testButton"),
            checked: true,
            type: 'checkbox'
        });

        Assert.isTrue(button.get('checked'));
        Assert.isUndefined(button.get('pressed'));

        button.toggle();

        Assert.isFalse(button.get('checked'));
        Assert.isUndefined(button.get('pressed'));
    }
}));
Y.Test.Runner.add(suite);

}, '@VERSION@', {
    requires: ['button', 'test', 'node-event-simulate']
});