Tabs, TabPanel: refactoring codebase and tests (DevExpress#30153)

Author: pharret31

packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts

@@ -18,28 +18,30 @@ import supportUtils from '@ts/core/utils/m_support';
 import type { OptionChanged } from '@ts/core/widget/types';
 import MultiView from '@ts/ui/m_multi_view';
 import type { TabsProperties } from '@ts/ui/tabs/tabs';
-import Tabs from '@ts/ui/tabs/tabs';
+import Tabs, {
+  TABS_ITEM_TEXT_CLASS,
+  TABS_ITEM_TEXT_SPAN_CLASS,
+  TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS,
+} from '@ts/ui/tabs/tabs';
 
 // eslint-disable-next-line import/no-named-default
 import { default as TabPanelItem } from './item';
 
 export const TABPANEL_CLASS = 'dx-tabpanel';
 const TABPANEL_TABS_CLASS = 'dx-tabpanel-tabs';
-const TABPANEL_TABS_ITEM_CLASS = 'dx-tabpanel-tab';
-const TABPANEL_CONTAINER_CLASS = 'dx-tabpanel-container';
-const TABS_ITEM_TEXT_CLASS = 'dx-tab-text';
-const DISABLED_FOCUSED_TAB_CLASS = 'dx-disabled-focused-tab';
-const TABS_ITEM_TEXT_SPAN_CLASS = 'dx-tab-text-span';
-const TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS = 'dx-tab-text-span-pseudo';
-
-const TABPANEL_TABS_POSITION_CLASS: Record<Position, string> = {
+export const TABPANEL_TABS_ITEM_CLASS = 'dx-tabpanel-tab';
+export const TABPANEL_CONTAINER_CLASS = 'dx-tabpanel-container';
+
+export const DISABLED_FOCUSED_TAB_CLASS = 'dx-disabled-focused-tab';
+
+export const TABPANEL_TABS_POSITION_CLASS: Record<Position, string> = {
   top: 'dx-tabpanel-tabs-position-top',
   right: 'dx-tabpanel-tabs-position-right',
   bottom: 'dx-tabpanel-tabs-position-bottom',
   left: 'dx-tabpanel-tabs-position-left',
 };
 
-const TABS_POSITION: Record<Position, Position> = {
+export const TABS_POSITION: Record<Position, Position> = {
   top: 'top',
   right: 'right',
   bottom: 'bottom',
@@ -53,7 +55,7 @@ const TABS_INDICATOR_POSITION_BY_TABS_POSITION: Record<Position, Position> = {
   left: 'right',
 };
 
-const TABS_ORIENTATION: Record<Orientation, Orientation> = {
+export const TABS_ORIENTATION: Record<Orientation, Orientation> = {
   horizontal: 'horizontal',
   vertical: 'vertical',
 };
@@ -212,7 +214,7 @@ class TabPanel extends MultiView<TabPanelProperties> {
     super._initTemplates();
 
     this._templateManager.addDefaultTemplates({
-      title: new BindableTemplate(($container, data) => {
+      title: new BindableTemplate(($container: dxElementWrapper, data: Item) => {
         this._prepareTabsItemTemplate(data, $container);
 
         const $tabItem = $('<div>').addClass(TABS_ITEM_TEXT_CLASS);

packages/devextreme/js/__internal/ui/tabs/item.ts

@@ -2,7 +2,7 @@ import $ from '@js/core/renderer';
 import type { Item } from '@js/ui/tabs';
 import CollectionItem from '@ts/ui/collection/item';
 
-const TABS_ITEM_BADGE_CLASS = 'dx-tabs-item-badge';
+export const TABS_ITEM_BADGE_CLASS = 'dx-tabs-item-badge';
 const BADGE_CLASS = 'dx-badge';
 
 class TabsItem extends CollectionItem<Item> {

packages/devextreme/js/__internal/ui/tabs/tabs.ts

@@ -2,7 +2,7 @@ import type { DefaultOptionsRule, Position } from '@js/common';
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import holdEvent from '@js/common/core/events/hold';
 import pointerEvents from '@js/common/core/events/pointer';
-import { addNamespace } from '@js/common/core/events/utils/index';
+import { addNamespace } from '@js/common/core/events/utils';
 import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import type { dxElementWrapper } from '@js/core/renderer';
@@ -35,49 +35,49 @@ import TabsItem from './item';
 
 // STYLE tabs
 
-const TABS_CLASS = 'dx-tabs';
-const TABS_WRAPPER_CLASS = 'dx-tabs-wrapper';
-const TABS_STRETCHED_CLASS = 'dx-tabs-stretched';
-const TABS_SCROLLABLE_CLASS = 'dx-tabs-scrollable';
-const TABS_NAV_BUTTONS_CLASS = 'dx-tabs-nav-buttons';
+export const TABS_CLASS = 'dx-tabs';
+export const TABS_WRAPPER_CLASS = 'dx-tabs-wrapper';
+export const TABS_STRETCHED_CLASS = 'dx-tabs-stretched';
+export const TABS_SCROLLABLE_CLASS = 'dx-tabs-scrollable';
+export const TABS_NAV_BUTTONS_CLASS = 'dx-tabs-nav-buttons';
 const OVERFLOW_HIDDEN_CLASS = 'dx-overflow-hidden';
 
-const TABS_ITEM_CLASS = 'dx-tab';
-const TABS_ITEM_SELECTED_CLASS = 'dx-tab-selected';
-const TABS_SCROLLING_ENABLED_CLASS = 'dx-tabs-scrolling-enabled';
+export const TABS_ITEM_CLASS = 'dx-tab';
+export const TABS_ITEM_SELECTED_CLASS = 'dx-tab-selected';
+export const TABS_SCROLLING_ENABLED_CLASS = 'dx-tabs-scrolling-enabled';
 
-const TABS_NAV_BUTTON_CLASS = 'dx-tabs-nav-button';
-const TABS_LEFT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-left';
-const TABS_RIGHT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-right';
+export const TABS_NAV_BUTTON_CLASS = 'dx-tabs-nav-button';
+export const TABS_LEFT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-left';
+export const TABS_RIGHT_NAV_BUTTON_CLASS = 'dx-tabs-nav-button-right';
 
-const TABS_ITEM_TEXT_CLASS = 'dx-tab-text';
-const TABS_ITEM_TEXT_SPAN_CLASS = 'dx-tab-text-span';
-const TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS = 'dx-tab-text-span-pseudo';
+export const TABS_ITEM_TEXT_CLASS = 'dx-tab-text';
+export const TABS_ITEM_TEXT_SPAN_CLASS = 'dx-tab-text-span';
+export const TABS_ITEM_TEXT_SPAN_PSEUDO_CLASS = 'dx-tab-text-span-pseudo';
 
 const STATE_DISABLED_CLASS = 'dx-state-disabled';
-const FOCUSED_DISABLED_NEXT_TAB_CLASS = 'dx-focused-disabled-next-tab';
-const FOCUSED_DISABLED_PREV_TAB_CLASS = 'dx-focused-disabled-prev-tab';
+export const FOCUSED_DISABLED_NEXT_TAB_CLASS = 'dx-focused-disabled-next-tab';
+export const FOCUSED_DISABLED_PREV_TAB_CLASS = 'dx-focused-disabled-prev-tab';
 
-const TABS_ORIENTATION_CLASS = {
+export const TABS_ORIENTATION_CLASS = {
   vertical: 'dx-tabs-vertical',
   horizontal: 'dx-tabs-horizontal',
 };
 
-const INDICATOR_POSITION_CLASS: Record<Position, string> = {
+export const TABS_INDICATOR_POSITION_CLASS: Record<Position, string> = {
   top: 'dx-tab-indicator-position-top',
   right: 'dx-tab-indicator-position-right',
   bottom: 'dx-tab-indicator-position-bottom',
   left: 'dx-tab-indicator-position-left',
 };
 
-const TABS_ICON_POSITION_CLASS: Record<TabsIconPosition, string> = {
+export const TABS_ICON_POSITION_CLASS: Record<TabsIconPosition, string> = {
   top: 'dx-tabs-icon-position-top',
   end: 'dx-tabs-icon-position-end',
   bottom: 'dx-tabs-icon-position-bottom',
   start: 'dx-tabs-icon-position-start',
 };
 
-const TABS_STYLING_MODE_CLASS: Record<TabsStyle, string> = {
+export const TABS_STYLING_MODE_CLASS: Record<TabsStyle, string> = {
   primary: 'dx-tabs-styling-mode-primary',
   secondary: 'dx-tabs-styling-mode-secondary',
 };
@@ -271,7 +271,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
     super._initTemplates();
 
     this._templateManager.addDefaultTemplates({
-      item: new BindableTemplate(($container, data) => {
+      item: new BindableTemplate(($container: dxElementWrapper, data: Item) => {
         this._prepareDefaultItemTemplate(data, $container);
 
         const $iconElement = getImageContainer(data.icon);
@@ -357,11 +357,10 @@ class Tabs extends CollectionWidget<TabsProperties> {
 
   _isItemsSizeExceeded(): boolean {
     const isVertical = this._isVertical();
-    const isItemsSizeExceeded = isVertical
+
+    return isVertical
       ? this._isItemsHeightExceeded()
       : this._isItemsWidthExceeded();
-
-    return isItemsSizeExceeded;
   }
 
   _isItemsWidthExceeded(): boolean {
@@ -373,18 +372,15 @@ class Tabs extends CollectionWidget<TabsProperties> {
       return false;
     }
 
-    const isItemsWidthExceeded = tabItemTotalWidth > elementWidth - 1;
-
-    return isItemsWidthExceeded;
+    return tabItemTotalWidth > elementWidth - 1;
   }
 
   _isItemsHeightExceeded(): boolean {
     const $visibleItems = this._getVisibleItems();
     const itemsHeight = this._getSummaryItemsSize('height', $visibleItems, true);
     const elementHeight = getHeight(this.$element());
-    const isItemsHeightExceeded = itemsHeight - 1 > elementHeight;
 
-    return isItemsHeightExceeded;
+    return itemsHeight - 1 > elementHeight;
   }
 
   _needStretchItems(): boolean {
@@ -399,9 +395,8 @@ class Tabs extends CollectionWidget<TabsProperties> {
 
     const maxTabItemWidth = Math.max.apply(null, itemsWidth);
     const requireWidth = elementWidth / $visibleItems.length;
-    const needStretchItems = maxTabItemWidth > requireWidth + 1;
 
-    return needStretchItems;
+    return maxTabItemWidth > requireWidth + 1;
   }
 
   _cleanNavButtons(): void {
@@ -478,11 +473,10 @@ class Tabs extends CollectionWidget<TabsProperties> {
 
   _getScrollableDirection(): Orientation {
     const isVertical = this._isVertical();
-    const scrollableDirection = isVertical
+
+    return isVertical
       ? SCROLLABLE_DIRECTION.vertical
       : SCROLLABLE_DIRECTION.horizontal;
-
-    return scrollableDirection;
   }
 
   _updateScrollable(): void {
@@ -676,7 +670,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
   }
 
   _getIndicatorPositionClass(indicatorPosition: Position): string {
-    return INDICATOR_POSITION_CLASS[indicatorPosition];
+    return TABS_INDICATOR_POSITION_CLASS[indicatorPosition];
   }
 
   _getIndicatorPosition(): Position {
@@ -698,7 +692,7 @@ class Tabs extends CollectionWidget<TabsProperties> {
   _toggleIndicatorPositionClass(indicatorPosition: Position): void {
     const newClass = this._getIndicatorPositionClass(indicatorPosition);
 
-    this._toggleElementClasses(INDICATOR_POSITION_CLASS, newClass);
+    this._toggleElementClasses(TABS_INDICATOR_POSITION_CLASS, newClass);
   }
 
   _toggleScrollingEnabledClass(scrollingEnabled: boolean | undefined): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.API.option_tabs.tests.js

@@ -1,5 +1,8 @@
 import $ from 'jquery';
 import 'ui/form';
+import { TABS_ITEM_CLASS } from '__internal/ui/tabs/tabs';
+import { TABS_ITEM_BADGE_CLASS } from '__internal/ui/tabs/item';
+import { TABPANEL_CLASS } from '__internal/ui/tab_panel/tab_panel';
 
 import 'generic_light.css!';
 
@@ -29,8 +32,8 @@ class FormTestWrapper {
         this._form.on('contentReady', this._contentReadyStub);
     }
 
-    _getTabsTextsElements() {
-        return this._form.$element().find('.dx-tab-content .dx-tab-text');
+    _getTabsElements() {
+        return this._form.$element().find(`.${TABS_ITEM_CLASS}`);
     }
 
     _getMultiViewItemsElements() {
@@ -46,7 +49,7 @@ class FormTestWrapper {
     }
 
     selectTab(tabIndex) {
-        $('.dx-tabpanel').dxTabPanel('instance').option('selectedIndex', tabIndex);
+        $(`.${TABPANEL_CLASS}`).dxTabPanel('instance').option('selectedIndex', tabIndex);
     }
 
     checkFormsReRender() {
@@ -55,16 +58,16 @@ class FormTestWrapper {
     }
 
     checkTabBadge(tabIndex, expectedText) {
-        assert.equal($('.dx-tabs-item-badge').eq(tabIndex).text(), expectedText, `${tabIndex} tab badge`);
+        assert.equal($(`.${TABS_ITEM_BADGE_CLASS}`).eq(tabIndex).text(), expectedText, `${tabIndex} tab badge`);
     }
 
     checkTabDisabled(tabIndex, expectedValue) {
-        const $tabItems = $('.dx-tab');
+        const $tabItems = $(`.${TABS_ITEM_CLASS}`);
         assert.equal($tabItems.eq(tabIndex).hasClass('dx-state-disabled'), expectedValue, `${tabIndex} tab disabled`);
     }
 
     checkTabIcon(tabIndex, expectedIcon) {
-        const $icon = $('.dx-tab .dx-icon').eq(tabIndex);
+        const $icon = $(`.${TABS_ITEM_CLASS} .dx-icon`).eq(tabIndex);
         assert.ok($icon.hasClass(`dx-icon-${expectedIcon}`), `${tabIndex} tab icon`);
     }
 
@@ -79,12 +82,12 @@ class FormTestWrapper {
     }
 
     checkTabTitle(tabIndex, expectedText) {
-        const $title = this._getTabsTextsElements().eq(tabIndex);
+        const $title = this._getTabsElements().eq(tabIndex);
         assert.strictEqual($title.text(), `${expectedText}${expectedText}`, `${tabIndex} tab title`);
     }
 
     checkTabsElements(expectedTabsCount) {
-        const $tabs = this._getTabsTextsElements();
+        const $tabs = this._getTabsElements();
         assert.equal($tabs.length, expectedTabsCount, 'count of tabs elements');
 
         const $multiViewItems = this._getMultiViewItemsElements();