diff --git a/packages/devextreme-angular/src/server/render.ts b/packages/devextreme-angular/src/server/render.ts index 272acefd5cc9..1ea7b55f70ce 100644 --- a/packages/devextreme-angular/src/server/render.ts +++ b/packages/devextreme-angular/src/server/render.ts @@ -25,6 +25,9 @@ export class DxServerModule { temp.innerHTML = renderToString(el); const mainElement = temp.childNodes[0]; + if (!mainElement) { + return; + } const childString = mainElement.innerHTML; for (let i = 0; i < mainElement.attributes.length; i++) { diff --git a/packages/devextreme-angular/tests/src/ui/form.spec.ts b/packages/devextreme-angular/tests/src/ui/form.spec.ts index 55f12020467c..5087fb53322f 100644 --- a/packages/devextreme-angular/tests/src/ui/form.spec.ts +++ b/packages/devextreme-angular/tests/src/ui/form.spec.ts @@ -64,6 +64,7 @@ describe('DxForm', () => { formGroupItemType: 'itemType="group"', formValidationItem: 'dxi-validation-rule', formValidationRequiredItemType: 'type="required"', + formCustomValidationItem: 'dxi-validation-rule', formValidationCustomItemType: 'type="custom"', }, { @@ -73,6 +74,7 @@ describe('DxForm', () => { formGroupItemType: '', formValidationItem: 'dxi-form-required-rule', formValidationRequiredItemType: '', + formCustomValidationItem: 'dxi-form-custom-rule', formValidationCustomItemType: '', }, ].forEach(({ @@ -82,6 +84,7 @@ describe('DxForm', () => { formGroupItemType, formValidationItem, formValidationRequiredItemType, + formCustomValidationItem, formValidationCustomItemType, }) => { it(`should be able to accept items via nested dxi components (T459714) (with ${testName} nested items)`, () => { @@ -178,8 +181,8 @@ describe('DxForm', () => { <${formGroupItem} ${formGroupItemType} *ngIf="true"> <${formSimpleItem} dataField="text"> - <${formValidationItem} ${formValidationCustomItemType} [validationCallback]="validateForm"> - + <${formCustomValidationItem} ${formValidationCustomItemType} [validationCallback]="validateForm"> + diff --git a/packages/devextreme/js/__internal/__tests__/draggable_dispose.test.ts b/packages/devextreme/js/__internal/__tests__/draggable_dispose.test.ts new file mode 100644 index 000000000000..e80ee4015270 --- /dev/null +++ b/packages/devextreme/js/__internal/__tests__/draggable_dispose.test.ts @@ -0,0 +1,19 @@ +import $ from '@js/core/renderer'; +import Sortable from '@js/ui/sortable'; + +describe('Draggable dispose safety', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + it('should not crash on _stopAnimator when _scrollAnimator is not initialized', () => { + const $container = $('
').appendTo(document.body); + const sortable = new Sortable($container, {}); + + (sortable as any)._scrollAnimator = undefined; + + expect(() => { + sortable.dispose(); + }).not.toThrow(); + }); +}); diff --git a/packages/devextreme/js/__internal/m_draggable.ts b/packages/devextreme/js/__internal/m_draggable.ts index 194eca2e53cb..a97a6967a661 100644 --- a/packages/devextreme/js/__internal/m_draggable.ts +++ b/packages/devextreme/js/__internal/m_draggable.ts @@ -439,7 +439,7 @@ class Draggable extends DOMComponent { } _stopAnimator() { - this._scrollAnimator.stop(); + this._scrollAnimator?.stop(); } _addWidgetPrefix(className?) { diff --git a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts index 0cca3309970e..92fc9d9a9eab 100644 --- a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts +++ b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts @@ -579,9 +579,6 @@ class Scheduler extends SchedulerOptionsBaseWidget { this.updateAppointmentDataSource(); this.updateOption('workSpace', args.fullName, value); break; - case 'renovateRender': - this.updateOption('workSpace', name, value); - break; case '_draggingMode': this.updateOption('workSpace', 'draggingMode', value); break; @@ -1491,8 +1488,6 @@ class Scheduler extends SchedulerOptionsBaseWidget { getHeaderHeight: () => utils.DOM.getHeaderHeight(this.header), onScrollEnd: () => this._appointments.updateResizableArea(), - // TODO: SSR does not work correctly with renovated render - renovateRender: this.isRenovatedRender(isVirtualScrolling), }, currentViewOptions); result.notifyScheduler = this.notifyScheduler; @@ -1511,10 +1506,6 @@ class Scheduler extends SchedulerOptionsBaseWidget { return result; } - private isRenovatedRender(isVirtualScrolling) { - return (this.option('renovateRender') && hasWindow()) || isVirtualScrolling; - } - private waitAsyncTemplate(callback) { if (this._options.silent('templatesRenderAsynchronously')) { const timer = setTimeout(() => { diff --git a/packages/devextreme/js/__internal/scheduler/utils/options/constants.ts b/packages/devextreme/js/__internal/scheduler/utils/options/constants.ts index c0aa187f34bb..bb3e1a938478 100644 --- a/packages/devextreme/js/__internal/scheduler/utils/options/constants.ts +++ b/packages/devextreme/js/__internal/scheduler/utils/options/constants.ts @@ -102,7 +102,6 @@ export const DEFAULT_SCHEDULER_OPTIONS: Properties = { export const DEFAULT_SCHEDULER_INTERNAL_OPTIONS: SchedulerInternalOptions = { indicatorTime: undefined, - renovateRender: true, editing: { // @ts-expect-error copy from default so that you can rewrite it ...DEFAULT_SCHEDULER_OPTIONS.editing, diff --git a/packages/devextreme/js/__internal/scheduler/utils/options/types.ts b/packages/devextreme/js/__internal/scheduler/utils/options/types.ts index eae5521500c5..9fe83fedd2b9 100644 --- a/packages/devextreme/js/__internal/scheduler/utils/options/types.ts +++ b/packages/devextreme/js/__internal/scheduler/utils/options/types.ts @@ -22,7 +22,6 @@ export type NormalizedView = View | AgendaView; export interface SchedulerInternalOptions { indicatorTime?: Date; - renovateRender: boolean; editing: Properties['editing']; _draggingMode: 'outlook' | 'default'; // TODO: legacy option property name diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/helpers/m_position_helper.ts b/packages/devextreme/js/__internal/scheduler/workspaces/helpers/m_position_helper.ts index 1c0cddeb719e..7f24e1868b6b 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/helpers/m_position_helper.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/helpers/m_position_helper.ts @@ -76,7 +76,6 @@ export const getGroupWidth = (groupIndex, viewDataProvider, options) => { const cellWidth = getCellWidth(DOMMetaData); let result = viewDataProvider.getCellCount(options) * cellWidth; - // TODO: refactor after deleting old render if (isVirtualScrolling) { const groupedData = viewDataProvider.groupedDataMap.dateTableGroupedMap; const groupLength = groupedData[groupIndex][0].length; diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts index 969eeda71374..22f1304c2268 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_agenda.ts @@ -132,7 +132,7 @@ class SchedulerAgenda extends WorkSpace { return this.option('agendaDuration') as number; } - protected override renderAllDayPanel() { return noop(); } + protected renderAllDayPanel() { return noop(); } protected override updateAllDayVisibility() { return noop(); } @@ -337,7 +337,7 @@ class SchedulerAgenda extends WorkSpace { this.$element().append(this._dateTableScrollable.$element()); } - protected override renderDateTable() { + protected renderDateTable() { this.renderTableBody({ container: getPublicElement(this._$dateTable), rowClass: DATE_TABLE_ROW_CLASS, @@ -371,7 +371,7 @@ class SchedulerAgenda extends WorkSpace { } // eslint-disable-next-line @typescript-eslint/no-unused-vars - protected override renderTableBody(options: any, delayCellTemplateRendering?: any) { + protected renderTableBody(options: any, delayCellTemplateRendering?: any) { const cellTemplates: any[] = []; const cellTemplateOpt = options.cellTemplate; @@ -431,7 +431,7 @@ class SchedulerAgenda extends WorkSpace { } } - protected override renderTimePanel() { + protected renderTimePanel() { this.renderTableBody({ container: getPublicElement(this.$timePanel), rowCount: this.getTimePanelRowCount(), @@ -532,6 +532,8 @@ class SchedulerAgenda extends WorkSpace { renovatedRenderSupported() { return false; } + override isVirtualScrolling() { return false; } + protected override getTotalViewDuration() { return dateUtils.dateToMilliseconds('day') * (this.option('intervalCount') as any); } diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts index cb5a4bca1c3b..00035d0d8e05 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_timeline.ts @@ -8,12 +8,11 @@ import { getOuterHeight, getOuterWidth, setHeight } from '@js/core/utils/size'; import { hasWindow } from '@js/core/utils/window'; // NOTE: Renovation component import. import { HeaderPanelTimelineComponent } from '@ts/scheduler/r1/components/index'; -import { formatWeekdayAndDay, timelineWeekUtils } from '@ts/scheduler/r1/utils/index'; +import { timelineWeekUtils } from '@ts/scheduler/r1/utils/index'; import { GROUP_HEADER_CONTENT_CLASS, GROUP_ROW_CLASS, - HEADER_CURRENT_TIME_CELL_CLASS, } from '../m_classes'; import tableCreatorModule from '../m_table_creator'; import timezoneUtils from '../m_utils_time_zone'; @@ -30,7 +29,6 @@ const HORIZONTAL_GROUPED_WORKSPACE_CLASS = 'dx-scheduler-work-space-horizontal-g const HEADER_PANEL_CELL_CLASS = 'dx-scheduler-header-panel-cell'; const HEADER_PANEL_WEEK_CELL_CLASS = 'dx-scheduler-header-panel-week-cell'; -const HEADER_ROW_CLASS = 'dx-scheduler-header-row'; const HORIZONTAL = 'horizontal'; const toMs = dateUtils.dateToMilliseconds; @@ -298,8 +296,6 @@ class SchedulerTimeline extends SchedulerWorkSpace { renderRTimeTable() {} - protected override renderGroupAllDayPanel() {} - // eslint-disable-next-line @typescript-eslint/no-unused-vars generateRenderOptions(argument?: any) { const options = super.generateRenderOptions(true); @@ -348,28 +344,18 @@ class SchedulerTimeline extends SchedulerWorkSpace { } protected override renderView() { - let groupCellTemplates; - if (!this.isRenovatedRender()) { - groupCellTemplates = this.renderGroupHeader(); - } - this.renderWorkSpace(); - - if (this.isRenovatedRender()) { - this.virtualScrollingDispatcher.updateDimensions(); - } + this.virtualScrollingDispatcher.updateDimensions(); this._shader = new HorizontalShader(this); this.$sidebarTable.appendTo(this._sidebarScrollable.$content()); - if (this.isRenovatedRender() && this.isVerticalGroupedWorkSpace()) { + if (this.isVerticalGroupedWorkSpace()) { this.renderRGroupPanel(); } this.updateHeaderEmptyCellWidth(); - - this.applyCellTemplates(groupCellTemplates); } protected override setHorizontalGroupHeaderCellsHeight() { return noop(); } @@ -397,76 +383,6 @@ class SchedulerTimeline extends SchedulerWorkSpace { .map((_, groupIndex) => columnCountPerGroup * groupIndex + currentTimeColumnIndex); } - // -------------- - // These methods should be deleted when we get rid of old render - // -------------- - - protected override renderTimePanel() { return noop(); } - - protected override renderAllDayPanel() { return noop(); } - - protected override createAllDayPanelElements() { return noop(); } - - protected override renderDateHeader() { - const $headerRow = super.renderDateHeader(); - if (this.needRenderWeekHeader()) { - const firstViewDate = new Date(this.getStartViewDate()); - let currentDate = new Date(firstViewDate); - - const $cells: any[] = []; - const groupCount = this._getGroupCount(); - const cellCountInDay = this.getCellCountInDay(); - const colSpan = this.isGroupedByDate() - ? cellCountInDay * groupCount - : cellCountInDay; - const cellTemplate: any = this.option('dateCellTemplate'); - - const horizontalGroupCount = this._isHorizontalGroupedWorkSpace() && !this.isGroupedByDate() - ? groupCount - : 1; - const cellsInGroup = this.viewDataProvider.viewDataGenerator.daysInInterval * (this.option('intervalCount') as any); - - const cellsCount = cellsInGroup * horizontalGroupCount; - - for (let templateIndex = 0; templateIndex < cellsCount; templateIndex++) { - const $th = $(''); - const text = formatWeekdayAndDay(currentDate); - - if (cellTemplate) { - const templateOptions = { - model: { - text, - date: new Date(currentDate), - ...this.getGroupsForDateHeaderTemplate(templateIndex, colSpan), - }, - container: $th, - index: templateIndex, - }; - - cellTemplate.render(templateOptions); - } else { - $th.text(text); - } - - $th - .addClass(HEADER_PANEL_CELL_CLASS) - .addClass(HEADER_PANEL_WEEK_CELL_CLASS) - .attr('colSpan', colSpan); - - $cells.push($th); - - if ((templateIndex % cellsInGroup) === (cellsInGroup - 1)) { - currentDate = new Date(firstViewDate); - } else { - this.incrementDate(currentDate); - } - } - - const $row = $('').addClass(HEADER_ROW_CLASS).append($cells as any); - $headerRow.before($row); - } - } - protected override renderIndicator(height, rtlOffset, $container, groupCount) { let $indicator; const width = this.getIndicationWidth(); @@ -504,18 +420,6 @@ class SchedulerTimeline extends SchedulerWorkSpace { groupByDate, ); } - - // Old render methods. - // TODO Old render: delete these methods with the old render. - - protected override setCurrentTimeCells(): void { - const timePanelCells = this.getTimePanelCells(); - const currentTimeCellIndices = this.getCurrentTimePanelCellIndices(); - currentTimeCellIndices.forEach((timePanelCellIndex) => { - timePanelCells.eq(timePanelCellIndex) - .addClass(HEADER_CURRENT_TIME_CELL_CLASS); - }); - } } registerComponent('dxSchedulerTimeline', SchedulerTimeline as any); diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts index 557efeb59d78..29001e4082c5 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts @@ -9,7 +9,6 @@ import { } from '@js/common/core/events/drag'; import pointerEvents from '@js/common/core/events/pointer'; import { addNamespace, isMouseEvent } from '@js/common/core/events/utils/index'; -import messageLocalization from '@js/common/core/localization/message'; import domAdapter from '@js/core/dom_adapter'; import { getPublicElement } from '@js/core/element'; import $ from '@js/core/renderer'; @@ -59,7 +58,6 @@ import AppointmentDragBehavior from '../m_appointment_drag_behavior'; import { APPOINTMENT_DRAG_SOURCE_CLASS, DATE_TABLE_CLASS, - DATE_TABLE_ROW_CLASS, FIXED_CONTAINER_CLASS, GROUP_HEADER_CONTENT_CLASS, GROUP_ROW_CLASS, @@ -128,14 +126,11 @@ const WORKSPACE_WITH_GROUP_BY_DATE_CLASS = 'dx-scheduler-work-space-group-by-dat const WORKSPACE_WITH_ODD_CELLS_CLASS = 'dx-scheduler-work-space-odd-cells'; const TIME_PANEL_CELL_CLASS = 'dx-scheduler-time-panel-cell'; -const TIME_PANEL_ROW_CLASS = 'dx-scheduler-time-panel-row'; const ALL_DAY_PANEL_CLASS = 'dx-scheduler-all-day-panel'; const ALL_DAY_TABLE_CLASS = 'dx-scheduler-all-day-table'; const ALL_DAY_CONTAINER_CLASS = 'dx-scheduler-all-day-appointments'; -const ALL_DAY_TITLE_CLASS = 'dx-scheduler-all-day-title'; const ALL_DAY_TABLE_CELL_CLASS = 'dx-scheduler-all-day-table-cell'; -const ALL_DAY_TABLE_ROW_CLASS = 'dx-scheduler-all-day-table-row'; const WORKSPACE_WITH_ALL_DAY_CLASS = 'dx-scheduler-work-space-all-day'; const WORKSPACE_WITH_COLLAPSED_ALL_DAY_CLASS = 'dx-scheduler-work-space-all-day-collapsed'; @@ -146,7 +141,6 @@ const VERTICAL_SIZES_CLASS = 'dx-scheduler-cell-sizes-vertical'; const HEADER_PANEL_CLASS = 'dx-scheduler-header-panel'; const HEADER_PANEL_CELL_CLASS = 'dx-scheduler-header-panel-cell'; -const HEADER_ROW_CLASS = 'dx-scheduler-header-row'; const GROUP_HEADER_CLASS = 'dx-scheduler-group-header'; const DATE_TABLE_CELL_CLASS = 'dx-scheduler-date-table-cell'; @@ -175,8 +169,6 @@ const SCHEDULER_TABLE_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, 'd const SCHEDULER_CELL_DXPOINTERMOVE_EVENT_NAME = addNamespace(pointerEvents.move, 'dxSchedulerDateTable'); -const CELL_DATA = 'dxCellData'; - const DATE_TABLE_MIN_CELL_WIDTH = 75; const DAY_MS = toMs('day'); @@ -855,16 +847,12 @@ class SchedulerWorkSpace extends Widget { }); } - isRenovatedRender() { - return this.renovatedRenderSupported() && this.option('renovateRender'); - } - private isVirtualModeOn() { return this.option('scrolling.mode') === 'virtual'; } isVirtualScrolling() { - return this.isRenovatedRender() && this.isVirtualModeOn(); + return this.renovatedRenderSupported() && this.isVirtualModeOn(); } private initVirtualScrolling() { @@ -1326,9 +1314,7 @@ class SchedulerWorkSpace extends Widget { }; } - // TODO: necessary for old render - // eslint-disable-next-line @typescript-eslint/no-unused-vars - protected getDateGenerationOptions(isOldRender = false) { + protected getDateGenerationOptions() { return { startDayHour: this.option('startDayHour'), endDayHour: this.option('endDayHour'), @@ -2067,42 +2053,6 @@ class SchedulerWorkSpace extends Widget { }); } - // TODO: remove along with old render - private oldRenderGetAllDayCellData(groupIndex) { - return (cell, rowIndex, columnIndex) => { - const validColumnIndex = columnIndex % this._getCellCount(); - const options = this.getDateGenerationOptions(true); - let startDate = this.viewDataProvider.viewDataGenerator.getDateByCellIndices( - options as any, - rowIndex, - validColumnIndex, - ); - - startDate = dateUtils.trimTime(startDate); - - let validGroupIndex = groupIndex || 0; - - if (this.isGroupedByDate()) { - validGroupIndex = Math.floor(columnIndex % this._getGroupCount()); - } else if (this._isHorizontalGroupedWorkSpace()) { - validGroupIndex = Math.floor(columnIndex / this._getCellCount()); - } - - const data: any = { - startDate, - endDate: startDate, - allDay: true, - groupIndex: validGroupIndex, - groups: getLeafGroupValues(this.resourceManager.groupsLeafs, validGroupIndex), - }; - - return { - key: CELL_DATA, - value: data, - }; - }; - } - // ------------ // Methods that render renovated components. Useless in renovation // ------------ @@ -2345,7 +2295,6 @@ class SchedulerWorkSpace extends Widget { mode: 'standard', }, allDayPanelMode: 'all', - renovateRender: true, height: undefined, draggingMode: 'outlook', onScrollEnd: () => {}, @@ -2382,7 +2331,7 @@ class SchedulerWorkSpace extends Widget { break; case 'groupOrientation': this.initGroupedStrategy(); - this.createAllDayPanelElements(); + this.createRAllDayPanelElements(); this.removeAllDayElements(); this.cleanWorkSpace(); this.toggleGroupByDateClass(); @@ -2393,9 +2342,6 @@ class SchedulerWorkSpace extends Widget { this.removeAllDayElements(); this.initGrouping(); this.repaint(); - } else if (!this.isRenovatedRender()) { - this.updateAllDayVisibility(); - this.updateScrollable(); } else { this.renderWorkSpace(); } @@ -2443,7 +2389,6 @@ class SchedulerWorkSpace extends Widget { break; case 'selectedCellData': break; - case 'renovateRender': case 'scrolling': this.repaint(); break; @@ -2610,11 +2555,7 @@ class SchedulerWorkSpace extends Widget { this.initAllDayPanelElements(); - if (this.isRenovatedRender()) { - this.createRAllDayPanelElements(); - } else { - this.createAllDayPanelElements(); - } + this.createRAllDayPanelElements(); this.$timePanel = $('').addClass(TIME_PANEL_CLASS).attr('aria-hidden', true); this._$dateTable = $('
').attr('aria-hidden', true); @@ -2756,8 +2697,6 @@ class SchedulerWorkSpace extends Widget { for (let i = 0; i < groupCount; i++) { this.addTableClass(this.allDayTables[i], ALL_DAY_TABLE_CLASS); } - } else if (!this.isRenovatedRender()) { - this.addTableClass(this.$allDayTable, ALL_DAY_TABLE_CLASS); } } @@ -2806,20 +2745,12 @@ class SchedulerWorkSpace extends Widget { } protected renderView() { - if (this.isRenovatedRender()) { - if (this.isVerticalGroupedWorkSpace()) { - this.renderRGroupPanel(); - } - } else { - this.applyCellTemplates( - this.renderGroupHeader(), - ); + if (this.isVerticalGroupedWorkSpace()) { + this.renderRGroupPanel(); } this.renderWorkSpace(); - if (this.isRenovatedRender()) { - this.virtualScrollingDispatcher.updateDimensions(); - } + this.virtualScrollingDispatcher.updateDimensions(); this.updateGroupTableHeight(); this.updateHeaderEmptyCellWidth(); @@ -2890,15 +2821,6 @@ class SchedulerWorkSpace extends Widget { this.cache.clear(); this.cleanTableWidths(); this.cellsSelectionState.clearSelectedAndFocusedCells(); - if (!this.isRenovatedRender()) { - this._$thead.empty(); - this._$dateTable.empty(); - this.$timePanel.empty(); - this._$groupTable.empty(); - - this.$allDayTable?.empty(); - this.$sidebarTable?.empty(); - } this._shader?.clean(); @@ -2961,44 +2883,6 @@ class SchedulerWorkSpace extends Widget { this.dragBehavior?.updateDragSource(); } - // ---------------- - // These methods should be deleted when we get rid of old render - // ---------------- - - protected createAllDayPanelElements() { - const groupCount = this._getGroupCount(); - - if (this.isVerticalGroupedWorkSpace() && groupCount !== 0) { - for (let i = 0; i < groupCount; i++) { - const $allDayTitle = $('
') - .addClass(ALL_DAY_TITLE_CLASS) - .text(messageLocalization.format('dxScheduler-allDay')); - - this.allDayTitles.push($allDayTitle); - - this.$allDayTable = $('
').attr('aria-hidden', true); - this.allDayTables.push(this.$allDayTable); - - this._$allDayPanel = $('
') - .addClass(ALL_DAY_PANEL_CLASS) - .append(this.$allDayTable); - - this.allDayPanels.push(this._$allDayPanel); - } - } else { - this.$allDayTitle = $('
') - .addClass(ALL_DAY_TITLE_CLASS) - .text(messageLocalization.format('dxScheduler-allDay')) - .appendTo(this.$element()); - - this.$allDayTable = $('
').attr('aria-hidden', true); - - this._$allDayPanel = $('
') - .addClass(ALL_DAY_PANEL_CLASS) - .append(this.$allDayTable); - } - } - renderWorkSpace({ generateNewData, renderComponents, @@ -3007,16 +2891,7 @@ class SchedulerWorkSpace extends Widget { this.viewDataProvider.update(this.generateRenderOptions(), generateNewData); - if (this.isRenovatedRender()) { - this.renderRWorkSpace(renderComponents); - } else { - // TODO Old render: Delete this old render block after the SSR tests check. - this.renderDateHeader(); - this.renderTimePanel(); - this.renderGroupAllDayPanel(); - this.renderDateTable(); - this.renderAllDayPanel(); - } + this.renderRWorkSpace(renderComponents); this.initPositionHelper(); } @@ -3062,72 +2937,6 @@ class SchedulerWorkSpace extends Widget { ); } - protected renderDateHeader(): any { - const container = this.getDateHeaderContainer(); - const $headerRow = $('
').addClass(HEADER_ROW_CLASS); - const count = this._getCellCount(); - const cellTemplate = this.getDateHeaderTemplate(); - const repeatCount = this.getCalculateHeaderCellRepeatCount(); - const templateCallbacks = []; - const groupByDate = this.isGroupedByDate(); - - if (!groupByDate) { - for (let rowIndex = 0; rowIndex < repeatCount; rowIndex++) { - for (let columnIndex = 0; columnIndex < count; columnIndex++) { - const templateIndex = rowIndex * count + columnIndex; - this.renderDateHeaderTemplate($headerRow, columnIndex, templateIndex, cellTemplate, templateCallbacks); - } - } - - container.append($headerRow); - } else { - const colSpan = groupByDate ? this._getGroupCount() : 1; - - for (let columnIndex = 0; columnIndex < count; columnIndex++) { - const templateIndex = columnIndex * repeatCount; - const cellElement = this.renderDateHeaderTemplate($headerRow, columnIndex, templateIndex, cellTemplate, templateCallbacks); - cellElement.attr('colSpan', colSpan); - } - - container.prepend($headerRow); - } - - this.applyCellTemplates(templateCallbacks); - - return $headerRow; - } - - private renderDateHeaderTemplate(container, panelCellIndex, templateIndex, cellTemplate, templateCallbacks) { - const validTemplateIndex = this.isGroupedByDate() - ? Math.floor(templateIndex / this._getGroupCount()) - : templateIndex; - const { completeDateHeaderMap } = this.viewDataProvider; - - const { - text, startDate: date, - } = completeDateHeaderMap[completeDateHeaderMap.length - 1][validTemplateIndex]; - const $cell = $('
') - .addClass(this.getHeaderPanelCellClass(panelCellIndex)) - .attr('title', text); - - if (cellTemplate?.render) { - templateCallbacks.push(cellTemplate.render.bind(cellTemplate, { - model: { - text, - date, - ...this.getGroupsForDateHeaderTemplate(templateIndex), - }, - index: templateIndex, - container: getPublicElement($cell), - })); - } else { - $cell.text(text); - } - - container.append($cell); - return $cell; - } - protected getGroupsForDateHeaderTemplate(templateIndex, indexMultiplier = 1) { if (this._isHorizontalGroupedWorkSpace() && !this.isGroupedByDate()) { const groupIndex = this.getGroupIndex(0, templateIndex * indexMultiplier); @@ -3148,147 +2957,9 @@ class SchedulerWorkSpace extends Widget { return this._groupedStrategy.addAdditionalGroupCellClasses(cellClass, i + 1, undefined, undefined, this.isGroupedByDate()); } - protected renderAllDayPanel(index?: any) { - let cellCount = this._getCellCount(); - - if (!this.isVerticalGroupedWorkSpace()) { - cellCount *= this._getGroupCount() || 1; - } - - const cellTemplates = this.renderTableBody({ - container: this.allDayPanels.length ? getPublicElement(this.allDayTables[index]) : getPublicElement(this.$allDayTable), - rowCount: 1, - cellCount, - cellClass: this.getAllDayPanelCellClass.bind(this), - rowClass: ALL_DAY_TABLE_ROW_CLASS, - cellTemplate: this.option('dataCellTemplate'), - // TODO: remove along with old render - getCellData: this.oldRenderGetAllDayCellData(index), - groupIndex: index, - }, true); - - this.updateAllDayVisibility(); - this.updateScrollable(); - this.applyCellTemplates(cellTemplates); - } - - protected renderGroupAllDayPanel() { - if (this.isVerticalGroupedWorkSpace()) { - const groupCount = this._getGroupCount(); - - for (let i = 0; i < groupCount; i++) { - this.renderAllDayPanel(i); - } - } - } - - private getAllDayPanelCellClass(i, j) { - const cellClass = `${ALL_DAY_TABLE_CELL_CLASS} ${HORIZONTAL_SIZES_CLASS}`; - - return this._groupedStrategy.addAdditionalGroupCellClasses(cellClass, j + 1); - } - - protected renderTimePanel() { - const repeatCount = this._groupedStrategy.calculateTimeCellRepeatCount(); - - const getTimeCellGroups = (rowIndex) => { - if (!this.isVerticalGroupedWorkSpace()) { - return {}; - } - - const groupIndex = this.getGroupIndex(rowIndex, 0); - const groups = getLeafGroupValues(this.resourceManager.groupsLeafs, groupIndex); - - return { groupIndex, groups }; - }; - - const getData = (rowIndex, field) => { - let allDayPanelsCount = 0; - if (this.isAllDayPanelVisible) { - allDayPanelsCount = 1; - } - if (this.isGroupedAllDayPanel()) { - allDayPanelsCount = Math.ceil((rowIndex + 1) / this.getRowCount()); - } - - const validRowIndex = rowIndex + allDayPanelsCount; - - return this.viewDataProvider.completeTimePanelMap[validRowIndex][field]; - }; - - this.renderTableBody({ - container: getPublicElement(this.$timePanel), - rowCount: this.getTimePanelRowCount() * repeatCount, - cellCount: 1, - cellClass: this.getTimeCellClass.bind(this), - rowClass: TIME_PANEL_ROW_CLASS, - cellTemplate: this.option('timeCellTemplate'), - getCellText: (rowIndex) => getData(rowIndex, 'text'), - getCellDate: (rowIndex) => getData(rowIndex, 'startDate'), - groupCount: this._getCellCount(), - allDayElements: this.insertAllDayRowsIntoDateTable() ? this.allDayTitles : undefined, - getTemplateData: getTimeCellGroups.bind(this), - }); - } - - private getTimeCellClass(i) { - const cellClass = `${TIME_PANEL_CELL_CLASS} ${VERTICAL_SIZES_CLASS}`; - - return this.isVerticalGroupedWorkSpace() - ? this._groupedStrategy.addAdditionalGroupCellClasses(cellClass, i, i) - : cellClass; - } - - protected renderDateTable() { - const groupCount = this._getGroupCount(); - this.renderTableBody({ - container: getPublicElement(this._$dateTable), - rowCount: this.getTotalRowCount(groupCount), - cellCount: this.getTotalCellCount(groupCount), - cellClass: this.getDateTableCellClass.bind(this), - rowClass: DATE_TABLE_ROW_CLASS, - cellTemplate: this.option('dataCellTemplate'), - // TODO: remove along with old render - getCellData: (_, rowIndex, columnIndex) => { - const isGroupedAllDayPanel = this.isGroupedAllDayPanel(); - let validRowIndex = rowIndex; - - if (isGroupedAllDayPanel) { - const rowCount = this.getRowCount(); - const allDayPanelsCount = Math.ceil(rowIndex / rowCount); - validRowIndex += allDayPanelsCount; - } - - const { cellData } = this.viewDataProvider.viewDataMap.dateTableMap[validRowIndex][columnIndex]; - - return { - value: this.normalizeCellData(cellData), - fullValue: cellData, - key: CELL_DATA, - }; - }, - allDayElements: this.insertAllDayRowsIntoDateTable() ? this.allDayPanels : undefined, - groupCount, - groupByDate: this.option('groupByDate'), - }); - } - protected insertAllDayRowsIntoDateTable() { return this._groupedStrategy.insertAllDayRowsIntoDateTable(); } - - protected renderTableBody(options, delayCellTemplateRendering?: any): any { - let result: any[] = []; - if (!delayCellTemplateRendering) { - this.applyCellTemplates( - tableCreator.makeTable(options), - ); - } else { - result = tableCreator.makeTable(options); - } - - return result; - } } const createDragBehaviorConfig = ( diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_day.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_day.ts index 9ff8c6a7f1d8..1d6c689f2c7b 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_day.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_day.ts @@ -12,10 +12,6 @@ class SchedulerWorkSpaceDay extends SchedulerWorkSpaceVertical { return DAY_CLASS; } - protected override renderDateHeader() { - return this.option('intervalCount') === 1 ? null : super.renderDateHeader(); - } - renderRHeaderPanel() { if (this.option('intervalCount') === 1) { super.renderRHeaderPanel(false); diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_indicator.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_indicator.ts index 361e5ab59195..f58cd7101b86 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_indicator.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_indicator.ts @@ -15,7 +15,6 @@ import SchedulerWorkSpace from './m_work_space'; const toMs = dateUtils.dateToMilliseconds; const SCHEDULER_DATE_TIME_INDICATOR_CLASS = 'dx-scheduler-date-time-indicator'; -const TIME_PANEL_CURRENT_TIME_CELL_CLASS = 'dx-scheduler-time-panel-current-time-cell'; class SchedulerWorkSpaceIndicator extends SchedulerWorkSpace { private indicatorInterval: any; @@ -161,15 +160,13 @@ class SchedulerWorkSpaceIndicator extends SchedulerWorkSpace { renderCurrentDateTimeIndication(): void { this.renderCurrentDateTimeLineAndShader(); - if (this.isRenovatedRender()) { - this.renderWorkSpace({ - generateNewData: true, - renderComponents: { - header: true, - timePanel: true, - }, - }); - } + this.renderWorkSpace({ + generateNewData: true, + renderComponents: { + header: true, + timePanel: true, + }, + }); } renderCurrentDateTimeLineAndShader(): void { @@ -303,21 +300,6 @@ class SchedulerWorkSpaceIndicator extends SchedulerWorkSpace { const rtlOffset = this.getRtlOffset(this.getCellWidth()); this.renderIndicator(height, rtlOffset, $container, groupCount); - - // TODO Old render: delete this code with the old render. - if (!this.isRenovatedRender()) { - this.setCurrentTimeCells(); - } - } - - // TODO Old render: replace base call methods by these after the deleting of the old render. - protected setCurrentTimeCells(): void { - const timePanelCells = this.getTimePanelCells(); - const currentTimeCellIndices = this.getCurrentTimePanelCellIndices(); - currentTimeCellIndices.forEach((timePanelCellIndex) => { - timePanelCells.eq(timePanelCellIndex) - .addClass(TIME_PANEL_CURRENT_TIME_CELL_CLASS); - }); } } diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_month.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_month.ts index fb534567bceb..c4ff71b0767b 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_month.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_month.ts @@ -13,11 +13,6 @@ import SchedulerWorkSpace from './m_work_space_indicator'; const MONTH_CLASS = 'dx-scheduler-work-space-month'; -const DATE_TABLE_CURRENT_DATE_CLASS = 'dx-scheduler-date-table-current-date'; -const DATE_TABLE_CELL_TEXT_CLASS = 'dx-scheduler-date-table-cell-text'; -const DATE_TABLE_FIRST_OF_MONTH_CLASS = 'dx-scheduler-date-table-first-of-month'; -const DATE_TABLE_OTHER_MONTH_DATE_CLASS = 'dx-scheduler-date-table-other-month'; - const toMs = dateUtils.dateToMilliseconds; class SchedulerWorkSpaceMonth extends SchedulerWorkSpace { @@ -155,35 +150,6 @@ class SchedulerWorkSpaceMonth extends SchedulerWorkSpace { } protected override updateAllDayVisibility() { return noop(); } - - // -------------- - // These methods should be deleted when we get rid of old render - // -------------- - - protected override renderTimePanel() { return noop(); } - - protected override renderAllDayPanel() { return noop(); } - - private setMonthClassesToCell($cell, data) { - $cell - .toggleClass(DATE_TABLE_CURRENT_DATE_CLASS, data.isCurrentDate) - .toggleClass(DATE_TABLE_FIRST_OF_MONTH_CLASS, data.isFirstDayMonthHighlighting) - .toggleClass(DATE_TABLE_OTHER_MONTH_DATE_CLASS, data.otherMonth); - } - - protected override createAllDayPanelElements() {} - - protected override renderTableBody(options) { - options.getCellText = (rowIndex, columnIndex) => { - const date = this.viewDataProvider.completeViewDataMap[rowIndex][columnIndex].startDate; - - return monthUtils.getCellText(date, this.option('intervalCount') as any); - }; - options.getCellTextClass = DATE_TABLE_CELL_TEXT_CLASS; - options.setAdditionalClasses = this.setMonthClassesToCell.bind(this); - - super.renderTableBody(options); - } } registerComponent('dxSchedulerWorkSpaceMonth', SchedulerWorkSpaceMonth as any); diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/view_model/m_view_data_generator.ts b/packages/devextreme/js/__internal/scheduler/workspaces/view_model/m_view_data_generator.ts index 9c5161a4060a..fd14dd788665 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/view_model/m_view_data_generator.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/view_model/m_view_data_generator.ts @@ -550,7 +550,6 @@ export class ViewDataGenerator { }; } - // TODO: make it protected with old render public getDateByCellIndices( options: any, rowIndex: number, diff --git a/packages/devextreme/testing/tests/DevExpress.serverSide/scheduler.tests.js b/packages/devextreme/testing/tests/DevExpress.serverSide/scheduler.tests.js index bf5a2cc7ee2e..28835611bb7f 100644 --- a/packages/devextreme/testing/tests/DevExpress.serverSide/scheduler.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.serverSide/scheduler.tests.js @@ -1,5 +1,4 @@ import $ from 'jquery'; -import { createWrapper } from '../../helpers/scheduler/helpers.js'; QUnit.testStart(() => { const markup = @@ -14,16 +13,6 @@ QUnit.testStart(() => { QUnit.module('View switcher server markup'); -QUnit.test('RenovateRender in workspace should be false on server', async function(assert) { - const scheduler = await createWrapper({ - renovateRender: true, - }); - - const workSpace = scheduler.instance.getWorkSpace(); - - assert.notOk(workSpace.option('renovateRender', false)); -}); - import '../DevExpress.ui.widgets.scheduler/workSpace.markup-0.tests.js'; import '../DevExpress.ui.widgets.scheduler/workSpace.markup-1.tests.js'; import '../DevExpress.ui.widgets.scheduler/common.markup.tests.js'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.timeLines.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.timeLines.tests.js index 2ef73f37db74..d0378762ab7d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.timeLines.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.timeLines.tests.js @@ -554,44 +554,41 @@ module('Integration: Appointments in Timeline views', { } }); - [true, false].forEach((isRenovatedRender) => { - test(`Multi-day appointment should be rendered when started after endDayHour (T819852) when renovateRender is ${isRenovatedRender}`, async function(assert) { - const data = [{ - text: 'Default appt', - startDate: new Date('2019-10-03T06:00:00.000'), - endDate: new Date('2019-10-03T18:00:00.000'), - }, { - text: 'Appt with end before endDayHour', - startDate: new Date('2019-10-02T17:00:00.000'), - endDate: new Date('2019-10-03T17:00:00.000'), - }, { - text: 'Appt with end before startDayHour', - startDate: new Date('2019-10-02T17:30:00.000'), - endDate: new Date('2019-10-02T18:30:00.000'), - }, { - text: 'Appt with end after endDayHour', - startDate: new Date('2019-10-02T18:55:00.000'), - endDate: new Date('2019-10-03T19:00:00.000'), - }]; - - const scheduler = await createInstance({ - dataSource: data, - views: ['timelineWeek'], - currentView: 'timelineWeek', - currentDate: new Date(2019, 9, 4), - cellDuration: 660, - startDayHour: 7, - endDayHour: 18, - height: 580, - renovateRender: scrollingMode === 'virtual' || isRenovatedRender, - width: 800 - }); + test('Multi-day appointment should be rendered when started after endDayHour (T819852)', async function(assert) { + const data = [{ + text: 'Default appt', + startDate: new Date('2019-10-03T06:00:00.000'), + endDate: new Date('2019-10-03T18:00:00.000'), + }, { + text: 'Appt with end before endDayHour', + startDate: new Date('2019-10-02T17:00:00.000'), + endDate: new Date('2019-10-03T17:00:00.000'), + }, { + text: 'Appt with end before startDayHour', + startDate: new Date('2019-10-02T17:30:00.000'), + endDate: new Date('2019-10-02T18:30:00.000'), + }, { + text: 'Appt with end after endDayHour', + startDate: new Date('2019-10-02T18:55:00.000'), + endDate: new Date('2019-10-03T19:00:00.000'), + }]; - assert.strictEqual(scheduler.appointments.getAppointmentCount(), 4, 'Appointments are rendered'); - assert.strictEqual($(scheduler.appointments.getAppointment(2)).position().left, $(scheduler.appointments.getAppointment(3)).position().left, 'Appointments have same left coordinate'); - assert.strictEqual($(scheduler.appointments.getAppointment(2)).innerWidth(), $(scheduler.appointments.getAppointment(3)).innerWidth(), 'Appointments with equal coords have same width'); - assert.strictEqual($(scheduler.appointments.getAppointment(3)).innerWidth(), $(scheduler.appointments.getAppointment(3)).innerWidth(), 'Appointments with defferent coords have same width'); + const scheduler = await createInstance({ + dataSource: data, + views: ['timelineWeek'], + currentView: 'timelineWeek', + currentDate: new Date(2019, 9, 4), + cellDuration: 660, + startDayHour: 7, + endDayHour: 18, + height: 580, + width: 800 }); + + assert.strictEqual(scheduler.appointments.getAppointmentCount(), 4, 'Appointments are rendered'); + assert.strictEqual($(scheduler.appointments.getAppointment(2)).position().left, $(scheduler.appointments.getAppointment(3)).position().left, 'Appointments have same left coordinate'); + assert.strictEqual($(scheduler.appointments.getAppointment(2)).innerWidth(), $(scheduler.appointments.getAppointment(3)).innerWidth(), 'Appointments with equal coords have same width'); + assert.strictEqual($(scheduler.appointments.getAppointment(3)).innerWidth(), $(scheduler.appointments.getAppointment(3)).innerWidth(), 'Appointments with defferent coords have same width'); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js index 05e0d4a991c8..e786db190674 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.week.based.views.tests.js @@ -145,9 +145,7 @@ module('Integration: Appointment Day, Week views', { const cell = scheduler.workSpace.getCell(2, 0).get(0); - const relatedCellData = !scheduler.instance.option('renovateRender') - ? dataUtils.data(cell, 'dxCellData').startDate - : scheduler.instance.getWorkSpace().getCellData($(cell)).startDate; + const relatedCellData = scheduler.instance.getWorkSpace().getCellData($(cell)).startDate; assert.equal(relatedCellData.getTime(), new Date(2015, 1, 9, 1).getTime(), 'Cell start date is OK'); } finally { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js index 74ce69e5be46..a449ebb290b6 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.tests.js @@ -764,32 +764,29 @@ QUnit.module('View with configuration', () => { assert.roughEqual(scrollable.scrollHeight(), dateTableHeight, 1.01, 'Scroll height > minWorspaceHeight'); }); - [true, false].forEach((renovateRender) => { - QUnit.test(`Workspace vertical scroll should be equal to the dataTable height if grouping, view: '${viewName}', view.intervalCount=${intervalCount}, height: ${height}, renovateRender: ${renovateRender}`, async function(assert) { - const scheduler = await createWrapper({ - height: height, - views: [{ - type: viewName, - name: viewName, - intervalCount: intervalCount - }], - currentView: viewName, - groups: ['any'], - resources: [{ - fieldExpr: 'any', - dataSource: [ - { text: 'Group_1', id: 1 }, - { text: 'Group_2', id: 2 }, - { text: 'Group_3', id: 3 } - ], - }], - renovateRender, - }); - - const dateTableHeight = scheduler.workSpace.getDateTableHeight(); - const scrollable = scheduler.workSpace.getScrollable(); - assert.roughEqual(scrollable.scrollHeight(), dateTableHeight, 1.01, 'Scroll height > minWorspaceHeight'); + QUnit.test(`Workspace vertical scroll should be equal to the dataTable height if grouping, view: '${viewName}', view.intervalCount=${intervalCount}, height: ${height}`, async function(assert) { + const scheduler = await createWrapper({ + height: height, + views: [{ + type: viewName, + name: viewName, + intervalCount: intervalCount + }], + currentView: viewName, + groups: ['any'], + resources: [{ + fieldExpr: 'any', + dataSource: [ + { text: 'Group_1', id: 1 }, + { text: 'Group_2', id: 2 }, + { text: 'Group_3', id: 3 } + ], + }], }); + + const dateTableHeight = scheduler.workSpace.getDateTableHeight(); + const scrollable = scheduler.workSpace.getScrollable(); + assert.roughEqual(scrollable.scrollHeight(), dateTableHeight, 1.01, 'Scroll height > minWorspaceHeight'); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.multiWeekAppointments.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.multiWeekAppointments.tests.js index 4312e22de452..5b8d9374916f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.multiWeekAppointments.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.multiWeekAppointments.tests.js @@ -575,60 +575,57 @@ QUnit.test('Grouped multi-week appointments should have a correct left offset', }); -[true, false].forEach((renovateRender) => { - QUnit.test(`Grouped multi-week appointments should have a correct left offset in rtl mode when renovateRender is ${renovateRender}`, async function(assert) { +QUnit.test('Grouped multi-week appointments should have a correct left offset in rtl mode', async function(assert) { - await this.createInstance({ width: 1052 }); + await this.createInstance({ width: 1052 }); - mockWorkSpaceRendering.call(this, this.instance, 50, [700, 350, 0]); + mockWorkSpaceRendering.call(this, this.instance, 50, [700, 350, 0]); - this.instance.option({ - views: ['month'], - currentView: 'month', - firstDayOfWeek: 1, - currentDate: new Date(2015, 1, 9), - rtlEnabled: true, - dataSource: [], - resources: [ - { - field: 'roomId', - dataSource: [ - { id: 1, text: 'One' }, - { id: 2, text: 'Two' }, - { id: 3, text: 'Three' } - ] - } - ], - groups: ['roomId'], - renovateRender, - }); - await waitAsync(0); - - this.instance.option('dataSource', [{ - text: 'a', - startDate: new Date(2015, 1, 10), - endDate: new Date(2015, 1, 25), - roomId: [1, 2] - }]); - await waitAsync(0); - - const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - const leftOffsets = [ - translator.locate($appointments.eq(0)).left, - translator.locate($appointments.eq(1)).left, - translator.locate($appointments.eq(2)).left, - translator.locate($appointments.eq(3)).left, - translator.locate($appointments.eq(4)).left, - translator.locate($appointments.eq(5)).left - ].sort(); - - assert.roughEqual(leftOffsets[0], 350, 1); - assert.roughEqual(leftOffsets[1], 350, 1); - assert.roughEqual(leftOffsets[2], 600, 1); - assert.roughEqual(leftOffsets[3], 700, 1); - assert.roughEqual(leftOffsets[4], 700, 1); - assert.roughEqual(leftOffsets[5], 950, 1); + this.instance.option({ + views: ['month'], + currentView: 'month', + firstDayOfWeek: 1, + currentDate: new Date(2015, 1, 9), + rtlEnabled: true, + dataSource: [], + resources: [ + { + field: 'roomId', + dataSource: [ + { id: 1, text: 'One' }, + { id: 2, text: 'Two' }, + { id: 3, text: 'Three' } + ] + } + ], + groups: ['roomId'], }); + await waitAsync(0); + + this.instance.option('dataSource', [{ + text: 'a', + startDate: new Date(2015, 1, 10), + endDate: new Date(2015, 1, 25), + roomId: [1, 2] + }]); + await waitAsync(0); + + const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); + const leftOffsets = [ + translator.locate($appointments.eq(0)).left, + translator.locate($appointments.eq(1)).left, + translator.locate($appointments.eq(2)).left, + translator.locate($appointments.eq(3)).left, + translator.locate($appointments.eq(4)).left, + translator.locate($appointments.eq(5)).left + ].sort(); + + assert.roughEqual(leftOffsets[0], 350, 1); + assert.roughEqual(leftOffsets[1], 350, 1); + assert.roughEqual(leftOffsets[2], 600, 1); + assert.roughEqual(leftOffsets[3], 700, 1); + assert.roughEqual(leftOffsets[4], 700, 1); + assert.roughEqual(leftOffsets[5], 950, 1); }); QUnit.test('Multi-week grouped appointments should be painted correctly', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js index aae0993add7f..dd698fc1158f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js @@ -239,29 +239,26 @@ QUnit.module('Integration: Resources', moduleConfig, () => { assert.equal(getHexColor($appointments.eq(1)), '#0000ff', 'Color is OK'); }); - [true, false].forEach((renovateRender) => { - QUnit.test(`Resources should be set correctly is the resources[].dataSource option is changed(T396746) when renovateRender is ${renovateRender}`, async function(assert) { - const resourceData = [{ id: 1, text: 'John', color: 'red' }]; - - const { instance } = await createWrapper({ - dataSource: [], - currentDate: new Date(2015, 4, 26), - groups: ['ownerId'], - resources: [{ - fieldExpr: 'ownerId', - dataSource: [] - }], - renovateRender, - }); - - instance.option('resources[0].dataSource', resourceData); - await waitAsync(0); + QUnit.test('Resources should be set correctly is the resources[].dataSource option is changed(T396746)', async function(assert) { + const resourceData = [{ id: 1, text: 'John', color: 'red' }]; - assert.deepEqual(instance.option('resources'), [{ + const { instance } = await createWrapper({ + dataSource: [], + currentDate: new Date(2015, 4, 26), + groups: ['ownerId'], + resources: [{ fieldExpr: 'ownerId', - dataSource: resourceData - }], 'Resources were changed correctly'); + dataSource: [] + }], }); + + instance.option('resources[0].dataSource', resourceData); + await waitAsync(0); + + assert.deepEqual(instance.option('resources'), [{ + fieldExpr: 'ownerId', + dataSource: resourceData + }], 'Resources were changed correctly'); }); QUnit.test('Appointment should have correct color after resources option changing', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.workSpace.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.workSpace.tests.js index b6285cbbcba0..1bb8c4794187 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.workSpace.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.workSpace.tests.js @@ -611,10 +611,9 @@ module('Integration: Work space', { ...moduleConfig }, () => { ], dataSource: [], onContentReady: (e) => { - if(!e.component.option('renovateRender')) { - const groups = e.component.$element().find('.dx-scheduler-date-table-cell').data('dxCellData').groups; - assert.deepEqual(groups, { owner: 1 }); - } + const $cell = e.component.$element().find('.dx-scheduler-date-table-cell').eq(0); + const groups = e.component.getWorkSpace().getCellData($cell).groups; + assert.deepEqual(groups, { owner: 1 }); const scheduler = new SchedulerTestWrapper(e.component); const cellCount = scheduler.workSpace.getCells().length; @@ -1570,256 +1569,247 @@ isDesktopEnvironment() && module('Cells selection', { ...moduleConfig }, () => { }); }); -module('Resource Cell Template', () => { - [true, false].forEach((renovateRender) => { - const moduleDescription = renovateRender - ? 'Renovated Render' - : 'Old Render'; - - module(moduleDescription, { - beforeEach: function() { - fx.off = true; - this.createInstance = (options = {}) => { - return createWrapper({ - ...options, - renovateRender - }); - }; - }, - afterEach: function() { - fx.off = false; - }, - }, () => { - test('resourceCellTemplate should take cellElement with correct geometry(T453520)', async function(assert) { - assert.expect(3); - await this.createInstance({ - currentView: 'week', - views: ['week'], - height: 700, - width: 700, - dataSource: [], - groups: ['ownerId'], - resources: [{ - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John', color: '#000' }, - { id: 2, text: 'Mike', color: '#FFF' }, - ], - }], - resourceCellTemplate: function(cellData, cellIndex, cellElement) { - if(!cellIndex) { - assert.equal(isRenderer(cellElement), !!config().useJQuery, 'element is correct'); - const $cell = $(cellElement).parent(); - assert.roughEqual(getOuterWidth($cell), 316, 2.001, 'Resource cell width is OK'); - assert.equal(getOuterHeight($cell), 30, 'Resource cell height is OK'); - } - } - }); +module('Resource Cell Template', { + beforeEach: function() { + fx.off = true; + this.createInstance = (options = {}) => { + return createWrapper({ + ...options, }); + }; + }, + afterEach: function() { + fx.off = false; + }, +}, () => { + test('resourceCellTemplate should take cellElement with correct geometry(T453520)', async function(assert) { + assert.expect(3); + await this.createInstance({ + currentView: 'week', + views: ['week'], + height: 700, + width: 700, + dataSource: [], + groups: ['ownerId'], + resources: [{ + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John', color: '#000' }, + { id: 2, text: 'Mike', color: '#FFF' }, + ], + }], + resourceCellTemplate: function(cellData, cellIndex, cellElement) { + if(!cellIndex) { + assert.equal(isRenderer(cellElement), !!config().useJQuery, 'element is correct'); + const $cell = $(cellElement).parent(); + assert.roughEqual(getOuterWidth($cell), 316, 2.001, 'Resource cell width is OK'); + assert.equal(getOuterHeight($cell), 30, 'Resource cell height is OK'); + } + } + }); + }); - test('resourceCellTemplate should take cellElement with correct geometry in timeline (T453520)', async function(assert) { - assert.expect(2); - await this.createInstance({ - currentView: 'timelineWeek', - views: ['timelineWeek'], - height: 700, - width: 700, - dataSource: [], - groups: ['ownerId'], - resources: [{ - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John', color: '#000' }, - { id: 2, text: 'Mike', color: '#FFF' }, - ], - }], - resourceCellTemplate: function(cellData, cellIndex, cellElement) { - const done = assert.async(); - setTimeout(() => { - if(!cellIndex) { - const $cell = $(cellElement); - assert.equal(getOuterWidth($cell), 100, 'Resource cell width is OK'); - assert.roughEqual(getOuterHeight($cell), 288, 1.001, 'Resource cell height is OK'); - } - done(); - }); + test('resourceCellTemplate should take cellElement with correct geometry in timeline (T453520)', async function(assert) { + assert.expect(2); + await this.createInstance({ + currentView: 'timelineWeek', + views: ['timelineWeek'], + height: 700, + width: 700, + dataSource: [], + groups: ['ownerId'], + resources: [{ + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John', color: '#000' }, + { id: 2, text: 'Mike', color: '#FFF' }, + ], + }], + resourceCellTemplate: function(cellData, cellIndex, cellElement) { + const done = assert.async(); + setTimeout(() => { + if(!cellIndex) { + const $cell = $(cellElement); + assert.equal(getOuterWidth($cell), 100, 'Resource cell width is OK'); + assert.roughEqual(getOuterHeight($cell), 288, 1.001, 'Resource cell height is OK'); } + done(); }); - }); + } + }); + }); - test('resourceCellTemplate should have correct options', async function(assert) { - let templateOptions; - - await this.createInstance({ - currentView: 'week', - currentDate: new Date(2016, 8, 5), - firstDayOfWeek: 0, - groups: ['ownerId'], - resources: [ - { - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John' }, - { id: 2, text: 'Mike' } - ] - } - ], - resourceCellTemplate: function(itemData, index, $container) { - if(index === 0) { - templateOptions = itemData; - } - } - }); + test('resourceCellTemplate should have correct options', async function(assert) { + let templateOptions; - assert.equal(templateOptions.id, 1, 'id option is OK'); - assert.equal(templateOptions.text, 'John', 'text option is OK'); - assert.deepEqual(templateOptions.data, { text: 'John', id: 1 }, 'data option is OK'); - }); + await this.createInstance({ + currentView: 'week', + currentDate: new Date(2016, 8, 5), + firstDayOfWeek: 0, + groups: ['ownerId'], + resources: [ + { + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John' }, + { id: 2, text: 'Mike' } + ] + } + ], + resourceCellTemplate: function(itemData, index, $container) { + if(index === 0) { + templateOptions = itemData; + } + } + }); - test('resourceCellTemplate should work correct in timeline view', async function(assert) { - const scheduler = await createWrapper({ - currentView: 'timelineWeek', - currentDate: new Date(2016, 8, 5), - firstDayOfWeek: 0, - groups: ['ownerId'], - resources: [ - { - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John' }, - { id: 2, text: 'Mike' } - ] - } - ], - resourceCellTemplate: function(itemData, index, container) { - if(index === 0) { - $(container).addClass('custom-group-cell-class'); - } - } - }); + assert.equal(templateOptions.id, 1, 'id option is OK'); + assert.equal(templateOptions.text, 'John', 'text option is OK'); + assert.deepEqual(templateOptions.data, { text: 'John', id: 1 }, 'data option is OK'); + }); + + test('resourceCellTemplate should work correct in timeline view', async function(assert) { + const scheduler = await createWrapper({ + currentView: 'timelineWeek', + currentDate: new Date(2016, 8, 5), + firstDayOfWeek: 0, + groups: ['ownerId'], + resources: [ + { + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John' }, + { id: 2, text: 'Mike' } + ] + } + ], + resourceCellTemplate: function(itemData, index, container) { + if(index === 0) { + $(container).addClass('custom-group-cell-class'); + } + } + }); - const $cell1 = scheduler.workSpace.groups.getGroupHeader(0); - const $cell2 = scheduler.workSpace.groups.getGroupHeader(1); + const $cell1 = scheduler.workSpace.groups.getGroupHeader(0); + const $cell2 = scheduler.workSpace.groups.getGroupHeader(1); - assert.ok($cell1.hasClass('custom-group-cell-class'), 'first cell has right class'); - assert.notOk($cell2.hasClass('custom-group-cell-class'), 'second cell has no class'); - }); + assert.ok($cell1.hasClass('custom-group-cell-class'), 'first cell has right class'); + assert.notOk($cell2.hasClass('custom-group-cell-class'), 'second cell has no class'); + }); - test('resourceCellTemplate should work correct in agenda view', async function(assert) { - const scheduler = await this.createInstance({ - views: ['agenda'], - currentView: 'agenda', - currentDate: new Date(2016, 8, 5), - dataSource: [{ - text: 'a', - ownerId: 1, - startDate: new Date(2016, 8, 5, 7), - endDate: new Date(2016, 8, 5, 8), - }, - { - text: 'b', - ownerId: 2, - startDate: new Date(2016, 8, 5, 10), - endDate: new Date(2016, 8, 5, 11), - }], - firstDayOfWeek: 0, - groups: ['ownerId'], - resources: [ - { - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John' }, - { id: 2, text: 'Mike' } - ] - } - ], - resourceCellTemplate: function(itemData, index, container) { - if(index === 0) { - $(container).addClass('custom-group-cell-class'); - } + test('resourceCellTemplate should work correct in agenda view', async function(assert) { + const scheduler = await this.createInstance({ + views: ['agenda'], + currentView: 'agenda', + currentDate: new Date(2016, 8, 5), + dataSource: [{ + text: 'a', + ownerId: 1, + startDate: new Date(2016, 8, 5, 7), + endDate: new Date(2016, 8, 5, 8), + }, + { + text: 'b', + ownerId: 2, + startDate: new Date(2016, 8, 5, 10), + endDate: new Date(2016, 8, 5, 11), + }], + firstDayOfWeek: 0, + groups: ['ownerId'], + resources: [ + { + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John' }, + { id: 2, text: 'Mike' } + ] + } + ], + resourceCellTemplate: function(itemData, index, container) { + if(index === 0) { + $(container).addClass('custom-group-cell-class'); + } - return $('
').text(itemData.text); - } - }); + return $('
').text(itemData.text); + } + }); - const $cell1 = scheduler.instance.$element().find('.dx-scheduler-group-header-content').eq(0); - const $cell2 = scheduler.instance.$element().find('.dx-scheduler-group-header-content').eq(1); + const $cell1 = scheduler.instance.$element().find('.dx-scheduler-group-header-content').eq(0); + const $cell2 = scheduler.instance.$element().find('.dx-scheduler-group-header-content').eq(1); - assert.ok($cell1.hasClass('custom-group-cell-class'), 'first cell has right class'); - assert.notOk($cell2.hasClass('custom-group-cell-class'), 'second cell has no class'); - }); + assert.ok($cell1.hasClass('custom-group-cell-class'), 'first cell has right class'); + assert.notOk($cell2.hasClass('custom-group-cell-class'), 'second cell has no class'); + }); - test('Agenda has right arguments in resourceCellTemplate arguments', async function(assert) { - let params; - - await this.createInstance({ - views: ['agenda'], - currentView: 'agenda', - currentDate: new Date(2016, 8, 5), - groups: ['ownerId'], - dataSource: [{ - text: 'a', - ownerId: 1, - startDate: new Date(2016, 8, 5, 7), - endDate: new Date(2016, 8, 5, 8), - }, - { - text: 'b', - ownerId: 2, - startDate: new Date(2016, 8, 5, 10), - endDate: new Date(2016, 8, 5, 11), - }], - resources: [ - { - fieldExpr: 'ownerId', - dataSource: [ - { id: 1, text: 'John', color: '#A2a' }, - { id: 2, text: 'Mike', color: '#E2a' } - ] - } - ], - resourceCellTemplate: function(itemData, index, $container) { - if(!index) params = itemData.data; - } - }); + test('Agenda has right arguments in resourceCellTemplate arguments', async function(assert) { + let params; - await waitForAsync(() => Boolean(params)); - assert.deepEqual(params, { id: 1, text: 'John', color: '#A2a' }, 'Cell text is OK'); - }); + await this.createInstance({ + views: ['agenda'], + currentView: 'agenda', + currentDate: new Date(2016, 8, 5), + groups: ['ownerId'], + dataSource: [{ + text: 'a', + ownerId: 1, + startDate: new Date(2016, 8, 5, 7), + endDate: new Date(2016, 8, 5, 8), + }, + { + text: 'b', + ownerId: 2, + startDate: new Date(2016, 8, 5, 10), + endDate: new Date(2016, 8, 5, 11), + }], + resources: [ + { + fieldExpr: 'ownerId', + dataSource: [ + { id: 1, text: 'John', color: '#A2a' }, + { id: 2, text: 'Mike', color: '#E2a' } + ] + } + ], + resourceCellTemplate: function(itemData, index, $container) { + if(!index) params = itemData.data; + } + }); + await waitForAsync(() => Boolean(params)); + assert.deepEqual(params, { id: 1, text: 'John', color: '#A2a' }, 'Cell text is OK'); + }); - test('Scheduler should have specific resourceCellTemplate setting of the view', async function(assert) { - let countCallTemplate1 = 0; - let countCallTemplate2 = 0; - const dataSource = [ - { id: 1, text: 'group1' }, - { id: 2, text: 'group2' } - ]; - await this.createInstance({ - views: [{ - type: 'week', - resourceCellTemplate: function() { - countCallTemplate2++; - } - }], - groups: ['test'], - resources: [ - { - fieldExpr: 'test', - dataSource: dataSource - } - ], - resourceCellTemplate: function() { - countCallTemplate1++; - }, - currentView: 'week' - }); + test('Scheduler should have specific resourceCellTemplate setting of the view', async function(assert) { + let countCallTemplate1 = 0; + let countCallTemplate2 = 0; + const dataSource = [ + { id: 1, text: 'group1' }, + { id: 2, text: 'group2' } + ]; - assert.equal(countCallTemplate1, 0, 'count call first template'); - assert.notEqual(countCallTemplate2, 0, 'count call second template'); - }); + await this.createInstance({ + views: [{ + type: 'week', + resourceCellTemplate: function() { + countCallTemplate2++; + } + }], + groups: ['test'], + resources: [ + { + fieldExpr: 'test', + dataSource: dataSource + } + ], + resourceCellTemplate: function() { + countCallTemplate1++; + }, + currentView: 'week' }); + + assert.equal(countCallTemplate1, 0, 'count call first template'); + assert.notEqual(countCallTemplate2, 0, 'count call second template'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/pacificTime.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/pacificTime.tests.js index 8bd9b298d161..89cad5443086 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/pacificTime.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/pacificTime.tests.js @@ -254,10 +254,10 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { { view: 'timelineWeek', times: expectedAllTimes, dates: expectedDateResults } ]; - [true, false].forEach((renovateRender) => { + { module('timeCellTemplate', () => { testCases.forEach(testCase => { - test(`arguments should be valid in '${testCase.view}' view when renovateRender is ${renovateRender}`, async function(assert) { + test(`arguments should be valid in '${testCase.view}' view`, async function(assert) { let index = 0; await createWrapper({ @@ -275,13 +275,13 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { startDayHour: 0, currentDate: summerDSTDate, height: 600, - renovateRender, + }); assert.expect(expectedAllTimes.length * 2); }); - test(`template args should be valid in '${testCase.view}' view when startViewDate is during DST change when renovateRender is ${renovateRender}`, async function(assert) { + test(`template args should be valid in '${testCase.view}' view when startViewDate is during DST change`, async function(assert) { let index = 0; const validExpectedDateResults = testCase.dates.slice(4); @@ -302,7 +302,7 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { startDayHour: 2, currentDate: summerDSTDate, height: 600, - renovateRender, + }); assert.expect(times.length * 2); @@ -319,7 +319,7 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { }); }) .forEach((testCase) => { - test(`template args should be valid in '${testCase.view}' view when startViewDate is during DST change when renovateRender is ${renovateRender}`, async function(assert) { + test(`template args should be valid in '${testCase.view}' view when startViewDate is during DST change`, async function(assert) { let index = 0; const validExpectedDateResults = expectedDateResults.slice(4); @@ -348,14 +348,14 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { startDayHour: 2, currentDate: summerDSTDate, height: 600, - renovateRender, + }); assert.expect(validExpectedDateResults.length); }); }); }); - }); + } module('Time panel render', () => { testCases.forEach(testCase => { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/subscribes.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/subscribes.tests.js index c265e1462f4a..7724e9e430af 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/subscribes.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/subscribes.tests.js @@ -720,140 +720,135 @@ module('Grouping By Date', { assert.roughEqual(result.left, left, epsilon, 'left is correct'); } }, function() { - [true, false].forEach((isRenovatedRender) => { - test(`'isGroupedByDate' should be true only for horizontal grouped workspace with groups when renovateRender is ${isRenovatedRender}`, async function(assert) { - await this.createInstance({ - views: [{ - name: 'DAY', - type: 'day', - groupOrientation: 'horizontal' - }, { - name: 'WEEK', - type: 'week', - groupOrientation: 'vertical' - }], - currentView: 'DAY', - dataSource: [], - groupByDate: true, - groups: ['priorityId'], - resources: [{ - field: 'typeId', - dataSource: [{ id: 1, color: 'red' }] - }, { - field: 'priorityId', - dataSource: [{ id: 1, color: 'black' }] - }], - renovateRender: isRenovatedRender, - }); + test('\'isGroupedByDate\' should be true only for horizontal grouped workspace with groups', async function(assert) { + await this.createInstance({ + views: [{ + name: 'DAY', + type: 'day', + groupOrientation: 'horizontal' + }, { + name: 'WEEK', + type: 'week', + groupOrientation: 'vertical' + }], + currentView: 'DAY', + dataSource: [], + groupByDate: true, + groups: ['priorityId'], + resources: [{ + field: 'typeId', + dataSource: [{ id: 1, color: 'red' }] + }, { + field: 'priorityId', + dataSource: [{ id: 1, color: 'black' }] + }], + }); - assert.equal(this.instance.fire('isGroupedByDate'), true, 'Workspace is grouped by date'); + assert.equal(this.instance.fire('isGroupedByDate'), true, 'Workspace is grouped by date'); - this.instance.option('currentView', 'WEEK'); - await waitAsync(0); - assert.equal(this.instance.fire('isGroupedByDate'), false, 'Workspace isn\'t grouped by date'); + this.instance.option('currentView', 'WEEK'); + await waitAsync(0); + assert.equal(this.instance.fire('isGroupedByDate'), false, 'Workspace isn\'t grouped by date'); - this.instance.option('groups', []); - this.instance.option('currentView', 'DAY'); - await waitAsync(0); - assert.equal(this.instance.fire('isGroupedByDate'), false, 'Workspace isn\'t grouped by date'); - }); + this.instance.option('groups', []); + this.instance.option('currentView', 'DAY'); + await waitAsync(0); + assert.equal(this.instance.fire('isGroupedByDate'), false, 'Workspace isn\'t grouped by date'); + }); - test(`"createAppointmentSettings" should work correct for allDay appointment when groupByDate = true, Week view when renovateRender is ${isRenovatedRender}`, async function(assert) { - const priorityData = [ + test('"createAppointmentSettings" should work correct for allDay appointment when groupByDate = true, Week view', async function(assert) { + const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#1e90ff' + }, { + text: 'High Priority', + id: 2, + color: '#ff9747' + } + ]; + await this.createInstance({ + currentView: 'week', + views: [{ + type: 'week', + name: 'week', + intervalCount: 2 + }], + currentDate: new Date(2018, 4, 21, 9, 0), + groupByDate: true, + startDayHour: 9, + groups: ['priorityId'], + resources: [ { - text: 'Low Priority', - id: 1, - color: '#1e90ff' - }, { - text: 'High Priority', - id: 2, - color: '#ff9747' + fieldExpr: 'priorityId', + allowMultiple: false, + dataSource: priorityData, + label: 'Priority' } - ]; - await this.createInstance({ - currentView: 'week', - views: [{ - type: 'week', - name: 'week', - intervalCount: 2 - }], - currentDate: new Date(2018, 4, 21, 9, 0), - groupByDate: true, - startDayHour: 9, - groups: ['priorityId'], - resources: [ - { - fieldExpr: 'priorityId', - allowMultiple: false, - dataSource: priorityData, - label: 'Priority' - } - ], - renovateRender: isRenovatedRender, - dataSource: [{ - startDate: new Date(2018, 4, 21, 9, 0), - endDate: new Date(2018, 4, 23, 9, 0), - priorityId: 2, - allDay: true - }] - }); + ], + dataSource: [{ + startDate: new Date(2018, 4, 21, 9, 0), + endDate: new Date(2018, 4, 23, 9, 0), + priorityId: 2, + allDay: true + }] + }); - const results = this.instance.getAppointmentsInstance().option('items').sort((a, b) => a.columnIndex - b.columnIndex); + const results = this.instance.getAppointmentsInstance().option('items').sort((a, b) => a.columnIndex - b.columnIndex); - assert.equal(results.length, 3, 'Result length is OK'); - this.checkNeedCoordinatesResult(assert, results[0], 1, 0, 0, 99, 1.1); - this.checkNeedCoordinatesResult(assert, results[1], 2, 0, 0, 166, 1.1); - this.checkNeedCoordinatesResult(assert, results[2], 3, 0, 0, 233, 1.1); - }); + assert.equal(results.length, 3, 'Result length is OK'); + this.checkNeedCoordinatesResult(assert, results[0], 1, 0, 0, 99, 1.1); + this.checkNeedCoordinatesResult(assert, results[1], 2, 0, 0, 166, 1.1); + this.checkNeedCoordinatesResult(assert, results[2], 3, 0, 0, 233, 1.1); + }); - test(`"createAppointmentSettings" should work correct when groupByDate = true, Month view when renovateRender is ${isRenovatedRender}`, async function(assert) { - const priorityData = [ + test('"createAppointmentSettings" should work correct when groupByDate = true, Month view', async function(assert) { + const priorityData = [ + { + text: 'Low Priority', + id: 1, + color: '#1e90ff' + }, { + text: 'High Priority', + id: 2, + color: '#ff9747' + } + ]; + await this.createInstance({ + currentView: 'month', + views: [{ + type: 'month', + name: 'month', + groupOrientation: 'horizontal' + }], + currentDate: new Date(2018, 4, 21, 9, 0), + groupByDate: true, + groups: ['priorityId'], + resources: [ { - text: 'Low Priority', - id: 1, - color: '#1e90ff' - }, { - text: 'High Priority', - id: 2, - color: '#ff9747' + fieldExpr: 'priorityId', + allowMultiple: false, + dataSource: priorityData, + label: 'Priority' } - ]; - await this.createInstance({ - currentView: 'month', - views: [{ - type: 'month', - name: 'month', - groupOrientation: 'horizontal' - }], - currentDate: new Date(2018, 4, 21, 9, 0), - groupByDate: true, - groups: ['priorityId'], - resources: [ - { - fieldExpr: 'priorityId', - allowMultiple: false, - dataSource: priorityData, - label: 'Priority' - } - ], - renovateRender: isRenovatedRender, - dataSource: [{ - startDate: new Date(2018, 4, 22, 10, 0), - endDate: new Date(2018, 4, 24), - priorityId: 2 - }] - }); + ], + dataSource: [{ + startDate: new Date(2018, 4, 22, 10, 0), + endDate: new Date(2018, 4, 24), + priorityId: 2 + }] + }); - const $cell = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0); - const cellWidth = $cell.getBoundingClientRect().width; - const cellHeight = $cell.getBoundingClientRect().height; + const $cell = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0); + const cellWidth = $cell.getBoundingClientRect().width; + const cellHeight = $cell.getBoundingClientRect().height; - const results = this.instance.getAppointmentsInstance().option('items').sort((a, b) => a.columnIndex - b.columnIndex); + const results = this.instance.getAppointmentsInstance().option('items').sort((a, b) => a.columnIndex - b.columnIndex); - assert.equal(results.length, 2, 'Coordinates count is ok'); - this.checkNeedCoordinatesResult(assert, results[0], 2, 3, cellHeight * 3 + 30, cellWidth * 5, 1.5); - this.checkNeedCoordinatesResult(assert, results[1], 3, 3, cellHeight * 3 + 30, cellWidth * 7, 1.5); - }); + assert.equal(results.length, 2, 'Coordinates count is ok'); + this.checkNeedCoordinatesResult(assert, results[0], 2, 3, cellHeight * 3 + 30, cellWidth * 5, 1.5); + this.checkNeedCoordinatesResult(assert, results[1], 3, 3, cellHeight * 3 + 30, cellWidth * 7, 1.5); }); test('\'getResizableAppointmentArea\' should return correct area when groupByDate = true, Month view', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.markup.tests.js index 746cb1d679f7..5b6cd924ed19 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.markup.tests.js @@ -4,7 +4,6 @@ import SchedulerTimelineDay from '__internal/scheduler/workspaces/m_timeline_day import SchedulerTimelineWeek from '__internal/scheduler/workspaces/m_timeline_week'; import SchedulerTimelineWorkWeek from '__internal/scheduler/workspaces/m_timeline_work_week'; import SchedulerTimelineMonth from '__internal/scheduler/workspaces/m_timeline_month'; -import dataUtils from 'core/element_data'; import dateLocalization from 'common/core/localization/date'; import SchedulerWorkSpaceVerticalStrategy from '__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical'; import SchedulerWorkSpaceHorizontalStrategy from '__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal'; @@ -198,9 +197,8 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { assert.deepEqual(this.instance.getStartViewDate(), new Date(2015, 9, 21, 4), 'First view date is OK'); }); - QUnit.test('Each cell of scheduler timeline day should contain correct jQuery dxCellData', async function(assert) { + QUnit.test('Each cell of scheduler timeline day should contain correct cellData', async function(assert) { this.instance.option({ - renovateRender: false, currentDate: new Date(2015, 9, 21), firstDayOfWeek: 1, startDayHour: 5, @@ -209,21 +207,21 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { const $cells = this.instance.$element().find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(0), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(0))), { startDate: new Date(2015, 9, 21, 5), endDate: new Date(2015, 9, 21, 6), allDay: false, groupIndex: 0, }, 'data of first cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(5), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(5))), { startDate: new Date(2015, 9, 21, 10), endDate: new Date(2015, 9, 21, 11), allDay: false, groupIndex: 0, }, 'data of 5th cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(10), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(10))), { startDate: new Date(2015, 9, 21, 15), endDate: new Date(2015, 9, 21, 16), allDay: false, @@ -231,7 +229,7 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { }, 'data of 10th cell is correct'); }); - QUnit.test('Each cell of grouped scheduler timeline day should contain correct jQuery dxCellData', async function(assert) { + QUnit.test('Each cell of grouped scheduler timeline day should contain correct cellData', async function(assert) { const resourceConfig = await getWorkspaceResourceConfig([{ label: 'one', fieldExpr: 'one', @@ -242,7 +240,6 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] }]); this.instance.option({ - renovateRender: false, currentDate: new Date(2015, 9, 21), firstDayOfWeek: 1, startDayHour: 5, @@ -250,14 +247,9 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { ...resourceConfig, }); - if(this.instance.option('renovateRender')) { - assert.ok(true, 'This test is not for renovated render'); - return; - } - const $cells = this.instance.$element().find('.dx-scheduler-date-table-row').eq(2).find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(0), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(0))), { startDate: new Date(2015, 9, 21, 5), endDate: new Date(2015, 9, 21, 6), allDay: false, @@ -268,7 +260,7 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { groupIndex: 2, }, 'data of first cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(5), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(5))), { startDate: new Date(2015, 9, 21, 10), endDate: new Date(2015, 9, 21, 11), allDay: false, @@ -279,7 +271,7 @@ QUnit.module('TimelineDay markup', timelineDayModuleConfig, () => { groupIndex: 2, }, 'data of 5th cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(10), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(10))), { startDate: new Date(2015, 9, 21, 15), endDate: new Date(2015, 9, 21, 16), allDay: false, @@ -361,13 +353,11 @@ QUnit.module('TimelineDay with intervalCount markup', timelineDayModuleConfig, ( }); QUnit.test('TimelineDay Day view cells have right cellData with view option intervalCount=2', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('intervalCount', 2); this.instance.option('currentDate', new Date(2017, 5, 29)); - const firstCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(0), 'dxCellData'); - const secondCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(95), 'dxCellData'); + const firstCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(0))); + const secondCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(95))); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 29, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 29, 0, 30), 'cell has right endtDate'); @@ -455,9 +445,7 @@ QUnit.module('TimelineDay with horizontal grouping markup', timelineDayModuleCon assert.equal($element.find('.dx-scheduler-date-table-cell').length, 96, 'Date table has 96 cells'); }); - QUnit.test('Each cell of scheduler timeline day should contain correct jQuery dxCellData, groupOrientation = horizontal', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Each cell of scheduler timeline day should contain correct cellData, groupOrientation = horizontal', async function(assert) { this.instance.option({ currentDate: new Date(2015, 9, 21), firstDayOfWeek: 1, @@ -468,7 +456,7 @@ QUnit.module('TimelineDay with horizontal grouping markup', timelineDayModuleCon const $cells = this.instance.$element().find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(0), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(0))), { startDate: new Date(2015, 9, 21, 5), endDate: new Date(2015, 9, 21, 6), allDay: false, @@ -478,7 +466,7 @@ QUnit.module('TimelineDay with horizontal grouping markup', timelineDayModuleCon groupIndex: 0, }, 'data of first cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(5), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(5))), { startDate: new Date(2015, 9, 21, 7), endDate: new Date(2015, 9, 21, 8), allDay: false, @@ -670,13 +658,11 @@ QUnit.module('TimelineWeek with intervalCount markup', timelineWeekModuleConfig, }); QUnit.test('TimelineWeek view cells have right cellData with view option intervalCount=2', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('intervalCount', 2); this.instance.option('currentDate', new Date(2017, 5, 29)); - const firstCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(7 * 48), 'dxCellData'); - const secondCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(2 * 7 * 48 - 1), 'dxCellData'); + const firstCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(7 * 48))); + const secondCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(2 * 7 * 48 - 1))); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 2, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 2, 0, 30), 'cell has right endtDate'); @@ -729,9 +715,7 @@ QUnit.module('TimelineWeek with horizontal grouping markup', timelineWeekModuleC assert.equal($element.find('.dx-scheduler-date-table-cell').length, 336 * 2, 'Date table has 672 cells'); }); - QUnit.test('Each cell of scheduler timeline week should contain correct jQuery dxCellData, groupOrientation = horizontal', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Each cell of scheduler timeline week should contain correct cellData, groupOrientation = horizontal', async function(assert) { this.instance.option({ currentDate: new Date(2015, 9, 21), firstDayOfWeek: 1, @@ -742,7 +726,7 @@ QUnit.module('TimelineWeek with horizontal grouping markup', timelineWeekModuleC const $cells = this.instance.$element().find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(0), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(0))), { startDate: new Date(2015, 9, 19, 5), endDate: new Date(2015, 9, 19, 6), allDay: false, @@ -752,7 +736,7 @@ QUnit.module('TimelineWeek with horizontal grouping markup', timelineWeekModuleC groupIndex: 0, }, 'data of first cell is correct'); - assert.deepEqual(dataUtils.data($cells.get(25), 'dxCellData'), { + assert.deepEqual(this.instance.getCellData($($cells.get(25))), { startDate: new Date(2015, 9, 20, 6), endDate: new Date(2015, 9, 20, 7), allDay: false, @@ -881,13 +865,11 @@ QUnit.module('TimelineWorkWeek with intervalCount markup', timelineWorkWeekModul }); QUnit.test('TimelineWorkWeek view cells have right cellData with view option intervalCount=2', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('intervalCount', 2); this.instance.option('currentDate', new Date(2017, 5, 29)); - const firstCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(5 * 48), 'dxCellData'); - const secondCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(2 * 5 * 48 - 1), 'dxCellData'); + const firstCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(5 * 48))); + const secondCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(2 * 5 * 48 - 1))); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 3, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 3, 0, 30), 'cell has right endtDate'); @@ -978,9 +960,7 @@ QUnit.module('TimelineMonth markup', timelineMonthModuleConfig, () => { assert.deepEqual(this.instance.getStartViewDate(), new Date(2015, 9, 1, 0), 'First view date is OK after startDayHour option changed'); }); - QUnit.test('Each cell of scheduler timeline month should contain correct jQuery dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Each cell of scheduler timeline month should contain correct cellData', async function(assert) { this.instance.option({ currentDate: new Date(2015, 3, 1), startDayHour: 1, @@ -989,9 +969,10 @@ QUnit.module('TimelineMonth markup', timelineMonthModuleConfig, () => { }); const $cells = this.instance.$element().find('.' + CELL_CLASS); + const instance = this.instance; $cells.each(function(index) { - assert.deepEqual(dataUtils.data($(this)[0], 'dxCellData'), { + assert.deepEqual(instance.getCellData($(this)), { startDate: new Date(2015, 3, 1 + index, 1), endDate: new Date(2015, 3, 1 + index, 10), allDay: false, @@ -1001,8 +982,6 @@ QUnit.module('TimelineMonth markup', timelineMonthModuleConfig, () => { }); QUnit.test('Cells should have right date', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option({ currentDate: new Date(2016, 3, 21), firstDayOfWeek: 1, @@ -1012,7 +991,7 @@ QUnit.module('TimelineMonth markup', timelineMonthModuleConfig, () => { }); const $cells = this.instance.$element().find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(25), 'dxCellData').startDate, new Date(2016, 3, 26, 8), 'Date is OK'); + assert.deepEqual(this.instance.getCellData($($cells.get(25))).startDate, new Date(2016, 3, 26, 8), 'Date is OK'); }); }); @@ -1039,13 +1018,11 @@ QUnit.module('TimelineMonth with intervalCount', timelineMonthModuleConfig, () = }); QUnit.test('TimelineMonth view cells have right cellData with view option intervalCount=2', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('intervalCount', 2); this.instance.option('currentDate', new Date(2017, 5, 29)); - const firstCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').get(0), 'dxCellData'); - const secondCellData = dataUtils.data(this.instance.$element().find('.dx-scheduler-date-table-cell').last().get(0), 'dxCellData'); + const firstCellData = this.instance.getCellData($(this.instance.$element().find('.dx-scheduler-date-table-cell').get(0))); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 1, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 2, 0), 'cell has right endtDate'); @@ -1103,9 +1080,7 @@ QUnit.module('TimelineMonth with horizontal scrolling markup', timelineMonthModu }); }); - QUnit.test('Each cell of scheduler timeline month should contain correct jQuery dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Each cell of scheduler timeline month should contain correct cellData', async function(assert) { this.instance.option({ currentDate: new Date(2015, 3, 1), startDayHour: 1, @@ -1114,12 +1089,13 @@ QUnit.module('TimelineMonth with horizontal scrolling markup', timelineMonthModu }); const $cells = this.instance.$element().find('.' + CELL_CLASS); + const instance = this.instance; $cells.each(function(index) { const dateIndex = index % 30; const groupIndex = index < 30 ? 1 : 2; - assert.deepEqual(dataUtils.data($(this)[0], 'dxCellData'), { + assert.deepEqual(instance.getCellData($(this)), { startDate: new Date(2015, 3, 1 + dateIndex, 1), endDate: new Date(2015, 3, 1 + dateIndex, 10), allDay: false, @@ -1132,8 +1108,6 @@ QUnit.module('TimelineMonth with horizontal scrolling markup', timelineMonthModu }); QUnit.test('Cells should have right date', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option({ currentDate: new Date(2016, 3, 21), firstDayOfWeek: 1, @@ -1143,8 +1117,8 @@ QUnit.module('TimelineMonth with horizontal scrolling markup', timelineMonthModu }); const $cells = this.instance.$element().find('.' + CELL_CLASS); - assert.deepEqual(dataUtils.data($cells.get(25), 'dxCellData').startDate, new Date(2016, 3, 26, 8), 'Date is OK'); - assert.deepEqual(dataUtils.data($cells.get(55), 'dxCellData').startDate, new Date(2016, 3, 26, 8), 'Date is OK'); + assert.deepEqual(this.instance.getCellData($($cells.get(25))).startDate, new Date(2016, 3, 26, 8), 'Date is OK'); + assert.deepEqual(this.instance.getCellData($($cells.get(55))).startDate, new Date(2016, 3, 26, 8), 'Date is OK'); }); QUnit.test('TimelineMonth shoud render date cells correctly', async function(assert) { @@ -1180,190 +1154,183 @@ QUnit.module('FirstGroupCell and LastGroupCell classes', () => { } }; - [true, false].forEach((isRenovatedRender) => { - const moduleName = isRenovatedRender - ? 'Renovated Render' - : 'Non-Renovated Render'; - - const groupClassesModuleConfig = { - beforeEach: function() { - this.createInstance = (workspaceClass, options = {}) => { - const instance = $('#scheduler-timeline')[workspaceClass]({ - renovateRender: isRenovatedRender, - startDayHour: 12, - endDayHour: 14, - currentDate: new Date(2020, 8, 27), - groupOrientation: 'horizontal', - intervalCount: 2, - getResourceManager: getEmptyResourceManager, - ...options, - })[workspaceClass]('instance'); - - return instance; - }; - } - }; - - QUnit.module(moduleName, groupClassesModuleConfig, () => { - [{ - view: TIMELINE_DAY, - columnCountInGroup: 8, - rowCountInGroup: 1, - }, { - view: TIMELINE_WEEK, - columnCountInGroup: 56, - rowCountInGroup: 1, - }, { - view: TIMELINE_MONTH, - columnCountInGroup: 61, - rowCountInGroup: 1, - }].forEach(({ view, columnCountInGroup, rowCountInGroup }) => { - QUnit.test(`first-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { - const instance = await this.createInstance(view.class); - - instance.$element().find(`.${CELL_CLASS}`).each(function() { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); - }); + const groupClassesModuleConfig = { + beforeEach: function() { + this.createInstance = (workspaceClass, options = {}) => { + const instance = $('#scheduler-timeline')[workspaceClass]({ + startDayHour: 12, + endDayHour: 14, + currentDate: new Date(2020, 8, 27), + groupOrientation: 'horizontal', + intervalCount: 2, + getResourceManager: getEmptyResourceManager, + ...options, + })[workspaceClass]('instance'); + + return instance; + }; + } + }; + + QUnit.module('Group classes', groupClassesModuleConfig, () => { + [{ + view: TIMELINE_DAY, + columnCountInGroup: 8, + rowCountInGroup: 1, + }, { + view: TIMELINE_WEEK, + columnCountInGroup: 56, + rowCountInGroup: 1, + }, { + view: TIMELINE_MONTH, + columnCountInGroup: 61, + rowCountInGroup: 1, + }].forEach(({ view, columnCountInGroup, rowCountInGroup }) => { + QUnit.test(`first-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { + const instance = await this.createInstance(view.class); + + instance.$element().find(`.${CELL_CLASS}`).each(function() { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); + }); + + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); + }); + }); + + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { + const instance = await this.createInstance(view.class); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); - }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { - const instance = await this.createInstance(view.class); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); + }); + }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { + const instance = await this.createInstance(view.class, { + groupByDate: true, + }); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { - const instance = await this.createInstance(view.class, { - groupByDate: true, - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); + }); + }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { + const instance = await this.createInstance(view.class, { + groupOrientation: 'vertical', + }); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); - }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + if(Math.floor(index / columnCountInGroup) % rowCountInGroup === 0) { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); + } else { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell does not have first-group class'); + } }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { - const instance = await this.createInstance(view.class, { - groupOrientation: 'vertical', - }); - - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - if(Math.floor(index / columnCountInGroup) % rowCountInGroup === 0) { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); - } else { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell does not have first-group class'); - } - }); - - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell does not have first-group class'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell does not have first-group class'); }); + }); - QUnit.test(`last-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { - const instance = await this.createInstance(view.class); + QUnit.test(`last-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { + const instance = await this.createInstance(view.class); - instance.$element().find(`.${CELL_CLASS}`).each(function() { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function() { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); }); + }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { - const instance = await this.createInstance(view.class); + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { + const instance = await this.createInstance(view.class); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); }); + }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { - const instance = await this.createInstance(view.class, { - groupByDate: true, - }); + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { + const instance = await this.createInstance(view.class, { + groupByDate: true, + }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell has last-group class'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell has last-group class'); + }); + }); + + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { + const instance = await this.createInstance(view.class, { + groupOrientation: 'vertical', + }); + + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + if((Math.floor(index / columnCountInGroup) + 1) % rowCountInGroup === 0) { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); + } else { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell does not have last-group class'); + } }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { - const instance = await this.createInstance(view.class, { - groupOrientation: 'vertical', - }); - - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - if((Math.floor(index / columnCountInGroup) + 1) % rowCountInGroup === 0) { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); - } else { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell does not have last-group class'); - } - }); - - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}:not(.${HEADER_PANEL_WEEK_CELL_CLASS})`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js index 560a4a17347a..5d9d239a9e94 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js @@ -91,63 +91,59 @@ QUnit.test('Date table should have a correct width if cell is less than 75px', a assert.equal(dateTableWidth, 1440, 'Width is OK'); }); -[true, false].forEach((renovateRender) => { - QUnit.test(`Sidebar scrollable should update position if date scrollable position is changed when renovateRender is ${renovateRender}`, async function(assert) { - const done = assert.async(); +QUnit.test('Sidebar scrollable should update position if date scrollable position is changed', async function(assert) { + const done = assert.async(); - const resourceConfig = await getWorkspaceResourceConfig([{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }, { id: 3, text: 'c' }, { id: 4, text: 'd' }] - }]); - this.instance.option({ - crossScrollingEnabled: true, - width: 400, - height: 150, - ...resourceConfig, - renovateRender, - }); + const resourceConfig = await getWorkspaceResourceConfig([{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }, { id: 3, text: 'c' }, { id: 4, text: 'd' }] + }]); + this.instance.option({ + crossScrollingEnabled: true, + width: 400, + height: 150, + ...resourceConfig, + }); - const $element = this.instance.$element(); - const groupPanelScrollable = $element.find('.dx-scheduler-sidebar-scrollable').dxScrollable('instance'); - const dateTableScrollable = $element.find('.dx-scheduler-date-table-scrollable').dxScrollable('instance'); + const $element = this.instance.$element(); + const groupPanelScrollable = $element.find('.dx-scheduler-sidebar-scrollable').dxScrollable('instance'); + const dateTableScrollable = $element.find('.dx-scheduler-date-table-scrollable').dxScrollable('instance'); - triggerHidingEvent($element); - triggerShownEvent($element); + triggerHidingEvent($element); + triggerShownEvent($element); - dateTableScrollable.scrollTo({ top: 102 }); + dateTableScrollable.scrollTo({ top: 102 }); - setTimeout(() => { - assert.equal(groupPanelScrollable.scrollTop(), 87, 'Scroll position is OK'); - done(); - }, 100); - }); + setTimeout(() => { + assert.equal(groupPanelScrollable.scrollTop(), 87, 'Scroll position is OK'); + done(); + }, 100); +}); - QUnit.test(`Date table scrollable should update position if sidebar position is changed when renovateRender is ${renovateRender}`, async function(assert) { - const resourceConfig = await getWorkspaceResourceConfig([{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }, { id: 3, text: 'c' }, { id: 4, text: 'd' }] - }]); - this.instance.option({ - crossScrollingEnabled: true, - width: 400, - height: 150, - ...resourceConfig, - renovateRender, - }); +QUnit.test('Date table scrollable should update position if sidebar position is changed', async function(assert) { + const resourceConfig = await getWorkspaceResourceConfig([{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }, { id: 3, text: 'c' }, { id: 4, text: 'd' }] + }]); + this.instance.option({ + crossScrollingEnabled: true, + width: 400, + height: 150, + ...resourceConfig, + }); - const $element = this.instance.$element(); - const groupPanelScrollable = $element.find('.dx-scheduler-sidebar-scrollable').dxScrollable('instance'); - const dateTableScrollable = $element.find('.dx-scheduler-date-table-scrollable').dxScrollable('instance'); + const $element = this.instance.$element(); + const groupPanelScrollable = $element.find('.dx-scheduler-sidebar-scrollable').dxScrollable('instance'); + const dateTableScrollable = $element.find('.dx-scheduler-date-table-scrollable').dxScrollable('instance'); - triggerHidingEvent($element); - triggerShownEvent($element); + triggerHidingEvent($element); + triggerShownEvent($element); - groupPanelScrollable.scrollTo({ top: 102 }); + groupPanelScrollable.scrollTo({ top: 102 }); - assert.equal(dateTableScrollable.scrollTop(), 87, 'Scroll position is OK'); - }); + assert.equal(dateTableScrollable.scrollTop(), 87, 'Scroll position is OK'); }); QUnit.test('Date table scrollable should update position if header scrollable position is changed', async function(assert) { @@ -460,7 +456,6 @@ QUnit.module('Timeline Keyboard Navigation', () => { e.component.initDragBehavior(); e.component.attachTablesEvents(); }, - renovateRender: true, scrolling: { mode: scrollingMode, orientation: 'vertical' }, getResourceManager: getEmptyResourceManager, }).dxSchedulerTimelineMonth('instance'); @@ -615,7 +610,6 @@ QUnit.module('Timeline Keyboard Navigation', () => { ...resourceConfig, allowMultipleCellSelection: true, scrolling: { mode: scrollingMode, orientation: 'vertical' }, - renovateRender: true, }); const $element = this.instance.$element(); @@ -735,11 +729,9 @@ QUnit.test('Group header should be rendered correct, groupByDate = true and cros }); QUnit.test('Date table cells shoud have right cellData, groupByDate = true', async function(assert) { - this.instance.option('renovateRender', false); - const $cells = this.instance.$element().find('.dx-scheduler-date-table-cell'); - assert.deepEqual($cells.eq(0).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(0)), { startDate: new Date(2018, 1, 25, 9, 0), endDate: new Date(2018, 1, 25, 9, 30), allDay: false, @@ -749,7 +741,7 @@ QUnit.test('Date table cells shoud have right cellData, groupByDate = true', asy groupIndex: 0, }); - assert.deepEqual($cells.eq(1).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(1)), { startDate: new Date(2018, 1, 25, 9, 0), endDate: new Date(2018, 1, 25, 9, 30), allDay: false, @@ -759,7 +751,7 @@ QUnit.test('Date table cells shoud have right cellData, groupByDate = true', asy groupIndex: 1, }); - assert.deepEqual($cells.eq(50).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(50)), { startDate: new Date(2018, 2, 1, 9, 30), endDate: new Date(2018, 2, 1, 10), allDay: false, @@ -769,7 +761,7 @@ QUnit.test('Date table cells shoud have right cellData, groupByDate = true', asy groupIndex: 0, }); - assert.deepEqual($cells.eq(51).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(51)), { startDate: new Date(2018, 2, 1, 9, 30), endDate: new Date(2018, 2, 1, 10), allDay: false, @@ -779,7 +771,7 @@ QUnit.test('Date table cells shoud have right cellData, groupByDate = true', asy groupIndex: 1, }); - assert.deepEqual($cells.eq(82).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(82)), { startDate: new Date(2018, 2, 3, 11, 30), endDate: new Date(2018, 2, 3, 12), allDay: false, @@ -789,7 +781,7 @@ QUnit.test('Date table cells shoud have right cellData, groupByDate = true', asy groupIndex: 0, }); - assert.deepEqual($cells.eq(83).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(83)), { startDate: new Date(2018, 2, 3, 11, 30), endDate: new Date(2018, 2, 3, 12), allDay: false, @@ -876,7 +868,6 @@ QUnit.module('Renovated Render', { beforeEach() { this.createInstance = (options = {}, workSpace = 'dxSchedulerTimelineDay') => { this.instance = $('#scheduler-timeline')[workSpace]({ - renovateRender: true, currentDate: new Date(2020, 11, 21), startDayHour: 0, endDayHour: 1, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timezones.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timezones.tests.js index d5d612a56b18..9455b2c9d82c 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timezones.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timezones.tests.js @@ -1130,54 +1130,51 @@ module('Scheduler grid', moduleConfigWithClock, () => { }); } - [true, false].forEach((renovateRender) => { - test(`Recurrence appointment with 'Etc/UTC' tz should be updated correctly via drag when renovateRender is ${renovateRender} (T394991)`, async function(assert) { - const tzOffsetStub = sinon.stub(timeZoneUtils, 'getClientTimezoneOffset').returns(new Date('2015-12-25T17:00:00.000Z').getTimezoneOffset() * 60000); - try { - const scheduler = await createWrapper({ - _draggingMode: 'default', - currentDate: new Date(2015, 11, 25), - startDayHour: 16, - views: ['week'], - currentView: 'week', - editing: true, - timeZone: timeZones.UTC, - recurrenceEditMode: 'occurrence', - firstDayOfWeek: 1, - dataSource: [{ - text: 'a', - startDate: '2015-12-25T17:00:00.000Z', - endDate: '2015-12-25T17:30:00.000Z', - recurrenceRule: 'FREQ=DAILY' - }], - renovateRender, - }); + test('Recurrence appointment with \'Etc/UTC\' tz should be updated correctly via drag (T394991)', async function(assert) { + const tzOffsetStub = sinon.stub(timeZoneUtils, 'getClientTimezoneOffset').returns(new Date('2015-12-25T17:00:00.000Z').getTimezoneOffset() * 60000); + try { + const scheduler = await createWrapper({ + _draggingMode: 'default', + currentDate: new Date(2015, 11, 25), + startDayHour: 16, + views: ['week'], + currentView: 'week', + editing: true, + timeZone: timeZones.UTC, + recurrenceEditMode: 'occurrence', + firstDayOfWeek: 1, + dataSource: [{ + text: 'a', + startDate: '2015-12-25T17:00:00.000Z', + endDate: '2015-12-25T17:30:00.000Z', + recurrenceRule: 'FREQ=DAILY' + }], + }); - const rootElement = scheduler.getElement(); - let $appointment = $(rootElement).find(CLASSES.appointment).first(); - const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(21); - const initialAppointmentHeight = getOuterHeight($appointment); + const rootElement = scheduler.getElement(); + let $appointment = $(rootElement).find(CLASSES.appointment).first(); + const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(21); + const initialAppointmentHeight = getOuterHeight($appointment); - const pointer = pointerMock($appointment).start().down().move(10, 10); - $cell.trigger(dragEvents.enter); - pointer.up(); + const pointer = pointerMock($appointment).start().down().move(10, 10); + $cell.trigger(dragEvents.enter); + pointer.up(); - $appointment = rootElement.find(CLASSES.appointment).not('.dx-scheduler-appointment-recurrence'); + $appointment = rootElement.find(CLASSES.appointment).not('.dx-scheduler-appointment-recurrence'); - assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 3, 2.001, 'Appointment top is OK'); - assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); + assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 3, 2.001, 'Appointment top is OK'); + assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); - const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); + const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); - const startDate = new Date(2015, 11, 25, 17, 30); - const endDate = new Date(startDate.getTime() + 30 * 60 * 1000); - const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; + const startDate = new Date(2015, 11, 25, 17, 30); + const endDate = new Date(startDate.getTime() + 30 * 60 * 1000); + const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; - assert.equal(dateText, resultDate, 'Appointment date is OK'); - } finally { - tzOffsetStub.restore(); - } - }); + assert.equal(dateText, resultDate, 'Appointment date is OK'); + } finally { + tzOffsetStub.restore(); + } }); test('Task dragging when custom timeZone is set', async function(assert) { @@ -1225,55 +1222,52 @@ module('Scheduler grid', moduleConfigWithClock, () => { assert.deepEqual(dataSourceItem.endDate, updatedItem.endDate, 'New data is correct'); }); - [true, false].forEach((renovateRender) => { - test(`Appointment with 'Etc/UTC' tz should be rendered correctly when renovateRender is ${renovateRender} (T394991)`, async function(assert) { - const tzOffsetStub = sinon.stub(timeZoneUtils, 'getClientTimezoneOffset').returns(new Date('2016-06-25T17:00:00.000Z').getTimezoneOffset() * 60000); - try { - const scheduler = await createWrapper({ - _draggingMode: 'default', - currentDate: new Date(2016, 5, 25), - startDayHour: 16, - views: ['day'], - currentView: 'day', - editing: true, - timeZone: timeZones.Greenwich, - dataSource: [{ - text: 'a', - startDate: '2016-06-25T17:00:00.000Z', - endDate: '2016-06-25T17:30:00.000Z' - }], - renovateRender, - }); + test('Appointment with \'Etc/UTC\' tz should be rendered correctly (T394991)', async function(assert) { + const tzOffsetStub = sinon.stub(timeZoneUtils, 'getClientTimezoneOffset').returns(new Date('2016-06-25T17:00:00.000Z').getTimezoneOffset() * 60000); + try { + const scheduler = await createWrapper({ + _draggingMode: 'default', + currentDate: new Date(2016, 5, 25), + startDayHour: 16, + views: ['day'], + currentView: 'day', + editing: true, + timeZone: timeZones.Greenwich, + dataSource: [{ + text: 'a', + startDate: '2016-06-25T17:00:00.000Z', + endDate: '2016-06-25T17:30:00.000Z' + }], + }); - const rootElement = scheduler.getElement(); + const rootElement = scheduler.getElement(); - let $appointment = $(rootElement).find(CLASSES.appointment).first(); - const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(6); - const initialAppointmentHeight = getOuterHeight($appointment); + let $appointment = $(rootElement).find(CLASSES.appointment).first(); + const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(6); + const initialAppointmentHeight = getOuterHeight($appointment); - assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 2, 2.001, 'Appointment top is OK'); - assert.roughEqual(getOuterHeight($appointment), getOuterHeight($cell), 2.001, 'Appointment height is OK'); + assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 2, 2.001, 'Appointment top is OK'); + assert.roughEqual(getOuterHeight($appointment), getOuterHeight($cell), 2.001, 'Appointment height is OK'); - const pointer = pointerMock($appointment).start().down().move(10, 10); - $cell.trigger(dragEvents.enter); - pointer.up(); + const pointer = pointerMock($appointment).start().down().move(10, 10); + $cell.trigger(dragEvents.enter); + pointer.up(); - $appointment = rootElement.find(CLASSES.appointment).first(); + $appointment = rootElement.find(CLASSES.appointment).first(); - assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 6, 2.001, 'Appointment top is OK'); - assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); + assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 6, 2.001, 'Appointment top is OK'); + assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); - const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); + const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); - const startDate = new Date(2016, 5, 25, 19); - const endDate = new Date(startDate.getTime() + 30 * 60 * 1000); - const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; + const startDate = new Date(2016, 5, 25, 19); + const endDate = new Date(startDate.getTime() + 30 * 60 * 1000); + const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; - assert.equal(dateText, resultDate, 'Appointment date is OK'); - } finally { - tzOffsetStub.restore(); - } - }); + assert.equal(dateText, resultDate, 'Appointment date is OK'); + } finally { + tzOffsetStub.restore(); + } }); ['Etc/GMT-5', 'Asia/Calcutta'].forEach(timeZone => { @@ -1357,51 +1351,48 @@ module('Scheduler grid', moduleConfigWithClock, () => { assert.roughEqual(getOuterHeight($appointment), cellHeight * 2, 2.001, 'Appointment height is OK'); }); - [true, false].forEach((renovateRender) => { - test(`Appointment with custom tz that isn't equal to scheduler tz should be dragged correctly when renovateRender is ${renovateRender} (T392414)`, async function(assert) { - const scheduler = await createWrapper({ - _draggingMode: 'default', - currentDate: new Date(2015, 4, 25), - startDayHour: 6, - views: ['day'], - currentView: 'day', - editing: true, - recurrenceEditMode: 'occurrence', - timeZone: timeZones.Phoenix, // -7 - dataSource: [{ - text: 'a', - startDate: '2015-05-25T17:00:00.000Z', - endDate: '2015-05-25T17:15:00.000Z', - startDateTimeZone: timeZones.Lima, // -5 - endDateTimeZone: timeZones.Lima - }], - renovateRender, - }); + test('Appointment with custom tz that isn\'t equal to scheduler tz should be dragged correctly (T392414)', async function(assert) { + const scheduler = await createWrapper({ + _draggingMode: 'default', + currentDate: new Date(2015, 4, 25), + startDayHour: 6, + views: ['day'], + currentView: 'day', + editing: true, + recurrenceEditMode: 'occurrence', + timeZone: timeZones.Phoenix, // -7 + dataSource: [{ + text: 'a', + startDate: '2015-05-25T17:00:00.000Z', + endDate: '2015-05-25T17:15:00.000Z', + startDateTimeZone: timeZones.Lima, // -5 + endDateTimeZone: timeZones.Lima + }], + }); - const rootElement = scheduler.getElement(); + const rootElement = scheduler.getElement(); - let $appointment = $(rootElement).find(CLASSES.appointment).first(); - const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(6); - const initialAppointmentHeight = getOuterHeight($appointment); + let $appointment = $(rootElement).find(CLASSES.appointment).first(); + const $cell = $(rootElement).find(CLASSES.dateTableCell).eq(6); + const initialAppointmentHeight = getOuterHeight($appointment); - const pointer = pointerMock($appointment).start().down().move(10, 10); - $cell.trigger(dragEvents.enter); - pointer.up(); + const pointer = pointerMock($appointment).start().down().move(10, 10); + $cell.trigger(dragEvents.enter); + pointer.up(); - $appointment = rootElement.find(CLASSES.appointment).first(); + $appointment = rootElement.find(CLASSES.appointment).first(); - assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 6, 2.001, 'Appointment top is OK'); - assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); + assert.roughEqual($appointment.position().top, getOuterHeight($cell) * 6, 2.001, 'Appointment top is OK'); + assert.equal(getOuterHeight($appointment), initialAppointmentHeight, 'Appointment height is OK'); - const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); + const dateText = $appointment.find('.dx-scheduler-appointment-content-date').eq(0).text(); - const startDate = new Date(2016, 5, 25, 9); - const endDate = new Date(startDate.getTime() + 15 * 60 * 1000); - const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; + const startDate = new Date(2016, 5, 25, 9); + const endDate = new Date(startDate.getTime() + 15 * 60 * 1000); + const resultDate = `${dateLocalization.format(startDate, 'shorttime')} - ${dateLocalization.format(endDate, 'shorttime')}`; - assert.equal(dateText, resultDate, 'Appointment date is OK'); - }); + assert.equal(dateText, resultDate, 'Appointment date is OK'); }); test('Scheduler should not update scroll position if appointment is visible, when timeZone is set ', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.cellTemplate.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.cellTemplate.tests.js index 219b712f990b..d73c0c4d4839 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.cellTemplate.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.cellTemplate.tests.js @@ -215,7 +215,7 @@ module('CellTemplate tests', moduleConfig, () => { assert.equal(groupIndex, undefined, 'GroupIndex property is undefined'); }; - function getBaseConfig(renovateRender) { + function getBaseConfig() { return { currentView: 'day', currentDate: new Date(2020, 10, 19), @@ -225,7 +225,6 @@ module('CellTemplate tests', moduleConfig, () => { }], startDayHour: 10, endDayHour: 12, - renovateRender, }; } @@ -376,62 +375,52 @@ module('CellTemplate tests', moduleConfig, () => { assert.ok($element.find('.new-custom-class').length > 0, 'class after option changing is ok'); }); - [true, false].forEach((renovateRender) => { - const description = renovateRender - ? 'Renovated Render' - : 'Old Render'; - - module(description, {}, () => { - test('dataCellTemplate should have correct options', async function(assert) { - let templateOptions; + test('dataCellTemplate should have correct options', async function(assert) { + let templateOptions; - await createWrapper({ - currentView: 'week', - startDayHour: 5, - currentDate: new Date(2016, 8, 5), - firstDayOfWeek: 0, - groups: ['ownerId'], - resources, - dataCellTemplate: function(itemData, index, $container) { - if(index === 3 && $($container).hasClass('dx-scheduler-date-table-cell') && !templateOptions) { - templateOptions = itemData; - } - }, - renovateRender, - }); + await createWrapper({ + currentView: 'week', + startDayHour: 5, + currentDate: new Date(2016, 8, 5), + firstDayOfWeek: 0, + groups: ['ownerId'], + resources, + dataCellTemplate: function(itemData, index, $container) { + if(index === 3 && $($container).hasClass('dx-scheduler-date-table-cell') && !templateOptions) { + templateOptions = itemData; + } + }, + }); - assert.equal(templateOptions.text, '', 'text options is ok'); - assert.equal(templateOptions.startDate.getTime(), new Date(2016, 8, 7, 5).getTime(), 'startDate option is ok'); - assert.equal(templateOptions.endDate.getTime(), new Date(2016, 8, 7, 5, 30).getTime(), 'endDate option is ok'); - assert.deepEqual(templateOptions.groups, { - 'ownerId': 1 - }, 'Resources option is ok'); - }); + assert.equal(templateOptions.text, '', 'text options is ok'); + assert.equal(templateOptions.startDate.getTime(), new Date(2016, 8, 7, 5).getTime(), 'startDate option is ok'); + assert.equal(templateOptions.endDate.getTime(), new Date(2016, 8, 7, 5, 30).getTime(), 'endDate option is ok'); + assert.deepEqual(templateOptions.groups, { + 'ownerId': 1 + }, 'Resources option is ok'); + }); - test('dataCellTemplate should take cellElement with correct geometry (T453520)', async function(assert) { - assert.expect(4); - await createWrapper({ - currentView: 'week', - views: ['week'], - height: 700, - width: 700, - dataSource: [], - dataCellTemplate: function(cellData, cellIndex, cellElement) { - // all-day table cell size - if(cellData.allDay && !cellIndex) { - assert.roughEqual(getOuterWidth($(cellElement)), 89, 2, 'Data cell width is OK'); - assert.roughEqual(getOuterHeight($(cellElement)), 32, 1.001, 'Data cell height is OK'); - } + test('dataCellTemplate should take cellElement with correct geometry (T453520)', async function(assert) { + assert.expect(4); + await createWrapper({ + currentView: 'week', + views: ['week'], + height: 700, + width: 700, + dataSource: [], + dataCellTemplate: function(cellData, cellIndex, cellElement) { + // all-day table cell size + if(cellData.allDay && !cellIndex) { + assert.roughEqual(getOuterWidth($(cellElement)), 89, 2, 'Data cell width is OK'); + assert.roughEqual(getOuterHeight($(cellElement)), 32, 1.001, 'Data cell height is OK'); + } - // scheduler table cell size - if(!cellData.allDay && !cellIndex) { - assert.roughEqual($(cellElement).get(0).getBoundingClientRect().width, 90, 1.001, 'Data cell width is OK'); - assert.equal($(cellElement).get(0).getBoundingClientRect().height, 38, 'Data cell height is OK'); - } - }, - renovateRender, - }); - }); + // scheduler table cell size + if(!cellData.allDay && !cellIndex) { + assert.roughEqual($(cellElement).get(0).getBoundingClientRect().width, 90, 1.001, 'Data cell width is OK'); + assert.equal($(cellElement).get(0).getBoundingClientRect().height, 38, 'Data cell height is OK'); + } + }, }); }); @@ -595,7 +584,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 4, firstDayOfWeek: 0, currentDate: new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { actualDates.push( { @@ -651,7 +640,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 4, firstDayOfWeek: 0, currentDate: new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { actualDates.push( { @@ -727,7 +716,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 4, firstDayOfWeek: 0, currentDate: currentDate || new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { actualDates.push( { @@ -786,7 +775,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, firstDayOfWeek: 0, currentDate: new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { if(data.allDay) { assert.equal( @@ -850,7 +839,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, firstDayOfWeek: 0, currentDate: new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { if(data.allDay) { assert.equal( @@ -901,7 +890,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, firstDayOfWeek: 0, currentDate: new Date(2021, 7, 1), - renovateRender: true, + dataCellTemplate: (data) => { if(data.allDay) { assert.equal( @@ -986,7 +975,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2021, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { if(index === 0) { assert.equal(data.startDate.getTime(), firstCellDate.getTime(), 'First cell has correct startDate'); @@ -1033,7 +1022,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ data, index }); }, @@ -1095,7 +1084,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ data, index }); }, @@ -1138,7 +1127,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -1183,7 +1172,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -1234,7 +1223,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -1354,7 +1343,7 @@ module('CellTemplate tests', moduleConfig, () => { views: [view], currentView: view, currentDate: new Date(2020, 11, 1), - renovateRender: true, + dataCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -1524,18 +1513,13 @@ module('CellTemplate tests', moduleConfig, () => { }); }); - [true, false].forEach((renovateRender) => { - const description = renovateRender - ? 'Renovated Render' - : 'Old Render'; - - const baseConfig = getBaseConfig(renovateRender); + { + const baseConfig = getBaseConfig(); - module(description, { + module('Date Cell template', { beforeEach: function() { this.createInstance = async(options = {}) => { this.scheduler = await createWrapper({ - renovateRender, ...options, }); this.instance = this.scheduler.instance; @@ -1619,7 +1603,6 @@ module('CellTemplate tests', moduleConfig, () => { cellDuration: 60, groups: ['ownerId'], resources, - renovateRender, dateCellTemplate: function(data, index, element) { const d = data; $('
').appendTo(element).dxButton({ @@ -1836,7 +1819,7 @@ module('CellTemplate tests', moduleConfig, () => { } }); }); - }); + } }); module('Time Cell template', {}, function() { @@ -1998,7 +1981,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + timeCellTemplate: (data, index) => { templateOptions.push({ data, index }); }, @@ -2026,7 +2009,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + timeCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -2060,7 +2043,7 @@ module('CellTemplate tests', moduleConfig, () => { endDayHour: 1, cellDuration: 60, currentDate: new Date(2020, 7, 23), - renovateRender: true, + timeCellTemplate: (data, index) => { templateOptions.push({ ...data, index }); }, @@ -2104,14 +2087,10 @@ module('CellTemplate tests', moduleConfig, () => { }); }); - [true, false].forEach((renovateRender) => { - const description = renovateRender - ? 'Renovated Render' - : 'Old Render'; - - const baseConfig = getBaseConfig(renovateRender); + { + const baseConfig = getBaseConfig(); - module(description, {}, () => { + module('Time Cell template groups', {}, () => { [ { description: '"groups" and "groupIndex" should be correct in timeCellTemplate', @@ -2242,7 +2221,7 @@ module('CellTemplate tests', moduleConfig, () => { } }); }); - }); + } }); module('Template Change', () => { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.renovation.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.renovation.tests.js index 8eed78f82e87..fd00e91eacdc 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.renovation.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/views.renovation.tests.js @@ -27,7 +27,7 @@ module('Renovated Views', () => { dataSource: [{ id: 1, text: '1' }, { id: 2, text: '2' }], }], currentDate: new Date(2021, 1, 20), - renovateRender: true, + }); assert.equal(scheduler.workSpace.groups.getGroupHeaders().length, 2, 'Correct number of group headers'); @@ -45,7 +45,7 @@ module('Renovated Views', () => { views: [currentView], currentDate: new Date(2020, 1, 20), shadeUntilCurrentTime: true, - renovateRender: true, + }); let shader = scheduler.workSpace.getShader(); @@ -68,7 +68,7 @@ module('Renovated Views', () => { currentView: 'week', width: 500, height: 500, - renovateRender: true, + }); let virtualCells = scheduler.workSpace.getVirtualCells(); @@ -94,7 +94,7 @@ module('Renovated Views', () => { views: [view], currentView: view, showAllDayPanel: false, - renovateRender: true, + }); scheduler.instance.option('showAllDayPanel', true); @@ -110,7 +110,7 @@ module('Renovated Views', () => { views: [view], currentView: view, crossScrollingEnabled: true, - renovateRender: true, + height: 600, currentDate: new Date(2020, 0, 1), }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.day.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.day.tests.js index d70c4ab0ec96..ff8b429828d3 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.day.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.day.tests.js @@ -194,14 +194,12 @@ module('Work Space Day', { assert.deepEqual(this.instance.getDateRange(), [new Date(2015, 2, 16, 0, 0), new Date(2015, 2, 16, 23, 59)], 'Range is OK'); }); - test('Each cell should contain jQuery dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + test('Each cell should contain correct cellData', async function(assert) { this.instance.option('currentDate', new Date(2015, 2, 16)); const $cell = this.instance.$element().find('.' + CELL_CLASS).first(); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 2, 16, 0, 0), endDate: new Date(2015, 2, 16, 0, 30), allDay: false, @@ -209,20 +207,16 @@ module('Work Space Day', { }); }); - test('dxCellData should be \'immutable\'', function(assert) { - this.instance.option('renovateRender', false); - + test('cellData should be \'immutable\'', function(assert) { const $element = this.instance.$element(); const $cell = $element.find('.' + CELL_CLASS).first(); const cellData = this.instance.getCellData($cell); cellData.cellCustomField = 'cell-custom-data'; - assert.strictEqual($element.find('.' + CELL_CLASS).first().data('dxCellData').cellCustomField, undefined, 'Cell data is not affected'); + assert.strictEqual(this.instance.getCellData($element.find('.' + CELL_CLASS).first()).cellCustomField, undefined, 'Cell data is not affected'); }); test('Cells have right cellData in vertical grouped WorkSpace Day view', async function(assert) { - this.instance.option('renovateRender', false); - await applyWorkspaceGroups(this.instance, [{ label: 'one', fieldExpr: 'one', @@ -234,8 +228,8 @@ module('Work Space Day', { startDayHour: 9, showAllDayPanel: false }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(36).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(36)); assert.deepEqual(firstCellData.startDate, new Date(2018, 2, 16, 9), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2018, 2, 16, 9, 30), 'cell has right endDate'); @@ -284,12 +278,10 @@ module('Work Space Day with grouping by date', () => { }); test('Date table cells shoud have right cellData, groupByDate = true', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('intervalCount', 3); const $cells = this.instance.$element().find('.dx-scheduler-date-table-cell'); - assert.deepEqual($cells.eq(0).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(0)), { startDate: new Date(2018, 2, 1), endDate: new Date(2018, 2, 1, 0, 30), allDay: false, @@ -299,7 +291,7 @@ module('Work Space Day with grouping by date', () => { groupIndex: 0, }); - assert.deepEqual($cells.eq(1).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(1)), { startDate: new Date(2018, 2, 1), endDate: new Date(2018, 2, 1, 0, 30), allDay: false, @@ -309,7 +301,7 @@ module('Work Space Day with grouping by date', () => { groupIndex: 1, }); - assert.deepEqual($cells.eq(2).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(2)), { startDate: new Date(2018, 2, 2), endDate: new Date(2018, 2, 2, 0, 30), allDay: false, @@ -319,7 +311,7 @@ module('Work Space Day with grouping by date', () => { groupIndex: 0, }); - assert.deepEqual($cells.eq(3).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(3)), { startDate: new Date(2018, 2, 2), endDate: new Date(2018, 2, 2, 0, 30), allDay: false, @@ -329,7 +321,7 @@ module('Work Space Day with grouping by date', () => { groupIndex: 1, }); - assert.deepEqual($cells.eq(4).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(4)), { startDate: new Date(2018, 2, 3), endDate: new Date(2018, 2, 3, 0, 30), allDay: false, @@ -339,7 +331,7 @@ module('Work Space Day with grouping by date', () => { groupIndex: 0, }); - assert.deepEqual($cells.eq(5).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(5)), { startDate: new Date(2018, 2, 3), endDate: new Date(2018, 2, 3, 0, 30), allDay: false, @@ -351,34 +343,32 @@ module('Work Space Day with grouping by date', () => { }); test('Date table cells should have right cellData, groupByDate = true without groups', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option('getResourceManager', getEmptyResourceManager); this.instance.option('groups', []); const $cells = this.instance.$element().find('.dx-scheduler-date-table-cell'); - assert.deepEqual($cells.eq(0).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(0)), { startDate: new Date(2018, 2, 1), endDate: new Date(2018, 2, 1, 0, 30), allDay: false, groupIndex: 0, }); - assert.deepEqual($cells.eq(1).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(1)), { startDate: new Date(2018, 2, 2), endDate: new Date(2018, 2, 2, 0, 30), allDay: false, groupIndex: 0, }); - assert.deepEqual($cells.eq(2).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(2)), { startDate: new Date(2018, 2, 1, 0, 30), endDate: new Date(2018, 2, 1, 1, 0), allDay: false, groupIndex: 0, }); - assert.deepEqual($cells.eq(3).data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cells.eq(3)), { startDate: new Date(2018, 2, 2, 0, 30), endDate: new Date(2018, 2, 2, 1, 0), allDay: false, @@ -443,11 +433,10 @@ module('Work Space Day with grouping by date', () => { this.createInstance({ intervalCount: 2, currentDate: new Date(2017, 5, 29), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(1).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(95).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(1)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(95)); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 30, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 30, 0, 30), 'cell has right endtDate'); @@ -461,11 +450,10 @@ module('Work Space Day with grouping by date', () => { intervalCount: 3, currentDate: new Date(2017, 5, 28), startDate: new Date(2017, 5, 21), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(143).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(143)); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 27, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 27, 0, 30), 'cell has right endtDate'); @@ -479,11 +467,10 @@ module('Work Space Day with grouping by date', () => { intervalCount: 3, currentDate: new Date(2017, 5, 25), startDate: new Date(2017, 5, 30), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(143).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(143)); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 24, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 24, 0, 30), 'cell has right endtDate'); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.markup-1.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.markup-1.tests.js index 70d5ba7d38e8..b0bc1e8cc45f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.markup-1.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.markup-1.tests.js @@ -142,9 +142,7 @@ QUnit.module('Workspace Day markup', dayModuleConfig, () => { assert.equal(cellCounter, 48, 'Each row has a two cells'); }); - QUnit.test('Grouped cells should have a right group field in dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Grouped cells should have a right group field in cellData', async function(assert) { const $element = this.instance.$element(); await applyWorkspaceGroups(this.instance, [{ label: 'one', @@ -152,10 +150,10 @@ QUnit.module('Workspace Day markup', dayModuleConfig, () => { dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] }]); - assert.deepEqual($element.find('.dx-scheduler-date-table tbody tr>td').eq(0).data('dxCellData').groups, { + assert.deepEqual(this.instance.getCellData($element.find('.dx-scheduler-date-table tbody tr>td').eq(0)).groups, { one: 1 }, 'Cell group is OK'); - assert.deepEqual($element.find('.dx-scheduler-date-table tbody tr>td').eq(1).data('dxCellData').groups, { one: 2 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($element.find('.dx-scheduler-date-table tbody tr>td').eq(1)).groups, { one: 2 }, 'Cell group is OK'); }); QUnit.test('Scheduler workspace day view should not contain a single header', async function(assert) { @@ -164,27 +162,21 @@ QUnit.module('Workspace Day markup', dayModuleConfig, () => { assert.equal($element.find('.dx-scheduler-header-row th').length, 0, 'Date table has not header cell'); }); - [true, false].forEach((isRenovatedRender) => { - QUnit.test('Scheduler workspace day grouped view should contain a few headers', async function(assert) { - const $element = this.instance.$element(); - await applyWorkspaceGroups(this.instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }, { - label: 'two', - fieldExpr: 'two', - dataSource: [{ id: 1, text: 'c' }, { id: 2, text: 'd' }] - }]); - this.instance.option('renovateRender', isRenovatedRender); - - const lowerHeaderColspan = this.instance.option('renovateRender') - ? '1' : undefined; - - assert.equal($element.find('.dx-scheduler-header-row th').length, 0, 'Date table has not header cell'); - assert.equal($element.find('.dx-scheduler-group-row').eq(0).find('th').attr('colspan'), '2', 'Group header has a right \'colspan\''); - assert.strictEqual($element.find('.dx-scheduler-group-row').eq(1).find('th').attr('colspan'), lowerHeaderColspan, 'Group header has a right \'colspan\''); - }); + QUnit.test('Scheduler workspace day grouped view should contain a few headers', async function(assert) { + const $element = this.instance.$element(); + await applyWorkspaceGroups(this.instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }, { + label: 'two', + fieldExpr: 'two', + dataSource: [{ id: 1, text: 'c' }, { id: 2, text: 'd' }] + }]); + + assert.equal($element.find('.dx-scheduler-header-row th').length, 0, 'Date table has not header cell'); + assert.equal($element.find('.dx-scheduler-group-row').eq(0).find('th').attr('colspan'), '2', 'Group header has a right \'colspan\''); + assert.strictEqual($element.find('.dx-scheduler-group-row').eq(1).find('th').attr('colspan'), '1', 'Group header has a right \'colspan\''); }); QUnit.test('Time panel should have 24 rows and 24 cells', async function(assert) { @@ -322,26 +314,22 @@ QUnit.module('Workspace Day markup with vertical grouping', dayWithGroupingModul assert.equal($element.find('.dx-scheduler-time-panel-cell').length, cellCount, 'Time panel has a right count of cells'); }); - QUnit.test('Grouped cells should have a right group field in dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Grouped cells should have a right group field in cellData', async function(assert) { const $element = this.instance.$element(); - assert.deepEqual($element.find('.dx-scheduler-date-table tbody tr>td').eq(0).data('dxCellData').groups, { + assert.deepEqual(this.instance.getCellData($element.find('.dx-scheduler-date-table tbody tr>td').eq(0)).groups, { a: 1 }, 'Cell group is OK'); - assert.deepEqual($element.find('.dx-scheduler-date-table tbody tr>td').eq(25).data('dxCellData').groups, { a: 2 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($element.find('.dx-scheduler-date-table tbody tr>td').eq(25)).groups, { a: 2 }, 'Cell group is OK'); }); - QUnit.test('Grouped allDay cells should have a right group field in dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Grouped allDay cells should have a right group field in cellData', async function(assert) { this.instance.option('showAllDayPanel', true); const $allDayCells = this.instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`); - assert.deepEqual($allDayCells.eq(0).data('dxCellData').groups, { a: 1 }, 'Cell group is OK'); - assert.deepEqual($allDayCells.eq(1).data('dxCellData').groups, { a: 2 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($allDayCells.eq(0)).groups, { a: 1 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($allDayCells.eq(1)).groups, { a: 2 }, 'Cell group is OK'); }); }); @@ -570,17 +558,15 @@ QUnit.module('Workspace Week markup with vertical grouping', weekWithGroupingMod checkRowsAndCells(this.instance.$element(), assert, 0.5, 8, 20, 2); }); - QUnit.test('Grouped cells should have a right group field in dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Grouped cells should have a right group field in cellData', async function(assert) { const $element = this.instance.$element(); const $cells = $element.find('.dx-scheduler-date-table tbody tr>td'); const cellCount = $cells.length; - assert.deepEqual($cells.eq(0).data('dxCellData').groups, { + assert.deepEqual(this.instance.getCellData($cells.eq(0)).groups, { a: 1 }, 'Cell group is OK'); - assert.deepEqual($cells.eq(cellCount / 2).data('dxCellData').groups, { a: 2 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($cells.eq(cellCount / 2)).groups, { a: 2 }, 'Cell group is OK'); }); }); @@ -1123,17 +1109,15 @@ QUnit.module('Workspace Month markup with vertical grouping', monthWithGroupingM assert.equal(cellCounter, 12, 'Each row has a 7 cells'); }); - QUnit.test('Grouped cells should have a right group field in dxCellData', async function(assert) { - this.instance.option('renovateRender', false); - + QUnit.test('Grouped cells should have a right group field in cellData', async function(assert) { const $element = this.instance.$element(); const $cells = $element.find('.dx-scheduler-date-table tbody tr>td'); const cellCount = $cells.length; - assert.deepEqual($cells.eq(0).data('dxCellData').groups, { + assert.deepEqual(this.instance.getCellData($cells.eq(0)).groups, { a: 1 }, 'Cell group is OK'); - assert.deepEqual($cells.eq(cellCount / 2).data('dxCellData').groups, { a: 2 }, 'Cell group is OK'); + assert.deepEqual(this.instance.getCellData($cells.eq(cellCount / 2)).groups, { a: 2 }, 'Cell group is OK'); }); QUnit.test('Scheduler workspace month view should have a dates with other-month class', async function(assert) { @@ -1253,256 +1237,249 @@ QUnit.module('FirstGroupCell and LastGroupCell classes', () => { } }; - [true, false].forEach((isRenovatedRender) => { - const moduleName = isRenovatedRender - ? 'Renovated Render' - : 'Non-Renovated Render'; - - const groupClassesModuleConfig = { - beforeEach: function() { - this.createInstance = (workspaceClass, options = {}) => { - const instance = $('#scheduler-work-space')[workspaceClass]({ - intervalCount: 3, - renovateRender: isRenovatedRender, - startDayHour: 0, - endDayHour: 2, - currentDate: new Date(2020, 8, 27), - groupOrientation: 'horizontal', - getResourceManager: getEmptyResourceManager, - ...options, - })[workspaceClass]('instance'); - - return instance; - }; - } - }; - - QUnit.module(moduleName, groupClassesModuleConfig, () => { - [{ - view: WORKSPACE_DAY, - columnCountInGroup: 3, - rowCountInGroup: 4, - }, { - view: WORKSPACE_WEEK, - columnCountInGroup: 21, - rowCountInGroup: 4, - }, { - view: WORKSPACE_MONTH, - columnCountInGroup: 7, - rowCountInGroup: 14, - }].forEach(({ view, columnCountInGroup, rowCountInGroup }) => { - QUnit.test(`first-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { - const instance = this.createInstance(view.class); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); - - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); - }); - - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); - }); + const groupClassesModuleConfig = { + beforeEach: function() { + this.createInstance = (workspaceClass, options = {}) => { + const instance = $('#scheduler-work-space')[workspaceClass]({ + intervalCount: 3, + startDayHour: 0, + endDayHour: 2, + currentDate: new Date(2020, 8, 27), + groupOrientation: 'horizontal', + getResourceManager: getEmptyResourceManager, + ...options, + })[workspaceClass]('instance'); + + return instance; + }; + } + }; - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + QUnit.module('Group cell classes', groupClassesModuleConfig, () => { + [{ + view: WORKSPACE_DAY, + columnCountInGroup: 3, + rowCountInGroup: 4, + }, { + view: WORKSPACE_WEEK, + columnCountInGroup: 21, + rowCountInGroup: 4, + }, { + view: WORKSPACE_MONTH, + columnCountInGroup: 7, + rowCountInGroup: 14, + }].forEach(({ view, columnCountInGroup, rowCountInGroup }) => { + QUnit.test(`first-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { + const instance = this.createInstance(view.class); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { - const instance = this.createInstance(view.class); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], - }]); + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); + }); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); + }); - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); + }); + }); - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); - }); + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { + const instance = this.createInstance(view.class); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], + }]); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Date table'); + }); + + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); + }); + + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); + }); + + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); + }); + }); + + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { + const instance = this.createInstance(view.class, { + groupByDate: true, + }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { - const instance = this.createInstance(view.class, { - groupByDate: true, - }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); - }); - - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'All-day panel'); - }); - - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkFirstGroupCell(assert, this, index, GROUP_COUNT, 'All-day panel'); + }); + + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); + }); + + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); + }); + }); + + QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { + const instance = this.createInstance(view.class, { + groupOrientation: 'vertical', + }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + if(Math.floor(index / columnCountInGroup) % rowCountInGroup === 0) { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); + } else { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell does not have first-group class'); + } + }); + + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'All-day panel cell does not have first-group class'); + }); + + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function(index) { + if(index % rowCountInGroup === 0) { + assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell has first-group class'); + } else { assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); - }); + } + }); + + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell does not have first-group class'); + }); + }); + + QUnit.test(`last-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { + const instance = this.createInstance(view.class); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell has first-group class'); - }); + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); }); - QUnit.test(`first-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { - const instance = this.createInstance(view.class, { - groupOrientation: 'vertical', - }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }], - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - if(Math.floor(index / columnCountInGroup) % rowCountInGroup === 0) { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell has first-group class'); - } else { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Date table cell does not have first-group class'); - } - }); - - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'All-day panel cell does not have first-group class'); - }); - - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function(index) { - if(index % rowCountInGroup === 0) { - assert.ok($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell has first-group class'); - } else { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Time panel cell does not have first-group class'); - } - }); - - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(FIRST_GROUP_CELL_CLASS), 'Header panel cell does not have first-group class'); - }); + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); }); - QUnit.test(`last-group-cell class should be assigned to correct cells in basic case in ${view.name}`, async function(assert) { - const instance = this.createInstance(view.class); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); + }); + }); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { + const instance = this.createInstance(view.class); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); - }); + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); + }); - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); - }); + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped horizontally`, async function(assert) { - const instance = this.createInstance(view.class); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); + }); + }); - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Date table'); - }); + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { + const instance = this.createInstance(view.class, { + groupByDate: true, + }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); + }); - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'All-day panel'); - }); + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { + checkLastGroupCell(assert, this, index, GROUP_COUNT, 'All-day panel'); + }); - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); - }); + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, columnCountInGroup, 'Header panel'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell has last-group class'); }); + }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped by date`, async function(assert) { - const instance = this.createInstance(view.class, { - groupByDate: true, - }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, GROUP_COUNT, 'Date table'); - }); - - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function(index) { - checkLastGroupCell(assert, this, index, GROUP_COUNT, 'All-day panel'); - }); - - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); - }); + QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { + const instance = this.createInstance(view.class, { + groupOrientation: 'vertical', + }); + await applyWorkspaceGroups(instance, [{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }]); + + instance.$element().find(`.${CELL_CLASS}`).each(function(index) { + if((Math.floor(index / columnCountInGroup) + 1) % rowCountInGroup === 0) { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); + } else { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell does not have last-group class'); + } + }); + + instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'All-day panel cell does not have last-group class'); + }); - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell has last-group class'); - }); + instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function(index) { + if((index + 1) % rowCountInGroup === 0) { + assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell has last-group class'); + } else { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); + } }); - QUnit.test(`last-group-cell class should be assigned to correct cells in ${view.name} when appointments are grouped vertically`, async function(assert) { - const instance = this.createInstance(view.class, { - groupOrientation: 'vertical', - }); - await applyWorkspaceGroups(instance, [{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }]); - - instance.$element().find(`.${CELL_CLASS}`).each(function(index) { - if((Math.floor(index / columnCountInGroup) + 1) % rowCountInGroup === 0) { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell has last-group class'); - } else { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Date table cell does not have last-group class'); - } - }); - - instance.$element().find(`.${ALL_DAY_TABLE_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'All-day panel cell does not have last-group class'); - }); - - instance.$element().find(`.${TIME_PANEL_CELL_CLASS}`).each(function(index) { - if((index + 1) % rowCountInGroup === 0) { - assert.ok($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell has last-group class'); - } else { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Time panel cell does not have last-group class'); - } - }); - - instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { - assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); - }); + instance.$element().find(`.${HEADER_PANEL_CELL_CLASS}`).each(function() { + assert.notOk($(this).hasClass(LAST_GROUP_CELL_CLASS), 'Header panel cell does not have last-group class'); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.month.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.month.tests.js index 45519c1ef94a..8b30fd37d9a2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.month.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.month.tests.js @@ -29,26 +29,22 @@ module('Work Space Month', () => { }).dxSchedulerWorkSpaceMonth('instance'); } }, () => { - [true, false].forEach((renovateRender) => { - test(`Scheduler all day panel is invisible on month view after switching showAllDayPanel option when renovateRender is ${renovateRender}`, async function(assert) { - this.instance.option('renovateRender', renovateRender); - this.instance.option('showAllDayPanel', false); - this.instance.option('showAllDayPanel', true); + test('Scheduler all day panel is invisible on month view after switching showAllDayPanel option', async function(assert) { + this.instance.option('showAllDayPanel', false); + this.instance.option('showAllDayPanel', true); - const $allDayPanel = this.instance.$element().find('.dx-scheduler-all-day-table-cell'); + const $allDayPanel = this.instance.$element().find('.dx-scheduler-all-day-table-cell'); - assert.equal($allDayPanel.length, 0, 'allDay panel is invisible'); - }); + assert.equal($allDayPanel.length, 0, 'allDay panel is invisible'); + }); - test(`Scheduler all day title is invisible on month view after switching showAllDayPanel option when renovateRender is ${renovateRender}`, async function(assert) { - this.instance.option('renovateRender', renovateRender); - this.instance.option('showAllDayPanel', false); - this.instance.option('showAllDayPanel', true); + test('Scheduler all day title is invisible on month view after switching showAllDayPanel option', async function(assert) { + this.instance.option('showAllDayPanel', false); + this.instance.option('showAllDayPanel', true); - const $allDayTitle = this.instance.$element().find('.dx-scheduler-all-day-title'); + const $allDayTitle = this.instance.$element().find('.dx-scheduler-all-day-title'); - assert.equal($allDayTitle.length, 0, 'All-day title is invisible'); - }); + assert.equal($allDayTitle.length, 0, 'All-day title is invisible'); }); skip('Work space should find cell coordinates by date', async function(assert) { @@ -107,108 +103,101 @@ module('Work Space Month', () => { assert.deepEqual(this.instance.getDateRange(), [new Date(2015, 1, 23, 8, 0), new Date(2015, 3, 5, 19, 59)], 'Range is OK'); }); - test('Each cell should contain jQuery dxCellData depend on start day hour', async function(assert) { + test('Each cell should contain correct cellData depend on start day hour', async function(assert) { this.instance.option({ currentDate: new Date(2015, 2, 16), firstDayOfWeek: 1, startDayHour: 5, - renovateRender: false, }); const $cell = this.instance.$element().find('.' + CELL_CLASS).eq(0); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 1, 23, 5, 0), endDate: new Date(2015, 1, 24, 0, 0), groupIndex: 0, }); }); - test('Each cell should contain jQuery dxCellData depend on end day hour', async function(assert) { + test('Each cell should contain correct cellData depend on end day hour', async function(assert) { this.instance.option({ currentDate: new Date(2015, 2, 16), firstDayOfWeek: 1, endDayHour: 10, - renovateRender: false, }); const $cell = this.instance.$element().find('.' + CELL_CLASS).eq(0); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 1, 23, 0, 0), endDate: new Date(2015, 1, 23, 10, 0), groupIndex: 0, }); }); - test('Each cell should contain jQuery dxCellData depend on fractional hoursInterval', async function(assert) { + test('Each cell should contain correct cellData depend on fractional hoursInterval', async function(assert) { this.instance.option({ currentDate: new Date(2015, 2, 16), firstDayOfWeek: 1, hoursInterval: 2.1666666666666665, endDayHour: 5, - renovateRender: false, }); const $cell = this.instance.$element().find('.' + CELL_CLASS).eq(0); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 1, 23, 0, 0), endDate: new Date(2015, 1, 23, 5, 0), groupIndex: 0, }); }); - [true, false].forEach((renovateRender) => { - test(`WorkSpace should calculate max left position when renovateRender is ${renovateRender}`, async function(assert) { - this.instance.option({ - currentDate: new Date(2015, 2, 16), - firstDayOfWeek: 1, - renovateRender, - }); + test('WorkSpace should calculate max left position', async function(assert) { + this.instance.option({ + currentDate: new Date(2015, 2, 16), + firstDayOfWeek: 1, + }); + + const $lastCell = this.instance.$element().find('.dx-scheduler-date-table').find('td').eq(6); - const $lastCell = this.instance.$element().find('.dx-scheduler-date-table').find('td').eq(6); + assert.equal(Math.round(this.instance.getMaxAllowedPosition()), + Math.round($lastCell.position().left + getOuterWidth($lastCell)), 'Max left position is correct'); + }); - assert.equal(Math.round(this.instance.getMaxAllowedPosition()), - Math.round($lastCell.position().left + getOuterWidth($lastCell)), 'Max left position is correct'); + test('Grouped work space should calculate max left position', async function(assert) { + const resourceConfig = await getWorkspaceResourceConfig([{ + label: 'one', + fieldExpr: 'one', + dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] + }, { + label: 'two', + fieldExpr: 'two', + dataSource: [{ id: 1, text: 'c' }, { id: 2, text: 'd' }] + }]); + this.instance.option({ + currentDate: new Date(2015, 2, 16), + firstDayOfWeek: 1, + ...resourceConfig, }); - test(`Grouped work space should calculate max left position when renovateRender is ${renovateRender}`, async function(assert) { - const resourceConfig = await getWorkspaceResourceConfig([{ - label: 'one', - fieldExpr: 'one', - dataSource: [{ id: 1, text: 'a' }, { id: 2, text: 'b' }] - }, { - label: 'two', - fieldExpr: 'two', - dataSource: [{ id: 1, text: 'c' }, { id: 2, text: 'd' }] - }]); - this.instance.option({ - currentDate: new Date(2015, 2, 16), - firstDayOfWeek: 1, - ...resourceConfig, - renovateRender, - }); - - const $cells = this.instance.$element().find('.dx-scheduler-date-table tr').first().find('td'); - const $firstGroupLastCell = $cells.eq(6); - const $secondGroupLastCell = $cells.eq(13); - const $thirdGroupLastCell = $cells.eq(20); - const $fourthGroupLastCell = $cells.eq(27); - - const expectedResult = [ - $firstGroupLastCell.position().left + $firstGroupLastCell.get(0).getBoundingClientRect().width, - $secondGroupLastCell.position().left + $secondGroupLastCell.get(0).getBoundingClientRect().width, - $thirdGroupLastCell.position().left + $thirdGroupLastCell.get(0).getBoundingClientRect().width, - $fourthGroupLastCell.position().left + $fourthGroupLastCell.get(0).getBoundingClientRect().width - ]; - - const actualResult = [0, 1, 2, 3].map((groupIndex) => { - return this.instance.getMaxAllowedPosition(groupIndex); - }); - - assert.deepEqual(actualResult, expectedResult, 'Max left positions are correct'); + const $cells = this.instance.$element().find('.dx-scheduler-date-table tr').first().find('td'); + const $firstGroupLastCell = $cells.eq(6); + const $secondGroupLastCell = $cells.eq(13); + const $thirdGroupLastCell = $cells.eq(20); + const $fourthGroupLastCell = $cells.eq(27); + + const expectedResult = [ + $firstGroupLastCell.position().left + $firstGroupLastCell.get(0).getBoundingClientRect().width, + $secondGroupLastCell.position().left + $secondGroupLastCell.get(0).getBoundingClientRect().width, + $thirdGroupLastCell.position().left + $thirdGroupLastCell.get(0).getBoundingClientRect().width, + $fourthGroupLastCell.position().left + $fourthGroupLastCell.get(0).getBoundingClientRect().width + ]; + + const actualResult = [0, 1, 2, 3].map((groupIndex) => { + return this.instance.getMaxAllowedPosition(groupIndex); }); + + assert.deepEqual(actualResult, expectedResult, 'Max left positions are correct'); }); test('Group width calculation', async function(assert) { @@ -241,8 +230,6 @@ module('Work Space Month', () => { }); test('Get cell count to last view dates', async function(assert) { - this.instance.option('renovateRender', false); - this.instance.option({ currentDate: new Date(2016, 2, 14, 0, 0), startDayHour: 5, @@ -251,7 +238,7 @@ module('Work Space Month', () => { const $cell = this.instance.getCells().eq(14); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2016, 2, 14, 5, 0), endDate: new Date(2016, 2, 15, 0, 0), groupIndex: 0, @@ -268,11 +255,10 @@ module('Work Space Month', () => { currentDate: new Date(2018, 2, 1), groupOrientation: 'vertical', ...resourceConfig, - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(51).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(51)); assert.deepEqual(firstCellData.startDate, new Date(2018, 1, 25, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2018, 1, 26, 0), 'cell has right endtDate'); @@ -396,12 +382,11 @@ module('Work Space Month', () => { intervalCount: 3, currentDate: new Date(2017, 4, 25), startDate: new Date(2017, 0, 15), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').last().data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2017, 2, 26, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 2, 27, 0), 'cell has right endtDate'); @@ -418,12 +403,11 @@ module('Work Space Month', () => { intervalCount: 3, currentDate: new Date(2017, 1, 15), startDate: new Date(2017, 5, 15), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').last().data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2016, 10, 27, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2016, 10, 28, 0), 'cell has right endtDate'); @@ -440,12 +424,11 @@ module('Work Space Month', () => { intervalCount: 3, currentDate: new Date(2017, 6, 15), startDate: new Date(2017, 5, 15), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').last().data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(35)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2017, 4, 28, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 4, 29, 0), 'cell has right endtDate'); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.navigation.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.navigation.tests.js index c11bba1ae870..d03874c30bc9 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.navigation.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.navigation.tests.js @@ -46,7 +46,7 @@ module('Workspace navigation', () => { return $('#scheduler-work-space')[workSpaceName]({ currentDate: new Date(2021, 0, 10), scrolling: { mode: scrollingMode, orientation: 'vertical' }, - renovateRender: true, + getResourceManager: getEmptyResourceManager, ...options, }); @@ -979,7 +979,7 @@ module('Workspace navigation', () => { this.createInstance = (options, workSpaceName) => { return $('#scheduler-work-space')[workSpaceName]({ scrolling: { mode: scrollingMode, orientation: 'vertical' }, - renovateRender: true, + currentDate: new Date(2021, 0, 10), getResourceManager: getEmptyResourceManager, ...options, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js index 92fe4294faa8..551cc2999625 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.renovation.tests.js @@ -51,7 +51,6 @@ module('Renovated Render', { beforeEach() { this.createInstance = (options = {}, workSpace = 'dxSchedulerWorkSpaceDay') => { this.instance = $('#scheduler-work-space')[workSpace]({ - renovateRender: true, currentDate: new Date(2020, 6, 29), startDayHour: 0, endDayHour: 1, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.week.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.week.tests.js index 59b8c3390b21..00caa5eb920f 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.week.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.week.tests.js @@ -170,17 +170,16 @@ module('Work Space Week', () => { assert.deepEqual(this.instance.getDateRange(), [new Date(2015, 2, 16, 2, 0), new Date(2015, 2, 22, 2, 59)], 'Range is OK'); }); - test('Each cell should contain jQuery dxCellData depend on start day hour', async function(assert) { + test('Each cell should contain correct cellData depend on start day hour', async function(assert) { this.instance.option({ currentDate: new Date(2015, 2, 16), firstDayOfWeek: 1, startDayHour: 5, - renovateRender: false, }); const $cell = this.instance.$element().find(CLASSES.dateTableCell).eq(8); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 2, 17, 5, 30), endDate: new Date(2015, 2, 17, 6, 0), allDay: false, @@ -188,17 +187,16 @@ module('Work Space Week', () => { }); }); - test('Each cell should contain jQuery dxCellData depend on end day hour', async function(assert) { + test('Each cell should contain correct cellData depend on end day hour', async function(assert) { this.instance.option({ currentDate: new Date(2015, 2, 4), firstDayOfWeek: 1, endDayHour: 10, - renovateRender: false, }); const $cell = this.instance.$element().find(CLASSES.dateTableCell).eq(8); - assert.deepEqual($cell.data('dxCellData'), { + assert.deepEqual(this.instance.getCellData($cell), { startDate: new Date(2015, 2, 3, 0, 30), endDate: new Date(2015, 2, 3, 1, 0), allDay: false, @@ -268,10 +266,9 @@ module('Work Space Week', () => { currentDate: new Date(2016, 10, 6), firstDayOfWeek: 0, startDayHour: 1, - renovateRender: false, }); - const cellData = this.instance.$element().find('.dx-scheduler-date-table-row').eq(1).find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); + const cellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-row').eq(1).find('.dx-scheduler-date-table-cell').eq(0)); assert.equal(cellData.startDate.toString(), new Date(2016, 10, 6, 1, 30).toString(), 'Start date is OK'); assert.equal(cellData.endDate.toString(), new Date(2016, 10, 6, 2).toString(), 'End date is OK'); @@ -403,11 +400,10 @@ module('Work Space Week', () => { groupOrientation: 'vertical', startDayHour: 9, ...resourceConfig, - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(25).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(248).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(25)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(248)); assert.deepEqual(firstCellData.startDate, new Date(2018, 2, 15, 10, 30), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2018, 2, 15, 11), 'cell has right endtDate'); @@ -533,11 +529,10 @@ module('Work Space Week', () => { this.createInstance({ intervalCount: 2, currentDate: new Date(2017, 5, 25), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(6).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(671).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(6)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(671)); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 1, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 1, 0, 30), 'cell has right endtDate'); @@ -553,12 +548,11 @@ module('Work Space Week', () => { firstDayOfWeek: 1, currentDate: new Date(2017, 6, 26), startDate: new Date(2017, 6, 4), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(240).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(503).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(240)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(503)); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 24, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 24, 1), 'cell has right endtDate'); @@ -577,12 +571,11 @@ module('Work Space Week', () => { firstDayOfWeek: 1, currentDate: new Date(2017, 6, 4), startDate: new Date(2017, 6, 26), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(160).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(335).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(160)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(335)); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 26, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 26, 1), 'cell has right endtDate'); @@ -716,12 +709,11 @@ module('Work Space Work Week', () => { this.createInstance({ intervalCount: 2, currentDate: new Date(2017, 5, 25), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(4).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(5).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(479).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(4)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(5)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(479)); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 30, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 30, 0, 30), 'cell has right endtDate'); @@ -740,12 +732,11 @@ module('Work Space Work Week', () => { firstDayOfWeek: 1, currentDate: new Date(2017, 6, 26), startDate: new Date(2017, 6, 4), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(82).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').last().data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(82)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 24, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 24, 1), 'cell has right endtDate'); @@ -764,12 +755,11 @@ module('Work Space Work Week', () => { firstDayOfWeek: 1, currentDate: new Date(2017, 6, 4), startDate: new Date(2017, 6, 26), - renovateRender: false, }); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(36).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').last().data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(36)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').last()); assert.deepEqual(firstCellData.startDate, new Date(2017, 5, 26, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 5, 26, 1), 'cell has right endtDate'); @@ -799,7 +789,6 @@ module('Work Space Work Week', () => { hoursInterval: 1, firstDayOfWeek: 1, currentDate: new Date(2017, 6, 4), - renovateRender: false, getResourceManager: getEmptyResourceManager, }); @@ -809,10 +798,10 @@ module('Work Space Work Week', () => { dataSource: [{ id: 1, text: 'a.1' }, { id: 2, text: 'a.2' }] }]); - const firstCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).data('dxCellData'); - const secondCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(5).data('dxCellData'); - const thirdCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(10).data('dxCellData'); - const lastCellData = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(15).data('dxCellData'); + const firstCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); + const secondCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(5)); + const thirdCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(10)); + const lastCellData = this.instance.getCellData(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(15)); assert.deepEqual(firstCellData.startDate, new Date(2017, 6, 3, 0), 'cell has right startDate'); assert.deepEqual(firstCellData.endDate, new Date(2017, 6, 3, 1), 'cell has right endtDate');