diff --git a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent.blue.light).png b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent.blue.light).png index 400235af4a5d..d9df1c4bc230 100644 Binary files a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent.blue.light).png and b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_treebox (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent.blue.light).png index 459ef44ce4c2..1f2aeb11da32 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_drag_mode (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent.blue.light).png index fb081af694b1..907e4c961b27 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/cardView/columnChooser/etalons/card-view_column-chooser_select_mode (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent.blue.light).png index 47a39dbf8b52..7ad0cd166420 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_bottom (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent.blue.light).png index da6a46963b6f..d88dd384ee62 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_left (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent.blue.light).png index 46a6d009c56a..af18c620d722 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_right (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent.blue.light).png index ec1dbdc630ac..ae665e17e366 100644 Binary files a/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/common/pivotGrid/fieldChooser/etalons/field-chooser_tree-item_dnd_top (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent.blue.light).png index 5b78d5f7aa25..8baa6a23ccc0 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview checked CheckBox focus (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent.blue.light).png index c38d043c2bb4..de50b049d51b 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview indeterminate CheckBox focus (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent.blue.light).png index a4eb99053899..5804ed1f4866 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview unchecked CheckBox focus (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent.blue.light).png index f823a54d3ad4..7db0b94afbc4 100644 Binary files a/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/navigation/treeView/etalons/Treeview with custom icons showCheckBoxesMode=normal (fluent.blue.light).png differ diff --git a/packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss index 4d665729e03a..7bb78a68f81d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/treeView/_colors.scss @@ -19,3 +19,28 @@ $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: $base-selected-bg !default; $treeview-spin-icon-color: $base-spin-icon-color !default; $checkbox-border-color-focused: $base-accent-active !default; +$treeview-checkbox-disabled-border-color-focused: null !default; +$treeview-checkbox-disabled-background-focused: null !default; +$treeview-item-content-disabled: null !default; +$treeview-checkbox-border-color-focused: null !default; +$treeview-checkbox-background-color-focused: null !default; +$treeview-checkbox-accent-color-focused: null !default; + +@if $mode == "light" { + $treeview-item-content-disabled: color.scale($base-bg, $lightness: -25.88%) !default; + $treeview-checkbox-disabled-border-color-focused: color.scale($base-bg, $lightness: -29.8%) !default; + $treeview-checkbox-disabled-background-focused: color.scale($base-bg, $lightness: -7.84%) !default; + $treeview-checkbox-border-color-focused: color.scale($base-bg, $lightness: -85.88%) !default; + $treeview-checkbox-background-color-focused: color.scale($base-bg, $lightness: -7.84%) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 16%, $space: hsl) !default; +} + +@if $mode == "dark" { + $treeview-item-content-disabled: color.change($base-bg, $lightness: 36.08%, $space: hsl) !default; + $treeview-checkbox-disabled-border-color-focused: color.change($base-bg, $lightness: 41.96%, $space: hsl) !default; + $treeview-checkbox-disabled-background-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-border-color-focused: color.change($base-bg, $lightness: 100%, $space: hsl) !default; + $treeview-checkbox-background-color-focused: color.change($base-bg, $lightness: 21.96%, $space: hsl) !default; + $treeview-checkbox-accent-color-focused: color.change($base-accent, $lightness: 84%, $space: hsl) !default; +} + diff --git a/packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss index 601885492485..958cfc16c484 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/treeView/_index.scss @@ -6,35 +6,103 @@ @use "../sizes" as *; @use "../../base/treeView" as *; @use "../../base/icon_fonts" as *; -@use "../checkBox/colors" as *; .dx-treeview-custom-expand-icon, .dx-treeview-custom-collapse-icon { @include dx-icon-sizing($fluent-base-icon-size); } +.dx-treeview-select-all-item { + &.dx-state-focused { + .dx-checkbox-icon { + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-checked { + .dx-checkbox-icon { + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-state-focused.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } +} + .dx-treeview-item-with-checkbox { + .dx-treeview-item { + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + border-color: $treeview-item-content-disabled; + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon::before { + background-color: $treeview-item-content-disabled; + } + } + } + } + &.dx-state-focused > .dx-treeview-item { .dx-checkbox { .dx-checkbox-icon { - border-color: $checkbox-accent-color-focused; + border-color: $treeview-checkbox-border-color-focused; + background-color: $treeview-checkbox-background-color-focused; } &.dx-checkbox-checked { .dx-checkbox-icon { - background-color: $checkbox-accent-color-focused; + background-color: $treeview-checkbox-accent-color-focused; + border-color: $treeview-checkbox-accent-color-focused; + } + } + + &.dx-checkbox-indeterminate { + .dx-checkbox-icon { + border-color: $treeview-checkbox-accent-color-focused; + + &::before { + background-color: $treeview-checkbox-accent-color-focused; + } + } + } + } + + .dx-checkbox.dx-state-disabled { + .dx-checkbox-icon { + background-color: $treeview-checkbox-disabled-background-focused; + border-color: $treeview-checkbox-disabled-border-color-focused; + } + + &.dx-checkbox-checked { + .dx-checkbox-icon { + color: $treeview-checkbox-disabled-border-color-focused; } } &.dx-checkbox-indeterminate { .dx-checkbox-icon::before { - background-color: $checkbox-accent-color-focused; + background-color: $treeview-checkbox-disabled-border-color-focused; } } } } } +.dx-treeview-item-content.dx-state-disabled { + color: $treeview-item-content-disabled; +} + @include default-expander-icon( 'chevrondown', 'chevronright', diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss index 1973ce45a8c4..e08f5b3cf121 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_colors.scss @@ -33,6 +33,7 @@ $treeview-border-color: $base-border-color !default; $treeview-item-selected-color: null !default; $treeview-item-selected-bg: null !default; $treeview-item-selected-hover-bg: null !default; +$treeview-item-content-disabled: null !default; /** * $name 120. Arrow icon color @@ -52,6 +53,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.48) !default; $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.3) !default; $treeview-spin-icon-color: $base-header-color !default; + $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl); } @if $color == "contrast" { @@ -63,6 +65,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: $base-inverted-bg !default; $treeview-item-selected-hover-bg: $base-inverted-bg !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%); } @if $color == "dark" { @@ -75,6 +78,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change(#fff, $alpha: 0.12) !default; $treeview-item-selected-hover-bg: color.change(#fff, $alpha: 0.09) !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.change($base-text-color, $lightness: 51.8%, $space: hsl); } @if $color == "darkmoon" { @@ -87,6 +91,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change(#748fbc, $alpha: 0.42) !default; $treeview-item-selected-hover-bg: color.change(#748fbc, $alpha: 0.3) !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.scale($base-text-color, $lightness: -48.24%); } @if $color == "darkviolet" { @@ -99,6 +104,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change($base-accent, $alpha: 0.46) !default; $treeview-item-selected-hover-bg: color.change($base-accent, $alpha: 0.6) !default; $treeview-spin-icon-color: $base-header-color !default; + $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 51.76%, $space: hsl); } @if $color == "greenmist" { @@ -111,6 +117,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.2) !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.change($base-text-color, $saturation: 0%, $lightness: 60%, $space: hsl); } @if $color == "light" { @@ -123,6 +130,7 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.07) !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl) !default; } @if $color == "softblue" { @@ -135,5 +143,5 @@ $generic-treeview-focused-row-load-indicator-color: #fff; $treeview-item-selected-bg: color.change(#000, $alpha: 0.1) !default; $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.15) !default; $treeview-spin-icon-color: $base-icon-color !default; + $treeview-item-content-disabled: color.adjust($base-text-color, $lightness: 40%, $space: hsl); } - diff --git a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss index b2f0624e0bf9..b27d7dec6d23 100644 --- a/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/generic/treeView/_index.scss @@ -81,3 +81,7 @@ } } } + +.dx-treeview-item-content.dx-state-disabled { + color: $treeview-item-content-disabled; +} diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss index c1966caec80d..ba7bf3050009 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_colors.scss @@ -18,8 +18,8 @@ $treeview-border-color: $base-border-color !default; $treeview-item-selected-color: $treeview-color !default; $treeview-item-selected-bg: null !default; $treeview-spin-icon-color: $base-spin-icon-color !default; - $checkbox-border-color-focused: $base-focus-bg !default; +$treeview-item-content-disabled: color.change($base-text-color, $alpha: 0.38) !default; @if $mode == "light" { $treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default; diff --git a/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss b/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss index 70f6e780557a..b76e5427f6b2 100644 --- a/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/treeView/_index.scss @@ -32,6 +32,10 @@ } } +.dx-treeview-item-content.dx-state-disabled { + color: $treeview-item-content-disabled; +} + @include treeview-item( $material-treeview-item-element-gap, $material-treeview-item-padding, diff --git a/packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts b/packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts index 335c1fe8484c..d9e93ab24847 100644 --- a/packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts +++ b/packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts @@ -68,6 +68,7 @@ const OPENED_NODE_CONTAINER_CLASS = `${NODE_CLASS}-container-opened`; const IS_LEAF = `${NODE_CLASS}-is-leaf`; export const ITEM_CLASS = `${WIDGET_CLASS}-item`; +export const ITEM_CONTENT_CLASS = `${WIDGET_CLASS}-item-content`; const ITEM_WITH_CHECKBOX_CLASS = `${ITEM_CLASS}-with-checkbox`; const ITEM_WITH_CUSTOM_EXPANDER_ICON_CLASS = `${ITEM_CLASS}-with-custom-expander-icon`; const CUSTOM_EXPANDER_ICON_ITEM_CONTAINER_CLASS = `${WIDGET_CLASS}-custom-expander-icon-item-container`; @@ -86,6 +87,7 @@ export const SELECT_ALL_ITEM_CLASS = `${WIDGET_CLASS}-select-all-item`; const INVISIBLE_STATE_CLASS = 'dx-state-invisible'; const DISABLED_STATE_CLASS = 'dx-state-disabled'; +const DISABLED_STATE_ARIA = 'aria-disabled'; const SELECTED_ITEM_CLASS = 'dx-state-selected'; const EXPAND_EVENT_NAMESPACE = 'dxTreeView_expand'; const DATA_ITEM_ID = 'data-item-id'; @@ -114,7 +116,6 @@ class TreeViewBase extends HierarchicalCollectionWidget; _$selectAllItem?: dxElementWrapper; @@ -902,10 +903,6 @@ class TreeViewBase extends HierarchicalCollectionWidget): void { const { itemData, itemElement } = args; + const node = this._getNode(itemData); + + if (node?.internalFields.disabled) { + const $itemContent = $(itemElement).find(`.${ITEM_CONTENT_CLASS}`); + $(itemElement).removeClass(DISABLED_STATE_CLASS); + $(itemElement).removeAttr(DISABLED_STATE_ARIA); + $itemContent.addClass(DISABLED_STATE_CLASS); + $itemContent.attr(DISABLED_STATE_ARIA, true); + } + if (this._showCheckboxes()) { - this._renderCheckBox(itemElement, this._getNode(itemData)); + this._renderCheckBox(itemElement, node); } super._postprocessRenderItem(args); @@ -1166,9 +1173,6 @@ class TreeViewBase extends HierarchicalCollectionWidget.${ITEM_CLASS}.${DISABLED_STATE_CLASS})`); + return $nodes.not(`:has(>.${ITEM_CLASS} > .${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS})`); } _moveFocus(location: string, e: DxEvent): void { @@ -2128,7 +2124,7 @@ class TreeViewBase extends HierarchicalCollectionWidget $el.children(`.${ITEM_CLASS}.${DISABLED_STATE_CLASS}`).length > 0; + const isNodeDisabled = ($el: dxElementWrapper): boolean => $el.find(`.${ITEM_CLASS} .${ITEM_CONTENT_CLASS}.${DISABLED_STATE_CLASS}`).length > 0; let currentNode = $node; diff --git a/packages/devextreme/testing/helpers/fileManagerHelpers.js b/packages/devextreme/testing/helpers/fileManagerHelpers.js index 28f4bbd1b171..02d645b2fc60 100644 --- a/packages/devextreme/testing/helpers/fileManagerHelpers.js +++ b/packages/devextreme/testing/helpers/fileManagerHelpers.js @@ -40,6 +40,7 @@ export const Consts = { GRID_DATA_ROW_CLASS: 'dx-data-row', FILE_ACTION_BUTTON_CLASS: 'dx-filemanager-file-actions-button', FOLDERS_TREE_VIEW_ITEM_CLASS: 'dx-treeview-item', + FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS: 'dx-treeview-item-content', FOLDERS_TREE_VIEW_ITEM_TOGGLE_CLASS: 'dx-treeview-toggle-item-visibility', FOLDERS_TREE_VIEW_ITEM_TOGGLE_OPENED_CLASS: 'dx-treeview-toggle-item-visibility-opened', BREADCRUMBS_CLASS: 'dx-filemanager-breadcrumbs', diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js index 55ad451fd93e..e5650a56db7a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/columnChooser.integration.tests.js @@ -466,10 +466,10 @@ QUnit.module('Column chooser', baseModuleConfig, () => { // act dataGrid.showColumnChooser(); - const items = $('.dx-item.dx-treeview-item'); + const item = $('.dx-item.dx-treeview-item').eq(2).find('.dx-treeview-item-content'); // assert - assert.ok(items.eq(2).hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled'); + assert.ok(item.hasClass('dx-state-disabled'), 'Column with allowHiding=false is disabled'); }); QUnit.test('Column chooser search.editorOptions option should work', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/editing.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/editing.tests.js index 23da5e1d7738..82d86a014e7b 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/editing.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/editing.tests.js @@ -1572,13 +1572,13 @@ QUnit.module('Editing operations', moduleConfig, () => { const $folderNodes = this.wrapper.getFolderNodes(true); assert.strictEqual($folderNodes.length, 4, 'there are only 4 nodes'); - assert.ok($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); + assert.ok($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.ok($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); + assert.ok($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.notOk($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); + assert.notOk($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 3\' node is visible'); }); @@ -1593,13 +1593,13 @@ QUnit.module('Editing operations', moduleConfig, () => { const $folderNodes = this.wrapper.getFolderNodes(true); assert.strictEqual($folderNodes.length, 4, 'there are only 4 nodes'); - assert.ok($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); + assert.ok($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.ok($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); + assert.ok($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.notOk($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); + assert.notOk($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 3\' node is visible'); }); @@ -1625,13 +1625,13 @@ QUnit.module('Editing operations', moduleConfig, () => { const $folderNodes = this.wrapper.getFolderNodes(true); assert.strictEqual($folderNodes.length, 4, 'there are only 4 nodes'); - assert.ok($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); + assert.ok($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.ok($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); + assert.ok($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.ok($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is disabled'); + assert.ok($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is disabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 3\' node is visible'); implementationsMap.getWidth = originalFunc; }); @@ -1652,27 +1652,27 @@ QUnit.module('Editing operations', moduleConfig, () => { const $folderNodes = this.wrapper.getFolderNodes(true); assert.strictEqual($folderNodes.length, 9, 'there are only 9 nodes'); - assert.notOk($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is enabled'); + assert.notOk($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is enabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.notOk($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); + assert.notOk($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.notOk($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1\' node is enabled'); + assert.notOk($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1\' node is enabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 1.1\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1\' node is enabled'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 1.1.1\' node is visible'); - assert.ok($folderNodes.eq(4).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1\' node is disabled'); + assert.ok($folderNodes.eq(4).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1\' node is disabled'); assert.ok($folderNodes.eq(4).is(':visible'), '\'Folder 1.1.1.1\' node is visible'); - assert.ok($folderNodes.eq(5).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1.1\' node is disabled'); + assert.ok($folderNodes.eq(5).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1.1\' node is disabled'); assert.ok($folderNodes.eq(5).is(':visible'), '\'Folder 1.1.1.1.1\' node is visible'); - assert.notOk($folderNodes.eq(6).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.2\' node is enabled'); + assert.notOk($folderNodes.eq(6).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.2\' node is enabled'); assert.ok($folderNodes.eq(6).is(':visible'), '\'Folder 1.2\' node is visible'); - assert.notOk($folderNodes.eq(7).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); + assert.notOk($folderNodes.eq(7).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.ok($folderNodes.eq(7).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(8).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(8).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(8).is(':visible'), '\'Folder 3\' node is visible'); }); @@ -1706,27 +1706,27 @@ QUnit.module('Editing operations', moduleConfig, () => { $folderNodes = this.wrapper.getFolderNodes(true); assert.ok(this.wrapper.getFolderChooserDialog().is(':visible'), 'Folder chooser dialog is visible'); assert.strictEqual($folderNodes.length, 9, 'there are only 9 nodes'); - assert.notOk($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is enabled'); + assert.notOk($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is enabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.ok($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); + assert.ok($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is disabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.ok($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1\' node is disabled'); + assert.ok($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1\' node is disabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 1.1\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1\' node is enabled'); assert.notOk($folderNodes.eq(3).is(':visible'), '\'Folder 1.1.1\' node is invisible'); - assert.notOk($folderNodes.eq(4).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1\' node is enabled'); + assert.notOk($folderNodes.eq(4).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1\' node is enabled'); assert.notOk($folderNodes.eq(4).is(':visible'), '\'Folder 1.1.1.1\' node is invisible'); - assert.notOk($folderNodes.eq(5).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1.1\' node is enabled'); + assert.notOk($folderNodes.eq(5).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.1.1.1.1\' node is enabled'); assert.notOk($folderNodes.eq(5).is(':visible'), '\'Folder 1.1.1.1.1\' node is invisible'); - assert.notOk($folderNodes.eq(6).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.2\' node is enabled'); + assert.notOk($folderNodes.eq(6).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1.2\' node is enabled'); assert.ok($folderNodes.eq(6).is(':visible'), '\'Folder 1.2\' node is visible'); - assert.notOk($folderNodes.eq(7).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); + assert.notOk($folderNodes.eq(7).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.ok($folderNodes.eq(7).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(8).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(8).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(8).is(':visible'), '\'Folder 3\' node is visible'); }); @@ -1739,13 +1739,13 @@ QUnit.module('Editing operations', moduleConfig, () => { const $folderNodes = this.wrapper.getFolderNodes(true); assert.strictEqual($folderNodes.length, 4, 'there are only 4 nodes'); - assert.ok($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); + assert.ok($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.notOk($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); + assert.notOk($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.notOk($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); + assert.notOk($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 3\' node is visible'); $folderNodes.eq(1).trigger('dxclick'); @@ -2069,19 +2069,19 @@ QUnit.module('Editing operations', moduleConfig, () => { assert.strictEqual(this.wrapper.getFolderToggles(true).length, 2, 'there are 2 node toggles'); assert.ok($folderNodes.eq(0).is(':visible'), '\'Files\' node is visible'); - assert.ok($folderNodes.eq(0).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); + assert.ok($folderNodes.eq(0).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Files\' node is disabled'); assert.strictEqual(this.wrapper.isFolderNodeToggleOpened('Files', true), true, '\'Files\' toggle is opened'); assert.ok($folderNodes.eq(1).is(':visible'), '\'Folder 1\' node is visible'); - assert.notOk($folderNodes.eq(1).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); + assert.notOk($folderNodes.eq(1).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 1\' node is enabled'); assert.strictEqual(this.wrapper.isFolderNodeToggleOpened('Folder 1', true), false, '\'Folder 1\' toggle is closed'); assert.ok($folderNodes.eq(2).is(':visible'), '\'Folder 2\' node is visible'); - assert.notOk($folderNodes.eq(2).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is ensabled'); + assert.notOk($folderNodes.eq(2).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 2\' node is enabled'); assert.strictEqual(this.wrapper.isFolderNodeToggleOpened('Folder 2', true), null, '\'Folder 2\' toggle is absent'); assert.ok($folderNodes.eq(3).is(':visible'), '\'Folder 3\' node is visible'); - assert.notOk($folderNodes.eq(3).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); + assert.notOk($folderNodes.eq(3).find(`.${Consts.FOLDERS_TREE_VIEW_ITEM_CONTENT_CLASS}`).is(`.${Consts.DISABLED_STATE_CLASS}`), '\'Folder 3\' node is enabled'); assert.strictEqual(this.wrapper.isFolderNodeToggleOpened('Folder 3', true), null, '\'Folder 3\' toggle is absent'); this.wrapper.getDialogButton('Cancel').trigger('dxclick'); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.accessibility.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.accessibility.tests.js index d2faf5932ce8..ea999ec8cb04 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.accessibility.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.accessibility.tests.js @@ -73,7 +73,7 @@ let helper; helper.checkItemsAttributes([0], { }); }); - test('Selected: ["Item_2"], selectionMode: "single", disabled: true', function() { + test('Selected: ["Item_2"], selectionMode: "single", disabled: true', function(assert) { this.items[1].selected = true; this.items[1].disabled = true; @@ -81,7 +81,17 @@ let helper; helper.checkAttributes(searchEnabled ? helper.$itemContainer : helper.$widget, { role: 'tree', tabindex: '0' }); helper.checkAttributes(searchEnabled ? helper.$widget : helper.widget._itemContainer(true), { }); - helper.checkItemsAttributes([0], { attributes: [ 'aria-disabled' ] }); + + const $itemContent = helper.$widget + .find('.dx-treeview-item-content') + .eq(0); + + assert.strictEqual( + $itemContent.attr('aria-disabled'), + 'true', + 'aria-disabled equals true' + ); + }); test('Selected: ["Item_1_1"], selectionMode: "single", Item_1.expanded: true, collapseItem(["Item_1"]) -> expand(["Item_1"])', function() { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.expanded.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.expanded.tests.js index e9f3086216f4..b550d3e7b978 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.expanded.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.expanded.tests.js @@ -217,7 +217,7 @@ module('Expanded items', { assert.ok(treeView.option('items')[0].expanded, 'item was expanded'); }); - test('disabled item should not expand on click', function(assert) { + test('disabled item should expand on click', function(assert) { const data = $.extend(true, [], DATA[5]); data[0].disabled = true; const $treeView = initTree({ @@ -225,14 +225,14 @@ module('Expanded items', { }); const treeView = $treeView.dxTreeView('instance'); const $firstItem = $treeView.find(`.${TREEVIEW_ITEM_CLASS}`).eq(0); - const $icon = $firstItem.parent().find(`> .${TREEVIEW_TOGGLE_ITEM_VISIBILITY_CLASS}`); + const $icon = $firstItem.find(`.${TREEVIEW_TOGGLE_ITEM_VISIBILITY_CLASS}`); $icon.trigger('dxclick'); - assert.ok(!treeView.option('items')[0].expanded, 'disabled item was not expanded'); + assert.ok(treeView.option('items')[0].expanded, 'disabled item was expanded'); }); - test('disabled item with custom expander icons should not expand on click', function(assert) { + test('disabled item with custom expander icons should expand on click', function(assert) { const data = $.extend(true, [], DATA[5]); data[0].disabled = true; const $treeView = initTree({ @@ -245,7 +245,7 @@ module('Expanded items', { $icon.trigger('dxclick'); - assert.notOk(treeView.option('items')[0].expanded, 'disabled item was not expanded'); + assert.ok(treeView.option('items')[0].expanded, 'disabled item was expanded'); }); test('expanded disabled item should not collapse on click', function(assert) { @@ -292,7 +292,7 @@ module('Expanded items', { assert.notOk($expandIcon.is(':visible')); }); - test('expanded disabled item with custom icon should not collapse on click', function(assert) { + test('expanded disabled item with custom icon should collapse on click', function(assert) { const data = $.extend(true, [], DATA[5]); data[0].expanded = true; data[0].disabled = true; @@ -306,7 +306,7 @@ module('Expanded items', { $icon.trigger('dxclick'); - assert.ok(treeView.option('items')[0].expanded, 'disabled item was not collapsed'); + assert.notOk(treeView.option('items')[0].expanded, 'disabled item was collapsed'); }); test('expanded item with custom icon should collapse on click', function(assert) { @@ -651,7 +651,7 @@ module('Expanded items', { assert.notOk(nodes[0].items[0].items[0].expanded, 'item 111'); }); - test('Disabled item doesn\'t expand when using the expandAll method', function(assert) { + test('Disabled item should expand when using the expandAll method', function(assert) { const $treeView = initTree({ items: [{ text: '1', @@ -683,11 +683,11 @@ module('Expanded items', { assert.ok(isNodeExpanded($node2), 'second node is expanded'); assert.equal(getNodeItemId($node2), 11, 'id for second node'); - assert.notOk(isNodeExpanded($node3), 'third node is expanded'); + assert.ok(isNodeExpanded($node3), 'third node is expanded'); assert.equal(getNodeItemId($node3), 111, 'id for third node'); }); - test('Disabled item doesn\'t expand when using the expandAll method and the expandNodesRecursive is enabled', function(assert) { + test('Disabled item should expand when using the expandAll method and the expandNodesRecursive is enabled', function(assert) { const $treeView = initTree({ expandNodesRecursive: true, items: [{ @@ -720,7 +720,7 @@ module('Expanded items', { assert.ok(isNodeExpanded($node2), 'second node is expanded'); assert.equal(getNodeItemId($node2), 11, 'id for second node'); - assert.notOk(isNodeExpanded($node3), 'third node is expanded'); + assert.ok(isNodeExpanded($node3), 'third node is expanded'); assert.equal(getNodeItemId($node3), 111, 'id for third node'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.markup.tests.js index f156ef758236..19e26c1185ed 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.markup.tests.js @@ -16,6 +16,7 @@ const NODE_CONTAINER_CLASS = 'dx-treeview-node-container'; const OPENED_NODE_CONTAINER_CLASS = 'dx-treeview-node-container-opened'; const NODE_CLASS = 'dx-treeview-node'; const ITEM_CLASS = 'dx-treeview-item'; +const ITEM_CONTENT_CLASS = 'dx-treeview-item-content'; const ICON_CLASS = 'dx-icon'; const SELECTED_STATE_CLASS = 'dx-state-selected'; const ITEM_WITH_CHECKBOX_CLASS = 'dx-treeview-item-with-checkbox'; @@ -424,7 +425,7 @@ QUnit.module('markup', { assert.equal($rootNodeSecondItem.find('.' + TOGGLE_ITEM_VISIBILITY_CLASS).length, 0); }); - QUnit.test('Add disabled class for toggle icon if item is disabled', function(assert) { + QUnit.test('Do not add disabled class for toggle icon if item is disabled', function(assert) { const $treeView = initTree({ items: [{ id: 1, @@ -437,7 +438,7 @@ QUnit.module('markup', { const $rootNode = $treeView.find(`.${NODE_CONTAINER_CLASS}:first-child`); const $icon = $rootNode.find(`.${ITEM_CLASS}`).eq(0).children(`.${TOGGLE_ITEM_VISIBILITY_CLASS}`).eq(0); - assert.ok($icon.hasClass('dx-state-disabled')); + assert.notOk($icon.hasClass('dx-state-disabled')); }); QUnit.test('Render checkboxes', function(assert) { @@ -515,7 +516,7 @@ QUnit.module('markup', { items: [{ id: 1, text: 'item 1', isDisabled: true }], disabledExpr: 'isDisabled' }); - const $item = $treeView.find('.' + ITEM_CLASS).eq(0); + const $item = $treeView.find('.' + ITEM_CLASS).eq(0).find('.' + ITEM_CONTENT_CLASS).eq(0); assert.ok($item.hasClass('dx-state-disabled')); }); @@ -528,7 +529,7 @@ QUnit.module('markup', { return '123'; } }); - const $item = $treeView.find('.' + ITEM_CLASS).eq(0); + const $item = $treeView.find('.' + ITEM_CLASS).eq(0).find('.' + ITEM_CONTENT_CLASS).eq(0); assert.ok($item.hasClass('dx-state-disabled')); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.selection.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.selection.tests.js index a4ecea7af9a0..3a916f6dd2bd 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.selection.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.selection.tests.js @@ -584,6 +584,19 @@ module('selection single', () => { treeView.checkSelected([], items); }); + test('selectByClick option should not select item with disabled: true', function(assert) { + const items = [{ text: 'item 1', disabled: true }, { text: 'item 2' }]; + const treeView = createInstance({ + items: items, + selectByClick: true, + selectionMode: 'single' + }); + + eventsEngine.trigger(treeView.getItems().eq(0), 'dxclick'); + + treeView.checkSelected([], items); + }); + test('selection can be prevented on itemClick', function(assert) { const items = [{ text: 'item 1' }, { text: 'item 2' }]; const treeView = createInstance({ diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.virtualMode.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.virtualMode.tests.js index e63f6c0c9982..b886217cf6bb 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.virtualMode.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeView.virtualMode.tests.js @@ -275,7 +275,7 @@ QUnit.test('Don\'t create loadindicator on dblclick after expand childless item assert.equal($node.find('.dx-loadindicator').length, 0); }); -QUnit.test('Don\'t create loadindicator when disabled item expands', function(assert) { +QUnit.test('Should create loadindicator when disabled item expands', function(assert) { const newData = $.extend(true, [], data2); newData[15].disabled = true; @@ -290,7 +290,7 @@ QUnit.test('Don\'t create loadindicator when disabled item expands', function(as const $node = this.$element.find(`.${TREEVIEW_NODE_CLASS}`).eq(2); $node.find('.dx-treeview-toggle-item-visibility').trigger('dxclick'); - assert.equal($node.find('.dx-loadindicator').length, 0); + assert.strictEqual($node.find('.dx-loadindicator').length, 1); }); QUnit.test('Add leaf class after expand childless item', function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/keyboardNavigation.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/keyboardNavigation.js index d9d91a0fe9a8..6bbdd971d16d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/keyboardNavigation.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/keyboardNavigation.js @@ -787,11 +787,11 @@ QUnit.module('keyboard navigation', { $focusedNode.find('.dx-treeview-item').trigger('dxpointerdown'); assert.ok($focusedNode.hasClass('dx-state-focused'), 'item was focused'); - keyboard.keyDown('left'); - $focusedNode = $treeView.find('.dx-treeview-node[data-item-id=1]'); + keyboard.keyDown('up'); + $focusedNode = $treeView.find('.dx-treeview-node[data-item-id=2]'); assert.ok($focusedNode.hasClass('dx-state-focused'), 'first item was focused'); - keyboard.keyDown('right'); + keyboard.keyDown('down'); $focusedNode = $treeView.find('.dx-treeview-node[data-item-id=21]'); assert.ok($focusedNode.hasClass('dx-state-focused'), 'item was focused'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/optionChanged.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/optionChanged.js index 141985c3e0c0..4196d8afaa4a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/optionChanged.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/treeViewParts/optionChanged.js @@ -72,13 +72,12 @@ QUnit.test('node should have disabled class when it was disabled at runtime', fu dataStructure: 'plain' }); const instance = $treeView.dxTreeView('instance'); - const $item = $treeView.find('.dx-treeview-item').eq(0); + const $itemContent = $treeView.find('.dx-treeview-item-content').eq(0); instance.option('items[0].disabled', true); - assert.ok($item.hasClass('dx-state-disabled'), 'item should be disabled'); - + assert.ok($itemContent.hasClass('dx-state-disabled'), 'item should be disabled'); instance.option('items[0].disabled', false); - assert.notOk($item.hasClass('dx-state-disabled'), 'item should not be disabled'); + assert.notOk($itemContent.hasClass('dx-state-disabled'), 'item should not be disabled'); }); QUnit.test('checkbox should have disabled class when item was disabled at runtime', function(assert) { @@ -104,7 +103,7 @@ QUnit.test('node should have disabled class when it was disabled at runtime with dataStructure: 'plain' }); const instance = $treeView.dxTreeView('instance'); - const $item = $treeView.find('.dx-treeview-item').eq(0); + const $item = $treeView.find('.dx-treeview-item-content').eq(0); instance.option('items[0].disable', true); assert.ok($item.hasClass('dx-state-disabled'), 'item should be disabled'); diff --git a/packages/testcafe-models/dataGrid/columnChooser.ts b/packages/testcafe-models/dataGrid/columnChooser.ts index 63a01c157f8f..c805689a4bdf 100644 --- a/packages/testcafe-models/dataGrid/columnChooser.ts +++ b/packages/testcafe-models/dataGrid/columnChooser.ts @@ -10,6 +10,7 @@ const CLASS = { stateDisabled: 'dx-state-disabled', checkbox: 'dx-checkbox', treeViewItem: 'dx-treeview-item', + treeViewItemContent: 'dx-treeview-item-content', treeView: 'dx-treeview', itemContent: 'dx-item-content', itemContentToolbar: 'dx-toolbar-item-content', @@ -58,7 +59,7 @@ export default class ColumnChooser extends FocusableElement { } isColumnDisabled(index = 0): Promise { - return this.getColumn(index).hasClass(CLASS.stateDisabled); + return this.getColumn(index).find(`.${CLASS.treeViewItemContent}`).hasClass(CLASS.stateDisabled); } getColumnsCount(): Promise {