Skip to content

Commit

Permalink
TabPanel: test items.visible option (#28177)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikkithelegendarypokemonster
nikkithelegendarypokemonster authored Oct 17, 2024
1 parent 8bed7a5 commit 39a1065
Show file tree
Hide file tree
Showing 2 changed files with 223 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/devextreme/js/__internal/ui/tab_panel/m_tab_panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -489,7 +489,7 @@ const TabPanel = MultiView.inherit({
break;
case 'focusedElement': {
const id = value ? $(value).index() : value;
const newItem = value ? this._tabs._itemElements().eq(id) : value;
const newItem = value && this._tabs ? this._tabs._itemElements().eq(id) : value;
this._setTabsOption('focusedElement', getPublicElement(newItem));

if (value) {
Expand Down
222 changes: 222 additions & 0 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1296,3 +1296,225 @@ QUnit.module('Tabs Indicator position', () => {
assert.ok($tabs.hasClass(TABS_INDICATOR_POSITION_CLASS.left));
});
});

QUnit.module('selectedIndex vs items.visible', () => {
QUnit.module('on init', () => {
QUnit.test('selectedIndex should be updated to the next visible item if initially selected item is hidden', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 1
});
const instance = $tabPanel.dxTabPanel('instance');

assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index');
});

QUnit.test('selectedIndex should be updated to the next visible item to the left if initially selected item is hidden and RTL is enabled', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 1,
rtlEnabled: true
});
const instance = $tabPanel.dxTabPanel('instance');

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('selectedIndex should be zero when all items are not visible', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: false },
{ text: '2', visible: false },
{ text: '3', visible: false },
],
selectedIndex: 1
});
const instance = $tabPanel.dxTabPanel('instance');

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('next visible item should be selected if currently selected item is hidden and loop=true', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: false },
],
selectedIndex: 2,
loop: true
});
const instance = $tabPanel.dxTabPanel('instance');

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('first visible item should be selected if current selected item is hidden and it is in the end and loop = true', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: true },
{ text: '3', visible: false },
],
selectedIndex: 2,
loop: true
});
const instance = $tabPanel.dxTabPanel('instance');

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});
});

QUnit.module('on runtime', () => {
QUnit.test('selectedIndex should be updated to the next visible item if it is changed to a hidden item', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
]
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('selectedIndex', 1);

assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index');
});

QUnit.test('selectedIndex should be set to zero if all items became hidden', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option({
items: [
{ text: '1', visible: false },
{ text: '2', visible: false },
{ text: '3', visible: false },
]
});

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('when hiding selected item selectedIndex should be set to next visible item', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: true },
{ text: '3', visible: true },
],
selectedIndex: 1
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[1].visible', false);

assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index');
});

QUnit.test('when hiding non-selected item before selectedIndex, selectedIndex should not change', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: true },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[1].visible', false);

assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index');
});

QUnit.test('when hiding selected item positioned in the end, next visible item to the left is selected', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: true },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[2].visible', false);

assert.strictEqual(instance.option('selectedIndex'), 1, 'selectedIndex is updated on proper index');
});

QUnit.test('when showing previously invisible item before selectedIndex, selectedIndex should not change', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[1].visible', true);

assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index');
});

QUnit.test('when showing previously invisible item after selectedIndex, selectedIndex should not change', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 0
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[1].visible', true);

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('when hiding last visible item selectedIndex should return to 0 index', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: false },
{ text: '2', visible: false },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items[2].visible', false);

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index');
});

QUnit.test('after removing selected item selectedIndex should be restored to 0', function(assert) {
const $tabPanel = $('#tabPanel').dxTabPanel({
items: [
{ text: '1', visible: true },
{ text: '2', visible: true },
{ text: '3', visible: true },
],
selectedIndex: 2
});
const instance = $tabPanel.dxTabPanel('instance');
instance.option('items', [
{ text: '1', visible: true },
{ text: '2', visible: true },
]);

assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is not changed');
});
});
});

0 comments on commit 39a1065

Please sign in to comment.