diff --git a/js/ui/radio_group/radio_group.js b/js/ui/radio_group/radio_group.js index 43c4e3f5ed9d..8726d47221fe 100644 --- a/js/ui/radio_group/radio_group.js +++ b/js/ui/radio_group/radio_group.js @@ -261,7 +261,7 @@ class RadioGroup extends Editor { this._setCollectionWidgetOption(name, value); break; case "dataSource": - this._setCollectionWidgetOption("dataSource"); + this._setCollectionWidgetOption("dataSource", this._dataSource); break; case "valueExpr": this._setCollectionWidgetOption("keyExpr", this._getCollectionKeyExpr()); diff --git a/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js b/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js index 7c318df90a28..004572c3e7ff 100644 --- a/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js +++ b/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js @@ -3,40 +3,40 @@ import devices from "core/devices"; import errors from "ui/widget/ui.errors"; import executeAsyncMock from "../../helpers/executeAsyncMock.js"; import keyboardMock from "../../helpers/keyboardMock.js"; +import { DataSource } from "data/data_source/data_source"; import "ui/radio_group"; -QUnit.testStart(function() { - var markup = - '
\ -
\ -
\ -
'; +const { testStart, module, test, testInActiveWindow } = QUnit; - $("#qunit-fixture").html(markup); +testStart(() => { + $("#qunit-fixture").html(`
`); }); -var RADIO_GROUP_CLASS = "dx-radiogroup", - RADIO_GROUP_VERTICAL_CLASS = "dx-radiogroup-vertical", - RADIO_GROUP_HORIZONTAL_CLASS = "dx-radiogroup-horizontal", - RADIO_BUTTON_CLASS = "dx-radiobutton", - RADIO_BUTTON_CHECKED_CLASS = "dx-radiobutton-checked", - FOCUSED_CLASS = "dx-state-focused"; +const RADIO_GROUP_CLASS = "dx-radiogroup"; +const RADIO_GROUP_VERTICAL_CLASS = "dx-radiogroup-vertical"; +const RADIO_GROUP_HORIZONTAL_CLASS = "dx-radiogroup-horizontal"; +const RADIO_BUTTON_CLASS = "dx-radiobutton"; +const RADIO_BUTTON_CHECKED_CLASS = "dx-radiobutton-checked"; +const FOCUSED_CLASS = "dx-state-focused"; -var moduleConfig = { - beforeEach: function() { +const moduleConfig = { + beforeEach: () => { executeAsyncMock.setup(); }, - afterEach: function() { + afterEach: () => { executeAsyncMock.teardown(); } }; -QUnit.module("nested radio group", moduleConfig, function() { - QUnit.test("T680199 - click on nested radio group in template should not affect on contaier parent radio group", function(assert) { - var $nestedRadioGroup; +const createRadioGroup = options => $("#radioGroup").dxRadioGroup(options); +const getInstance = $element => $element.dxRadioGroup("instance"); - var $radioGroup = $("#radioGroup").dxRadioGroup({ +module("nested radio group", moduleConfig, () => { + test("T680199 - click on nested radio group in template should not affect on contaier parent radio group", assert => { + let $nestedRadioGroup; + + const $radioGroup = createRadioGroup({ items: [{ template: function(itemData, itemIndex, element) { $nestedRadioGroup = $("
").dxRadioGroup({ @@ -50,23 +50,24 @@ QUnit.module("nested radio group", moduleConfig, function() { }] }); - var parentRadioGroup = $radioGroup.dxRadioGroup("instance"); - var parentItemElement = $(parentRadioGroup.itemElements()).first(); + const parentRadioGroup = getInstance($radioGroup); + const parentItemElement = $(parentRadioGroup.itemElements()).first(); parentItemElement.trigger("dxclick"); assert.ok(parentItemElement.hasClass(RADIO_BUTTON_CHECKED_CLASS), "item of parent radio group is checked"); - var nestedRadioGroup = $nestedRadioGroup.dxRadioGroup("instance"); - var nestedItemElement = $(nestedRadioGroup.itemElements()).first(); + const nestedRadioGroup = getInstance($nestedRadioGroup); + const nestedItemElement = $(nestedRadioGroup.itemElements()).first(); nestedItemElement.trigger("dxclick"); assert.ok(nestedItemElement.hasClass(RADIO_BUTTON_CHECKED_CLASS), "item of nested radio group is checked"); assert.ok(parentItemElement.hasClass(RADIO_BUTTON_CHECKED_CLASS), "item of parent radio group is not changed"); }); - QUnit.test("T680199 - click on one nested radio group doesn't change another nested group", function(assert) { - var $nestedRadioGroup1, + + test("T680199 - click on one nested radio group doesn't change another nested group", assert => { + let $nestedRadioGroup1, $nestedRadioGroup2; - $("#radioGroup").dxRadioGroup({ + createRadioGroup({ items: [{ template: function(itemData, itemIndex, element) { $nestedRadioGroup1 = $("
").dxRadioGroup({ @@ -80,444 +81,469 @@ QUnit.module("nested radio group", moduleConfig, function() { }] }); - var nestedRadioGroup1 = $nestedRadioGroup1.dxRadioGroup("instance"); - var nestedRadioGroup2 = $nestedRadioGroup2.dxRadioGroup("instance"); + const nestedRadioGroup1 = getInstance($nestedRadioGroup1); + const nestedRadioGroup2 = getInstance($nestedRadioGroup2); - var firstNestedItemElement1 = $(nestedRadioGroup1.itemElements()).first(); + const firstNestedItemElement1 = $(nestedRadioGroup1.itemElements()).first(); firstNestedItemElement1.trigger("dxclick"); assert.ok(firstNestedItemElement1.hasClass(RADIO_BUTTON_CHECKED_CLASS), "item of first nested radio group is checked"); - var firstNestedItemElement2 = $(nestedRadioGroup2.itemElements()).first(); + const firstNestedItemElement2 = $(nestedRadioGroup2.itemElements()).first(); assert.notOk(firstNestedItemElement2.hasClass(RADIO_BUTTON_CHECKED_CLASS), "item of second nested radio group is not changed"); }); }); +module("buttons group rendering", () => { + test("onContentReady fired after the widget is fully ready", assert => { + assert.expect(2); -QUnit.module("buttons group rendering"); - -QUnit.test("onContentReady fired after the widget is fully ready", function(assert) { - assert.expect(2); - - $("#radioGroup").dxRadioGroup({ - items: [ - { text: "0" } - ], - onContentReady: function(e) { - assert.ok($(e.element).hasClass(RADIO_GROUP_CLASS)); - assert.ok($(e.element).find("." + RADIO_BUTTON_CLASS).length); - } + createRadioGroup({ + items: [ + { text: "0" } + ], + onContentReady: function(e) { + assert.ok($(e.element).hasClass(RADIO_GROUP_CLASS)); + assert.ok($(e.element).find("." + RADIO_BUTTON_CLASS).length); + } + }); }); -}); - -QUnit.test("onContentReady should rise after changing dataSource (T697809)", assert => { - const onContentReadyHandler = sinon.stub(), - instance = $("#radioGroup").dxRadioGroup({ - dataSource: ["str1", "str2", "str3"], - onContentReady: onContentReadyHandler - }).dxRadioGroup("instance"); - assert.ok(onContentReadyHandler.calledOnce); - instance.option("dataSource", [1, 2, 3]); - assert.strictEqual(onContentReadyHandler.callCount, 2); + test("onContentReady should rise after changing dataSource (T697809)", assert => { + const onContentReadyHandler = sinon.stub(), + instance = getInstance( + createRadioGroup({ + dataSource: ["str1", "str2", "str3"], + onContentReady: onContentReadyHandler + }) + ); + + assert.ok(onContentReadyHandler.calledOnce); + instance.option("dataSource", [1, 2, 3]); + assert.strictEqual(onContentReadyHandler.callCount, 2); + }); }); +module("layout", moduleConfig, () => { + test("should be generated proper class with vertical layout", assert => { + const $radioGroup = createRadioGroup({ + layout: "vertical" + }); -QUnit.module("layout", moduleConfig); - -QUnit.test("should be generated proper class with vertical layout", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - layout: "vertical" + assert.ok($radioGroup.hasClass(RADIO_GROUP_VERTICAL_CLASS), "class set correctly"); }); - assert.ok($radioGroup.hasClass(RADIO_GROUP_VERTICAL_CLASS), "class set correctly"); -}); + test("should be generated proper class with horizontal layout", assert => { + const $radioGroup = createRadioGroup({ + layout: "horizontal" + }); -QUnit.test("should be generated proper class with horizontal layout", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - layout: "horizontal" + assert.ok($radioGroup.hasClass(RADIO_GROUP_HORIZONTAL_CLASS), "class set correctly"); }); - assert.ok($radioGroup.hasClass(RADIO_GROUP_HORIZONTAL_CLASS), "class set correctly"); -}); - -QUnit.test("should be generated proper class when layout is changed", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - layout: "horizontal" - }); + test("should be generated proper class when layout is changed", assert => { + const $radioGroup = createRadioGroup({ + layout: "horizontal" + }); - $radioGroup.dxRadioGroup("instance").option("layout", "vertical"); + getInstance($radioGroup).option("layout", "vertical"); - assert.ok($radioGroup.hasClass(RADIO_GROUP_VERTICAL_CLASS), "class set correctly"); -}); + assert.ok($radioGroup.hasClass(RADIO_GROUP_VERTICAL_CLASS), "class set correctly"); + }); -QUnit.test("On the tablet radio group must use a horizontal layout", function(assert) { - devices.current("iPad"); + test("On the tablet radio group must use a horizontal layout", assert => { + devices.current("iPad"); - var $radioGroup = $("#radioGroup").dxRadioGroup(), - isHorizontalLayout = $radioGroup.dxRadioGroup("instance").option("layout") === "horizontal" ? true : false; + const $radioGroup = createRadioGroup(), + isHorizontalLayout = getInstance($radioGroup).option("layout") === "horizontal"; - assert.ok(isHorizontalLayout, "radio group on tablet have horizontal layout"); + assert.ok(isHorizontalLayout, "radio group on tablet have horizontal layout"); + }); }); - -QUnit.module("hidden input"); - -QUnit.test("the hidden input should get correct value on widget value change", function(assert) { - var $element = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - value: 2 - }), - instance = $element.dxRadioGroup("instance"), - $input = $element.find("input"); - - instance.option("value", 1); - assert.equal($input.val(), "1", "input value is correct"); +module("hidden input", () => { + test("the hidden input should get correct value on widget value change", assert => { + const $element = createRadioGroup({ + items: [1, 2, 3], + value: 2 + }), + instance = getInstance($element), + $input = $element.find("input"); + + instance.option("value", 1); + assert.equal($input.val(), "1", "input value is correct"); + }); }); +module("value", moduleConfig, () => { + test("should not throw an error when the value is \"null\" or \"undefine\"", assert => { + const errorLogStub = sinon.stub(errors, "log"); -QUnit.module("value", moduleConfig); + createRadioGroup({ + items: ['item1', 'item2', 'item3'], + value: void 0 + }); -QUnit.test("should not throw an error when the value is \"null\" or \"undefine\"", assert => { - const errorLogStub = sinon.stub(errors, "log"); + createRadioGroup({ + items: ['item1', 'item2', 'item3'], + value: null + }); - $("#radioGroup").dxRadioGroup({ - items: ['item1', 'item2', 'item3'], - value: void 0 + assert.notOk(errorLogStub.called, "Exception was not thrown"); + errorLogStub.restore(); }); - $("#radioGroup").dxRadioGroup({ - items: ['item1', 'item2', 'item3'], - value: null + test("should have correct initialized selection", assert => { + let radioGroupInstance = null; + const isItemChecked = index => radioGroupInstance.itemElements().eq(index).hasClass(RADIO_BUTTON_CHECKED_CLASS); + + radioGroupInstance = getInstance( + createRadioGroup({ + items: ['item1', 'item2', 'item3'] + }) + ); + + assert.notOk(isItemChecked(0)); + assert.notOk(isItemChecked(1)); + assert.notOk(isItemChecked(2)); + + radioGroupInstance = getInstance( + createRadioGroup({ + items: ['item1', 'item2', 'item3'], + value: 'item2' + }) + ); + + assert.notOk(isItemChecked(0)); + assert.ok(isItemChecked(1)); + assert.notOk(isItemChecked(2)); }); - assert.notOk(errorLogStub.called, "Exception was not thrown"); - errorLogStub.restore(); -}); - -QUnit.test("should have correct initialized selection", assert => { - let radioGroupInstance = null; - const isItemChecked = index => radioGroupInstance.itemElements().eq(index).hasClass(RADIO_BUTTON_CHECKED_CLASS); - - radioGroupInstance = $("#radioGroup").dxRadioGroup({ - items: ['item1', 'item2', 'item3'] - }).dxRadioGroup('instance'); - - assert.notOk(isItemChecked(0)); - assert.notOk(isItemChecked(1)); - assert.notOk(isItemChecked(2)); - - radioGroupInstance = $("#radioGroup").dxRadioGroup({ - items: ['item1', 'item2', 'item3'], - value: 'item2' - }).dxRadioGroup('instance'); - - assert.notOk(isItemChecked(0)); - assert.ok(isItemChecked(1)); - assert.notOk(isItemChecked(2)); -}); - -QUnit.test("repaint of widget shouldn't reset value option", function(assert) { - var items = [{ text: "0" }, { text: "1" }]; - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: items, - value: items[1] - }), - radioGroup = $radioGroup.dxRadioGroup("instance"); - - radioGroup.repaint(); - assert.strictEqual(radioGroup.option("value"), items[1]); -}); - -QUnit.test("value is changed on item click", function(assert) { - assert.expect(1); + test("repaint of widget shouldn't reset value option", assert => { + const items = [{ text: "0" }, { text: "1" }]; + const $radioGroup = createRadioGroup({ + items: items, + value: items[1] + }), + radioGroup = getInstance($radioGroup); - var value; - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - onValueChanged: function(e) { - value = e.value; - } + radioGroup.repaint(); + assert.strictEqual(radioGroup.option("value"), items[1]); }); - var radioGroup = $radioGroup.dxRadioGroup("instance"); - $(radioGroup.itemElements()).first().trigger("dxclick"); + test("value is changed on item click", assert => { + assert.expect(1); - assert.equal(value, 1, "value changed"); -}); - -QUnit.test("onValueChanged option should get jQuery event as a parameter", function(assert) { - var jQueryEvent, - $radioGroup = $("#radioGroup").dxRadioGroup({ + let value; + const $radioGroup = createRadioGroup({ items: [1, 2, 3], onValueChanged: function(e) { - jQueryEvent = e.event; + value = e.value; } - }), - radioGroup = $radioGroup.dxRadioGroup("instance"); + }); + const radioGroup = getInstance($radioGroup); - $(radioGroup.itemElements()).first().trigger("dxclick"); - assert.ok(jQueryEvent, "jQuery event is defined when click used"); + $(radioGroup.itemElements()).first().trigger("dxclick"); - radioGroup.option("value", 2); - assert.notOk(jQueryEvent, "jQuery event is not defined when api used"); -}); + assert.equal(value, 1, "value changed"); + }); + test("onValueChanged option should get jQuery event as a parameter", assert => { + let jQueryEvent, + $radioGroup = createRadioGroup({ + items: [1, 2, 3], + onValueChanged: function(e) { + jQueryEvent = e.event; + } + }), + radioGroup = getInstance($radioGroup); -QUnit.module("valueExpr", moduleConfig); + $(radioGroup.itemElements()).first().trigger("dxclick"); + assert.ok(jQueryEvent, "jQuery event is defined when click used"); -QUnit.test("value should be correct if valueExpr is a function", (assert) => { - const items = [ - { text: "text1", value: true }, - { text: "text2", value: false } - ]; - const radioGroup = $("#radioGroup") - .dxRadioGroup({ - dataSource: items, - valueExpr: (e) => e.value - }) - .dxRadioGroup("instance"); + radioGroup.option("value", 2); + assert.notOk(jQueryEvent, "jQuery event is not defined when api used"); + }); +}); - assert.strictEqual(radioGroup.option("value"), null); - assert.strictEqual($(radioGroup.itemElements()).find(`.${RADIO_BUTTON_CHECKED_CLASS}`).length, 0); +module("valueExpr", moduleConfig, () => { + test("value should be correct if valueExpr is a string", assert => { + const items = [ + { number: 1, caption: "one" }, + { number: 2, caption: "two" } + ]; + + const radioGroup = getInstance( + createRadioGroup({ + dataSource: items, + valueExpr: "number", + value: 2, + itemTemplate: function(item) { + return item.caption; + } + }) + ); - const itemElement = $(radioGroup.itemElements()).first(); + let $secondItem = $(radioGroup.itemElements()).eq(1); - itemElement.trigger("dxclick"); - assert.strictEqual(radioGroup.option("value"), true); - assert.ok(itemElement.hasClass(RADIO_BUTTON_CHECKED_CLASS)); -}); + assert.equal($secondItem.text(), "two"); -QUnit.test("value should be correct if valueExpr is a string", function(assert) { - var items = [ - { number: 1, caption: "one" }, - { number: 2, caption: "two" } - ]; - - var radioGroup = $("#radioGroup") - .dxRadioGroup({ - dataSource: items, - valueExpr: "number", - value: 2, - itemTemplate: function(item) { - return item.caption; - } - }) - .dxRadioGroup("instance"); + radioGroup.option("itemTemplate", function(item) { + return item.number; + }); - var $secondItem = $(radioGroup.itemElements()).eq(1); + $secondItem = $(radioGroup.itemElements()).eq(1); + assert.equal($secondItem.text(), "2"); - assert.equal($secondItem.text(), "two"); + radioGroup.option("valueExpr", "caption"); + assert.equal(radioGroup.option("value"), 2); - radioGroup.option("itemTemplate", function(item) { - return item.number; + assert.equal($(radioGroup.itemElements()).find(`.${RADIO_BUTTON_CHECKED_CLASS}`).length, 0, "no items selected"); }); - $secondItem = $(radioGroup.itemElements()).eq(1); - assert.equal($secondItem.text(), "2"); - - radioGroup.option("valueExpr", "caption"); - assert.equal(radioGroup.option("value"), 2); - - assert.equal($(radioGroup.itemElements()).find(`.${RADIO_BUTTON_CHECKED_CLASS}`).length, 0, "no items selected"); + test("value should be correct if valueExpr is a function", assert => { + const items = [ + { text: "text1", value: true }, + { text: "text2", value: false } + ]; + const radioGroup = getInstance( + createRadioGroup({ + dataSource: items, + valueExpr: e => e.value + }) + ); + + assert.strictEqual(radioGroup.option("value"), null); + assert.strictEqual($(radioGroup.itemElements()).find(`.${RADIO_BUTTON_CHECKED_CLASS}`).length, 0); + + const itemElement = $(radioGroup.itemElements()).first(); + + itemElement.trigger("dxclick"); + assert.strictEqual(radioGroup.option("value"), true); + assert.ok(itemElement.hasClass(RADIO_BUTTON_CHECKED_CLASS)); + }); }); - -QUnit.module("widget sizing render", moduleConfig); - -QUnit.test("change width", function(assert) { - var $element = $("#widget").dxRadioGroup({ - items: [ - { text: "0" }, - { text: "1" }, - { text: "2" }, - { text: "3" } - ] - }), - instance = $element.dxRadioGroup("instance"), - customWidth = 400; - - instance.option("width", customWidth); - - assert.strictEqual($element.outerWidth(), customWidth, "outer width of the element must be equal to custom width"); +module("widget sizing render", moduleConfig, () => { + test("change width", assert => { + const $element = createRadioGroup({ + items: [ + { text: "0" }, + { text: "1" }, + { text: "2" }, + { text: "3" } + ] + }), + instance = getInstance($element), + customWidth = 400; + + instance.option("width", customWidth); + + assert.strictEqual($element.outerWidth(), customWidth, "outer width of the element must be equal to custom width"); + }); }); +module("keyboard navigation", moduleConfig, () => { + test("keys tests", assert => { + assert.expect(3); + + const items = [{ text: "0" }, { text: "1" }, { text: "2" }, { text: "3" }], + $element = createRadioGroup({ + focusStateEnabled: true, + items: items + }), + instance = getInstance($element), + keyboard = keyboardMock($element); + + $element.focusin(); + + keyboard.keyDown("enter"); + assert.equal(instance.option("value"), items[0], "first item chosen"); + keyboard.keyDown("down"); + keyboard.keyDown("enter"); + assert.equal(instance.option("value"), items[1], "second item chosen"); + keyboard.keyDown("up"); + keyboard.keyDown("space"); + assert.equal(instance.option("value"), items[0], "first item chosen"); + }); -QUnit.module("keyboard navigation", moduleConfig); - -QUnit.test("keys tests", function(assert) { - assert.expect(3); - - var items = [{ text: "0" }, { text: "1" }, { text: "2" }, { text: "3" }], - $element = $("#widget").dxRadioGroup({ + test("control keys should be prevented", assert => { + const items = [{ text: "0" }, { text: "1" }]; + const $element = createRadioGroup({ focusStateEnabled: true, items: items - }), - instance = $element.dxRadioGroup("instance"), - keyboard = keyboardMock($element); - - $element.focusin(); - - keyboard.keyDown("enter"); - assert.equal(instance.option("value"), items[0], "first item chosen"); - keyboard.keyDown("down"); - keyboard.keyDown("enter"); - assert.equal(instance.option("value"), items[1], "second item chosen"); - keyboard.keyDown("up"); - keyboard.keyDown("space"); - assert.equal(instance.option("value"), items[0], "first item chosen"); -}); + }); + const keyboard = keyboardMock($element); + let isDefaultPrevented = false; + $($element).on("keydown", function(e) { + isDefaultPrevented = e.isDefaultPrevented(); + }); -QUnit.test("control keys should be prevented", function(assert) { - var items = [{ text: "0" }, { text: "1" }]; - var $element = $("#widget").dxRadioGroup({ - focusStateEnabled: true, - items: items - }); - var keyboard = keyboardMock($element); - var isDefaultPrevented = false; - $($element).on("keydown", function(e) { - isDefaultPrevented = e.isDefaultPrevented(); - }); + $element.focusin(); - $element.focusin(); + keyboard.keyDown("enter"); + assert.ok(isDefaultPrevented, "enter is default prevented"); - keyboard.keyDown("enter"); - assert.ok(isDefaultPrevented, "enter is default prevented"); + keyboard.keyDown("down"); + assert.ok(isDefaultPrevented, "down is default prevented"); - keyboard.keyDown("down"); - assert.ok(isDefaultPrevented, "down is default prevented"); + keyboard.keyDown("up"); + assert.ok(isDefaultPrevented, "up is default prevented"); - keyboard.keyDown("up"); - assert.ok(isDefaultPrevented, "up is default prevented"); + keyboard.keyDown("space"); + assert.ok(isDefaultPrevented, "space is default prevented"); + }); - keyboard.keyDown("space"); - assert.ok(isDefaultPrevented, "space is default prevented"); -}); + test("keyboard navigation does not work in disabled widget", assert => { + const items = [{ text: "0" }, { text: "1" }, { text: "2" }, { text: "3" }], + $element = createRadioGroup({ + focusStateEnabled: true, + items: items, + disabled: true + }); -QUnit.test("keyboard navigation does not work in disabled widget", function(assert) { - var items = [{ text: "0" }, { text: "1" }, { text: "2" }, { text: "3" }], - $element = $("#widget").dxRadioGroup({ - focusStateEnabled: true, - items: items, - disabled: true - }); + assert.ok($element.attr('tabindex') === undefined, "collection of radio group has not tabindex"); + }); + + test("radio group items should not have tabIndex(T674238)", assert => { + const items = [{ text: "0" }, { text: "1" }], + $element = createRadioGroup({ + focusStateEnabled: true, + items: items + }); - assert.ok($element.attr('tabindex') === undefined, "collection of radio group has not tabindex"); + const $items = $element.find("." + RADIO_BUTTON_CLASS); + assert.ok($items.eq(0).attr('tabindex') === undefined, "items of radio group hasn't tabindex"); + assert.ok($items.eq(1).attr('tabindex') === undefined, "items of radio group hasn't tabindex"); + }); }); -QUnit.test("radio group items should not have tabIndex(T674238)", function(assert) { - var items = [{ text: "0" }, { text: "1" }], - $element = $("#widget").dxRadioGroup({ - focusStateEnabled: true, - items: items - }); +module("focus policy", moduleConfig, () => { + test("focused-state set up on radio group after focusing on any item", assert => { + assert.expect(2); - var $items = $element.find("." + RADIO_BUTTON_CLASS); - assert.ok($items.eq(0).attr('tabindex') === undefined, "items of radio group hasn't tabindex"); - assert.ok($items.eq(1).attr('tabindex') === undefined, "items of radio group hasn't tabindex"); -}); + const $radioGroup = createRadioGroup({ + items: [1, 2, 3], + focusStateEnabled: true + }), + radioGroup = getInstance($radioGroup), + $firstRButton = $(radioGroup.itemElements()).first(); -QUnit.module("focus policy", moduleConfig); + assert.ok(!$radioGroup.hasClass(FOCUSED_CLASS), "radio group is not focused"); -QUnit.test("focused-state set up on radio group after focusing on any item", function(assert) { - assert.expect(2); + $radioGroup.focusin(); + $($firstRButton).trigger("dxpointerdown"); - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - focusStateEnabled: true - }), - radioGroup = $radioGroup.dxRadioGroup("instance"), - $firstRButton = $(radioGroup.itemElements()).first(); + assert.ok($radioGroup.hasClass(FOCUSED_CLASS), "radio group was focused after focusing on item"); + }); - assert.ok(!$radioGroup.hasClass(FOCUSED_CLASS), "radio group is not focused"); + test("radioGroup item has not dx-state-focused class after radioGroup lose focus", assert => { + assert.expect(2); - $radioGroup.focusin(); - $($firstRButton).trigger("dxpointerdown"); + const $radioGroup = createRadioGroup({ + items: [1, 2, 3], + focusStateEnabled: true + }), + radioGroup = getInstance($radioGroup), + $firstRButton = $(radioGroup.itemElements()).first(); - assert.ok($radioGroup.hasClass(FOCUSED_CLASS), "radio group was focused after focusing on item"); -}); + $radioGroup.focusin(); + $($firstRButton).trigger("dxpointerdown"); -QUnit.test("radioGroup item has not dx-state-focused class after radioGroup lose focus", function(assert) { - assert.expect(2); + assert.ok($firstRButton.hasClass(FOCUSED_CLASS), "radioGroup item is focused"); - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - focusStateEnabled: true - }), - radioGroup = $radioGroup.dxRadioGroup("instance"), - $firstRButton = $(radioGroup.itemElements()).first(); + $radioGroup.focusout(); - $radioGroup.focusin(); - $($firstRButton).trigger("dxpointerdown"); + assert.ok(!$firstRButton.hasClass(FOCUSED_CLASS), "radio group item lost focus after focusout on radio group"); + }); - assert.ok($firstRButton.hasClass(FOCUSED_CLASS), "radioGroup item is focused"); + test("radioGroup item has not dx-state-focused class after radioGroup lose focus", assert => { + assert.expect(2); - $radioGroup.focusout(); + const $radioGroup = createRadioGroup({ + items: [1, 2, 3], + focusStateEnabled: true + }), + radioGroup = getInstance($radioGroup), + $firstRButton = $(radioGroup.itemElements()).first(); - assert.ok(!$firstRButton.hasClass(FOCUSED_CLASS), "radio group item lost focus after focusout on radio group"); -}); + assert.ok(!$firstRButton.hasClass(FOCUSED_CLASS)); -QUnit.test("radioGroup item has not dx-state-focused class after radioGroup lose focus", function(assert) { - assert.expect(2); + $radioGroup.focusin(); - var $radioGroup = $("#radioGroup").dxRadioGroup({ + assert.ok($firstRButton.hasClass(FOCUSED_CLASS), "radioGroup item is not focused"); + }); + + test("radioGroup element should get 'dx-state-focused' class", assert => { + const $radioGroup = createRadioGroup({ items: [1, 2, 3], focusStateEnabled: true - }), - radioGroup = $radioGroup.dxRadioGroup("instance"), - $firstRButton = $(radioGroup.itemElements()).first(); + }); - assert.ok(!$firstRButton.hasClass(FOCUSED_CLASS)); + $radioGroup.focusin(); - $radioGroup.focusin(); + assert.ok($radioGroup.hasClass(FOCUSED_CLASS), "element got 'dx-state-focused' class"); + }); - assert.ok($firstRButton.hasClass(FOCUSED_CLASS), "radioGroup item is not focused"); -}); + test("option 'accessKey' has effect", assert => { + const $radioGroup = createRadioGroup({ + items: [1, 2, 3], + focusStateEnabled: true, + accessKey: "k" + }), + instance = getInstance($radioGroup); + + assert.equal($radioGroup.attr("accessKey"), "k", "access key is correct"); -QUnit.test("radioGroup element should get 'dx-state-focused' class", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - focusStateEnabled: true + instance.option("accessKey", "o"); + assert.equal($radioGroup.attr("accessKey"), "o", "access key is correct after change"); }); - $radioGroup.focusin(); + test("option 'tabIndex' has effect", assert => { + const $radioGroup = createRadioGroup({ + items: [1, 2, 3], + focusStateEnabled: true, + tabIndex: 4 + }), + instance = getInstance($radioGroup); + + assert.equal($radioGroup.attr("tabIndex"), 4, "tab index is correct"); + instance.option("tabIndex", 7); + assert.equal($radioGroup.attr("tabIndex"), 7, "tab index is correct after change"); + }); + + testInActiveWindow("the 'focus()' method should set focused class to widget", assert => { + const $radioGroup = createRadioGroup({ + focusStateEnabled: true + }); + const instance = getInstance($radioGroup); - assert.ok($radioGroup.hasClass(FOCUSED_CLASS), "element got 'dx-state-focused' class"); + instance.focus(); + assert.ok($radioGroup.hasClass("dx-state-focused"), "widget got focused class"); + }); }); -QUnit.test("option 'accessKey' has effect", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - focusStateEnabled: true, - accessKey: "k" - }), - instance = $radioGroup.dxRadioGroup("instance"); +module("option changed", () => { + test("items from the getDataSource method are wrong when the dataSource option is changed", assert => { + const instance = getInstance( + createRadioGroup({ + dataSource: [1, 2, 3] + }) + ); - assert.equal($radioGroup.attr("accessKey"), "k", "access key is correct"); + instance.option("dataSource", [4, 5, 6]); - instance.option("accessKey", "o"); - assert.equal($radioGroup.attr("accessKey"), "o", "access key is correct after change"); -}); + assert.deepEqual(instance.getDataSource().items(), [4, 5, 6], "items from data source"); + }); -QUnit.test("option 'tabIndex' has effect", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - items: [1, 2, 3], - focusStateEnabled: true, - tabIndex: 4 - }), - instance = $radioGroup.dxRadioGroup("instance"); + test("items from the getDataSource method are wrong when the dataSource option is changed if uses an instance of dataSource", assert => { + const instance = getInstance( + createRadioGroup({ + dataSource: new DataSource({ store: [1, 2, 3] }) + }) + ); - assert.equal($radioGroup.attr("tabIndex"), 4, "tab index is correct"); - instance.option("tabIndex", 7); - assert.equal($radioGroup.attr("tabIndex"), 7, "tab index is correct after change"); -}); + instance.option("dataSource", [4, 5, 6]); -QUnit.testInActiveWindow("the 'focus()' method should set focused class to widget", function(assert) { - var $radioGroup = $("#radioGroup").dxRadioGroup({ - focusStateEnabled: true + assert.deepEqual(instance.getDataSource().items(), [4, 5, 6], "items from data source"); }); - var instance = $radioGroup.dxRadioGroup("instance"); - - instance.focus(); - assert.ok($radioGroup.hasClass("dx-state-focused"), "widget got focused class"); });