diff --git a/packages/devextreme/testing/tests/DevExpress.knockout/scheduler.tests.js b/packages/devextreme/testing/tests/DevExpress.knockout/scheduler.tests.js index ec66e2de6adf..7f152fe86251 100644 --- a/packages/devextreme/testing/tests/DevExpress.knockout/scheduler.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.knockout/scheduler.tests.js @@ -5,7 +5,7 @@ require('integration/knockout'); const Scheduler = require('ui/scheduler'); const { waitAsync } = require('../../helpers/scheduler/waitForAsync.js'); -require('generic_light.css!'); +require('fluent_blue_light.css!'); if(QUnit.urlParams['nocsp']) { QUnit.module('scheduler'); @@ -115,6 +115,16 @@ QUnit.test('T1282055: appointment collector renders correct', async function(ass startDate: ko.observable('2021-06-01T16:30:00.000Z'), endDate: ko.observable('2021-06-01T18:30:00.000Z') }, + { + text: 'Install New Router in Dev Room', + startDate: ko.observable('2021-06-01T16:30:00.000Z'), + endDate: ko.observable('2021-06-01T18:30:00.000Z') + }, + { + text: 'Install New Router in Dev Room', + startDate: ko.observable('2021-06-01T16:30:00.000Z'), + endDate: ko.observable('2021-06-01T18:30:00.000Z') + }, { text: 'Install New Router in Dev Room', startDate: ko.observable('2021-06-01T16:30:00.000Z'), @@ -124,7 +134,6 @@ QUnit.test('T1282055: appointment collector renders correct', async function(ass views: ['month'], currentView: 'month', currentDate: new Date('2021-06-01T16:30:00'), - height: 300 }; } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/export.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/export.tests.js index 9d573c939658..59b0b29295c3 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/export.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/export.tests.js @@ -3,10 +3,20 @@ import { DataProvider } from '__internal/grids/pivot_grid/export/m_export'; import dateLocalization from 'common/core/localization/date'; import executeAsyncMock from '../../helpers/executeAsyncMock.js'; -import { checkDxFontIcon, DX_ICON_XLSX_FILE_CONTENT_CODE } from '../../helpers/checkDxFontIconHelper.js'; +import { DX_ICON_XLSX_FILE_CONTENT_CODE } from '../../helpers/checkDxFontIconHelper.js'; import 'ui/pivot_grid/ui.pivot_grid'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; + +function checkDxFontIcon(assert, dxIconSelector, expectedIconCode) { + const FLUENT_BASE_ICON_SIZE = 20; + + const iconBeforeElementStyle = getComputedStyle($(dxIconSelector).get(0), ':before'); + assert.strictEqual(iconBeforeElementStyle.content.charCodeAt(1), expectedIconCode, `icon code (${dxIconSelector})`); + const iconElementStyle = getComputedStyle($(dxIconSelector).get(0)); + assert.strictEqual(iconElementStyle.width, FLUENT_BASE_ICON_SIZE + 'px', `icon element width (${dxIconSelector})`); + assert.strictEqual(iconElementStyle.height, FLUENT_BASE_ICON_SIZE + 'px', `icon element height (${dxIconSelector})`); +} QUnit.testStart(function() { const markup = diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js index f75a6d92a6f2..ad74e430654e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js @@ -30,7 +30,7 @@ import { import { isRenderer } from 'core/utils/type'; import { addShadowDomStyles } from 'core/utils/shadow_dom'; import { triggerShownEvent } from 'common/core/events/visibility_change'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import dateLocalization from 'common/core/localization/date'; import { PivotGridDataSource } from '__internal/grids/pivot_grid/data_source/m_data_source'; @@ -40,7 +40,6 @@ import DataAreaModule from '__internal/grids/pivot_grid/data_area/m_data_area'; import DataControllerModule from '__internal/grids/pivot_grid/data_controller/m_data_controller'; import HeadersAreaModule from '__internal/grids/pivot_grid/headers_area/m_headers_area'; import pivotGridUtils, { getScrollbarWidth } from '__internal/grids/pivot_grid/m_widget_utils'; -import Scrollable from 'ui/scroll_view/ui.scrollable'; import pointerMock from '../../helpers/pointerMock.js'; @@ -2470,7 +2469,7 @@ QUnit.module('dxPivotGrid', { const $pivotGridElement = $('#pivotGrid').width(1200); const pivotGrid = createPivotGrid(this.testOptions); - $pivotGridElement.width(1100); + $pivotGridElement.width(1150); pivotGrid.resize(); assert.ok(pivotGrid, 'pivotGrid container is rendered'); @@ -2479,7 +2478,7 @@ QUnit.module('dxPivotGrid', { QUnit.test('no scroll after drawing data', function(assert) { const pivotGrid = createPivotGrid({ - width: 400, + width: 600, dataSource: { rows: [], @@ -2565,7 +2564,7 @@ QUnit.module('dxPivotGrid', { }); const tableElement = pivotGrid.$element().find('table').first(); - assert.strictEqual(Math.round(getHeight(tableElement)), 150); + assert.strictEqual(Math.round(getHeight(tableElement)), 151); }); QUnit.test('T317921: dxPivotGrid - Scrollbar overlaps the last column when the document height slightly exceeds the window height. Without columns scroll', function(assert) { @@ -2685,7 +2684,7 @@ QUnit.module('dxPivotGrid', { }); QUnit.test('resize when width changed to no scroll', function(assert) { - const $pivotGridElement = $('#pivotGrid').width(150); + const $pivotGridElement = $('#pivotGrid').width(200); const pivotGrid = createPivotGrid(this.testOptions); const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); @@ -2712,6 +2711,8 @@ QUnit.module('dxPivotGrid', { if(!devices.real().ios) { QUnit.test('bottom border and not vertical scroll when big height', function(assert) { $('#pivotGrid').height(1000); + $('#pivotGrid').width(1200); + const pivotGrid = createPivotGrid(this.testOptions); assert.ok(!pivotGrid._rowsArea.hasScroll(), 'has vertical scroll'); @@ -3124,7 +3125,7 @@ QUnit.module('dxPivotGrid', { const pivotGrid = createPivotGrid({ rtlEnabled: true, width: 500, - height: 150, + height: 200, fieldChooser: { enabled: false }, @@ -3139,7 +3140,7 @@ QUnit.module('dxPivotGrid', { const assertFunction = function(e) { if(e.scrollOffset.top === 10) { - assert.equal(dataAreaScrollable.scrollLeft(), 100); + assert.roughEqual(dataAreaScrollable.scrollLeft(), 100, 1); dataAreaScrollable.off('scroll', assertFunction); done(); } @@ -3150,7 +3151,7 @@ QUnit.module('dxPivotGrid', { dataAreaScrollable.on('scroll', assertFunction); dataAreaScrollable.scrollTo({ top: 10 }); - assert.equal(dataAreaScrollable.scrollLeft(), 100); + assert.roughEqual(dataAreaScrollable.scrollLeft(), 100, 1); }; dataAreaScrollable.on('scroll', scrollAssert); @@ -3432,7 +3433,7 @@ QUnit.module('dxPivotGrid', { return pivotGridOptions; }; - const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1005, height: 250 })); + const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1205, height: 250 })); this.clock.tick(10); @@ -3451,7 +3452,7 @@ QUnit.module('dxPivotGrid', { const table = pivotGrid.$element().find('table').first(); - assert.strictEqual(getWidth(table), 1005, 'table width'); + assert.strictEqual(getWidth(table), 1205, 'table width'); }); QUnit.test('Stretch columns when scrolling has size', function(assert) { @@ -3509,7 +3510,7 @@ QUnit.module('dxPivotGrid', { return pivotGridOptions; }; - const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1020, height: 250 })); + const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1220, height: 250 })); this.clock.tick(10); @@ -3529,7 +3530,7 @@ QUnit.module('dxPivotGrid', { const table = pivotGrid.$element().find('table').first(); - assert.strictEqual(getWidth(table), 1020, 'table width'); + assert.strictEqual(getWidth(table), 1220, 'table width'); }); @@ -3635,7 +3636,7 @@ QUnit.module('dxPivotGrid', { return pivotGridOptions; }; - const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1020, height: 250 })); + const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1220, height: 250 })); this.clock.tick(10); @@ -3699,7 +3700,7 @@ QUnit.module('dxPivotGrid', { return pivotGridOptions; }; - const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1050, height: 250 })); + const pivotGrid = createPivotGrid(createPivotGridOptions({ width: 1250, height: 250 })); this.clock.tick(10); @@ -3722,7 +3723,7 @@ QUnit.module('dxPivotGrid', { const table = pivotGrid.$element().find('table').first(); - assert.strictEqual(getWidth(table), 1050, 'table width'); + assert.strictEqual(getWidth(table), 1250, 'table width'); }); QUnit.test('B253995 - dxPivotGrid height is wrong when rows area has text wrapped to another line', function(assert) { @@ -3762,7 +3763,7 @@ QUnit.module('dxPivotGrid', { enabled: false }, width: 500, - height: 250, + height: 300, dataSource: { fields: [ { area: 'row' }, @@ -3781,11 +3782,11 @@ QUnit.module('dxPivotGrid', { const getRealHeight = function(element) { return window.getComputedStyle ? parseFloat(window.getComputedStyle(element).height) : element.clientHeight; }; - assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 250) <= 1); + assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 303) <= 1); const tableElement = pivotGrid.$element().find('table').first(); assert.strictEqual(getOuterWidth(tableElement), 500); - assert.strictEqual(Math.round(getOuterHeight(tableElement)), 250); + assert.strictEqual(Math.round(getOuterHeight(tableElement)), 303); }); QUnit.test('T510943. Row area width is higher than a container\'s width', function(assert) { @@ -3863,7 +3864,7 @@ QUnit.module('dxPivotGrid', { }, width: 500, showBorders: true, - height: 250, + height: 300, dataSource: { fields: [ { area: 'row' }, @@ -3887,7 +3888,7 @@ QUnit.module('dxPivotGrid', { const tableElement = pivotGrid.$element().find('table').first(); assert.strictEqual(getOuterWidth(tableElement), 500); - assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 250) <= 1); + assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 303) <= 1); assert.ok(tableElement.hasClass('dx-pivotgrid-border')); }); @@ -3928,7 +3929,7 @@ QUnit.module('dxPivotGrid', { enabled: false }, width: 500, - height: 250, + height: 300, dataSource: { fields: [ { area: 'row' }, @@ -3954,7 +3955,7 @@ QUnit.module('dxPivotGrid', { const tableElement = pivotGrid.$element().find('table').first(); assert.strictEqual(getOuterWidth(tableElement), 500); - assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 250) <= 1); + assert.ok(Math.abs(getRealHeight(pivotGrid.$element().children()[0]) - 303) <= 1); assert.ok(tableElement.hasClass('dx-pivotgrid-border')); }); @@ -4213,8 +4214,8 @@ QUnit.module('T984139, T1010175', { } const pivotGrid = createPivotGrid({ - width: 1000, - height: 1000, + width: 2000, + height: 2000, scrolling: { mode: 'virtual', useNative }, dataSource: { store: store, @@ -4230,14 +4231,14 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea._getScrollable(); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; checkLeftTopVisibleHeaderCellTexts(pivotGrid, expectedRowHeaderCellText, expectedColHeaderCellText, 'after scrolling'); }); @@ -4266,18 +4267,18 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const pathToExpand = [65]; + const pathToExpand = [45]; pivotGrid.getDataSource().expandHeaderItem(area, pathToExpand); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; checkLeftTopVisibleHeaderCellTexts(pivotGrid, expectedRowHeaderCellText, expectedColHeaderCellText, 'after expanding'); const getExpandedCells = () => pivotGrid.$element().find('.dx-pivotgrid-expanded'); @@ -4308,13 +4309,13 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const pathToExpand = [65]; + const pathToExpand = [45]; pivotGrid.getDataSource().expandHeaderItem(area, pathToExpand); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); @@ -4323,8 +4324,8 @@ QUnit.module('T984139, T1010175', { useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; checkLeftTopVisibleHeaderCellTexts(pivotGrid, expectedRowHeaderCellText, expectedColHeaderCellText, 'after collapsing'); const getExpandedCells = () => pivotGrid.$element().find('.dx-pivotgrid-expanded'); assert.strictEqual(getExpandedCells().length, 0); @@ -4355,8 +4356,8 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); @@ -4367,8 +4368,8 @@ QUnit.module('T984139, T1010175', { useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; checkLeftTopVisibleHeaderCellTexts(pivotGrid, expectedRowHeaderCellText, expectedColHeaderCellText, 'after changing visible to a false value'); }); @@ -4397,8 +4398,8 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); @@ -4413,8 +4414,8 @@ QUnit.module('T984139, T1010175', { dataSource.load(); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; checkLeftTopVisibleHeaderCellTexts(pivotGrid, expectedRowHeaderCellText, expectedColHeaderCellText, 'after changing visible to a true value'); }); @@ -4442,8 +4443,8 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); @@ -4477,14 +4478,14 @@ QUnit.module('T984139, T1010175', { const scrollable = pivotGrid._dataArea.groupElement().dxScrollable('instance'); scrollable.scrollTo({ - left: getHorizontalOffset(pivotGrid, '1', '60'), - top: getVerticalOffset(pivotGrid, '1', '60') + left: getHorizontalOffset(pivotGrid, '1', '40'), + top: getVerticalOffset(pivotGrid, '1', '40') }); useNative && triggerScrollEvent(scrollable, this.clock); this.clock.tick(100); - const expectedRowHeaderCellText = '60'; - const expectedColHeaderCellText = '60'; + const expectedRowHeaderCellText = '40'; + const expectedColHeaderCellText = '40'; filterPivotGrid(pivotGrid, [11], area); this.clock.tick(100); @@ -4530,8 +4531,8 @@ QUnit.module('Field Panel', { QUnit.test('pivot grid has correct size', function(assert) { const pivotGrid = createPivotGrid($.extend(true, this.testOptions, { - height: 250, - width: 1200, + height: 350, + width: 1400, fieldPanel: { allowFieldDragging: false } @@ -4539,8 +4540,8 @@ QUnit.module('Field Panel', { const tableElement = pivotGrid.$element().find('table').first(); - assert.ok(250 - getOuterHeight(tableElement) <= 1 && 250 - getOuterHeight(tableElement) >= 0, 'height'); - assert.strictEqual(getWidth(tableElement), 1200, 'width'); + assert.roughEqual(getOuterHeight(pivotGrid.$element().children()[0]), 353, 1); + assert.strictEqual(getWidth(tableElement), 1400, 'width'); assert.ok(!pivotGrid.hasScroll('column'), 'stretch to all width'); assert.ok(pivotGrid.hasScroll('row')); @@ -4672,8 +4673,8 @@ QUnit.module('Field Panel', { 'export': { enabled: true }, - width: 1200, - height: 250 + width: 1400, + height: 350 })); const tableElement = pivotGrid.$element().find('table').first(); @@ -4686,8 +4687,8 @@ QUnit.module('Field Panel', { } }); - assert.ok(250 - getOuterHeight(tableElement) <= 1 && 250 - getOuterHeight(tableElement) >= 0, 'height'); - assert.strictEqual(getWidth(tableElement), 1200, 'width'); + assert.roughEqual(getOuterHeight(tableElement), 353, 1); + assert.strictEqual(getWidth(tableElement), 1400, 'width'); assert.ok(!pivotGrid.hasScroll('column'), 'stretch to all width'); assert.ok(pivotGrid.hasScroll('row')); @@ -4740,12 +4741,12 @@ QUnit.module('Field Panel', { { caption: 'Sum2', format: 'percent', area: 'data', areaIndex: 1 } ] }, - width: 400, - height: 300 + width: 1500, + height: 550 })); const container = pivotGrid.$element().find('.dx-pivotgrid-container').first(); - assert.roughEqual(getHeight(container), 300, 1.01, 'height'); + assert.roughEqual(getHeight(container), 551, 1.01, 'height'); }); QUnit.test('PivotGrid should have correct height if filter fields take several lines and pivot has not vertical scroll', function(assert) { @@ -4782,12 +4783,12 @@ QUnit.module('Field Panel', { { caption: 'Sum2', format: 'percent', area: 'data', areaIndex: 1 } ] }, - width: 400, - height: 600 + width: 1500, + height: 550 })); const container = pivotGrid.$element().find('.dx-pivotgrid-container').first(); - assert.ok(getHeight(container) < 600, 'height'); + assert.roughEqual(getHeight(container), 551, 1); assert.ok(!pivotGrid.hasScroll('row'), 'rows area has not scroll'); }); @@ -4826,7 +4827,7 @@ QUnit.module('Field Panel', { ] }, width: 400, - height: 600 + height: 800 })); const dataAreaHeight = getHeight(pivotGrid.$element().find('.dx-pivotgrid-area-data')); @@ -4868,14 +4869,14 @@ QUnit.module('Field Panel', { QUnit.test('show borders', function(assert) { const pivotGrid = createPivotGrid($.extend(this.testOptions, { - width: 1200, - height: 250, + width: 1500, + height: 350, showBorders: true })); const tableElement = pivotGrid.$element().find('table').first(); - assert.ok(250 - getOuterHeight(tableElement) <= 1 && 250 - getOuterHeight(tableElement) >= 0, 'height'); - assert.strictEqual(getOuterWidth(tableElement), 1200, 'width'); + assert.roughEqual(getOuterHeight(tableElement), 353, 1, 'height'); + assert.strictEqual(getOuterWidth(tableElement), 1500, 'width'); assert.ok(!pivotGrid.hasScroll('column'), 'stretch to all width'); assert.ok(pivotGrid.hasScroll('row')); @@ -4931,7 +4932,7 @@ QUnit.module('Field Panel', { eventsEngine.trigger(pivotGrid.element(), 'dxresize'); const $dataAreaCell = pivotGrid.$element().find(`.${DATA_AREA_CELL_CLASS}`).first(); - const expectedHeight = fieldPanelVisible ? 31 : 86; + const expectedHeight = fieldPanelVisible ? 23 : 101; assert.roughEqual(getHeight($dataAreaCell), expectedHeight, 1.1, 'data area has correct height'); clock.restore(); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-0.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-0.tests.js index d9b492d3d8ac..d4dde7267a64 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-0.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-0.tests.js @@ -17,7 +17,7 @@ import { } from '../../helpers/scheduler/helpers.js'; import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, test, testStart } = QUnit; @@ -83,7 +83,8 @@ module('All day appointments common', config, () => { currentDate: new Date(2015, 2, 16), dataSource: dataSource, startDayHour: 6, - currentView: 'week' + currentView: 'week', + maxAppointmentsPerCell: 'unlimited' }); const $appointments = $(scheduler.instance.$element()).find('.dx-scheduler-appointment'); @@ -261,9 +262,9 @@ module('All day appointments common', config, () => { maxAppointmentsPerCell: 2 }); - assert.roughEqual(scheduler.appointments.getAppointmentHeight(0), 25, 1.5, 'Appointment has correct height'); - assert.roughEqual(scheduler.appointments.getAppointmentHeight(1), 25, 1.5, 'Appointment has correct height'); - assert.roughEqual(scheduler.appointments.getAppointmentPosition(0).top, 25, 1.5, 'Appointment has correct top'); + assert.roughEqual(scheduler.appointments.getAppointmentHeight(0), 13.5, 1.5, 'Appointment has correct height'); + assert.roughEqual(scheduler.appointments.getAppointmentHeight(1), 13.5, 1.5, 'Appointment has correct height'); + assert.roughEqual(scheduler.appointments.getAppointmentPosition(0).top, 30, 1.5, 'Appointment has correct top'); assert.equal(scheduler.appointments.compact.getButtonCount(), 1, 'Appointment collector is rendered'); }); @@ -494,17 +495,18 @@ module('All day appointments common', config, () => { await waitForAsync(() => scheduler.appointments.getAppointments().length === 10); scheduler.appointments.compact.click(); - assert.equal(scheduler.tooltip.getItemCount(), 3, 'There are 3 drop down appts in 1st group'); + assert.equal(scheduler.tooltip.getItemCount(), 4, 'There are 4 drop down appts in 1st group'); scheduler.appointments.compact.click(1); - assert.equal(scheduler.tooltip.getItemCount(), 3, 'There are 3 drop down appts in 2d group'); + assert.equal(scheduler.tooltip.getItemCount(), 4, 'There are 4 drop down appts in 2d group'); }); test('DropDown appointment should be removed correctly when needed', async function(assert) { const scheduler = await createInstance({ currentDate: new Date(2015, 4, 25), views: ['week'], - currentView: 'week' + currentView: 'week', + maxAppointmentsPerCell: 2, }); const items = [ diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-1.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-1.tests.js index e6ced115583a..43f40151c2dc 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-1.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/allDayAppointments.common-1.tests.js @@ -12,7 +12,7 @@ import { } from '../../helpers/scheduler/helpers.js'; import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; const { module, test, testStart } = QUnit; @@ -292,8 +292,8 @@ module('All day appointments common', config, () => { assert.equal(scheduler.appointments.getTitleText(3), 'Simple appointment', 'Text is right'); assert.roughEqual(scheduler.appointments.getAppointmentPosition(3).left, 0, 1.001, 'Appointment position is OK'); - assert.roughEqual(scheduler.appointments.getAppointmentPosition(3).top, 100, 1.001, 'Appointment position is OK'); - assert.roughEqual(scheduler.appointments.getAppointmentWidth(3), cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET, 1.001, 'Appointment size is OK'); + assert.roughEqual(scheduler.appointments.getAppointmentPosition(3).top, 76, 1.001, 'Appointment position is OK'); + assert.roughEqual(scheduler.appointments.getAppointmentWidth(3), cellWidth - APPOINTMENT_DEFAULT_LEFT_OFFSET, 5, 'Appointment size is OK'); }); test('dropDown appointment should have correct container & position', async function(assert) { @@ -325,7 +325,7 @@ module('All day appointments common', config, () => { const $dropDown = $(scheduler.instance.$element()).find('.dx-scheduler-appointment-collector').eq(0); assert.equal($dropDown.parent().get(0), $(scheduler.instance.$element()).find('.dx-scheduler-all-day-appointments').get(0), 'Container is OK'); - assert.roughEqual(translator.locate($dropDown).left, 128, 1.001, 'Appointment position is OK'); + assert.roughEqual(translator.locate($dropDown).left, 133.28125, 1.001, 'Appointment position is OK'); assert.roughEqual(translator.locate($dropDown).top, 0, 1.001, 'Appointment position is OK'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.monthView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.monthView.tests.js index 61be4a332f87..e1faebfbc236 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.monthView.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.monthView.tests.js @@ -17,7 +17,8 @@ import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; + +import 'fluent_blue_light.css!'; const { module, @@ -30,7 +31,7 @@ testStart(() => initTestMarkup()); const DATE_TABLE_CELL_CLASS = 'dx-scheduler-date-table-cell'; const APPOINTMENT_CLASS = 'dx-scheduler-appointment'; -const APPOINTMENT_DEFAULT_TOP_OFFSET = 26; +const APPOINTMENT_DEFAULT_TOP_OFFSET = 30; const getAppointmentColor = ($task, checkedProperty) => { checkedProperty = checkedProperty || 'backgroundColor'; @@ -493,41 +494,28 @@ module('Integration: Appointments in Month view', { }); const appointments = scheduler.instance._getAppointmentsToRepaint(); - const parts = appointments.map((item) => ({ - level: item.level, - maxLevel: item.maxLevel, - partIndex: item.partIndex, - partTotalCount: item.partTotalCount, - reduced: item.reduced, - })); + const parts = appointments.map((item) => { + const part = { level: item.level }; + if(item.partIndex !== undefined) part.partIndex = item.partIndex; + if(item.partTotalCount !== undefined) part.partTotalCount = item.partTotalCount; + return part; + }); assert.deepEqual(parts, [ { level: 0, - maxLevel: 2, partIndex: 0, partTotalCount: 2, - reduced: 'head', }, { level: 1, - maxLevel: 2, - partIndex: undefined, - partTotalCount: undefined, - reduced: null, }, { level: 0, - maxLevel: 2, partIndex: 1, partTotalCount: 2, - reduced: 'tail', }, { level: 1, - maxLevel: 2, - partIndex: undefined, - partTotalCount: undefined, - reduced: null, } ], 'Parts should be correct'); }); @@ -573,7 +561,7 @@ module('Integration: Appointments in Month view', { }], currentView: 'month', firstDayOfWeek: 1, - height: 800 + height: 1200, }); const $appointments = scheduler.instance.$element().find('.' + APPOINTMENT_CLASS); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.scroll.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.scroll.tests.js index f4913bf948a2..ce15cfcd6b57 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.scroll.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.scroll.tests.js @@ -8,7 +8,7 @@ import { import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, @@ -225,9 +225,9 @@ module('Integration: Appointment scroll', { store: [] }), currentView: 'week', - height: 500, + height: 400, showAllDayPanel: false, - width: 600 + width: 400 }); scheduler.instance.getWorkSpaceScrollable().scrollBy(140); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.templates.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.templates.tests.js index 520f035f7d35..53fd732c329e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.templates.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointment.templates.tests.js @@ -8,7 +8,7 @@ import { import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; QUnit.testStart(() => initTestMarkup()); @@ -311,7 +311,10 @@ QUnit.module('Integration: Appointment templates', { data: recurrenceAndCompactData, appointmentTooltip: createTestForRecurrenceData, name: 'recurrence in collector', - testCollector: true + testCollector: true, + options: { + maxAppointmentsPerCell: 2 + } }, { data: hourlyRecurrenceData, 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 d100dcf8d02b..692389ac1d16 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 @@ -9,7 +9,7 @@ import { import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, @@ -22,7 +22,7 @@ QUnit.testStart(() => initTestMarkup()); const DATE_TABLE_CELL_CLASS = 'dx-scheduler-date-table-cell'; const APPOINTMENT_CLASS = 'dx-scheduler-appointment'; -const APPOINTMENT_DEFAULT_TOP_OFFSET = 26; +const APPOINTMENT_DEFAULT_TOP_OFFSET = 30; const createInstanceBase = async(options) => { const scheduler = await createWrapper({ 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 7c25bf02d26c..5525e0287dca 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 @@ -21,7 +21,7 @@ import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, @@ -1089,10 +1089,16 @@ module('Integration: Appointment Day, Week views', { assert.strictEqual(scheduler.appointments.compact.getButtonCount(), 2, 'Appointments are rendered'); - const tailCoords = translator.locate(scheduler.appointments.compact.getButton(1)); + const coords = [ + translator.locate(scheduler.appointments.compact.getButton(0)), + translator.locate(scheduler.appointments.compact.getButton(1)), + ].sort((a, b) => a.left - b.left); - assert.strictEqual(tailCoords.top, 0, 'Appointment top is correct'); - assert.roughEqual(tailCoords.left, 196, 2, 'Appointment left is correct'); + assert.strictEqual(coords[0].top, 475, 'Appointment top is correct'); + assert.roughEqual(coords[0].left, 120, 2, 'Appointment left is correct'); + + assert.strictEqual(coords[1].top, 0, 'Appointment top is correct'); + assert.roughEqual(coords[1].left, 195, 2, 'Appointment left is correct'); }); test('targetedAppointmentData should have valid targeted resource on onAppointmentClick event', async function(assert) { @@ -1205,10 +1211,10 @@ module('Integration: Appointment Day, Week views', { assert.equal(appointments.length, 2, 'Correct number of appointments'); assert.equal(appointments[0].position.top, 0, 'Correct top coordinate'); - assert.roughEqual(appointments[0].position.left, 224, 2, 'Correct left coordinate'); + assert.roughEqual(appointments[0].position.left, 233.25, 2, 'Correct left coordinate'); assert.equal(appointments[1].position.top, 0, 'Correct top coordinate'); - assert.roughEqual(appointments[1].position.left, 448, 2, 'Correct left coordinate'); + assert.roughEqual(appointments[1].position.left, 466.5, 2, 'Correct left coordinate'); }); test('Appointments should be rendered correctly when groupByDate is true in Week view', async function(assert) { @@ -1251,10 +1257,10 @@ module('Integration: Appointment Day, Week views', { assert.equal(appointments.length, 2, 'Correct number of appointments'); - assert.equal(appointments[0].position.top, 100, 'Correct top coordinate'); - assert.roughEqual(appointments[0].position.left, 320, 2, 'Correct left coordinate'); + assert.equal(appointments[0].position.top, 76, 'Correct top coordinate'); + assert.roughEqual(appointments[0].position.left, 333.203125, 2, 'Correct left coordinate'); - assert.equal(appointments[1].position.top, 200, 'Correct top coordinate'); - assert.roughEqual(appointments[1].position.left, 640, 2, 'Correct left coordinate'); + assert.equal(appointments[1].position.top, 152, 'Correct top coordinate'); + assert.roughEqual(appointments[1].position.left, 667, 2, 'Correct left coordinate'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js index 1d798d05bd56..1a2543e9d60e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.initialization.tests.js @@ -9,7 +9,7 @@ import { AppointmentDataSource } from '__internal/scheduler/view_model/generate_ import { createWrapper, initTestMarkup, SchedulerTestWrapper } from '../../helpers/scheduler/helpers.js'; import { waitForAsync, waitGlobalFailure } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; QUnit.testStart(() => initTestMarkup()); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.options.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.options.tests.js index b5f4add53b58..5a342585b4c1 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.options.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/common.options.tests.js @@ -3,7 +3,7 @@ import devices from '__internal/core/m_devices'; import { CustomStore } from 'common/data/custom_store'; import { DataSource } from 'common/data/data_source/data_source'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import { triggerHidingEvent, triggerShownEvent } from 'common/core/events/visibility_change'; import $ from 'jquery'; @@ -375,7 +375,7 @@ QUnit.module('Options', () => { currentDate: new Date(2015, 1, 9), currentView: 'month', dataSource: data, - height: 500, + height: 800, width: 800 }); @@ -396,7 +396,7 @@ QUnit.module('Options', () => { currentView: 'month', dataSource: data, maxAppointmentsPerCell: 2, - height: 500, + height: 800, width: 800 }); 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 d9b00cc53aca..c431fbc3c725 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 @@ -6,7 +6,7 @@ import { isRenderer } from 'core/utils/type'; import { CustomStore } from 'common/data/custom_store'; import { DataSource } from 'common/data/data_source/data_source'; import { triggerHidingEvent, triggerShownEvent } from 'common/core/events/visibility_change'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import { getTimeZones } from 'time_zone_utils'; @@ -590,7 +590,8 @@ QUnit.module('View with configuration', () => { appointmentTooltipTemplate: function() { countCallTemplate1++; }, - currentView: 'month' + currentView: 'month', + maxAppointmentsPerCell: 1 }); $(scheduler.instance.$element().find('.dx-scheduler-appointment-collector').eq(0)).trigger('dxclick'); @@ -630,7 +631,8 @@ QUnit.module('View with configuration', () => { appointmentCollectorTemplate: function() { countCallTemplate1++; }, - currentView: 'month' + currentView: 'month', + maxAppointmentsPerCell: 1 }); $(scheduler.instance.$element().find('.dx-scheduler-appointment-collector').eq(0)).trigger('dxclick'); @@ -706,7 +708,7 @@ QUnit.module('View with configuration', () => { ['day', 'week', 'month'].forEach(viewName => { QUnit.test(`Cell should have default height if view: '${viewName}'`, async function(assert) { - const DEFAULT_CELL_HEIGHT = 50; + const DEFAULT_CELL_HEIGHT = viewName === 'month' ? 100 : 38; const scheduler = await createWrapper({ views: [viewName], diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/contentReadyEvent.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/contentReadyEvent.tests.js index 09b868113c26..8dfe3c998ac8 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/contentReadyEvent.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/contentReadyEvent.tests.js @@ -7,7 +7,7 @@ import { CustomStore } from 'common/data/custom_store'; import fx from 'common/core/animation/fx'; import '__internal/scheduler/m_scheduler'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; QUnit.testStart(() => initTestMarkup()); @@ -169,8 +169,8 @@ QUnit.module('onContentReady event', moduleConfig, () => { assert.equal($header.length, 1, 'Header is rendered'); assert.equal($workSpace.length, 1, 'Work Space is rendered'); assert.equal(scheduler.appointments.getAppointmentCount(), 1, 'Appointment is rendered'); - assert.roughEqual(appointmentPosition.top, 100, 2.001, 'Appointment top is OK'); - assert.roughEqual(appointmentPosition.left, 199, 1.001, 'Appointment left is OK'); + assert.roughEqual(appointmentPosition.top, 76, 2.001, 'Appointment top is OK'); + assert.roughEqual(appointmentPosition.left, 209, 1.001, 'Appointment left is OK'); done(); } }); @@ -189,8 +189,8 @@ QUnit.module('onContentReady event', moduleConfig, () => { const appointmentPosition = translator.locate(scheduler.appointments.getAppointment()); assert.equal(scheduler.appointments.getAppointmentCount(), 1, 'Appointment is rendered'); - assert.roughEqual(appointmentPosition.top, 100, 2.001, 'Appointment top is OK'); - assert.roughEqual(appointmentPosition.left, 199, 1.001, 'Appointment left is OK'); + assert.roughEqual(appointmentPosition.top, 76, 2.001, 'Appointment top is OK'); + assert.roughEqual(appointmentPosition.left, 209, 1.001, 'Appointment left is OK'); }); scheduler.instance.addAppointment({ @@ -217,8 +217,8 @@ QUnit.module('onContentReady event', moduleConfig, () => { const appointmentPosition = translator.locate(scheduler.appointments.getAppointment()); assert.equal(scheduler.appointments.getAppointmentCount(), 1, 'Appointment is rendered'); - assert.roughEqual(appointmentPosition.top, 150, 2.001, 'Appointment top is OK'); - assert.roughEqual(appointmentPosition.left, 199, 1.001, 'Appointment left is OK'); + assert.roughEqual(appointmentPosition.top, 114, 2.001, 'Appointment top is OK'); + assert.roughEqual(appointmentPosition.left, 209, 1.001, 'Appointment left is OK'); }); scheduler.instance.updateAppointment(appointment, { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/currentTimeIndicator.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/currentTimeIndicator.tests.js index bb69c6c167aa..1aed7aa0dd50 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/currentTimeIndicator.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/currentTimeIndicator.tests.js @@ -15,7 +15,7 @@ const SCHEDULER_DATE_TIME_SHADER_TOP_CLASS = 'dx-scheduler-date-time-shader-top' const SCHEDULER_DATE_TIME_SHADER_BOTTOM_CLASS = 'dx-scheduler-date-time-shader-bottom'; const SCHEDULER_DATE_TIME_INDICATOR_CLASS = 'dx-scheduler-date-time-indicator'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/workspaces/m_work_space_day'; import '__internal/scheduler/workspaces/m_work_space_week'; @@ -239,11 +239,11 @@ QUnit.module('DateTime indicator on Day View', () => { const $element = instance.$element(); - assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 25, 1, 'Indicator has correct height'); + assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 32, 1, 'Indicator has correct height'); instance.option('allDayExpanded', true); - assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 75, 1, 'Indicator has correct height'); + assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 57, 1, 'Indicator has correct height'); }); QUnit.test('Shader should have correct height, Day view', async function(assert) { @@ -386,7 +386,7 @@ QUnit.module('DateTime indicator on Day View', () => { const $element = instance.$element(); const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); - assert.roughEqual(getOuterHeight($shader), 475, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 361, 1, 'Shader has correct height'); }); QUnit.test('Shader parts should be rendered correctly, Day view with crossScrollingEnabled', async function(assert) { @@ -457,12 +457,11 @@ QUnit.module('DateTime indicator on Day View, vertical grouping', () => { const $element = instance.$element(); const $indicators = $element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS); - const cellHeight = instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0).getBoundingClientRect().height; assert.equal($indicators.length, 2, 'Indicator count is correct'); - assert.equal($indicators.eq(0).position().left, 100); - assert.equal($indicators.eq(0).position().top, 10.5 * cellHeight); - assert.equal($indicators.eq(1).position().left, 100); - assert.equal($indicators.eq(1).position().top, 23.5 * cellHeight); + assert.equal($indicators.eq(0).position().left, 65); + assert.equal($indicators.eq(0).position().top, 411); + assert.equal($indicators.eq(1).position().left, 65); + assert.equal($indicators.eq(1).position().top, 917); }); QUnit.test('DateTimeIndicator should have correct positions, Day view with groups and allDay customization, verticalGrouping (T737095)', async function(assert) { @@ -519,9 +518,9 @@ QUnit.module('DateTime indicator on Day View, vertical grouping', () => { const $indicators = $element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS); const cellHeight = instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0).getBoundingClientRect().height; assert.equal($indicators.length, 2, 'Indicator count is correct'); - assert.equal($indicators.eq(0).position().left, 100); + assert.equal($indicators.eq(0).position().left, 65); assert.equal($indicators.eq(0).position().top, 9.5 * cellHeight); - assert.equal($indicators.eq(1).position().left, 100); + assert.equal($indicators.eq(1).position().left, 65); assert.equal($indicators.eq(1).position().top, 21.5 * cellHeight); }); @@ -539,12 +538,11 @@ QUnit.module('DateTime indicator on Day View, vertical grouping', () => { const $element = instance.$element(); const $indicators = $element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS); - const cellHeight = instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0).getBoundingClientRect().height; assert.equal($indicators.length, 2, 'Indicator count is correct'); - assert.equal($indicators.eq(0).position().left, 100); - assert.equal($indicators.eq(0).position().top, 10.5 * cellHeight); - assert.equal($indicators.eq(1).position().left, 100); - assert.equal($indicators.eq(1).position().top, 23.5 * cellHeight); + assert.equal($indicators.eq(0).position().left, 65); + assert.equal($indicators.eq(0).position().top, 411); + assert.equal($indicators.eq(1).position().left, 65); + assert.equal($indicators.eq(1).position().top, 917); }); QUnit.test('AllDay Shader should be wrapped by allDay panel', async function(assert) { @@ -577,7 +575,7 @@ QUnit.module('DateTime indicator on Day View, vertical grouping', () => { const cellWidth = instance.getCellWidth(); assert.roughEqual(getOuterHeight($shader), 10.5 * cellHeight, 1, 'Shader has correct height'); - assert.roughEqual(getOuterWidth($shader), 3 * cellWidth + 100, 5, 'Shader has correct width'); + assert.roughEqual(getOuterWidth($shader), 933, 5, 'Shader has correct width'); for(let i = 0; i <= 2; i++) { const $topShader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_TOP_CLASS).eq(i); @@ -662,7 +660,7 @@ QUnit.module('DateTime indicator on Week View', () => { resizeCallbacks.fire(); const $element = instance.$element(); - assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS).position().top, 475, 2, 'Indicator has correct position'); + assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS).position().top, 361, 2, 'Indicator has correct position'); }); QUnit.test('Shader on allDayPanel should have correct height & width, Week view', async function(assert) { @@ -674,12 +672,12 @@ QUnit.module('DateTime indicator on Week View', () => { const $element = instance.$element(); - assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 24, 1.5, 'Indicator has correct height'); - assert.roughEqual(getOuterWidth($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0)), 640, 1.5, 'Indicator has correct height'); + assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 32, 1.5, 'Indicator has correct height'); + assert.roughEqual(getOuterWidth($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0)), 665, 1.5, 'Indicator has correct height'); instance.option('allDayExpanded', true); - assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 74, 1.5, 'Indicator has correct height'); + assert.roughEqual($element.find('.' + SCHEDULER_DATE_TIME_SHADER_ALL_DAY_CLASS).eq(0).get(0).getBoundingClientRect().height, 57, 1.5, 'Indicator has correct height'); }); QUnit.test('Shader should have correct height & width, Week view', async function(assert) { @@ -699,7 +697,7 @@ QUnit.module('DateTime indicator on Week View', () => { assert.roughEqual(getOuterHeight($topShader), 9.5 * cellHeight, 1, 'Top indicator has correct height'); assert.roughEqual(getOuterHeight($bottomShader), 22.5 * cellHeight, 1.5, 'Bottom indicator has correct height'); - assert.roughEqual(getOuterWidth($shader), 898, 1, 'Shader has correct width'); + assert.roughEqual(getOuterWidth($shader), 933, 1, 'Shader has correct width'); assert.roughEqual(getOuterWidth($topShader), 4 * cellWidth, 1.5, 'Top indicator has correct width'); assert.roughEqual(getOuterWidth($bottomShader), 3 * cellWidth, 1.5, 'Bottom indicator has correct width'); }); @@ -764,7 +762,7 @@ QUnit.module('DateTime indicator on Week View', () => { const $element = instance.$element(); const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); - assert.roughEqual(getOuterHeight($shader), 1000, 1.5, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 760, 1.5, 'Shader has correct height'); }); QUnit.test('Shader should be rendered for \'overdue\' views', async function(assert) { @@ -782,12 +780,11 @@ QUnit.module('DateTime indicator on Week View', () => { const $cell = instance.$element().find('.dx-scheduler-date-table-cell').eq(0); const cellWidth = getOuterWidth($cell); - assert.roughEqual(getOuterHeight($shader), 1000, 1.5, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 760, 1.5, 'Shader has correct height'); assert.roughEqual(getOuterWidth($topShader), 7 * cellWidth, 2.5, 'TopShader has correct width'); assert.roughEqual(getOuterWidth($allDayShader), 7 * cellWidth, 2.5, 'AllDayShader has correct width'); - assert.roughEqual(getOuterHeight($topShader), 1000, 1.5, 'TopShader has correct height'); - + assert.roughEqual(getOuterHeight($topShader), 760, 1.5, 'TopShader has correct height'); assert.equal($bottomShader.length, 0, 'BottomShader wasn\'t rendered for overdue view'); }); @@ -834,9 +831,9 @@ QUnit.module('DateTime indicator on Week View', () => { const $bottomShader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_BOTTOM_CLASS); assert.equal($indicator.length, 1, 'Indicator count is correct'); - assert.roughEqual($indicator.eq(0).position().left, 706, 1.5, 'Indicator left is OK'); - assert.roughEqual(parseInt($topShader.css('left')), 706, 1.5, 'Top indicator has correct left'); - assert.roughEqual(parseInt($bottomShader.css('left')), 770, 1.5, 'Bottom indicator has correct left'); + assert.roughEqual($indicator.eq(0).position().left, 733, 1.5, 'Indicator left is OK'); + assert.roughEqual(parseInt($topShader.css('left')), 733, 1.5, 'Top indicator has correct left'); + assert.roughEqual(parseInt($bottomShader.css('left')), 799, 1.5, 'Bottom indicator has correct left'); }); }); @@ -879,7 +876,7 @@ QUnit.module('DateTime indicator on grouped Week View', () => { $topShader.each((index, element) => { assert.roughEqual(getOuterWidth($(element)), 4 * cellWidth, 2, 'TopShader has correct width'); - assert.roughEqual(getOuterHeight($(element)), 1000, 2, 'TopShader has correct height'); + assert.roughEqual(getOuterHeight($(element)), 760.5, 2, 'TopShader has correct height'); assert.roughEqual(parseInt($(element).css('left')), index * 7 * cellWidth, 2, 'TopShader has correct left'); }); @@ -914,7 +911,7 @@ QUnit.module('DateTime indicator on grouped Week View', () => { assert.equal($bottomShader.length, 0, 'BottomShader wasn\'t rendered for overdue view'); assert.roughEqual(getOuterWidth($topShader), 8 * cellWidth, 2, 'TopShader has correct width'); - assert.roughEqual(getOuterHeight($topShader), 1000, 2, 'TopShader has correct height'); + assert.roughEqual(getOuterHeight($topShader), 760.5, 2, 'TopShader has correct height'); assert.roughEqual(getOuterWidth($allDayShader), 8 * cellWidth, 2, 'AllDay has correct width'); }); @@ -935,7 +932,7 @@ QUnit.module('DateTime indicator on grouped Week View', () => { const cellWidth = getOuterWidth($element.find('.dx-scheduler-date-table-cell').eq(0)); assert.equal($indicator.length, 1, 'Indicator count is correct'); - assert.roughEqual($indicator.eq(0).position().left, 256, 1.5, 'Indicator left is OK'); + assert.roughEqual($indicator.eq(0).position().left, 266.5625, 1.5, 'Indicator left is OK'); assert.roughEqual(getOuterWidth($indicator), 2 * cellWidth, 1, 'Indicator has correct width'); }); @@ -1004,14 +1001,15 @@ QUnit.module('DateTime indicator on TimelineDay View', () => { QUnit.test('Shader should have correct height & width, TimelineDay view', async function(assert) { const instance = createInstance({ - indicatorTime: new Date(2017, 8, 5, 12, 45) + indicatorTime: new Date(2017, 8, 5, 12, 45), + height: 800 }); const $element = instance.$element(); const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); const cellWidth = getOuterWidth($element.find('.dx-scheduler-date-table-cell').eq(0)); - assert.roughEqual(getOuterHeight($shader), 255, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 764, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader), 9.5 * cellWidth, 1, 'Shader has correct width'); }); @@ -1170,7 +1168,8 @@ QUnit.module('DateTime indicator on TimelineDay View, horizontal grouping', () = QUnit.test('Shader should have correct height, width and position', async function(assert) { const instance = createInstance({ - indicatorTime: new Date(2017, 8, 5, 12, 45) + indicatorTime: new Date(2017, 8, 5, 12, 45), + height: 307 }); await applyWorkspaceGroups(instance, [{ @@ -1184,10 +1183,10 @@ QUnit.module('DateTime indicator on TimelineDay View, horizontal grouping', () = assert.equal($shader.length, 2, 'Shaders count is correct'); - assert.roughEqual(getOuterHeight($shader.eq(0)), 205, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader.eq(0)), 221, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader.eq(0)), 950, 1, 'Shader has correct width'); - assert.roughEqual(getOuterHeight($shader.eq(1)), 205, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader.eq(1)), 221, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader.eq(1)), 950, 1, 'Shader has correct width'); assert.roughEqual($shader.eq(0).position().left, 0, 1, 'Shader has correct left'); @@ -1235,7 +1234,7 @@ QUnit.module('DateTime indicator on other timelines', () => { const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); const cellWidth = getOuterWidth($element.find('.dx-scheduler-date-table-cell').eq(0)); - assert.roughEqual(getOuterHeight($shader), 205, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 232, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader), testCase.expectedCellCount * cellWidth, 1, 'Shader has correct width'); const $indicators = $element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS); @@ -1275,7 +1274,7 @@ QUnit.module('DateTime indicator on other timelines', () => { const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); const cellWidth = getOuterWidth($element.find('.dx-scheduler-date-table-cell').eq(0)); - assert.roughEqual(getOuterHeight($shader), 255, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 252, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader), 4.5 * cellWidth, 6, 'Shader has correct width'); const $indicators = $element.find('.' + SCHEDULER_DATE_TIME_INDICATOR_CLASS); @@ -1315,7 +1314,7 @@ QUnit.module('DateTime indicator on other timelines', () => { const $shader = $element.find('.' + SCHEDULER_DATE_TIME_SHADER_CLASS); const cellWidth = getOuterWidth($element.find('.dx-scheduler-date-table-cell').eq(0)); - assert.roughEqual(getOuterHeight($shader), 255, 1, 'Shader has correct height'); + assert.roughEqual(getOuterHeight($shader), 252, 1, 'Shader has correct height'); assert.roughEqual(getOuterWidth($shader), 15.5 * cellWidth, 1, 'Shader has correct width'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/dragAndDropAppointments.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/dragAndDropAppointments.tests.js index 6a68fa6572d6..d8b5d6ac9519 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/dragAndDropAppointments.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/dragAndDropAppointments.tests.js @@ -18,7 +18,7 @@ import { } from '../../helpers/scheduler/helpers.js'; import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; const { @@ -529,7 +529,7 @@ module('Common', commonModuleConfig, () => { const scheduler = await createWrapper({ _draggingMode: 'default', editing: true, - height: 600, + height: 1200, views: [{ type: 'month', maxAppointmentsPerCell: 1 }], currentView: 'month', dataSource: [{ @@ -859,7 +859,7 @@ module('Common', commonModuleConfig, () => { const fakeAppointment = scheduler.appointments.getFakeAppointment(); fakeAppointment.css('border-left', 'none'); - assert.equal(fakeAppointment.outerWidth() - fakeAppointment.innerWidth(), 0, 'Correct width'); + assert.equal(fakeAppointment.outerWidth() - fakeAppointment.innerWidth(), 1, 'Correct width'); pointer.up(); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.RTL.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.RTL.tests.js index 8dcbd932f050..27a3f6800dea 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.RTL.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.RTL.tests.js @@ -4,7 +4,7 @@ import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; import translator from 'common/core/animation/translator'; import '__internal/scheduler/m_scheduler'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { test, module, testStart } = QUnit; @@ -27,29 +27,29 @@ module('RTL', moduleConfig, () => { const expectedValues = { month: [ { - top: 256, + top: 330, left: 250 }, { - top: 256, + top: 330, left: 599 } ], week: [ { top: 0, - left: 241 + left: 256 }, { top: 0, - left: 539 + left: 573 } ], day: [ { top: 0, - left: 25 + left: 30 }, { top: 0, - left: 324 + left: 347 } ] }; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.agenda.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.agenda.tests.js index 427af85cff78..fed94befd000 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.agenda.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.agenda.tests.js @@ -12,7 +12,7 @@ import dataUtils from 'core/element_data'; import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.js'; import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, @@ -1257,7 +1257,7 @@ module('Integration: Agenda', moduleConfig, () => { const $element = instance.$element(); const $appts = $element.find('.dx-scheduler-appointment'); - const timePanelDate = $element.find('.dx-scheduler-agenda-date').text(); + const timePanelDate = $element.find('.dx-scheduler-time-panel-cell').text(); assert.equal($appts.length, 1, 'Appt count is OK'); assert.equal(timePanelDate, '10 Thu', 'Time panel date is OK'); @@ -1281,7 +1281,7 @@ module('Integration: Agenda', moduleConfig, () => { const $element = instance.$element(); const $appts = $element.find('.dx-scheduler-appointment'); - const $timePanelDateEl = $element.find('.dx-scheduler-agenda-date'); + const $timePanelDateEl = $element.find('.dx-scheduler-time-panel-cell'); const timePanelDate = $timePanelDateEl.text(); assert.equal($appts.length, 1, 'Appt count is OK'); @@ -1307,7 +1307,7 @@ module('Integration: Agenda', moduleConfig, () => { owner: 1 }], resourceCellTemplate: function(cellData, cellIndex, cellElement) { - assert.equal(getOuterWidth($(cellElement)), 80, 'Resource cell width is OK'); + assert.equal(getOuterWidth($(cellElement)), 100, 'Resource cell width is OK'); assert.equal(getOuterHeight($(cellElement)), 80, 'Resource cell height is OK'); } }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentCollector.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentCollector.tests.js index 6eb836263b91..3671ccc8a2a4 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentCollector.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentCollector.tests.js @@ -10,7 +10,7 @@ import Widget from 'ui/widget/ui.widget'; import Color from 'color'; import '__internal/scheduler/m_scheduler'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { test, module, testStart } = QUnit; @@ -62,7 +62,11 @@ module('Integration: collector', baseConfig, () => { onAppointmentFormOpening: e => { const startDate = e.form.getEditor('startDate').option('value'); assert.equal(startDate.getDate(), 16, 'Recurrence appointment date should be display equal targetedAppointmentData date in form'); - } + }, + editing: { + legacyForm: true + }, + maxAppointmentsPerCell: 2 }); scheduler.appointments.compact.click(); @@ -218,14 +222,14 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon }); assert.roughEqual(scheduler.appointments.compact.getButtonWidth(), 63, 1, 'Collector width is ok'); - assert.roughEqual(scheduler.appointments.compact.getButtonHeight(), 20, 1, 'Collector height is ok'); + assert.roughEqual(scheduler.appointments.compact.getButtonHeight(), 22, 1, 'Collector height is ok'); } finally { themes.isMaterialBased = origIsMaterialBased; } }); test('DropDown appointment button should have correct coordinates on weekView, not in allDay panel', async function(assert) { - const WEEK_VIEW_BUTTON_OFFSET = 5; + const WEEK_VIEW_BUTTON_OFFSET = 6; const scheduler = await createInstance({ currentDate: new Date(2019, 2, 4), @@ -272,13 +276,13 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon const cellWidth = scheduler.workSpace.getCell(0).outerWidth(); - assert.roughEqual(scheduler.appointments.compact.getButtonWidth(), cellWidth - 60, 1.5, 'Collector width is ok'); + assert.roughEqual(scheduler.appointments.compact.getButtonWidth(), cellWidth - 80, 1.5, 'Collector width is ok'); scheduler.instance.option('views', ['month']); await waitAsync(0); - assert.roughEqual(scheduler.appointments.compact.getButtonWidth(), cellWidth - 36, 1, 'Collector width is ok'); - assert.roughEqual(scheduler.appointments.compact.getButtonHeight(), 20, 1, 'Collector height is ok'); + assert.roughEqual(scheduler.appointments.compact.getButtonWidth(), cellWidth - 56, 1, 'Collector width is ok'); + assert.roughEqual(scheduler.appointments.compact.getButtonHeight(), 22, 1, 'Collector height is ok'); }); test('Appointment collector count should be ok when there are multiday appointments', async function(assert) { @@ -327,7 +331,7 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon await waitAsync(0); scheduler.appointments.compact.click(0); - assert.equal(scheduler.tooltip.getItemCount(), 8, 'There are 8 collapsed appts'); + assert.equal(scheduler.tooltip.getItemCount(), 6, 'There are 6 collapsed appts'); }); test('Many collapsed appts should be grouped correctly with one multi day task which started before collector (T525443)', async function(assert) { @@ -377,7 +381,7 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon const collectorCoordinates = translator.locate($collector); const expectedCoordinates = scheduler.workSpace.getCell(7).position(); - const rtlOffset = scheduler.workSpace.getCell(7).outerWidth() - 36; + const rtlOffset = scheduler.workSpace.getCell(7).outerWidth() - 56; assert.roughEqual(collectorCoordinates.left, expectedCoordinates.left + rtlOffset, 1.001, 'Left coordinate is OK'); assert.roughEqual(collectorCoordinates.top, expectedCoordinates.top, 1.001, 'Top coordinate is OK'); @@ -406,7 +410,7 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon onAppointmentClick(args) { assert.equal(args.component, instance, 'dxScheduler is \'component\''); assert.equal(args.element, instance.element(), 'dxScheduler element is \'element\''); - assert.deepEqual(args.appointmentData, appointments[3], 'Appointment data is OK'); + assert.deepEqual(args.appointmentData, appointments[5], 'Appointment data is OK'); assert.equal($(args.appointmentElement).get(0), tooltipItemElement, 'Appointment element is OK'); assert.ok(args.event instanceof $.Event, 'Event is OK'); @@ -488,8 +492,8 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon endDateExpr: 'End', textExpr: 'Text', height: 490, - maxAppointmentsPerCell: 'auto', - dropDownAppointmentTemplate(data) { + maxAppointmentsPerCell: 1, + appointmentTooltipTemplate({ appointmentData: data }) { return `
${data.Text}
`; } }); @@ -526,7 +530,7 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon endDateExpr: 'End', textExpr: 'Text', height: 490, - maxAppointmentsPerCell: 'auto', + maxAppointmentsPerCell: 1, appointmentCollectorTemplate(data) { return `
Appointment count is ${data.appointmentCount}
`; } @@ -564,11 +568,11 @@ module('Integration: Appointments Collector, adaptivityEnabled = false', baseCon endDateExpr: 'End', textExpr: 'Text', height: 500, - maxAppointmentsPerCell: 'auto', - dropDownAppointmentTemplate: 'dropDownAppointmentTemplate', + maxAppointmentsPerCell: 1, + appointmentTooltipTemplate: 'appointmentTooltipTemplate', integrationOptions: { templates: { - 'dropDownAppointmentTemplate': { + 'appointmentTooltipTemplate': { render(args) { const $element = $('') .addClass('dx-template-wrapper') @@ -906,19 +910,19 @@ module('Integration: Appointments Collector, adaptivityEnabled = true', baseConf const $appointment = scheduler.appointments.getAppointment(0); - assert.roughEqual($appointment.outerWidth(), 50, 1.001, 'Width is OK'); - assert.roughEqual($appointment.outerHeight(), 50, 1.001, 'Height is OK'); + assert.roughEqual($appointment.outerWidth(), 55, 1.001, 'Width is OK'); + assert.roughEqual($appointment.outerHeight(), 38, 1.001, 'Height is OK'); scheduler.instance.option('width', 1000); const $firstAppointment = scheduler.appointments.getAppointment(0); const $secondAppointment = scheduler.appointments.getAppointment(1); - assert.roughEqual($firstAppointment.outerWidth(), 46.5, 1.001, 'Width is OK'); - assert.roughEqual($firstAppointment.outerHeight(), 50, 1.001, 'Height is OK'); + assert.roughEqual($firstAppointment.outerWidth(), 49, 1.001, 'Width is OK'); + assert.roughEqual($firstAppointment.outerHeight(), 38, 1.001, 'Height is OK'); - assert.roughEqual($secondAppointment.outerWidth(), 46.5, 1.001, 'Width is OK'); - assert.roughEqual($secondAppointment.outerHeight(), 50, 1.001, 'Height is OK'); + assert.roughEqual($secondAppointment.outerWidth(), 49, 1.001, 'Width is OK'); + assert.roughEqual($secondAppointment.outerHeight(), 38, 1.001, 'Height is OK'); }); test('Adaptive collector should have correct coordinates on week view', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js index 0b014d5e8b28..8d3253dcba69 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js @@ -14,7 +14,7 @@ import { createWrapper, initTestMarkup } from '../../helpers/scheduler/helpers.j import { getSimpleDataArray } from '../../helpers/scheduler/data.js'; import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; const dateFormat = 'monthandday'; @@ -1046,7 +1046,8 @@ module('Appointment tooltip template', moduleConfig, () => { currentView: 'month', currentDate: new Date(2021, 3, 27), height: 600, - appointmentTooltipTemplate: (model) => assert.ok(model.isButtonClicked) + appointmentTooltipTemplate: (model) => assert.ok(model.isButtonClicked), + maxAppointmentsPerCell: 2 }); scheduler.appointments.compact.click(0); @@ -1069,7 +1070,7 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () }; test('Title in tooltip should equals title of cell appointments in month view', async function(assert) { - const scheduler = await createScheduler(undefined, undefined); + const scheduler = await createScheduler({ maxAppointmentsPerCell: 2 }, undefined); assert.notOk(scheduler.tooltip.isVisible(), 'On page load tooltip should be invisible'); const clock = sinon.useFakeTimers(); @@ -1146,7 +1147,7 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () test('Compact button should hide or show after change in data source', async function(assert) { const dataList = getSimpleDataArray(); - const scheduler = await createScheduler({}, dataList); + const scheduler = await createScheduler({ maxAppointmentsPerCell: 2 }, dataList); assert.equal(scheduler.appointments.compact.getButtonText(), '1 more', 'Value on init should be correct'); assert.equal(scheduler.appointments.compact.getButtonCount(), 5, 'Count of compact buttons on init should be correct'); @@ -1177,7 +1178,7 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () }); test('Tooltip should hide after perform action', async function(assert) { - const scheduler = await createScheduler(undefined, undefined); + const scheduler = await createScheduler({ maxAppointmentsPerCell: 2 }, undefined); const clock = sinon.useFakeTimers(); await scheduler.appointments.click(0, clock); @@ -1243,7 +1244,8 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () templateCallCount++; return $('
').text(`template item index - ${index}`); - } + }, + maxAppointmentsPerCell: 2 }, undefined); const clock = sinon.useFakeTimers(); @@ -1265,7 +1267,7 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () const ITEM_FOCUSED_STATE_CLASS_NAME = 'dx-state-focused'; test('List should be navigate by keyboard', async function(assert) { - const scheduler = await createScheduler(undefined, undefined); + const scheduler = await createScheduler({ maxAppointmentsPerCell: 2 }, undefined); const checkFocusedState = index => scheduler.tooltip.getItemElement(index).hasClass(ITEM_FOCUSED_STATE_CLASS_NAME); @@ -1348,6 +1350,7 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () test('Tooltip should crop list, if list has many items', async function(assert) { const scheduler = await createScheduler({ + maxAppointmentsPerCell: 2, dataSource: [ { text: 'Prepare 2015 Marketing Plan', @@ -1446,7 +1449,8 @@ module('New common tooltip for compact and cell appointments', moduleConfig, () $(`#button-${index}`).dxButton({ text: `test-${index}` }); }, startDayHour: 9, - height: 600 + height: 600, + maxAppointmentsPerCell: 2 }, undefined); const clock = sinon.useFakeTimers(); @@ -1583,7 +1587,8 @@ module('onAppointmentTooltipShowing event', moduleConfig, () => { displayStartDate: appointment4.appointmentData.startDate, displayEndDate: appointment4.appointmentData.endDate, }, appointment4.currentAppointmentData); - } + }, + maxAppointmentsPerCell: 2 }); scheduler.appointments.compact.click(0); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js index 95f5227ea432..c83ee529344d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js @@ -8,7 +8,7 @@ import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; import '__internal/scheduler/m_scheduler'; import 'ui/switch'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; QUnit.testStart(() => initTestMarkup()); @@ -28,7 +28,7 @@ module('crossScrollingEnabled = true', config, () => { const isMobile = devices.current().deviceType !== 'desktop'; test('Appointments should be rendered on the same line after navigating to the next month(T804721)', async function(assert) { - const expectedTop = 26; + const expectedTop = 30; const views = ['timelineMonth', 'timelineWeek']; const data = [{ diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentsVertical.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentsVertical.tests.js index fd73c9cf7cca..ab06d9c7d7c8 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentsVertical.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentsVertical.tests.js @@ -9,14 +9,14 @@ import { DataSource } from 'common/data/data_source/data_source'; import dataUtils from 'core/element_data'; import timeZoneUtils from '__internal/scheduler/m_utils_time_zone'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; import 'ui/switch'; const DATE_TABLE_CELL_CLASS = 'dx-scheduler-date-table-cell'; const APPOINTMENT_CLASS = 'dx-scheduler-appointment'; -const APPOINTMENT_DEFAULT_LEFT_OFFSET = 26; +const APPOINTMENT_DEFAULT_LEFT_OFFSET = 30; QUnit.testStart(() => initTestMarkup()); @@ -269,33 +269,26 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' }); QUnit.test('Recurring appointments should be rendered correctly with a custom timezone(T385377)', async function(assert) { - const tzOffsetStub = sinon.stub(timeZoneUtils, 'getClientTimezoneOffset').returns(-10800000); - - try { - const scheduler = await createWrapper({ - dataSource: [], - currentDate: new Date(2016, 4, 7), - timeZone: 'Asia/Ashkhabad', - height: 500, - currentView: 'week', - firstDayOfWeek: 1 - }); - - scheduler.instance.addAppointment({ - startDate: new Date(2016, 4, 2), - endDate: new Date(2016, 4, 2, 0, 30), - recurrenceRule: 'FREQ=DAILY' - }); + const scheduler = await createWrapper({ + dataSource: [], + currentDate: new Date('2016-05-06T07:00:00.000Z'), + timeZone: 'Asia/Ashkhabad', + height: 500, + currentView: 'week', + firstDayOfWeek: 1 + }); - const $appt = scheduler.instance.$element().find('.' + APPOINTMENT_CLASS).eq(0); - const apptPosition = $appt.position(); + scheduler.instance.addAppointment({ + startDate: '2016-05-01T07:00:00.000Z', + endDate: '2016-05-01T07:30:00.000Z', + recurrenceRule: 'FREQ=DAILY' + }); - assert.roughEqual(apptPosition.top, 200, 2.001, 'Appts top is OK'); - assert.roughEqual(apptPosition.left, 0, 2.001, 'Appts left is OK'); + const $appt = scheduler.instance.$element().find('.' + APPOINTMENT_CLASS).eq(0); + const apptPosition = $appt.position(); - } finally { - tzOffsetStub.restore(); - } + assert.roughEqual(apptPosition.top, 912, 2.001, 'Appts top is OK'); + assert.roughEqual(apptPosition.left, 0, 2.001, 'Appts left is OK'); }); QUnit.test('Appointments should have correctly height with a custom timezone(T387561)', async function(assert) { @@ -436,7 +429,7 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const $appointment = $(scheduler.instance.$element()).find('.' + APPOINTMENT_CLASS); - assert.roughEqual(getHeight($appointment), 100, 1.001, 'Appointment is rendered correctly'); + assert.roughEqual(getHeight($appointment), 75, 1.001, 'Appointment is rendered correctly'); }); QUnit.test('Appointments should have correct position, rtl mode, editing=false', async function(assert) { @@ -792,14 +785,13 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const $appointments = $(scheduler.instance.$element()).find('.' + APPOINTMENT_CLASS); assert.equal($appointments.length, 2, 'two appointments are rendered'); - const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, 7 * cellHeight, 1.5, 'correct top position of allDay appointment'); - assert.roughEqual(getOuterHeight($appointments.eq(0)), 0.5 * cellHeight, 2, 'correct size of allDay appointment'); - assert.roughEqual(translator.locate($appointments.eq(0)).left, 256, 1.1, 'correct left position of allDay appointment'); + assert.roughEqual($appointments.eq(0).position().top, 278, 1.5, 'correct top position of allDay appointment'); + assert.roughEqual(getOuterHeight($appointments.eq(0)), 20, 2, 'correct size of allDay appointment'); + assert.roughEqual(translator.locate($appointments.eq(0)).left, 266, 1.1, 'correct left position of allDay appointment'); - assert.roughEqual($appointments.eq(1).position().top, 8.5 * cellHeight, 1.5, 'correct top position of appointment'); - assert.roughEqual($appointments.eq(1).position().left, 256, 1.1, 'correct left position of appointment'); + assert.roughEqual($appointments.eq(1).position().top, 347, 1.5, 'correct top position of appointment'); + assert.roughEqual($appointments.eq(1).position().left, 266, 1.1, 'correct left position of appointment'); }); QUnit.test('Rival allDay appointments from different groups should be rendered correctly in vertical grouped workspace Week', async function(assert) { @@ -849,11 +841,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' assert.roughEqual($appointments.eq(0).position().top, 0, 1.5, 'correct top position of allDay appointment'); assert.roughEqual(getOuterHeight($appointments.eq(0)), 0.5 * cellHeight, 2, 'correct size of allDay appointment'); - assert.roughEqual(translator.locate($appointments.eq(0)).left, 114, 1, 'correct left position of allDay appointment'); + assert.roughEqual(translator.locate($appointments.eq(0)).left, 124, 1, 'correct left position of allDay appointment'); - assert.roughEqual($appointments.eq(1).position().top, 7 * cellHeight, 1.5, 'correct top position of allDay appointment'); + assert.roughEqual($appointments.eq(1).position().top, 278, 1.5, 'correct top position of allDay appointment'); assert.roughEqual(getOuterHeight($appointments.eq(1)), 0.5 * cellHeight, 2, 'correct size of allDay appointment'); - assert.roughEqual(translator.locate($appointments.eq(1)).left, 114, 1, 'correct left position of allDay appointment'); + assert.roughEqual(translator.locate($appointments.eq(1)).left, 124, 1, 'correct left position of allDay appointment'); }); QUnit.test('Rival allDay appointments from same groups should be rendered correctly in vertical grouped workspace Week', async function(assert) { @@ -900,9 +892,9 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, 0.5 * cellHeight, 2.5, 'correct top position of allDay appointment'); + assert.roughEqual($appointments.eq(0).position().top, 30, 2.5, 'correct top position of allDay appointment'); assert.roughEqual(getOuterHeight($appointments.eq(0)), 0.5 * cellHeight, 2, 'correct size of allDay appointment'); - assert.roughEqual(translator.locate($appointments.eq(0)).left, 114, 1, 'correct left position of allDay appointment'); + assert.roughEqual(translator.locate($appointments.eq(0)).left, 124, 1, 'correct left position of allDay appointment'); }); QUnit.test('Rival appointments from one group should be rendered correctly in vertical grouped workspace Week', async function(assert) { @@ -950,15 +942,13 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const $appointments = $(scheduler.instance.$element()).find('.' + APPOINTMENT_CLASS); assert.equal($appointments.length, 2, 'two appointments are rendered'); - const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - - assert.roughEqual($appointments.eq(0).position().top, 8.5 * cellHeight, 1.5, 'correct top position of appointment'); - assert.roughEqual(getOuterWidth($appointments.eq(0)), 59, 2, 'correct size of appointment'); - assert.roughEqual($appointments.eq(0).position().left, 85, 1.1, 'correct left position of appointment'); + assert.roughEqual($appointments.eq(0).position().top, 347, 1.5, 'correct top position of appointment'); + assert.roughEqual(getOuterWidth($appointments.eq(0)), 65, 2, 'correct size of appointment'); + assert.roughEqual($appointments.eq(0).position().left, 95, 1.1, 'correct left position of appointment'); - assert.roughEqual($appointments.eq(1).position().top, 8.5 * cellHeight, 1.5, 'correct top position of appointment'); - assert.roughEqual(getOuterWidth($appointments.eq(1)), 59, 2, 'correct size of appointment'); - assert.roughEqual($appointments.eq(1).position().left, 170, 1.1, 'correct left position of appointment'); + assert.roughEqual($appointments.eq(1).position().top, 347, 1.5, 'correct top position of appointment'); + assert.roughEqual(getOuterWidth($appointments.eq(1)), 65, 2, 'correct size of appointment'); + assert.roughEqual($appointments.eq(1).position().left, 190, 1.1, 'correct left position of appointment'); }); QUnit.test('Appointment in bottom cell should be rendered cirrectly in vertical grouped workspace Week', async function(assert) { @@ -996,10 +986,8 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const $appointments = $(scheduler.instance.$element()).find('.' + APPOINTMENT_CLASS); - const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - - assert.roughEqual($appointments.eq(0).position().top, 12 * cellHeight, 1.5, 'correct top position of appointment'); - assert.roughEqual(getOuterHeight($appointments.eq(0)), 100, 2, 'correct size of appointment'); + assert.roughEqual($appointments.eq(0).position().top, 480, 1.5, 'correct top position of appointment'); + assert.roughEqual(getOuterHeight($appointments.eq(0)), 76, 2, 'correct size of appointment'); }); QUnit.test('Appointment should be dragged correctly between the groups in vertical grouped workspace Day', async function(assert) { @@ -1200,7 +1188,7 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const $appointment = $element.find('.' + APPOINTMENT_CLASS).eq(0); - assert.roughEqual($appointment.position().top, 500, 1.1, 'Correct top coordinate'); + assert.roughEqual($appointment.position().top, 404, 1.1, 'Correct top coordinate'); assert.equal(getOuterHeight($appointment), cellHeight * 6, 'Correct height'); }); @@ -1287,11 +1275,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); const cellWidth = getOuterWidth($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(0).position().top, 50, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(0)), cellHeight * 2.5, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(0).position().left, cellWidth, 1.1, 'correct left position of appointment part'); - assert.roughEqual($appointments.eq(1).position().top, cellHeight * 9, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(1).position().top, 366, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(1)), cellHeight * 2.5, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(1).position().left, cellWidth, 1.1, 'correct left position of appointment part'); }); @@ -1341,11 +1329,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); const cellWidth = getOuterWidth($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, cellHeight * 7, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(0).position().top, 278, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(0)), cellHeight, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(0).position().left, cellWidth, 1.1, 'correct left position of appointment part'); - assert.roughEqual($appointments.eq(1).position().top, cellHeight * 15, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(1).position().top, 594, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(1)), cellHeight, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(1).position().left, cellWidth, 1.1, 'correct left position of appointment part'); }); @@ -1394,11 +1382,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(0).position().top, 50, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(0)), cellHeight * 2, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(0).position().left, 0, 1.1, 'correct left position of appointment part'); - assert.roughEqual($appointments.eq(1).position().top, cellHeight * 9, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(1).position().top, 366, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(1)), cellHeight * 2, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(1).position().left, 0, 1.1, 'correct left position of appointment part'); }); @@ -1442,11 +1430,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); const cellWidth = getOuterWidth($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, 7 * cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(0).position().top, 278, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(0)), cellHeight, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(0).position().left, cellWidth, 1.1, 'correct left position of appointment part'); - assert.roughEqual($appointments.eq(1).position().top, cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(1).position().top, 50, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(1)), cellHeight * 2.5, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(1).position().left, cellWidth * 2, 1.1, 'correct left position of appointment part'); }); @@ -1490,11 +1478,11 @@ QUnit.module('Integration: Appointments on vertical views (day, week, workWeek)' const cellHeight = getOuterHeight($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); const cellWidth = getOuterWidth($(scheduler.instance.$element()).find('.' + DATE_TABLE_CELL_CLASS).first()); - assert.roughEqual($appointments.eq(0).position().top, 15 * cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(0).position().top, 594, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(0)), cellHeight, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(0).position().left, cellWidth, 1.1, 'correct left position of appointment part'); - assert.roughEqual($appointments.eq(1).position().top, 9 * cellHeight, 1.5, 'correct top position of appointment part'); + assert.roughEqual($appointments.eq(1).position().top, 366, 1.5, 'correct top position of appointment part'); assert.roughEqual(getOuterHeight($appointments.eq(1)), cellHeight * 2.5, 2, 'correct size of appointment part'); assert.roughEqual($appointments.eq(1).position().left, cellWidth * 2, 1.1, 'correct left position of appointment part'); }); 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 4386c44f5703..79788c720cc3 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 @@ -8,7 +8,7 @@ import fx from 'common/core/animation/fx'; import { DataSource } from 'common/data/data_source/data_source'; import '__internal/scheduler/m_scheduler'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { testStart } = QUnit; @@ -246,11 +246,6 @@ QUnit.test('Multi-week appointments should be split by several parts', async fun await waitAsync(0); const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - const rowHeight = getOuterHeight( - this.instance.getWorkSpace().getWorkArea().find('.dx-scheduler-date-table tr').eq(0) - ); - const appointmentHeight = getOuterHeight($appointments); - const appointmentTopOffsetInsideCell = (rowHeight - appointmentHeight) / 2; const firstAppointmentTop = translator.locate($appointments.eq(0)).top; const secondAppointmentTop = translator.locate($appointments.eq(1)).top; @@ -258,15 +253,15 @@ QUnit.test('Multi-week appointments should be split by several parts', async fun const fourthAppointmentTop = translator.locate($appointments.eq(3)).top; assert.equal($appointments.length, 4, 'Appointment is split by 3 parts'); - assert.roughEqual(getOuterWidth($appointments.eq(0)), 600, 2.001, 'Appointment width is OK'); - assert.roughEqual(getOuterWidth($appointments.eq(1)), 699, 2.001, 'Appointment width is OK'); - assert.roughEqual(getOuterWidth($appointments.eq(2)), 699, 2.001, 'Appointment width is OK'); - assert.roughEqual(getOuterWidth($appointments.eq(3)), 200, 2.001, 'Appointment width is OK'); - - assert.roughEqual(firstAppointmentTop, rowHeight * 2 + appointmentTopOffsetInsideCell + 1, 3.51, 'The first appointment height is OK'); - assert.roughEqual(secondAppointmentTop, rowHeight * 3 + appointmentTopOffsetInsideCell + 1, 3.51, 'The second appointment height is OK'); - assert.roughEqual(thirdAppointmentTop, rowHeight * 4 + appointmentTopOffsetInsideCell + 1, 3.51, 'The third appointment height is OK'); - assert.roughEqual(fourthAppointmentTop, rowHeight * 5 + appointmentTopOffsetInsideCell + 1, 3.51, 'The fourth appointment height is OK'); + assert.roughEqual(getOuterWidth($appointments.eq(0)), 598, 2.001, 'Appointment width is OK'); + assert.roughEqual(getOuterWidth($appointments.eq(1)), 697, 2.001, 'Appointment width is OK'); + assert.roughEqual(getOuterWidth($appointments.eq(2)), 697, 2.001, 'Appointment width is OK'); + assert.roughEqual(getOuterWidth($appointments.eq(3)), 199, 2.001, 'Appointment width is OK'); + + assert.roughEqual(firstAppointmentTop, 230, 3.51, 'The first appointment height is OK'); + assert.roughEqual(secondAppointmentTop, 330, 3.51, 'The second appointment height is OK'); + assert.roughEqual(thirdAppointmentTop, 430, 3.51, 'The third appointment height is OK'); + assert.roughEqual(fourthAppointmentTop, 530, 3.51, 'The fourth appointment height is OK'); }); QUnit.test('Multi-week appointments should have a correct left coordinate', async function(assert) { @@ -284,7 +279,7 @@ QUnit.test('Multi-week appointments should have a correct left coordinate', asyn const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - assert.roughEqual(translator.locate($appointments.eq(0)).left, 100, 1.001, 'Left coordinate is OK'); + assert.roughEqual(translator.locate($appointments.eq(0)).left, 99, 1.001, 'Left coordinate is OK'); assert.roughEqual(translator.locate($appointments.eq(1)).left, 1, 1.001, 'Left coordinate is OK'); assert.roughEqual(translator.locate($appointments.eq(2)).left, 1, 1.001, 'Left coordinate is OK'); }); @@ -308,7 +303,7 @@ QUnit.test('Multi-week appointments should have a correct left coordinate, rtl m assert.roughEqual(translator.locate($appointments.eq(0)).left, 0, 1.001, 'Left coordinate is OK'); assert.roughEqual(translator.locate($appointments.eq(1)).left, 0, 1.001, 'Left coordinate is OK'); - assert.roughEqual(translator.locate($appointments.eq(2)).left, 500, 2.001, 'Left coordinate is OK'); + assert.roughEqual(translator.locate($appointments.eq(2)).left, 498, 2.001, 'Left coordinate is OK'); }); QUnit.test('Multi-week appointments with resources should have a correct left coordinate on timeline view', async function(assert) { @@ -562,13 +557,21 @@ QUnit.test('Grouped multi-week appointments should have a correct left offset', }); const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - - assert.roughEqual(translator.locate($appointments.eq(0)).left, 50, 2.001); - assert.roughEqual(translator.locate($appointments.eq(1)).left, 399, 1.001); - assert.roughEqual(translator.locate($appointments.eq(2)).left, 0, 1.001); - assert.roughEqual(translator.locate($appointments.eq(3)).left, 349, 1.001); - assert.roughEqual(translator.locate($appointments.eq(4)).left, 0, 1.001); - assert.roughEqual(translator.locate($appointments.eq(5)).left, 349, 1.001); + const lefts = [ + 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((a, b) => a - b); + + assert.roughEqual(lefts[0], 0, 2.001); + assert.roughEqual(lefts[1], 0, 1.001); + assert.roughEqual(lefts[2], 49, 1.001); + assert.roughEqual(lefts[3], 349, 1.001); + assert.roughEqual(lefts[4], 349, 1.001); + assert.roughEqual(lefts[5], 398, 1.001); }); @@ -577,9 +580,7 @@ QUnit.test('Grouped multi-week appointments should have a correct left offset', await this.createInstance({ width: 1052 }); - const cellWidth = 50; - - mockWorkSpaceRendering.call(this, this.instance, cellWidth, [700, 350, 0]); + mockWorkSpaceRendering.call(this, this.instance, 50, [700, 350, 0]); this.instance.option({ views: ['month'], @@ -612,14 +613,21 @@ QUnit.test('Grouped multi-week appointments should have a correct left offset', await waitAsync(0); const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - - assert.roughEqual(translator.locate($appointments.eq(0)).left, cellWidth * 7, 1.001, 'The second head is OK'); - assert.roughEqual(translator.locate($appointments.eq(1)).left, cellWidth * 14, 2.001, 'The first head is OK'); - assert.roughEqual(translator.locate($appointments.eq(2)).left, cellWidth * 7, 1.001, 'The second body is OK'); - assert.roughEqual(translator.locate($appointments.eq(3)).left, cellWidth * 14, 1.001, 'The first body is OK'); - assert.roughEqual(translator.locate($appointments.eq(4)).left, cellWidth * 12, 2.001, 'The second tail is OK'); - assert.roughEqual(translator.locate($appointments.eq(5)).left, cellWidth * 19, 2.001, 'The first tail is OK'); - + 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); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js index 73c00ec56ef4..99751d1707d0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.recurringAppointments.tests.js @@ -17,7 +17,7 @@ import { waitForAsync } from '../../helpers/scheduler/waitForAsync.js'; import dateUtils from 'core/utils/date'; import timeZoneUtils from '__internal/scheduler/m_utils_time_zone'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; const { module, test } = QUnit; @@ -1006,6 +1006,7 @@ supportedScrollingModes.forEach(scrollingMode => { endDayHour: 19, currentDate: new Date(2015, 2, 16), dataSource: dataSource, + maxAppointmentsPerCell: 'unlimited', width: 600 }); @@ -1446,7 +1447,7 @@ supportedScrollingModes.forEach(scrollingMode => { const cellWorkspaceRect = scheduler.workSpace.getCellWorkspaceRect(2, 6); const position = scheduler.appointments.getAppointment(0).position(); assert.roughEqual(position.left, cellWorkspaceRect.left, 0.5, 'Appointment position.left is correct'); - assert.roughEqual(Math.ceil(position.top - cellWorkspaceRect.top), 5, 1.01, 'Appointment position.top is correct'); + assert.roughEqual(Math.ceil(position.top - cellWorkspaceRect.top), -5, 1.01, 'Appointment position.top is correct'); }); test('Appointment has correct occurrences dates with interval > 1', async function(assert) { @@ -1476,7 +1477,7 @@ supportedScrollingModes.forEach(scrollingMode => { const cellWorkspaceRect = scheduler.workSpace.getCellWorkspaceRect(2, 6); assert.roughEqual(firstPosition.left, eighthPosition.left, 0.5, 'Appointment position.left is correct'); - assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), 5, 1.01, 'Appointment position.top is correct'); + assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), -5, 1.01, 'Appointment position.top is correct'); }); test('Appointment has correct occurrences dates with interval > 1, custom firstDayOfWeek', async function(assert) { @@ -1507,7 +1508,7 @@ supportedScrollingModes.forEach(scrollingMode => { const cellWorkspaceRect = scheduler.workSpace.getCellWorkspaceRect(2, 6); assert.roughEqual(firstPosition.left, eighthPosition.left, 0.5, 'Appointment position.left is correct'); - assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), 5, 1.01, 'Appointment position.top is correct'); + assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), -5, 1.01, 'Appointment position.top is correct'); }); [undefined, 1].forEach(firstDayOfWeek => { @@ -1540,7 +1541,7 @@ supportedScrollingModes.forEach(scrollingMode => { const cellWorkspaceRect = scheduler.workSpace.getCellWorkspaceRect(2, 6); assert.roughEqual(firstPosition.left, eighthPosition.left, 0.5, 'Appointment position.left is correct'); - assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), 5, 1.01, 'Appointment position.top is correct'); + assert.roughEqual(Math.ceil(firstPosition.top - cellWorkspaceRect.top), -5, 1.01, 'Appointment position.top is correct'); assert.roughEqual(fourthPosition.top - firstPosition.top, eighthPosition.top - fourthPosition.top, 0.5, 'Appointment position.top is correct'); }); }); 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 ab1aaf07eb2c..cada5ea8fa4e 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 @@ -1,7 +1,7 @@ import $ from 'jquery'; import devices from '__internal/core/m_devices'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import fx from 'common/core/animation/fx'; import { DataSource } from 'common/data/data_source/data_source'; @@ -34,11 +34,11 @@ QUnit.module('Integration: Resources', moduleConfig, () => { const expectedValues = [ { 'appointment1': { - top: 26, + top: 30, left: 0 }, 'appointment2': { - top: 190, + top: 202, left: 430 } }, { @@ -47,8 +47,8 @@ QUnit.module('Integration: Resources', moduleConfig, () => { left: 0 }, 'appointment2': { - top: 100, - left: 307 + top: 76, + left: 319 } } ]; 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 1aa2f5388011..55f65b9fe85a 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 @@ -20,7 +20,7 @@ import config from 'core/config'; import translator from 'common/core/animation/translator'; import { getOuterHeight, getInnerHeight, getOuterWidth } from 'core/utils/size'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const SELECTED_CELL_CLASS = CLASSES.selectedCell.slice(1); const FOCUSED_CELL_CLASS = CLASSES.focusedCell.slice(1); @@ -887,9 +887,8 @@ module('Integration: Work space', { ...moduleConfig }, () => { height: 600 }); const $headerContent = getOuterHeight(scheduler.workSpace.groups.getGroupHeader(0)); - const cellHeight = getOuterHeight(scheduler.workSpace.getCell(1)); - assert.roughEqual($headerContent, 7 * cellHeight, 1, 'Group header content has right height'); + assert.roughEqual($headerContent, 277.5, 1, 'Group header content has right height'); }); test('WorkSpace should be refreshed after groups changed', async function(assert) { @@ -1644,7 +1643,7 @@ module('Resource Cell Template', () => { if(!cellIndex) { assert.equal(isRenderer(cellElement), !!config().useJQuery, 'element is correct'); const $cell = $(cellElement).parent(); - assert.roughEqual(getOuterWidth($cell), 299, 2.001, 'Resource cell width is OK'); + assert.roughEqual(getOuterWidth($cell), 316, 2.001, 'Resource cell width is OK'); assert.equal(getOuterHeight($cell), 30, 'Resource cell height is OK'); } } @@ -1673,7 +1672,7 @@ module('Resource Cell Template', () => { if(!cellIndex) { const $cell = $(cellElement); assert.equal(getOuterWidth($cell), 100, 'Resource cell width is OK'); - assert.roughEqual(getOuterHeight($cell), 271, 1.001, 'Resource cell height is OK'); + assert.roughEqual(getOuterHeight($cell), 288, 1.001, 'Resource cell height is OK'); } done(); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js index 36efb46732bd..f825630e1a52 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/layoutManager.tests.js @@ -1,5 +1,5 @@ import { getOuterHeight, getOuterWidth } from 'core/utils/size'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_scheduler'; import $ from 'jquery'; @@ -16,7 +16,7 @@ import pointerMock from '../../helpers/pointerMock.js'; import { createWrapper } from '../../helpers/scheduler/helpers.js'; import { waitAsync } from '../../helpers/scheduler/waitForAsync.js'; -const APPOINTMENT_DEFAULT_LEFT_OFFSET = 26; +const APPOINTMENT_DEFAULT_LEFT_OFFSET = 30; const checkAppointmentUpdatedCallbackArgs = (assert, actual, expected) => { assert.deepEqual(actual.old, expected.old, 'Old data is OK'); @@ -163,7 +163,7 @@ QUnit.test('Appointment should have right default height', async function(assert const $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - assert.equal(getOuterHeight($appointment), 100, 'Appointment has a right height'); + assert.equal(getOuterHeight($appointment), 76, 'Appointment has a right height'); }); QUnit.test('Appointment should have a correct height when dates are defined as not Date objects', async function(assert) { @@ -176,7 +176,7 @@ QUnit.test('Appointment should have a correct height when dates are defined as n const $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - assert.equal(getOuterHeight($appointment), 100, 'Appointment has a right height'); + assert.equal(getOuterHeight($appointment), 76, 'Appointment has a right height'); }); QUnit.test('Appointment should have a correct min height', async function(assert) { @@ -293,7 +293,7 @@ QUnit.test('Two rival appointments should have correct positions', async functio assert.equal(this.scheduler.appointments.getAppointmentCount(), 2, 'All appointments are rendered'); assert.equal(this.scheduler.appointments.getAppointmentPosition(0).left, 0, 'appointment is rendered in right place'); - assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).top, 26, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).top, 30, 1.5, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(0), this.scheduler.workSpace.getCellWidth(), 1.1, 'appointment has a right size'); assert.equal(this.scheduler.appointments.getAppointmentPosition(1).left, 0, 'appointment is rendered in right place'); @@ -320,19 +320,20 @@ QUnit.test('Four rival appointments should have correct positions', async functi assert.equal(this.scheduler.appointments.getAppointmentCount(), 4, 'All appointments are rendered'); assert.equal(this.scheduler.appointments.getAppointmentPosition(0).left, 0, 'appointment is rendered in right place'); - assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).top, 26, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).top, 30, 1.5, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(0), this.scheduler.workSpace.getCellWidth(), 1.1, 'appointment has a right size'); assert.equal(this.scheduler.appointments.getAppointmentPosition(1).left, 0, 'appointment is rendered in right place'); - assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(1).top, 40, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(1).top, 47.5, 1.5, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(1), this.scheduler.workSpace.getCellWidth(), 1.1, 'appointment has a right size'); assert.equal(this.scheduler.appointments.getAppointmentPosition(2).left, 0, 'appointment is rendered in right place'); - assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(2).top, 54, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(2).top, 65, 1.5, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(2), this.scheduler.workSpace.getCellWidth(), 1.1, 'appointment has a right size'); assert.equal(this.scheduler.appointments.getAppointmentPosition(3).left, 0, 'appointment is rendered in right place'); - assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(3).top, 68, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(3).top, + 82.5, 1.5, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(3), this.scheduler.workSpace.getCellWidth(), 1.1, 'appointment has a right size'); }); @@ -358,12 +359,12 @@ QUnit.test('Rival duplicated appointments should have correct positions', async assert.equal($appointment.length, 2, 'All appointments are rendered'); assert.equal(firstAppointmentPosition.left, 0, 'appointment is rendered in right place'); - assert.roughEqual(firstAppointmentPosition.top, 26, 1.5, 'appointment is rendered in right place'); - assert.roughEqual(getOuterWidth($appointment.eq(0)), getOuterWidth($tableCell), 1.1, 'appointment has a right size'); + assert.roughEqual(firstAppointmentPosition.top, 30, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(getOuterWidth($appointment.eq(0)), getOuterWidth($tableCell), 1.5, 'appointment has a right size'); assert.equal(secondAppointmentPosition.left, 0, 'appointment is rendered in right place'); - assert.roughEqual(secondAppointmentPosition.top, 50, 1.5, 'appointment is rendered in right place'); - assert.roughEqual(getOuterWidth($appointment.eq(1)), getOuterWidth($tableCell) * 2, 1.5, 'appointment has a right size'); + assert.roughEqual(secondAppointmentPosition.top, 54, 1.5, 'appointment is rendered in right place'); + assert.roughEqual(getOuterWidth($appointment.eq(1)), getOuterWidth($tableCell) * 2, 1.1, 'appointment has a right size'); }); QUnit.test('Appointments should be rendered without errors (T816873)', async function(assert) { @@ -602,7 +603,8 @@ QUnit.test('More than 3 cloned appointments should be grouped', async function(a this.scheduler.appointments.compact.click(); assert.equal(this.scheduler.appointments.compact.getButtonText(), '8 more', 'DropDown menu has correct text'); - assert.roughEqual(getOuterWidth(this.scheduler.appointments.compact.getButton()), 106, 1.001, 'DropDownMenu button width is OK'); + assert.roughEqual(getOuterWidth(this.scheduler.appointments.compact.getButton()), + 86, 1.001, 'DropDownMenu button width is OK'); assert.equal(this.scheduler.tooltip.getItemCount(), 8, 'DropDown menu has correct items'); }); @@ -1002,16 +1004,16 @@ QUnit.test('Four rival appointments should have correct sizes', async function(a const tableCellWidth = getOuterWidth(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)) * 2; assert.equal(getOuterWidth($appointment.eq(0)), tableCellWidth, 'appointment has a right size'); - assert.roughEqual(getOuterHeight($appointment.eq(0)), 123, 1, 'appointment has a right size'); + assert.roughEqual(getOuterHeight($appointment.eq(0)), 129, 1, 'appointment has a right size'); assert.equal(getOuterWidth($appointment.eq(1)), tableCellWidth, 'appointment has a right size'); - assert.roughEqual(getOuterHeight($appointment.eq(1)), 123, 1, 'appointment has a right size'); + assert.roughEqual(getOuterHeight($appointment.eq(1)), 129, 1, 'appointment has a right size'); assert.equal(getOuterWidth($appointment.eq(2)), tableCellWidth, 'appointment has a right size'); - assert.roughEqual(getOuterHeight($appointment.eq(2)), 123, 1, 'appointment has a right size'); + assert.roughEqual(getOuterHeight($appointment.eq(2)), 129, 1, 'appointment has a right size'); assert.equal(getOuterWidth($appointment.eq(3)), tableCellWidth, 'appointment has a right size'); - assert.roughEqual(getOuterHeight($appointment.eq(3)), 123, 1, 'appointment has a right size'); + assert.roughEqual(getOuterHeight($appointment.eq(3)), 129, 1, 'appointment has a right size'); }); QUnit.test('Recurrence appointment should be rendered correctly on timelineWeek (T701534)', async function(assert) { @@ -1077,7 +1079,8 @@ QUnit.test('Four rival all day appointments should have correct sizes', async fu currentView: 'day', height: 900, width: 900, - dataSource: items + dataSource: items, + maxAppointmentsPerCell: 2 } ); @@ -1085,11 +1088,11 @@ QUnit.test('Four rival all day appointments should have correct sizes', async fu assert.equal($appointments.length, 2, 'All appointments are rendered'); - assert.roughEqual(getOuterWidth($appointments.eq(0)), 798, 1.1, 'appointment has a right width'); - assert.roughEqual(getOuterHeight($appointments.eq(0)), 24, 2, 'appointment has a right height'); + assert.roughEqual(getOuterWidth($appointments.eq(0)), 833, 1.1, 'appointment has a right width'); + assert.roughEqual(getOuterHeight($appointments.eq(0)), 13.5, 2, 'appointment has a right height'); - assert.roughEqual(getOuterWidth($appointments.eq(1)), 798, 1.1, 'appointment has a right width'); - assert.roughEqual(getOuterHeight($appointments.eq(1)), 24, 2, 'appointment has a right height'); + assert.roughEqual(getOuterWidth($appointments.eq(1)), 833, 1.1, 'appointment has a right width'); + assert.roughEqual(getOuterHeight($appointments.eq(1)), 13.5, 2, 'appointment has a right height'); }); QUnit.test('Dates of allDay appointment should be changed when resize is finished, week view RTL mode', async function(assert) { @@ -1299,16 +1302,20 @@ QUnit.test('Four rival appointments with three columns should have correct posit assert.equal(this.scheduler.appointments.getAppointmentCount(), 4, 'All appointments are rendered'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(0), { top: 0, left: cellWidth }, 'appointment is rendered in right place'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(0).top, 0, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).left, cellWidth, 0.1, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(0), expectedAppWidth, 1, 'appointment has a right size'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(1), { top: 0, left: cellWidth + expectedAppWidth }, 'appointment is rendered in right place'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(1).top, 0, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(1).left, cellWidth + expectedAppWidth, 0.1, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(1), expectedAppWidth, 1, 'appointment has a right size'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(2), { top: 2 * cellHeight, left: cellWidth + 2 * expectedAppWidth }, 'appointment is rendered in right place'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(2).top, 2 * cellHeight, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(2).left, cellWidth + 2 * expectedAppWidth, 0.1, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(2), expectedAppWidth, 1, 'appointment has a right size'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(3), { top: 4 * cellHeight, left: cellWidth + expectedAppWidth }, 'appointment is rendered in right place'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(3).top, 4 * cellHeight, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(3).left, cellWidth + expectedAppWidth, 0.1, 'appointment is rendered in right place'); assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(3), expectedAppWidth, 1, 'appointment has a right size'); }); @@ -1332,11 +1339,13 @@ QUnit.test('Rival duplicated appointments should have correct positions', async const offset = APPOINTMENT_DEFAULT_LEFT_OFFSET; assert.equal(this.scheduler.appointments.getAppointmentCount(), 2, 'All appointments are rendered'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(0), { top: 0, left: cellWidth }, 'appointment is rendered in right place'); - assert.equal(this.scheduler.appointments.getAppointmentWidth(0), cellWidth - offset, 'appointment has a right size'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(0).top, 0, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(0).left, cellWidth, 0.1, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(0), cellWidth - offset, 0.1, 'appointment has a right size'); - assert.deepEqual(this.scheduler.appointments.getAppointmentPosition(1), { top: 0, left: 2 * cellWidth }, 'appointment is rendered in right place'); - assert.equal(this.scheduler.appointments.getAppointmentWidth(1), cellWidth - offset, 'appointment has a right size'); + assert.equal(this.scheduler.appointments.getAppointmentPosition(1).top, 0, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentPosition(1).left, 2 * cellWidth, 0.1, 'appointment is rendered in right place'); + assert.roughEqual(this.scheduler.appointments.getAppointmentWidth(1), cellWidth - offset, 0.1, 'appointment has a right size'); assert.equal(this.scheduler.appointments.compact.getButtonCount(), 1, 'Compact button is rendered'); }); @@ -1355,7 +1364,8 @@ QUnit.test('More than 3 all-day appointments should be grouped', async function( currentView: 'week', height: 500, width: 900, - dataSource: items + dataSource: items, + maxAppointmentsPerCell: 2 } ); @@ -1375,7 +1385,8 @@ QUnit.test('Two rival all day appointments should have correct sizes and positio dataSource: [ { text: 'Appointment 1', startDate: new Date(2015, 1, 8), allDay: true, endDate: new Date(2015, 2, 8) }, { text: 'Appointment 2', startDate: new Date(2015, 1, 8), endDate: new Date(2015, 2, 8), allDay: true } - ] + ], + maxAppointmentsPerCell: 'unlimited' } ); @@ -1385,15 +1396,15 @@ QUnit.test('Two rival all day appointments should have correct sizes and positio assert.equal($appointment.length, 2, 'All appointments are rendered'); - assert.equal(firstAppointmentPosition.top, 0, 'appointment is rendered in right place'); - assert.roughEqual(firstAppointmentPosition.left, 0, 1, 'appointment is rendered in right place'); - assert.roughEqual(getOuterWidth($appointment.eq(0)), 798, 1.1, 'appointment has a right width'); - assert.roughEqual(getOuterHeight($appointment.eq(0)), 24.5, 1.1, 'appointment has a right height'); + assert.roughEqual(firstAppointmentPosition.top, 5, 1, 'appointment is rendered in right place'); + assert.equal(firstAppointmentPosition.left, 0, 'appointment is rendered in right place'); + assert.roughEqual(getOuterWidth($appointment.eq(0)), 833, 1.1, 'appointment has a right width'); + assert.roughEqual(getOuterHeight($appointment.eq(0)), 26, 1.1, 'appointment has a right height'); - assert.roughEqual(secondAppointmentPosition.top, 24.5, 1, 'appointment is rendered in right place'); - assert.roughEqual(secondAppointmentPosition.left, 0, 1, 'appointment is rendered in right place'); - assert.roughEqual(getOuterWidth($appointment.eq(1)), 798, 1.1, 'appointment has a right width'); - assert.roughEqual(getOuterHeight($appointment.eq(1)), 24.5, 1.1, 'appointment has a right height'); + assert.roughEqual(secondAppointmentPosition.top, 31, 1, 'appointment is rendered in right place'); + assert.equal(secondAppointmentPosition.left, 0, 'appointment is rendered in right place'); + assert.roughEqual(getOuterWidth($appointment.eq(1)), 833, 1.1, 'appointment has a right width'); + assert.roughEqual(getOuterHeight($appointment.eq(1)), 26, 1.1, 'appointment has a right height'); }); QUnit.test('All day appointments should have correct left position, vertical strategy, rtl mode', async function(assert) { @@ -1488,7 +1499,7 @@ QUnit.testInActiveWindow('Apps should be focused in right order on month view wi views: [{ type: 'month', name: 'MONTH', - maxAppointmentsPerCell: 'auto' + maxAppointmentsPerCell: 2 }], height: 600, currentDate: new Date(2015, 9, 16), @@ -1600,15 +1611,15 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option this.scheduler.appointments.compact.click(); assert.equal(this.scheduler.tooltip.isVisible(), 1, 'ddAppointment is rendered'); - assert.equal(this.scheduler.appointments.compact.getButtonText(), '2 more', 'DropDown menu has correct text'); + assert.equal(this.scheduler.appointments.compact.getButtonText(), '1 more', 'DropDown menu has correct text'); this.instance.option('height', 900); $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - assert.roughEqual(getOuterWidth($appointment.eq(0)), tableCellWidth, 1.5, 'appointment is full-size'); - assert.roughEqual(getOuterWidth($appointment.eq(1)), tableCellWidth, 1.5, 'appointment is full-size'); - assert.roughEqual(getOuterWidth($appointment.eq(2)), tableCellWidth, 1.5, 'appointment is full-size'); - assert.roughEqual(getOuterWidth($appointment.eq(3)), tableCellWidth, 1.5, 'appointment is full-size'); + assert.roughEqual(getOuterWidth($appointment.eq(0)), tableCellWidth, 3.5, 'appointment is full-size'); + assert.roughEqual(getOuterWidth($appointment.eq(1)), tableCellWidth, 3.5, 'appointment is full-size'); + assert.roughEqual(getOuterWidth($appointment.eq(2)), tableCellWidth, 3.5, 'appointment is full-size'); + assert.roughEqual(getOuterWidth($appointment.eq(3)), tableCellWidth, 3.5, 'appointment is full-size'); }); QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option, height is small "auto" mode', async function(assert) { @@ -1634,7 +1645,7 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option const dropDownMenuText = $dropDownMenu.find('span').first().text(); assert.equal($dropDownMenu.length, 1, 'ddAppointment is rendered'); - assert.equal(dropDownMenuText, '3 more', 'DropDown menu has correct text'); + assert.equal(dropDownMenuText, '1 more', 'DropDown menu has correct text'); }); QUnit.test('Full-size appointment should have correct height, "auto" mode', async function(assert) { @@ -1751,9 +1762,9 @@ QUnit.test('Full-size appointment should have correct height, \'numeric\' mode', let $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - assert.roughEqual(getOuterHeight($appointment.eq(0)), 15.5, 1, 'appointment height is ok'); - assert.roughEqual(getOuterHeight($appointment.eq(1)), 15.5, 1, 'appointment height is ok'); - assert.roughEqual(getOuterHeight($appointment.eq(2)), 15.5, 1, 'appointment height is ok'); + assert.roughEqual(getOuterHeight($appointment.eq(0)), 23.5, 1, 'appointment height is ok'); + assert.roughEqual(getOuterHeight($appointment.eq(1)), 23.5, 1, 'appointment height is ok'); + assert.roughEqual(getOuterHeight($appointment.eq(2)), 23.5, 1, 'appointment height is ok'); this.instance.option('height', 900); $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); @@ -1854,20 +1865,19 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option const $appointment = $(this.instance.$element().find('.dx-scheduler-all-day-appointment')); const tableCellWidth = getOuterWidth(this.instance.$element().find('.dx-scheduler-all-day-table-cell').eq(0)); - const tableCellHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-all-day-table-cell').eq(0)); - for(let i = 0; i < 2; i++) { + for(let i = 0; i < 1; i++) { const appointmentWidth = getOuterWidth($appointment.eq(i)); const appointmentHeight = getOuterHeight($appointment.eq(i)); assert.roughEqual(appointmentWidth, tableCellWidth, 1.5, 'appointment is full-size'); - assert.roughEqual(appointmentHeight, (tableCellHeight - 24) / 2, 1.5, 'appointment is full-size'); + assert.roughEqual(appointmentHeight, 27, 1.5, 'appointment is full-size'); } this.scheduler.appointments.compact.click(); assert.ok(this.scheduler.tooltip.isVisible(), 'ddAppointment is rendered'); - assert.equal(this.scheduler.tooltip.getItemCount(), 3, 'DropDown menu has correct items'); - assert.equal(this.scheduler.appointments.compact.getButtonText(), '3 more', 'DropDown menu has correct text'); + assert.equal(this.scheduler.tooltip.getItemCount(), 4, 'DropDown menu has correct items'); + assert.equal(this.scheduler.appointments.compact.getButtonText(), '4 more', 'DropDown menu has correct text'); }); QUnit.test('Appointment should have an unchangeable height, Day view, \'auto\' mode', async function(assert) { @@ -1887,8 +1897,7 @@ QUnit.test('Appointment should have an unchangeable height, Day view, \'auto\' m ); let $appointment = $(this.instance.$element().find('.dx-scheduler-all-day-appointment')); - const tableCellHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-all-day-table-cell').eq(0)); - const appointmentHeight = (tableCellHeight - 24) / 2; + const appointmentHeight = 27; assert.roughEqual(getOuterHeight($appointment.eq(0)), appointmentHeight, 1.5, 'appointment has a correct height'); @@ -1896,7 +1905,6 @@ QUnit.test('Appointment should have an unchangeable height, Day view, \'auto\' m $appointment = $(this.instance.$element().find('.dx-scheduler-all-day-appointment')); assert.roughEqual(getOuterHeight($appointment.eq(0)), appointmentHeight, 1.5, 'appointment has a correct height'); - assert.roughEqual(getOuterHeight($appointment.eq(1)), appointmentHeight, 1.5, 'appointment has a correct height'); }); QUnit.test('Appointment should have a right top position, Day view, \'auto\' mode', async function(assert) { @@ -1922,8 +1930,7 @@ QUnit.test('Appointment should have a right top position, Day view, \'auto\' mod this.instance.addAppointment({ text: 'Task 2', startDate: new Date(2015, 2, 4, 2, 0), endDate: new Date(2015, 2, 4, 3, 0), allDay: true }); $appointment = $(this.instance.$element().find('.dx-scheduler-all-day-appointment')); - assert.roughEqual($appointment.eq(0).position().top, 0, 1.5, 'appointment has a correct position'); - assert.roughEqual($appointment.eq(1).position().top, 0 + $appointment.outerHeight(), 1.5, 'appointment has a correct position'); + assert.roughEqual($appointment.eq(0).position().top, 30, 1.5, 'appointment has a correct position'); }); QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option, Week view, \'unlimited\' mode', async function(assert) { @@ -2007,12 +2014,11 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option ); const $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - const tableCellHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); for(let i = 0; i < 3; i++) { const appointmentHeight = getOuterHeight($appointment.eq(i)); - assert.roughEqual(appointmentHeight, (tableCellHeight - 26) / 2, 1.5, 'appointment is full-size'); + assert.roughEqual(appointmentHeight, 173, 1.5, 'appointment is full-size'); } this.scheduler.appointments.compact.click(); @@ -2043,18 +2049,16 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option ); const $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - const tableCellHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); - for(let i = 0; i < 5; i++) { + for(let i = 0; i < 4; i++) { const appointmentHeight = getOuterHeight($appointment.eq(i)); - assert.roughEqual(appointmentHeight, (tableCellHeight - 26) / 3, 1.5, 'appointment is full-size'); + assert.roughEqual(appointmentHeight, 61, 1.5, 'appointment is full-size'); } this.scheduler.appointments.compact.click(); - assert.equal(this.scheduler.appointments.compact.getButtonCount(), 4, 'ddAppointment is rendered'); - assert.equal(this.scheduler.tooltip.getItemCount(), 1, 'DropDown menu has correct items'); - assert.equal(this.scheduler.appointments.compact.getButtonText(), '1 more', 'DropDown menu has correct text'); + assert.equal(this.scheduler.appointments.compact.getButtonCount(), 0, 'ddAppointment is not rendered'); + assert.equal(this.scheduler.tooltip.getItemCount(), 0, 'DropDown menu has correct items'); }); QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option, \'auto\' mode, narrow height', async function(assert) { @@ -2079,12 +2083,11 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option ); const $appointment = $(this.instance.$element().find('.dx-scheduler-appointment')); - const tableCellHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); for(let i = 0; i < 2; i++) { const appointmentHeight = getOuterHeight($appointment.eq(i)); - assert.roughEqual(appointmentHeight, (tableCellHeight - 26), 1.5, 'appointment is full-size'); + assert.roughEqual(appointmentHeight, 70, 1.5, 'appointment is full-size'); } this.scheduler.appointments.compact.click(); @@ -2159,8 +2162,8 @@ QUnit.test('Full-size appointment should have minWidth, narrow width', async fun const $appointments = $(this.instance.$element()).find('.dx-scheduler-appointment'); - assert.roughEqual($appointments.eq(0).get(0).getBoundingClientRect().width, 5, 1.1, 'Appointment has min width'); - assert.roughEqual($appointments.eq(1).get(0).getBoundingClientRect().width, 5, 1.1, 'Appointment has min width'); + assert.roughEqual($appointments.eq(0).get(0).getBoundingClientRect().width, 6, 1.1, 'Appointment has min width'); + assert.roughEqual($appointments.eq(1).get(0).getBoundingClientRect().width, 6, 1.1, 'Appointment has min width'); }); QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell option, \'auto\' mode, narrow width', async function(assert) { @@ -2288,7 +2291,7 @@ QUnit.test('Full-size appointment count depends on maxAppointmentsPerCell and wi tableCellWidth = getOuterWidth(this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0)); appointmentWidth = getOuterWidth($appointment.eq(0)); - assert.roughEqual(appointmentWidth, tableCellWidth - 26, 1.5, 'One appointment is full-size'); + assert.roughEqual(appointmentWidth, 89, 1.5, 'One appointment is full-size'); this.scheduler.appointments.compact.click(); assert.ok(this.scheduler.tooltip.isVisible(), 'ddAppointment is rendered'); 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 8cd3c198a631..8bd9b298d161 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 @@ -9,7 +9,7 @@ import pointerMock from '../../helpers/pointerMock.js'; import fx from 'common/core/animation/fx'; import '__internal/scheduler/m_scheduler'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { testStart, module, test, skip } = QUnit; @@ -169,12 +169,12 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { [{ cellDuration: 120, - appointmentTop: 100, + appointmentTop: 76, view: 'week', startDate: new Date(2020, 2, 8, 4), }, { cellDuration: 90, - appointmentTop: 150, + appointmentTop: 114, view: 'week', startDate: new Date(2020, 2, 8, 4, 30), }, { @@ -467,7 +467,7 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { assert.equal(scheduler.appointmentList.length, 4, 'should be render 4 appointments'); - const positions = [0, 114, 228, 342]; + const positions = [0, 119, 238, 357]; for(let i = 0; i < 4; i++) { const element = scheduler.appointmentList[i].getElement(); @@ -481,19 +481,19 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { [{ view: 'day', left: 0, - top: 100, + top: 76, }, { view: 'week', left: 0, - top: 100, + top: 76, }, { view: 'timelineDay', left: 400, - top: 26, + top: 30, }, { view: 'timelineWeek', left: 400, - top: 26, + top: 30, }].forEach(({ view, left, top }) => { test(`Appointments should be rendered corrrectly when startViewDate is during DST change in ${view}`, async function(assert) { const scheduler = await createWrapper({ @@ -697,7 +697,7 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { }, { firstCell: 28, lastCell: 29, - selectedCellCount: 17, + selectedCellCount: 21, currentView: 'week', mustBeSelectedCells: [28, 35, 42, 56], testDescription: 'Cells that cover dead zone of DST and part of next week' @@ -779,7 +779,7 @@ if((new Date(2020, 2, 7)).getTimezoneOffset() === pacificTimezoneOffset) { const currentTimeIndicator = scheduler.workSpace.getCurrentTimeIndicator(); - assert.roughEqual(currentTimeIndicator.eq(0).position().top, 1000, 1.5, 'Current time indicator has correct top'); + assert.roughEqual(currentTimeIndicator.eq(0).position().top, 760, 1.5, 'Current time indicator has correct top'); clock.restore(); }); 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 725456037914..01c59c8fc67a 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 @@ -1,10 +1,6 @@ -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import '__internal/scheduler/m_subscribes'; import '__internal/scheduler/m_scheduler'; -import { - DateGeneratorBaseStrategy, - DateGeneratorVirtualStrategy -} from '__internal/scheduler/view_model/generate_view_model/m_settings_generator'; import $ from 'jquery'; import fx from 'common/core/animation/fx'; @@ -57,32 +53,6 @@ module('Subscribes', { assert.equal(targetedData.endDate.getTime(), appointmentData.endDate.getTime() + 2 * 3600000, 'Targeted endDate is OK'); }); - [ - { - scrollingMode: 'standard', - expectedType: DateGeneratorBaseStrategy - }, - { - scrollingMode: 'virtual', - expectedType: DateGeneratorVirtualStrategy - } - ].forEach(option => { - test(`Appointment dates generator strategy should has correct type if scrolling.mode: ${option.scrollingMode}`, async function(assert) { - await this.createInstance({ - currentView: 'day', - scrolling: { - mode: option.scrollingMode - } - }); - - const layoutManager = this.instance.getLayoutManager(); - const appointmentRenderingStrategy = layoutManager.getRenderingStrategyInstance(); - const { dateSettingsStrategy } = appointmentRenderingStrategy.getAppointmentSettingsGenerator(); - - assert.ok(dateSettingsStrategy instanceof option.expectedType, 'Type of the appointment dates generator is correct'); - }); - }); - test('\'createAppointmentSettings\' should return workSpace date table scrollable', async function(assert) { await this.createInstance({ currentView: 'day', @@ -198,7 +168,7 @@ module('Subscribes', { const layoutManager = this.instance.getLayoutManager(); const { _positionMap } = layoutManager; - assert.equal(_positionMap[0].length, 7, 'count is OK'); + assert.equal(_positionMap[0].length, 10, 'count is OK'); }); test('"createAppointmentSettings" should not change dateRange', async function(assert) { @@ -1056,9 +1026,9 @@ module('Grouping By Date', { const results = layoutManager._positionMap[0]; assert.equal(results.length, 3, 'Result length is OK'); - this.checkNeedCoordinatesResult(assert, results[0], 3, 0, 0, 96, 1.1); - this.checkNeedCoordinatesResult(assert, results[1], 5, 0, 0, 160, 1.1); - this.checkNeedCoordinatesResult(assert, results[2], 7, 0, 0, 224, 1.1); + this.checkNeedCoordinatesResult(assert, results[0], 3, 0, 0, 99, 1.1); + this.checkNeedCoordinatesResult(assert, results[1], 5, 0, 0, 166, 1.1); + this.checkNeedCoordinatesResult(assert, results[2], 7, 0, 0, 233, 1.1); }); test(`"createAppointmentSettings" should work correct when groupByDate = true, Month view when renovateRender is ${isRenovatedRender}`, async function(assert) { @@ -1110,112 +1080,6 @@ module('Grouping By Date', { this.checkNeedCoordinatesResult(assert, results[0], 5, 3, cellHeight * 3, cellWidth * 5, 1.5); this.checkNeedCoordinatesResult(assert, results[1], 7, 3, cellHeight * 3, cellWidth * 7, 1.5); }); - - test(`createAppointmentSettings' should work correct for recurrenceAppointment when groupByDate = true, Month view when renovateRender is ${isRenovatedRender}`, 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: [ - { - fieldExpr: 'priorityId', - allowMultiple: false, - dataSource: priorityData, - label: 'Priority' - } - ], - renovateRender: isRenovatedRender, - dataSource: [{ - startDate: new Date(2018, 4, 22, 10, 0), - endDate: new Date(2018, 4, 23, 12), - priorityId: 2, - recurrenceRule: 'FREQ=DAILY;COUNT=3' - }] - }); - - 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 layoutManager = this.instance.getLayoutManager(); - const results = layoutManager._positionMap[0]; - - assert.equal(results.length, 6, 'Coordinates count is ok'); - this.checkNeedCoordinatesResult(assert, results[0], 5, 3, cellHeight * 3, cellWidth * 5, 1.5); - this.checkNeedCoordinatesResult(assert, results[1], 7, 3, cellHeight * 3, cellWidth * 7, 1.5); - this.checkNeedCoordinatesResult(assert, results[2], 7, 3, cellHeight * 3, cellWidth * 7, 1.5); - this.checkNeedCoordinatesResult(assert, results[3], 9, 3, cellHeight * 3, cellWidth * 9, 1.5); - this.checkNeedCoordinatesResult(assert, results[4], 9, 3, cellHeight * 3, cellWidth * 9, 1.5); - this.checkNeedCoordinatesResult(assert, results[5], 11, 3, cellHeight * 3, cellWidth * 11, 1.5); - }); - - // NOTE: It was false positive test. This usage scenario broken for long time. - test.skip(`'createAppointmentSettings' should work correct when groupByDate = true, Timeline view when renovateRender is ${isRenovatedRender}`, async function(assert) { - const priorityData = [ - { - text: 'Low Priority', - id: 1, - color: '#1e90ff' - }, { - text: 'High Priority', - id: 2, - color: '#ff9747' - } - ]; - await this.createInstance({ - currentView: 'timelineWeek', - views: [{ - type: 'timelineWeek', - name: 'timelineWeek', - groupOrientation: 'horizontal' - }], - currentDate: new Date(2018, 4, 21), - cellDuration: 60, - groupByDate: true, - startDayHour: 10, - endDayHour: 12, - groups: ['priorityId'], - resources: [ - { - fieldExpr: 'priorityId', - allowMultiple: false, - dataSource: priorityData, - label: 'Priority' - } - ], - renovateRender: isRenovatedRender, - dataSource: [{ - startDate: new Date(2018, 4, 21, 10, 0), - endDate: new Date(2018, 4, 21, 12, 0), - priorityId: 2 - }] - }); - - const cellWidth = this.instance.$element().find('.dx-scheduler-date-table-cell').eq(0).get(0).getBoundingClientRect().width; - - const layoutManager = this.instance.getLayoutManager(); - const results = layoutManager._positionMap[0]; - - this.checkNeedCoordinatesResult(assert, results[0], 5, 0, 0, cellWidth * 5, 1.5); - this.checkNeedCoordinatesResult(assert, results[1], 7, 0, 0, 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.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/timeline.tests.js index 4c2738914840..10af96632fc1 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 @@ -2,7 +2,7 @@ import { getOuterWidth, getOuterHeight } from 'core/utils/size'; import dateUtils from 'core/utils/date'; import resizeCallbacks from 'core/utils/resize_callbacks'; import { triggerHidingEvent, triggerShownEvent } from 'common/core/events/visibility_change'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import '__internal/scheduler/workspaces/m_timeline'; import '__internal/scheduler/workspaces/m_timeline_day'; @@ -118,7 +118,7 @@ QUnit.test('Date table should have a correct width if cell is less than 75px', a dateTableScrollable.scrollTo({ top: 102 }); setTimeout(() => { - assert.equal(groupPanelScrollable.scrollTop(), 102, 'Scroll position is OK'); + assert.equal(groupPanelScrollable.scrollTop(), 87, 'Scroll position is OK'); done(); }, 100); }); @@ -146,7 +146,7 @@ QUnit.test('Date table should have a correct width if cell is less than 75px', a groupPanelScrollable.scrollTo({ top: 102 }); - assert.equal(dateTableScrollable.scrollTop(), 102, 'Scroll position is OK'); + assert.equal(dateTableScrollable.scrollTop(), 87, 'Scroll position is OK'); }); }); @@ -311,7 +311,7 @@ QUnit.test('Ensure cell min height is equal to cell height(T389468)', async func try { this.instance.option('currentDate', new Date(2010, 10, 10)); const height = getOuterHeight(this.instance.$element().find('.dx-scheduler-group-header').eq(0)); - const expectedHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').first()) - 1; + const expectedHeight = getOuterHeight(this.instance.$element().find('.dx-scheduler-date-table-cell').first()); assert.roughEqual(height, expectedHeight, 2.001, 'Group cell height is OK'); 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 43b822ea09ba..515b566badb8 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 @@ -18,7 +18,7 @@ import ArrayStore from 'common/data/array_store'; import dragEvents from 'common/core/events/drag'; import timeZoneUtils from '__internal/scheduler/m_utils_time_zone'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { testStart, test, module } = QUnit; @@ -105,7 +105,7 @@ module('Common', moduleConfig, () => { }, expectedContent: `${dateLocalization.format(new Date(2020, 1, 4, 5), 'shorttime')} - ${dateLocalization.format(new Date(2020, 1, 4, 6), 'shorttime')}`, expectedPosition: { - top: 500, + top: 380, left: 0 }, expectedPopupDates: { @@ -125,7 +125,7 @@ module('Common', moduleConfig, () => { }, expectedContent: `${dateLocalization.format(new Date(2020, 1, 4, 5), 'shorttime')} - ${dateLocalization.format(new Date(2020, 1, 4, 6), 'shorttime')}`, expectedPosition: { - top: 500, + top: 380, left: 0 }, expectedPopupDates: { @@ -146,7 +146,7 @@ module('Common', moduleConfig, () => { schedulerTimeZone: timeZones.Yekaterinburg, expectedContent: '7:00 PM - 8:00 PM', expectedPosition: { - top: 1900, + top: 1444, left: 0 }, expectedPopupDates: { @@ -167,7 +167,7 @@ module('Common', moduleConfig, () => { schedulerTimeZone: timeZones.Yekaterinburg, expectedContent: '7:00 PM - 8:00 PM', expectedPosition: { - top: 1900, + top: 1444, left: 0 }, expectedPopupDates: { 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 49636e90c67d..219b712f990b 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 @@ -8,7 +8,7 @@ import { dateToMilliseconds } from 'core/utils/date'; import { createWrapper, createWrapperFakeClock, initTestMarkup } from '../../helpers/scheduler/helpers.js'; import { waitAsync, waitForAsync } from '../../helpers/scheduler/waitForAsync.js'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const { module, @@ -417,16 +417,16 @@ module('CellTemplate tests', moduleConfig, () => { width: 700, dataSource: [], dataCellTemplate: function(cellData, cellIndex, cellElement) { - // all-day table cell size + // all-day table cell size if(cellData.allDay && !cellIndex) { - assert.roughEqual(getOuterWidth($(cellElement)), 85, 1.001, 'Data cell width is OK'); - assert.roughEqual(getOuterHeight($(cellElement)), 24, 1.001, 'Data cell height is OK'); + 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, 85, 1.001, 'Data cell width is OK'); - assert.equal($(cellElement).get(0).getBoundingClientRect().height, 50, 'Data cell height is OK'); + 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, @@ -1576,8 +1576,8 @@ module('CellTemplate tests', moduleConfig, () => { dateCellTemplate: function(cellData, cellIndex, cellElement) { if(!cellIndex) { assert.equal(isRenderer(cellElement), !!config().useJQuery, 'element is correct'); - assert.roughEqual(getOuterWidth($(cellElement)), 85, 1.001, 'Date cell width is OK'); - assert.equal(getOuterHeight($(cellElement)), 50, 'Date cell height is OK'); + assert.roughEqual(getOuterWidth($(cellElement)), 90, 1.001, 'Date cell width is OK'); + assert.equal(getOuterHeight($(cellElement)), 40, 'Date cell height is OK'); } } }); @@ -1885,8 +1885,8 @@ module('CellTemplate tests', moduleConfig, () => { timeCellTemplate: function(cellData, cellIndex, cellElement) { if(!cellIndex) { assert.equal(isRenderer(cellElement), !!config().useJQuery, 'element is correct'); - assert.equal($(cellElement).get(0).getBoundingClientRect().height, 50, 'Time cell height is OK'); - assert.roughEqual(getOuterWidth($(cellElement)), 100, 1.01, 'Time cell width is OK'); + assert.equal($(cellElement).get(0).getBoundingClientRect().height, 38, 'Time cell height is OK'); + assert.roughEqual(getOuterWidth($(cellElement)), 64.5, 1.01, 'Time cell width is OK'); } } }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js index 841a5b1416bb..9dc308b044f7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js @@ -2,7 +2,7 @@ import $ from 'jquery'; import { getWindow } from 'core/utils/window'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import { DataSource } from 'common/data/data_source/data_source'; import { @@ -224,28 +224,24 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9824, top: -9689, height: 500 }, - { left: -9749, top: -9839, height: 50 }, - { left: -9299, top: -9689, height: 500 }, - { left: -9224, top: -9839, height: 50 } + { left: -9859, top: -9723, height: 570 }, + { left: -9784, top: -9837, height: 38 }, + { left: -9334, top: -9723, height: 570 }, + { left: -9259, top: -9837, height: 38 } ] }, { y: 1000, appointmentRects: [ - { left: -9824, top: -10039, height: 850 }, - { left: -9749, top: -10839, height: 50 }, - { left: -9299, top: -10039, height: 850 }, - { left: -9224, top: -10839, height: 50 } + { left: -9859, top: -10077, height: 912 }, + { left: -9334, top: -10077, height: 912 }, ] }, { y: 2200, appointmentRects: [ - { left: -9749, top: -11901, height: 50 }, - { left: -9224, top: -11901, height: 50 }, - { left: -9824, top: -10151, height: 650 }, - { left: -9299, top: -10151, height: 650 }, + { left: -9859, top: -10185, height: 684 }, + { left: -9334, top: -10185, height: 684 }, ] }] }, @@ -254,26 +250,22 @@ module('Virtual scrolling integration', () => { steps: [{ y: 0, appointmentRects: [ - { left: -9824, top: -9712, height: 500 }, - { left: -9749, top: -9862, height: 50 }, - { left: -9299, top: -9712, height: 500 }, - { left: -9224, top: -9862, height: 50 } + { left: -9859, top: -9754, height: 570 }, + { left: -9784, top: -9868, height: 38 }, + { left: -9334, top: -9754, height: 570 }, + { left: -9259, top: -9868, height: 38 } ] }, { y: 1000, appointmentRects: [ - { left: -9824, top: -10062, height: 850 }, - { left: -9749, top: -10862, height: 50 }, - { left: -9299, top: -10062, height: 850 }, - { left: -9224, top: -10862, height: 50 } + { left: -9859, top: -10108, height: 912 }, + { left: -9334, top: -10108, height: 912 }, ] }, { y: 2200, appointmentRects: [ - { left: -9749, top: -11899, height: 50 }, - { left: -9224, top: -11899, height: 50 }, - { left: -9824, top: -10149, height: 650 }, - { left: -9299, top: -10149, height: 650 }, + { left: -9859, top: -10185, height: 684 }, + { left: -9334, top: -10185, height: 684 }, ] }] } @@ -350,26 +342,26 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9749, top: -9839, height: 650 }, - { left: -9224, top: -9839, height: 650 } + { left: -9784, top: -9837, height: 684 }, + { left: -9259, top: -9837, height: 684 } ] }, { y: 1000, appointmentRects: [ - { left: -9824, top: -9689, height: 500 }, - { left: -9749, top: -10839, height: 1050 }, - { left: -9299, top: -9689, height: 500 }, - { left: -9224, top: -10839, height: 1050 } + { left: -9859, top: -9963, height: 798 }, + { left: -9784, top: -10837, height: 798 }, + { left: -9334, top: -9963, height: 798 }, + { left: -9259, top: -10837, height: 798 } ] }, { y: 2200, appointmentRects: [ - { left: -9824, top: -10151, height: 650 }, - { left: -9749, top: -11901, height: 1050 }, - { left: -9299, top: -10151, height: 650 }, - { left: -9224, top: -11901, height: 1050 } + { left: -9784, top: -11325, height: 38 }, + { left: -9784, top: -11325, height: 38 }, + { left: -9259, top: -11325, height: 38 }, + { left: -9259, top: -11325, height: 38 } ] } ], @@ -378,26 +370,26 @@ module('Virtual scrolling integration', () => { steps: [{ y: 0, appointmentRects: [ - { left: -9749, top: -9862, height: 650 }, - { left: -9224, top: -9862, height: 650 } + { left: -9784, top: -9868, height: 684 }, + { left: -9259, top: -9868, height: 684 } ] }, { y: 1000, appointmentRects: [ - { left: -9824, top: -9712, height: 500 }, - { left: -9749, top: -10862, height: 1050 }, - { left: -9299, top: -9712, height: 500 }, - { left: -9224, top: -10862, height: 1050 } + { left: -9859, top: -9994, height: 798 }, + { left: -9784, top: -10868, height: 798 }, + { left: -9334, top: -9994, height: 798 }, + { left: -9259, top: -10868, height: 798 } ] }, { y: 2200, appointmentRects: [ - { left: -9824, top: -10149, height: 650 }, - { left: -9749, top: -11899, height: 1050 }, - { left: -9299, top: -10149, height: 650 }, - { left: -9224, top: -11899, height: 1050 } + { left: -9784, top: -11325, height: 38 }, + { left: -9784, top: -11325, height: 38 }, + { left: -9259, top: -11325, height: 38 }, + { left: -9259, top: -11325, height: 38 } ] } ] @@ -505,25 +497,25 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9713, top: -9692, height: 450 } + { left: -9773, top: -9734, height: 532 } ] }, { y: 1000, appointmentRects: [ - { left: -9713, top: -10092, height: 850 } + { left: -9773, top: -10138, height: 912 } ] }, { y: 2500, appointmentRects: [ - { left: -9713, top: -9742, height: 500 } + { left: -9773, top: -10156, height: 912 } ] }, { y: 4500, appointmentRects: [ - { left: -9713, top: -10142, height: 500 } + { left: -9773, top: -10185, height: 570 } ] } ].forEach(option => { @@ -589,22 +581,22 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9824, top: -9689, height: 500 }, - { left: -9299, top: -9689, height: 500 } + { left: -9859, top: -9723, height: 570 }, + { left: -9334, top: -9723, height: 570 } ] }, { y: 1000, appointmentRects: [ - { left: -9824, top: -10039, height: 850 }, - { left: -9299, top: -10039, height: 850 } + { left: -9859, top: -10077, height: 912 }, + { left: -9334, top: -10077, height: 912 } ] }, { y: 2100, appointmentRects: [ - { left: -9824, top: -10151, height: 500 }, - { left: -9299, top: -10151, height: 500 } + { left: -9859, top: -10185, height: 570 }, + { left: -9334, top: -10185, height: 570 } ] } ].forEach(option => { @@ -657,10 +649,8 @@ module('Virtual scrolling integration', () => { const { instance } = this.scheduler; - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.equal(settings.groupIndex, 0, 'groupIndex is correct'); + const items = instance.getAppointmentsInstance().option('items'); + assert.equal(items[0].groupIndex, 0, 'groupIndex is correct'); }); }); @@ -670,17 +660,15 @@ module('Virtual scrolling integration', () => { steps: [ { offset: { x: 0, y: 0 }, appointmentRects: [ - { left: -9714, top: -9693, height: 450 }, - { left: -9629, top: -9843, height: 50 } + { left: -9772, top: -9735, height: 532 }, + { left: -9677, top: -9849, height: 38 } ] }, { offset: { x: 0, y: 2300 }, appointmentRects: [ - { left: -9714, top: -10093, height: 350 }, - { left: -9714, top: -9543, height: 300 }, - { left: -9629, top: -12143, height: 50 }, - { left: -9629, top: -9693, height: 50 }, + { left: -9773, top: -10147, height: 912 }, + { left: -9677, top: -10147, height: 912 } ] }] }, @@ -690,17 +678,15 @@ module('Virtual scrolling integration', () => { { offset: { x: 0, y: 0 }, appointmentRects: [ - { left: -9714, top: -9741, height: 500 }, - { left: -9629, top: -9891, height: 50 } + { left: -9773, top: -9784, height: 570 }, + { left: -9677, top: -9898, height: 38 } ] }, { offset: { x: 0, y: 2300 }, appointmentRects: [ - { left: -9714, top: -10091, height: 300 }, - { left: -9714, top: -9641, height: 400 }, - { left: -9629, top: -12191, height: 50 }, - { left: -9629, top: -9791, height: 50 }, + { left: -9773, top: -10146, height: 912 }, + { left: -9677, top: -10146, height: 912 } ] } ] @@ -788,22 +774,21 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9628, top: -9843, height: 600 }, + { left: -9677.4375, top: -9848, height: 646 }, ] }, { y: 1000, appointmentRects: [ - { left: -9713, top: -9693, height: 450 }, - { left: -9628, top: -10843, height: 1050 } + { left: -9773.71875, top: -9986, height: 760 }, + { left: -9677.4375, top: -10860, height: 798 } ] }, { y: 2200, appointmentRects: [ - { left: -9713, top: -10093, height: 450 }, - { left: -9628, top: -12043, height: 1050 }, - { left: -9628, top: -9593, height: 350 }, + { left: -9773.71875, top: -9324, height: 76 }, + { left: -9677.4375, top: -10198, height: 798 } ] } ] @@ -813,22 +798,21 @@ module('Virtual scrolling integration', () => { { y: 0, appointmentRects: [ - { left: -9628, top: -9891, height: 650 } + { left: -9678.15625, top: -9898.171875, height: 684 } ] }, { y: 1000, appointmentRects: [ - { left: -9713, top: -9741, height: 500 }, - { left: -9628, top: -10891, height: 1050 } + { left: -9773.578125, top: -10024, height: 798 }, + { left: -9678.15625, top: -10898, height: 798 } ] }, { y: 2200, appointmentRects: [ - { left: -9713, top: -10091, height: 400 }, - { left: -9628, top: -12091, height: 1050 }, - { left: -9628, top: -9691, height: 450 } + { left: -9773.578125, top: -9400, height: 152 }, + { left: -9678.15625, top: -10274, height: 798 } ] } ] @@ -913,38 +897,34 @@ module('Virtual scrolling integration', () => { steps: [{ offset: { x: 0, y: 0 }, appointmentRects: [ - { left: -9874, top: -9689, height: 500 }, - { left: -9799, top: -9839, height: 50 }, + { left: -9891.5, top: -9723, height: 570 }, + { left: -9816.5, top: -9837, height: 38 }, ] }, { offset: { x: 0, y: 1000 }, appointmentRects: [ - { left: -9874, top: -10039, height: 850 }, - { left: -9799, top: -10839, height: 50 }, + { left: -9891.5, top: -10077, height: 912 }, ] }, { offset: { x: 0, y: 2200 }, appointmentRects: [ - { left: -9799, top: -11900, height: 50 }, - { left: -9874, top: -10150, height: 650 }, + { left: -9891.5, top: -10185, height: 684 }, ] }, { offset: { x: 520, y: 0 }, appointmentRects: [ - { left: -9869, top: -9689, height: 500 }, - { left: -9794, top: -9839, height: 50 }, + { left: -9886.5, top: -9723, height: 570 }, + { left: -9811.5, top: -9837, height: 38 }, ] }, { offset: { x: 520, y: 1000 }, appointmentRects: [ - { left: -9869, top: -10038, height: 850 }, - { left: -9794, top: -10839, height: 50 }, + { left: -9886.5, top: -10077, height: 912 }, ] }, { offset: { x: 520, y: 2200 }, appointmentRects: [ - { left: -9794, top: -11900, height: 50 }, - { left: -9869, top: -10150, height: 650 }, + { left: -9886.5, top: -10185, height: 684 }, ] }] }, { @@ -952,38 +932,37 @@ module('Virtual scrolling integration', () => { steps: [{ offset: { x: 0, y: 0 }, appointmentRects: [ - { left: -9874, top: -9712, height: 500 }, - { left: -9799, top: -9862, height: 50 }, + { left: -9891.5, top: -9754, height: 570 }, + { left: -9816.5, top: -9868, height: 38 }, ] }, { offset: { x: 0, y: 1000 }, appointmentRects: [ - { left: -9874, top: -10062, height: 850 }, - { left: -9799, top: -10862, height: 50 }, + { left: -9891.5, top: -10108, height: 912 }, + { left: -9816.5, top: -10108, height: 912 } ] }, { offset: { x: 0, y: 2200 }, appointmentRects: [ - { left: -9799, top: -11899, height: 50 }, - { left: -9874, top: -10149, height: 650 }, + { left: -9891.5, top: -10185, height: 684 }, ] }, { offset: { x: 520, y: 0 }, appointmentRects: [ - { left: -9869, top: -9712, height: 500 }, - { left: -9794, top: -9862, height: 50 }, + { left: -9886.5, top: -9754, height: 570 }, + { left: -9811.5, top: -9868, height: 38 }, ] }, { offset: { x: 520, y: 1000 }, appointmentRects: [ - { left: -9869, top: -10062, height: 850 }, - { left: -9794, top: -10862, height: 50 }, + { left: -9886.5, top: -10108, height: 912 }, + { left: -9811.5, top: -10108, height: 912 } ] }, { offset: { x: 520, y: 2200 }, appointmentRects: [ - { left: -9794, top: -11899, height: 50 }, - { left: -9869, top: -10149, height: 650 }, + { left: -9811.5, top: -11325, height: 38 }, + { left: -9811.5, top: -11325, height: 38 } ] }] } @@ -1092,37 +1071,41 @@ module('Virtual scrolling integration', () => { { offset: { x: 0, y: 0 }, appointmentRects: [ - { left: -9874, top: -9689, height: 500 } + { left: -9891.5, top: -9723, height: 570 } ] }, { offset: { x: 0, y: 1000 }, appointmentRects: [ - { left: -9874, top: -10039, height: 850 } + { left: -9891.5, top: -10077, height: 912 }, + { left: -9816.5, top: -10077, height: 912 } ] }, { - offset: { x: 0, y: 2100 }, + offset: { x: 0, y: 2200 }, appointmentRects: [ - { left: -9874, top: -10151, height: 500 } + { left: -9816.5, top: -11325, height: 38 }, + { left: -9816.5, top: -11325, height: 38 } ] }, { offset: { x: 520, y: 0 }, appointmentRects: [ - { left: -9869, top: -9689, height: 500 } + { left: -9886.5, top: -9723, height: 570 } ] }, { offset: { x: 520, y: 1000 }, appointmentRects: [ - { left: -9869, top: -10039, height: 850 } + { left: -9886.5, top: -10077, height: 912 }, + { left: -9811.5, top: -10077, height: 912 } ] }, { - offset: { x: 520, y: 2100 }, + offset: { x: 520, y: 2200 }, appointmentRects: [ - { left: -9869, top: -10151, height: 500 } + { left: -9811.5, top: -11325, height: 38 }, + { left: -9811.5, top: -11325, height: 38 } ] } ].forEach(({ offset, appointmentRects }) => { @@ -1156,74 +1139,6 @@ module('Virtual scrolling integration', () => { }); }); }); - - - ['horizontal', 'vertical'].forEach(groupOrientation => { - test(`A long appointment should be correctly croped if Week view and "${groupOrientation}" group orientation`, async function(assert) { - const longAppointment = { - startDate: new Date(2015, 2, 4, 0, 10), - endDate: new Date(2015, 2, 4, 23, 50) - }; - await this.createInstance({ - currentDate: new Date(2015, 2, 4), - scrolling: { - mode: 'virtual' - }, - views: [{ - type: 'week', - groupOrientation: groupOrientation - }], - currentView: 'week', - dataSource: [longAppointment], - height: 400 - }); - - const { instance } = this.scheduler; - const workspace = instance.getWorkSpace(); - const { viewDataProvider } = workspace; - const scrollable = workspace.getScrollable(); - - workspace.renderer.getRenderTimeout = () => -1; - - return asyncWrapper(assert, promise => { - [ - 1000, 1050, 1100, 1200, 1250, 1300, 1350, 1400, 1500, 2000 - ].forEach(scrollY => { - promise = asyncScrollTest( - assert, - promise, - () => { - - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.equal( - settings.groupIndex, - 0, - `group index is correct when scrolled to ${scrollY}` - ); - - const startViewDate = viewDataProvider.findGroupCellStartDate( - settings.groupIndex, - settings.info.appointment.startDate, - settings.info.appointment.endDate - ); - - assert.deepEqual( - settings.info.appointment.startDate, - startViewDate, - 'start date is correct' - ); - }, - scrollable, - { y: scrollY } - ); - }); - - return promise; - }); - }); - }); }); module('Supported views', () => { @@ -1255,10 +1170,8 @@ module('Virtual scrolling integration', () => { const { instance } = this.scheduler; - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.equal(settings.groupIndex, 0, 'groupIndex is correct'); + const items = instance.getAppointmentsInstance().option('items'); + assert.equal(items[0].groupIndex, 0, 'groupIndex is correct'); }); test(`Grouped appointment should contains correct groupIndex if "${viewName}" view has horizontal group orientation`, async function(assert) { @@ -1291,10 +1204,9 @@ module('Virtual scrolling integration', () => { const { instance } = this.scheduler; - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; + const items = instance.getAppointmentsInstance().option('items'); - assert.equal(settings.groupIndex, 1, 'groupIndex is correct'); + assert.equal(items[0].groupIndex, 1, 'groupIndex is correct'); }); test(`Grouped allDay appointment should contains correct groupIndex if "${viewName}" view has vertical group orientation`, async function(assert) { @@ -1323,11 +1235,9 @@ module('Virtual scrolling integration', () => { }); const { instance } = this.scheduler; + const items = instance.getAppointmentsInstance().option('items'); - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.equal(settings.groupIndex, 0, 'groupIndex is correct'); + assert.equal(items[0].groupIndex, 0, 'groupIndex is correct'); }); }); }); @@ -1381,7 +1291,7 @@ module('Virtual scrolling integration', () => { expectedSettings: [ { groupIndex: 0, - topPositions: [50, 150, 250, 350, 450, 550, 650, 750] + topPositions: [50, 126, 202, 278, 354, 430, 506, 582, 658, 734, 810] } ] }, @@ -1390,40 +1300,27 @@ module('Virtual scrolling integration', () => { expectedSettings: [ { groupIndex: 0, - topPositions: [1750, 1850, 1950, 2050, 2150, 2250, 2350] - }, - { - groupIndex: 1, - topPositions: [2500, 2600, 2700] - }, + topPositions: [1710, 1786] + } ] }, { offset: { y: 4000 }, - expectedSettings: [ - { - groupIndex: 1, - topPositions: [3750, 3800, 3900, 4000, 4100, 4200, 4300, 4400, 4500, 4600, 4700] - } - ] + expectedSettings: [] }, ].forEach(({ offset, expectedSettings }) => { promise = asyncScrollTest( assert, promise, () => { - instance.getLayoutManager().filteredItems.forEach((dataItem, index) => { - const layoutManager = instance.getLayoutManager(); - const appointmentRenderingStrategy = layoutManager.getRenderingStrategyInstance(); - const settings = appointmentRenderingStrategy.generateAppointmentSettings(dataItem); - const { - groupIndex, - topPositions - } = expectedSettings[index]; - assert.equal(settings.length, topPositions.length, 'Settings amount is correct'); + expectedSettings.forEach(({ + groupIndex, + topPositions + }) => { + const items = instance.getAppointmentsInstance().option('items').filter((item) => item.groupIndex === groupIndex).sort(); + assert.equal(items.length, topPositions.length, 'Settings amount is correct'); topPositions.forEach((top, index) => { - assert.equal(settings[index].groupIndex, groupIndex, `Appointment groupIndex "${groupIndex}" is correct for offsetY: ${offset.y}`); - assert.equal(settings[index].top, top, `Appointment top position "${top}" is correct for offsetY: ${offset.y}`); + assert.equal(items[index].top, top, `Appointment top position "${top}" is correct for offsetY: ${offset.y}`); }); }); }, @@ -1488,23 +1385,43 @@ module('Virtual scrolling integration', () => { { groupIndex: 0, left: 0, - top: 100, - height: 450 + top: 76, + height: 342 + }, { + groupIndex: 0, + left: 0, + top: 684, + height: 152 }, { groupIndex: 0, - left: 175, - top: 100, - height: 450 + left: 183.25, + top: 76, + height: 342 + }, { + groupIndex: 0, + left: 183.25, + top: 684, + height: 152 + }, { + groupIndex: 1, + left: 366.5, + top: 76, + height: 342 + }, { + groupIndex: 1, + left: 366.5, + top: 684, + height: 152 }, { groupIndex: 1, - left: 350, - top: 100, - height: 450 + left: 549.75, + top: 76, + height: 342 }, { groupIndex: 1, - left: 523, - top: 100, - height: 450 + left: 549.75, + top: 684, + height: 152 } ] }, @@ -1514,43 +1431,43 @@ module('Virtual scrolling integration', () => { { groupIndex: 0, left: 0, - top: 250, - height: 300 + top: 228, + height: 190 }, { groupIndex: 0, left: 0, - top: 900, - height: 400 + top: 684, + height: 494 }, { groupIndex: 0, - left: 175, - top: 250, - height: 300 + left: 183.25, + top: 228, + height: 190 }, { groupIndex: 0, - left: 175, - top: 900, - height: 400 + left: 183.25, + top: 684, + height: 494 }, { groupIndex: 1, - left: 350, - top: 250, - height: 300 + left: 366.5, + top: 228, + height: 190 }, { groupIndex: 1, - left: 350, - top: 900, - height: 400 + left: 366.5, + top: 684, + height: 494 }, { groupIndex: 1, - left: 523, - top: 250, - height: 300 + left: 549.75, + top: 228, + height: 190 }, { groupIndex: 1, - left: 523, - top: 900, - height: 400 + left: 549.75, + top: 684, + height: 494 } ] }, @@ -1560,23 +1477,23 @@ module('Virtual scrolling integration', () => { { groupIndex: 0, left: 0, - top: 900, - height: 650 + top: 684, + height: 494 }, { groupIndex: 0, - left: 175, - top: 900, - height: 650 + left: 183.25, + top: 684, + height: 494 }, { groupIndex: 1, - left: 350, - top: 900, - height: 650 + left: 366.5, + top: 684, + height: 494 }, { groupIndex: 1, - left: 523, - top: 900, - height: 650 + left: 549.75, + top: 684, + height: 494 } ] }, @@ -1586,43 +1503,43 @@ module('Virtual scrolling integration', () => { { groupIndex: 0, left: 0, - top: 250, - height: 300 + top: 228, + height: 190 }, { groupIndex: 0, left: 0, - top: 900, - height: 400 + top: 684, + height: 494 }, { groupIndex: 0, - left: 175, - top: 250, - height: 300 + left: 183.25, + top: 228, + height: 190 }, { groupIndex: 0, - left: 175, - top: 900, - height: 400 + left: 183.25, + top: 684, + height: 494 }, { groupIndex: 1, - left: 350, - top: 250, - height: 300 + left: 366.5, + top: 228, + height: 190 }, { groupIndex: 1, - left: 350, - top: 900, - height: 400 + left: 366.5, + top: 684, + height: 494 }, { groupIndex: 1, - left: 523, - top: 250, - height: 300 + left: 549.75, + top: 228, + height: 190 }, { groupIndex: 1, - left: 523, - top: 900, - height: 400 + left: 549.75, + top: 684, + height: 494 } ] } @@ -1631,7 +1548,7 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const items = instance._appointments.option('items'); + const items = instance.getAppointmentsInstance().option('items'); assert.equal(items.length, expected.length, `Appointments amount is correct for offsetY=${offsetY}`); @@ -1701,91 +1618,93 @@ module('Virtual scrolling integration', () => { { offset: { x: 0 }, appointmentRects: [ - { left: -9824, top: -9864, height: 25, width: 75 }, - { left: -9749, top: -9864, height: 25, width: 75 }, - { left: -9674, top: -9864, height: 25, width: 75 }, - { left: -9599, top: -9864, height: 25, width: 75 }, - { left: -9524, top: -9864, height: 25, width: 75 }, - { left: -9449, top: -9864, height: 25, width: 75 }, - { left: -8774, top: -9864, height: 25, width: 75 }, + { left: -9859, top: -9869, height: 25, width: 75 }, + { left: -9784, top: -9869, height: 25, width: 75 }, + { left: -9709, top: -9869, height: 25, width: 75 }, + { left: -9634, top: -9869, height: 25, width: 75 }, + { left: -9559, top: -9869, height: 25, width: 75 }, + { left: -9484, top: -9869, height: 25, width: 75 }, + { left: -8809, top: -9869, height: 25, width: 75 }, + { left: -8734, top: -9869, height: 25, width: 5 }, ] }, { offset: { x: 500 }, appointmentRects: [ - { left: -10324, top: -9864, height: 25, width: 75 }, - { left: -10249, top: -9864, height: 25, width: 75 }, - { left: -10174, top: -9864, height: 25, width: 75 }, - { left: -10099, top: -9864, height: 25, width: 75 }, - { left: -10024, top: -9864, height: 25, width: 75 }, - { left: -9949, top: -9864, height: 25, width: 75 }, - { left: -9274, top: -9864, height: 25, width: 75 }, - { left: -9199, top: -9864, height: 25, width: 75 }, - { left: -9124, top: -9864, height: 25, width: 75 }, - { left: -9049, top: -9864, height: 25, width: 75 }, - { left: -8974, top: -9864, height: 25, width: 75 }, - { left: -8899, top: -9864, height: 25, width: 75 } + { left: -10359, top: -9869, height: 25, width: 75 }, + { left: -10284, top: -9869, height: 25, width: 75 }, + { left: -10209, top: -9869, height: 25, width: 75 }, + { left: -10134, top: -9869, height: 25, width: 75 }, + { left: -10059, top: -9869, height: 25, width: 75 }, + { left: -9984, top: -9869, height: 25, width: 75 }, + { left: -9309, top: -9869, height: 25, width: 75 }, + { left: -9234, top: -9869, height: 25, width: 75 }, + { left: -9159, top: -9869, height: 25, width: 75 }, + { left: -9084, top: -9869, height: 25, width: 75 }, + { left: -9009, top: -9869, height: 25, width: 75 }, + { left: -8934, top: -9869, height: 25, width: 75 } ] }, { offset: { x: 1000 }, appointmentRects: [ - { left: -9774, top: -9864, height: 25, width: 75 }, - { left: -9699, top: -9864, height: 25, width: 75 }, - { left: -9624, top: -9864, height: 25, width: 75 }, - { left: -9549, top: -9864, height: 25, width: 75 }, - { left: -9474, top: -9864, height: 25, width: 75 }, - { left: -9399, top: -9864, height: 25, width: 75 } + { left: -9809, top: -9869, height: 25, width: 75 }, + { left: -9734, top: -9869, height: 25, width: 75 }, + { left: -9659, top: -9869, height: 25, width: 75 }, + { left: -9584, top: -9869, height: 25, width: 75 }, + { left: -9509, top: -9869, height: 25, width: 75 }, + { left: -9434, top: -9869, height: 25, width: 75 }, + { left: -8759, top: -9869, height: 25, width: 5 }, ] }, { offset: { x: 1500 }, appointmentRects: [ - { left: -10274, top: -9864, height: 25, width: 75 }, - { left: -10199, top: -9864, height: 25, width: 75 }, - { left: -10124, top: -9864, height: 25, width: 75 }, - { left: -10049, top: -9864, height: 25, width: 75 }, - { left: -9974, top: -9864, height: 25, width: 75 }, - { left: -9899, top: -9864, height: 25, width: 75 }, - { left: -9224, top: -9864, height: 25, width: 75 }, - { left: -9149, top: -9864, height: 25, width: 75 }, - { left: -9074, top: -9864, height: 25, width: 75 }, - { left: -8999, top: -9864, height: 25, width: 75 }, - { left: -8924, top: -9864, height: 25, width: 75 }, - { left: -8849, top: -9864, height: 25, width: 75 } + { left: -10309, top: -9869, height: 25, width: 75 }, + { left: -10234, top: -9869, height: 25, width: 75 }, + { left: -10159, top: -9869, height: 25, width: 75 }, + { left: -10084, top: -9869, height: 25, width: 75 }, + { left: -10009, top: -9869, height: 25, width: 75 }, + { left: -9934, top: -9869, height: 25, width: 75 }, + { left: -9259, top: -9869, height: 25, width: 75 }, + { left: -9184, top: -9869, height: 25, width: 75 }, + { left: -9109, top: -9869, height: 25, width: 75 }, + { left: -9034, top: -9869, height: 25, width: 75 }, + { left: -8959, top: -9869, height: 25, width: 75 }, + { left: -8884, top: -9869, height: 25, width: 75 } ] }, { offset: { x: 2000 }, appointmentRects: [ - { left: -9724, top: -9864, height: 25, width: 75 }, - { left: -9649, top: -9864, height: 25, width: 75 }, - { left: -9574, top: -9864, height: 25, width: 75 }, - { left: -9499, top: -9864, height: 25, width: 75 }, - { left: -9424, top: -9864, height: 25, width: 75 }, - { left: -9349, top: -9864, height: 25, width: 75 } + { left: -9759, top: -9869, height: 25, width: 75 }, + { left: -9684, top: -9869, height: 25, width: 75 }, + { left: -9609, top: -9869, height: 25, width: 75 }, + { left: -9534, top: -9869, height: 25, width: 75 }, + { left: -9459, top: -9869, height: 25, width: 75 }, + { left: -9384, top: -9869, height: 25, width: 75 } ] }, { offset: { x: 4200 }, appointmentRects: [ - { left: -9824, top: -9864, height: 25, width: 75 }, - { left: -9749, top: -9864, height: 25, width: 75 }, - { left: -9674, top: -9864, height: 25, width: 75 }, - { left: -9599, top: -9864, height: 25, width: 75 }, - { left: -9524, top: -9864, height: 25, width: 75 }, - { left: -9449, top: -9864, height: 25, width: 75 } + { left: -9859, top: -9869, height: 25, width: 75 }, + { left: -9784, top: -9869, height: 25, width: 75 }, + { left: -9709, top: -9869, height: 25, width: 75 }, + { left: -9634, top: -9869, height: 25, width: 75 }, + { left: -9559, top: -9869, height: 25, width: 75 }, + { left: -9484, top: -9869, height: 25, width: 75 } ] }, { offset: { x: 5700 }, appointmentRects: [ - { left: -9749, top: -9864, height: 25, width: 75 }, - { left: -9674, top: -9864, height: 25, width: 75 }, - { left: -9599, top: -9864, height: 25, width: 75 }, - { left: -9524, top: -9864, height: 25, width: 75 }, - { left: -9449, top: -9864, height: 25, width: 75 }, - { left: -9374, top: -9864, height: 25, width: 75 } + { left: -9784, top: -9869, height: 25, width: 75 }, + { left: -9709, top: -9869, height: 25, width: 75 }, + { left: -9634, top: -9869, height: 25, width: 75 }, + { left: -9559, top: -9869, height: 25, width: 75 }, + { left: -9484, top: -9869, height: 25, width: 75 }, + { left: -9409, top: -9869, height: 25, width: 75 } ] }, { @@ -1870,64 +1789,40 @@ module('Virtual scrolling integration', () => { offsetY: 0, expected: [{ groupIndex: 0, - top: 150, - height: 450 + top: 126, + height: 342 }, { - groupIndex: 0, - top: 150, - height: 450 + groupIndex: 1, + top: 784, + height: 76 }] }, { offsetY: 550, expected: [{ groupIndex: 0, - top: 300, - height: 300 + top: 266, + height: 190 }, { groupIndex: 1, - top: 1000, - height: 350 - }, { - groupIndex: 0, - top: 300, - height: 300 - }, { - groupIndex: 1, - top: 1000, - height: 350 + top: 760, + height: 342 }] }, { offsetY: 950, expected: [{ groupIndex: 1, - top: 1000, - height: 450 - }, { - groupIndex: 1, - top: 1000, - height: 450 + top: 760, + height: 342 }] }, { offsetY: 590, expected: [{ - groupIndex: 0, - top: 300, - height: 300 - }, { groupIndex: 1, - top: 1000, - height: 350 - }, { - groupIndex: 0, - top: 300, - height: 300 - }, { - groupIndex: 1, - top: 1000, - height: 350 + top: 760, + height: 342 }] } ].forEach(option => { @@ -1940,7 +1835,7 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const items = instance._appointments.option('items'); + const items = instance.getAppointmentsInstance().option('items'); assert.equal(items.length, expected.length, `Appointments amount is correct for offsetY=${offsetY}`); @@ -2013,12 +1908,12 @@ module('Virtual scrolling integration', () => { height: 400 }); - const filteredItems = instance.getLayoutManager().filteredItems; + const items = instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, 3, 'Filtered items length is correct'); - assert.deepEqual(filteredItems[0], data[0], 'Filtered item 0 is correct'); - assert.deepEqual(filteredItems[1], data[1], 'Filtered item 1 is correct'); - assert.deepEqual(filteredItems[2], data[2], 'Filtered item 2 is correct'); + assert.equal(items.length, 3, 'Filtered items length is correct'); + assert.deepEqual(items[0].itemData, data[0], 'Filtered item 0 is correct'); + assert.deepEqual(items[1].itemData, data[1], 'Filtered item 1 is correct'); + assert.deepEqual(items[2].itemData, data[2], 'Filtered item 2 is correct'); }); test(`Should be filtered correctly with resources when groupOrientation: ${groupOrientation}`, async function(assert) { @@ -2077,12 +1972,12 @@ module('Virtual scrolling integration', () => { height: 400 }); - const filteredItems = instance.getLayoutManager().filteredItems; + const items = instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, 3, 'Filtered items length is correct'); - assert.deepEqual(filteredItems[0], data[0], 'Filtered item 0 is correct'); - assert.deepEqual(filteredItems[1], data[1], 'Filtered item 1 is correct'); - assert.deepEqual(filteredItems[2], data[2], 'Filtered item 2 is correct'); + assert.equal(items.length, 3, 'Filtered items length is correct'); + assert.deepEqual(items[0].itemData, data[0], 'Filtered item 0 is correct'); + assert.deepEqual(items[1].itemData, data[1], 'Filtered item 1 is correct'); + assert.deepEqual(items[2].itemData, data[2], 'Filtered item 2 is correct'); }); }); @@ -2144,11 +2039,11 @@ module('Virtual scrolling integration', () => { width: 800 }); - const filteredItems = instance.getLayoutManager().filteredItems; + const items = instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, 2, 'Filtered items length is correct'); - assert.deepEqual(filteredItems[0], data[0], 'Filtered item 0 is correct'); - assert.deepEqual(filteredItems[1], data[2], 'Filtered item 1 is correct'); + assert.equal(items.length, 2, 'Filtered items length is correct'); + assert.deepEqual(items[0].itemData, data[0], 'Filtered item 0 is correct'); + assert.deepEqual(items[1].itemData, data[2], 'Filtered item 1 is correct'); }); test('Grouped appointments should be filtered correctly when groupOrientation: "horizontal"', async function(assert) { @@ -2209,12 +2104,12 @@ module('Virtual scrolling integration', () => { width: 800 }); - const filteredItems = instance.getLayoutManager().filteredItems; + const items = instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, 3, 'Filtered items length is correct'); - assert.deepEqual(filteredItems[0], data[0], 'Filtered item 0 is correct'); - assert.deepEqual(filteredItems[1], data[1], 'Filtered item 1 is correct'); - assert.deepEqual(filteredItems[2], data[2], 'Filtered item 2 is correct'); + assert.equal(items.length, 3, 'Filtered items length is correct'); + assert.deepEqual(items[0].itemData, data[0], 'Filtered item 0 is correct'); + assert.deepEqual(items[1].itemData, data[2], 'Filtered item 1 is correct'); + assert.deepEqual(items[2].itemData, data[1], 'Filtered item 2 is correct'); }); test('Recurrent appointments should be filtered correctly in vertical group orientation', async function(assert) { @@ -2260,25 +2155,25 @@ module('Virtual scrolling integration', () => { return asyncWrapper(assert, promise => { [ - { offsetY: 0, expectedDataIndices: [0] }, - { offsetY: 500, expectedDataIndices: [0] }, - { offsetY: 1000, expectedDataIndices: [0] }, - { offsetY: 2000, expectedDataIndices: [0, 1] }, - { offsetY: 2500, expectedDataIndices: [0, 1] }, - { offsetY: 4000, expectedDataIndices: [1] }, - { offsetY: 4500, expectedDataIndices: [1] }, + { offsetY: 0, expectedDataIndices: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, + { offsetY: 500, expectedDataIndices: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, + { offsetY: 1000, expectedDataIndices: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, + { offsetY: 2000, expectedDataIndices: [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, + { offsetY: 2500, expectedDataIndices: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, + { offsetY: 4000, expectedDataIndices: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, + { offsetY: 4500, expectedDataIndices: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] }, ].forEach(option => { promise = asyncScrollTest( assert, promise, () => { - const filteredItems = instance.getLayoutManager().filteredItems; + const items = instance.getAppointmentsInstance().option('items'); const { expectedDataIndices } = option; - assert.equal(filteredItems.length, expectedDataIndices.length, 'Filtered items length is correct'); + assert.equal(items.length, expectedDataIndices.length, 'Filtered items length is correct'); expectedDataIndices.forEach((dataIndex, index) => { - assert.deepEqual(filteredItems[index], data[dataIndex], `Filtered item "${index}" is correct`); + assert.deepEqual(items[index].itemData, data[dataIndex], `Filtered item "${index}" is correct`); }); }, scrollable, @@ -2370,9 +2265,9 @@ module('Virtual scrolling integration', () => { [ { offset: { y: 0 }, expectedIndices: [0, 1, 2] }, { offset: { y: 300 }, expectedIndices: [1, 2] }, - { offset: { y: 900 }, expectedIndices: [3, 5] }, - { offset: { y: 1700 }, expectedIndices: [4, 5] }, - { offset: { y: 2400 }, expectedIndices: [4, 5] } + { offset: { y: 900 }, expectedIndices: [3, 5, 4] }, + { offset: { y: 1700 }, expectedIndices: [5, 4] }, + { offset: { y: 2400 }, expectedIndices: [5, 4] } ].forEach(({ offset, expectedIndices }) => { const scrollable = instance.getWorkSpaceScrollable(); @@ -2380,13 +2275,13 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, expectedIndices.length, 'Filtered items length is correct'); + assert.equal(items.length, expectedIndices.length, 'Filtered items length is correct'); - filteredItems.forEach((_, index) => { + items.forEach((_, index) => { const expected = this.data[expectedIndices[index]]; - assert.deepEqual(filteredItems[index], expected, `Filtered item "${index}" is correct`); + assert.deepEqual(items[index].itemData, expected, `Filtered item "${index}" is correct`); }); }, scrollable, @@ -2405,9 +2300,9 @@ module('Virtual scrolling integration', () => { return asyncWrapper(assert, promise => { [ - { y: 2400, expectedIndices: [4, 5] }, - { y: 1700, expectedIndices: [4, 5] }, - { y: 900, expectedIndices: [3, 5] }, + { y: 2400, expectedIndices: [5, 4] }, + { y: 1700, expectedIndices: [5, 4] }, + { y: 900, expectedIndices: [3, 5, 4] }, { y: 300, expectedIndices: [1, 2] }, { y: 0, expectedIndices: [0, 1, 2] } ].forEach(option => { @@ -2418,13 +2313,13 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, expectedIndices.length, `Filtered items length is correct if scrollOffset: ${option.y}`); + assert.equal(items.length, expectedIndices.length, `Filtered items length is correct if scrollOffset: ${option.y}`); - filteredItems.forEach((_, index) => { + items.forEach((_, index) => { const expected = this.data[expectedIndices[index]]; - assert.deepEqual(filteredItems[index], expected, `Filtered item "${index}" is correct`); + assert.deepEqual(items[index].itemData, expected, `Filtered item "${index}" is correct`); }); }, scrollable, @@ -2456,12 +2351,12 @@ module('Virtual scrolling integration', () => { [ { y: 0, expectedIndices: [0, 2] }, { y: 300, expectedIndices: [2] }, - { y: 900, expectedIndices: [5] }, - { y: 1700, expectedIndices: [4, 5] }, - { y: 2400, expectedIndices: [1, 5] }, - { y: 2700, expectedIndices: [1] }, - { y: 3000, expectedIndices: [] }, - { y: 3300, expectedIndices: [3] }, + { y: 900, expectedIndices: [4, 5] }, + { y: 1700, expectedIndices: [4, 5, 1] }, + { y: 2400, expectedIndices: [3] }, + { y: 2700, expectedIndices: [3] }, + { y: 3000, expectedIndices: [3] }, + { y: 3300, expectedIndices: [] }, { y: 4300, expectedIndices: [] }, ].forEach(option => { const { expectedIndices } = option; @@ -2471,13 +2366,13 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, expectedIndices.length, `ScrollY: ${option.y}. Filtered items length is correct`); + assert.equal(items.length, expectedIndices.length, `ScrollY: ${option.y}. Filtered items length is correct`); - filteredItems.forEach((_, index) => { + items.forEach((_, index) => { const expected = this.data[expectedIndices[index]]; - assert.deepEqual(filteredItems[index], expected, `Filtered item "${index}" is correct`); + assert.deepEqual(items[index].itemData, expected, `Filtered item "${index}" is correct`); }); }, scrollable, @@ -2523,10 +2418,10 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); assert.equal( - filteredItems.length, + items.length, 0, `scrollY: ${scrollY}, filtered items length is correct ` ); @@ -2575,10 +2470,10 @@ module('Virtual scrolling integration', () => { assert, promise, () => { - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, 1, 'Filtered items length is correct'); - assert.deepEqual(filteredItems[0], data[0], 'Filtered item is correct'); + assert.equal(items.length, 1, 'Filtered items length is correct'); + assert.deepEqual(items[0].itemData, data[0], 'Filtered item is correct'); }, scrollable, { y: 600 } @@ -2720,16 +2615,16 @@ module('Virtual scrolling integration', () => { offset: { x: 0, y: 0 }, expectedIndices: [0, 2], appointmentRects: [ - { left: -9899, top: -9889, height: 50 }, - { left: -9499, top: -9739, height: 100 } + { left: -9934, top: -9890, height: 38 }, + { left: -9534, top: -9776, height: 76 } ] }, { offset: { x: 300, y: 0 }, expectedIndices: [0, 2], appointmentRects: [ - { left: -10199, top: -9889, height: 50 }, - { left: -9799, top: -9739, height: 100 } + { left: -10234, top: -9890, height: 38 }, + { left: -9834, top: -9776, height: 76 } ] }, { @@ -2741,26 +2636,27 @@ module('Virtual scrolling integration', () => { offset: { x: 0, y: 1100 }, expectedIndices: [1, 3], appointmentRects: [ - { left: -9699, top: -9889, height: 100 }, - { left: -9299, top: -9839, height: 100 } + { left: -9734, top: -10116, height: 38 }, + { left: -9334, top: -10116, height: 76 } ] }, { offset: { x: 300, y: 1100 }, - expectedIndices: [1, 3], + expectedIndices: [1, 3, 4], appointmentRects: [ - { left: -9999, top: -9889, height: 100 }, - { left: -9599, top: -9839, height: 100 } + { left: -10034, top: -10116, height: 38 }, + { left: -9634, top: -10116, height: 76 }, + { left: -9434, top: -9622, height: 152 } ] }, { offset: { x: 1700, y: 1100 }, expectedIndices: [7, 8, 9, 10], appointmentRects: [ - { left: -10199, top: -9689, height: 300 }, - { left: -9999, top: -9689, height: 300 }, - { left: -9799, top: -9689, height: 300 }, - { left: -9599, top: -9689, height: 300 } + { left: -10201, top: -10002, height: 646 }, + { left: -10001, top: -10002, height: 646 }, + { left: -9801, top: -10002, height: 646 }, + { left: -9601, top: -10002, height: 646 } ] }, ].forEach(({ offset, expectedIndices, appointmentRects }) => { @@ -2773,13 +2669,13 @@ module('Virtual scrolling integration', () => { assert.ok(true, `Scroll to x: ${offset.x}, y: ${offset.y}`); - const filteredItems = this.instance.getLayoutManager().filteredItems; + const items = this.instance.getAppointmentsInstance().option('items'); - assert.equal(filteredItems.length, expectedIndices.length, 'Filtered items length is correct'); + assert.equal(items.length, expectedIndices.length, 'Filtered items length is correct'); - filteredItems.forEach((_, index) => { + items.forEach((_, index) => { const expected = this.data[expectedIndices[index]]; - assert.deepEqual(filteredItems[index], expected, `Filtered item "${index}" is correct`); + assert.deepEqual(items[index].itemData, expected, `Filtered item "${index}" is correct`); const expectedRect = appointmentRects[index]; const appointmentRect = this.scheduler.appointments @@ -2846,46 +2742,46 @@ module('Virtual scrolling integration', () => { { offset: { x: 0 }, appointmentRects: [ - { left: -9824, top: -9788, height: 200 }, - { left: -9749, top: -9788, height: 200 }, - { left: -9674, top: -9788, height: 200 }, - { left: -9599, top: -9788, height: 200 }, - { left: -9524, top: -9788, height: 200 }, - { left: -9449, top: -9788, height: 200 } + { left: -9859, top: -9799, height: 152 }, + { left: -9784, top: -9799, height: 152 }, + { left: -9709, top: -9799, height: 152 }, + { left: -9634, top: -9799, height: 152 }, + { left: -9559, top: -9799, height: 152 }, + { left: -9484, top: -9799, height: 152 } ] }, { offset: { x: 300 }, appointmentRects: [ - { left: -10124, top: -9788, height: 200 }, - { left: -10049, top: -9788, height: 200 }, - { left: -9974, top: -9788, height: 200 }, - { left: -9899, top: -9788, height: 200 }, - { left: -9824, top: -9788, height: 200 }, - { left: -9749, top: -9788, height: 200 }, - { left: -9074, top: -9788, height: 200 } + { left: -10159, top: -9799, height: 152 }, + { left: -10084, top: -9799, height: 152 }, + { left: -10009, top: -9799, height: 152 }, + { left: -9934, top: -9799, height: 152 }, + { left: -9859, top: -9799, height: 152 }, + { left: -9784, top: -9799, height: 152 }, + { left: -9109, top: -9799, height: 152 } ] }, { offset: { x: 1100 }, appointmentRects: [ - { left: -9874, top: -9788, height: 200 }, - { left: -9799, top: -9788, height: 200 }, - { left: -9724, top: -9788, height: 200 }, - { left: -9649, top: -9788, height: 200 }, - { left: -9574, top: -9788, height: 200 }, - { left: -9499, top: -9788, height: 200 } + { left: -9909, top: -9799, height: 152 }, + { left: -9834, top: -9799, height: 152 }, + { left: -9759, top: -9799, height: 152 }, + { left: -9684, top: -9799, height: 152 }, + { left: -9609, top: -9799, height: 152 }, + { left: -9534, top: -9799, height: 152 } ] }, { offset: { x: 2100 }, appointmentRects: [ - { left: -9824, top: -9788, height: 200 }, - { left: -9749, top: -9788, height: 200 }, - { left: -9674, top: -9788, height: 200 }, - { left: -9599, top: -9788, height: 200 }, - { left: -9524, top: -9788, height: 200 }, - { left: -9449, top: -9788, height: 200 } + { left: -9851, top: -9799, height: 152 }, + { left: -9776, top: -9799, height: 152 }, + { left: -9701, top: -9799, height: 152 }, + { left: -9626, top: -9799, height: 152 }, + { left: -9551, top: -9799, height: 152 }, + { left: -9476, top: -9799, height: 152 } ] } ].forEach(({ offset, appointmentRects }) => { @@ -3218,7 +3114,7 @@ module('Virtual scrolling integration', () => { const { virtualScrollingDispatcher } = instance.getWorkSpace(); - assert.equal(virtualScrollingDispatcher.rowHeight, 80, 'Cell height is correct'); + assert.equal(virtualScrollingDispatcher.rowHeight, viewName === 'month' ? 100 : 80, 'Cell height is correct'); $style.text(styleBefore); }); @@ -3314,7 +3210,7 @@ module('Virtual scrolling integration', () => { }] }); - assert.equal(workSpace.getAllDayCellHeight(), 75, 'AllDayPanel height is correct'); + assert.equal(workSpace.getAllDayCellHeight(), 57, 'AllDayPanel height is correct'); }); QUnit.test('WorkSpace elements should have correct height when there are a log of groups in timeline month', async function(assert) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.monthView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.monthView.tests.js index 49a39a7dda27..ea3de7282178 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.monthView.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.monthView.tests.js @@ -1,7 +1,6 @@ -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; -import dateUtils from 'core/utils/date'; import { createWrapper, initTestMarkup, @@ -72,7 +71,7 @@ module('Virtual scrolling Month View', () => { offset: { x: 0 }, expectedRects: [{ left: -9999, - top: -9837, + top: -9859, width: 300 }] }, @@ -80,7 +79,7 @@ module('Virtual scrolling Month View', () => { offset: { x: 1050 }, expectedRects: [{ left: -9999, - top: -9837, + top: -9859, width: 300 }] }, @@ -88,7 +87,7 @@ module('Virtual scrolling Month View', () => { offset: { x: 2100 }, expectedRects: [{ left: -10371, - top: -9837, + top: -9859, width: 150 }] } @@ -164,26 +163,22 @@ module('Virtual scrolling Month View', () => { { offset: { y: 0 }, expectedRects: [{ - left: -9899, - top: -9866, + left: -9934, + top: -9889, width: 300 }] }, { offset: { y: 900 }, expectedRects: [{ - left: -9899, - top: -9866, + left: -9934, + top: -9589, width: 300 }] }, { offset: { y: 1800 }, - expectedRects: [{ - left: -9899, - top: -10274, - width: 300 - }] + expectedRects: [] } ].forEach(({ offset, expectedRects }) => { promise = asyncScrollTest( @@ -259,19 +254,19 @@ module('Virtual scrolling Month View', () => { offset: { x: 0 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 450 }, { left: -9999, - top: -9762, + top: -9759, width: 525 }, { left: -9999, - top: -9687, + top: -9659, width: 525 }, { left: -9999, - top: -9612, + top: -9559, width: 450 }] }, @@ -279,35 +274,35 @@ module('Virtual scrolling Month View', () => { offset: { x: 700 }, expectedRects: [{ left: -10324, - top: -9837, + top: -9859, width: 150 - }, { - left: -9574, - top: -9837, - width: 450 }, { left: -10324, - top: -9762, + top: -9759, width: 150 - }, { - left: -9649, - top: -9762, - width: 525 }, { left: -10324, - top: -9687, + top: -9659, width: 150 + }, { + left: -10324, + top: -9559, + width: 75 + }, { + left: -9574, + top: -9859, + width: 450 }, { left: -9649, - top: -9687, + top: -9759, width: 525 }, { - left: -10324, - top: -9612, - width: 75 + left: -9649, + top: -9659, + width: 525 }, { left: -9649, - top: -9612, + top: -9559, width: 450 }] }, @@ -315,40 +310,52 @@ module('Virtual scrolling Month View', () => { offset: { x: 1050 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 450 }, { left: -9999, - top: -9762, + top: -9759, width: 525 }, { left: -9999, - top: -9687, + top: -9659, width: 525 }, { left: -9999, - top: -9612, + top: -9559, width: 450 }] }, { offset: { x: 1400 }, expectedRects: [{ - left: -10274, - top: -9837, + left: -10324, + top: -9859, + width: 150 + }, { + left: -9574, + top: -9859, width: 450 }, { left: -10349, - top: -9762, + top: -9759, width: 525 }, { - left: -10349, - top: -9687, + left: -9649, + top: -9759, width: 525 + }, { + left: -10324, + top: -9659, + width: 150 }, { left: -10349, - top: -9612, - width: 450 + top: -9659, + width: 525 + }, { + left: -10324, + top: -9559, + width: 75 }] } ].forEach(({ offset, expectedRects }) => { @@ -424,61 +431,61 @@ module('Virtual scrolling Month View', () => { { offset: { y: 0 }, expectedRects: [{ - left: -9674, - top: -9716, - width: 303 + left: -9693, + top: -9689, + width: 322 }, { - left: -9899, - top: -9641, - width: 528 + left: -9934, + top: -9589, + width: 563 }, { - left: -9899, - top: -9566, - width: 528 + left: -9934, + top: -9489, + width: 563 }, { - left: -9899, - top: -9491, - width: 300 + left: -9934, + top: -9389, + width: 322 }] }, { offset: { y: 350 }, expectedRects: [{ - left: -9674, - top: -10066, - width: 303 + left: -9693, + top: -10039, + width: 322 }, { - left: -9899, - top: -9991, - width: 528 + left: -9934, + top: -9939, + width: 563 }, { - left: -9899, - top: -9916, - width: 528 + left: -9934, + top: -9839, + width: 563 }, { - left: -9899, - top: -9841, - width: 300 + left: -9934, + top: -9739, + width: 322 }] }, { offset: { y: 1000 }, expectedRects: [{ - left: -9674, - top: -9816, - width: 303 + left: -9693, + top: -9489, + width: 322 }, { - left: -9899, - top: -9741, - width: 528 + left: -9934, + top: -9389, + width: 563 }, { - left: -9899, - top: -9666, - width: 528 + left: -9934, + top: -9289, + width: 563 }, { - left: -9899, - top: -9591, - width: 300 + left: -9934, + top: -9189, + width: 322 }] } ].forEach(({ offset, expectedRects }) => { @@ -511,72 +518,6 @@ module('Virtual scrolling Month View', () => { }); }); - ['horizontal', 'vertical'].forEach(groupOrientation => { - test(`Appointment should be correctly croped if Month view and "${groupOrientation}" group orientation`, async function(assert) { - const longAppointment = { - startDate: new Date(2015, 2, 4, 0, 10), - endDate: new Date(2015, 2, 4, 23, 50) - }; - const scheduler = await createWrapper({ - currentDate: new Date(2015, 2, 4), - scrolling: { - mode: 'virtual' - }, - views: [{ - type: 'month', - groupOrientation: groupOrientation - }], - currentView: 'month', - dataSource: [longAppointment], - height: 400 - }); - - const { instance } = scheduler; - const workspace = instance.getWorkSpace(); - const { viewDataProvider } = workspace; - const scrollable = workspace.getScrollable(); - - workspace.renderer.getRenderTimeout = () => -1; - - return asyncWrapper(assert, promise => { - [ - 1000, 1050, 1100, 1200, 1250, 1300, 1350, 1400, 1500, 2000 - ].forEach(scrollY => { - promise = asyncScrollTest( - assert, - promise, - () => { - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.equal( - settings.groupIndex, - 0, - `group index is correct when scrolled to ${scrollY}` - ); - - const startViewDate = viewDataProvider.findGroupCellStartDate( - settings.groupIndex, - settings.info.appointment.startDate, - settings.info.appointment.endDate - ); - - assert.deepEqual( - dateUtils.trimTime(settings.info.appointment.startDate), - startViewDate, - 'start date is correct' - ); - }, - scrollable, - { y: scrollY } - ); - }); - - return promise; - }); - }); - }); - module('Group by date', () => { test('Regular appointment should be rendered correctly if grouped by date', async function(assert) { const resources = [{ @@ -630,27 +571,30 @@ module('Virtual scrolling Month View', () => { [{ scrollX: 1066, expectedSettings: { - hMax: 1650, - left: 1575 + left: -9490, + top: -9559, + width: 75, } }, { scrollX: 1300, expectedSettings: { - hMax: 1950, - left: 1575 + left: -9724, + top: -9559, + width: 75, } }].forEach(({ scrollX, expectedSettings }) => { promise = asyncScrollTest( assert, promise, () => { - const layoutManager = instance.getLayoutManager(); - const settings = layoutManager._positionMap[0][0]; - - assert.ok(true, `scrollX: ${scrollX}`); + const appointmentRect = scheduler.appointments + .getAppointment(0) + .get(0) + .getBoundingClientRect(); - assert.equal(settings.hMax, expectedSettings.hMax, 'Last group cell position is correct'); - assert.equal(settings.left, expectedSettings.left, 'Cell left position is correct'); + assert.roughEqual(appointmentRect.left, expectedSettings.left, 2.01, 'appointment left is correct'); + assert.roughEqual(appointmentRect.top, expectedSettings.top, 2.01, 'appointment top is correct'); + assert.roughEqual(appointmentRect.width, expectedSettings.width, 2.01, 'appointment width is correct'); }, scrollable, { left: scrollX } @@ -684,7 +628,8 @@ module('Virtual scrolling Month View', () => { { id: 1, text: 'rc_001' }, { id: 2, text: 'rc_002' }, { id: 3, text: 'rc_003' }, - { id: 4, text: 'rc_004' } + { id: 4, text: 'rc_004' }, + { id: 5, text: 'rc_005' } ] }], scrolling: { @@ -706,15 +651,15 @@ module('Virtual scrolling Month View', () => { offset: { x: 0 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 75 }, { left: -9924, - top: -9681, + top: -9659, width: 75 }, { left: -9924, - top: -9527, + top: -9459, width: 75 }] }, @@ -722,15 +667,15 @@ module('Virtual scrolling Month View', () => { offset: { x: 1050 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 75 }, { left: -9924, - top: -9681, + top: -9659, width: 75 }, { left: -9924, - top: -9527, + top: -9459, width: 75 }] }, @@ -812,32 +757,32 @@ module('Virtual scrolling Month View', () => { { offset: { y: 0 }, expectedRects: [{ - left: -9824, - top: -9866, + left: -9859, + top: -9889, width: 75 }, { - left: -9824, - top: -9716, + left: -9859, + top: -9689, width: 75 }, { - left: -9824, - top: -9566, + left: -9859, + top: -9489, width: 75 }] }, { offset: { y: 900 }, expectedRects: [{ - left: -9824, - top: -9866, + left: -9859, + top: -9589, width: 75 }, { - left: -9824, - top: -9716, + left: -9859, + top: -9389, width: 75 }, { - left: -9824, - top: -9566, + left: -9859, + top: -9189, width: 75 }] } @@ -915,60 +860,60 @@ module('Virtual scrolling Month View', () => { offset: { x: 0 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 450 }, { left: -9999, - top: -9766, + top: -9759, width: 525 }, { left: -9999, - top: -9695, + top: -9659, width: 525 }, { left: -9999, - top: -9625, - width: 301 + top: -9559, + width: 300 }] }, { offset: { x: 1050 }, expectedRects: [{ left: -9924, - top: -9837, + top: -9859, width: 450 }, { left: -9999, - top: -9766, + top: -9759, width: 525 }, { left: -9999, - top: -9695, + top: -9659, width: 525 }, { left: -9999, - top: -9625, - width: 301 + top: -9559, + width: 300 }] }, { offset: { x: 1300 }, expectedRects: [{ left: -10174, - top: -9837, + top: -9859, width: 450 }, { left: -10249, - top: -9766, + top: -9759, width: 525 }, { left: -10249, - top: -9695, + top: -9659, width: 525 }, { left: -10249, - top: -9625, - width: 301 + top: -9559, + width: 300 }] } ].forEach(({ offset, expectedRects }) => { @@ -1045,61 +990,61 @@ module('Virtual scrolling Month View', () => { { offset: { y: 0 }, expectedRects: [{ - left: -9824, - top: -9866, - width: 453 + left: -9853, + top: -9889, + width: 482 }, { - left: -9899, - top: -9791, - width: 528 + left: -9934, + top: -9789, + width: 562 }, { - left: -9899, - top: -9716, - width: 528 + left: -9934, + top: -9689, + width: 562 }, { - left: -9899, - top: -9641, - width: 301 + left: -9934, + top: -9589, + width: 321 }] }, { offset: { y: 900 }, expectedRects: [{ - left: -9824, - top: -9866, - width: 453 + left: -9853, + top: -9589, + width: 482 }, { - left: -9899, - top: -9791, - width: 528 + left: -9934, + top: -9489, + width: 562 }, { - left: -9899, - top: -9716, - width: 528 + left: -9934, + top: -9389, + width: 562 }, { - left: -9899, - top: -9641, - width: 301 + left: -9934, + top: -9289, + width: 321 }] }, { offset: { y: 1100 }, expectedRects: [{ - left: -9824, - top: -10066, - width: 453 + left: -9853, + top: -9789, + width: 482 }, { - left: -9899, - top: -9991, - width: 528 + left: -9934, + top: -9689, + width: 562 }, { - left: -9899, - top: -9916, - width: 528 + left: -9934, + top: -9589, + width: 562 }, { - left: -9899, - top: -9841, - width: 301 + left: -9934, + top: -9489, + width: 321 }] } ].forEach(({ offset, expectedRects }) => { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.timeline.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.timeline.tests.js index 7abe73e28689..89b8c1a5c521 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.timeline.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.timeline.tests.js @@ -1,4 +1,4 @@ -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import { createWrapper, @@ -34,7 +34,7 @@ module('Virtual scrolling timelines', () => { const data = [{ text: 'Appt-001', startDate: new Date(2021, 1, 2, 15, 45), - endDate: new Date(2021, 1, 3, 10, 15) + endDate: new Date(2021, 1, 3, 10, 15), }]; const scheduler = await createWrapper({ @@ -69,7 +69,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 2200 }, expectedRects: [{ left: -9099, - top: -9817, + top: -9833, width: 300 }] }, @@ -77,7 +77,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 3200 }, expectedRects: [{ left: -10099, - top: -9817, + top: -9833, width: 1300 }] }, @@ -85,7 +85,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 4200 }, expectedRects: [{ left: -10399, - top: -9817, + top: -9833, width: 1600 }] }, @@ -93,7 +93,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 5200 }, expectedRects: [{ left: -10399, - top: -9817, + top: -9833, width: 900 }] }, @@ -210,7 +210,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 5200 }, expectedRects: [{ left: -9099, - top: -9522, + top: -9525, width: 400 }] }, @@ -218,11 +218,11 @@ module('Virtual scrolling timelines', () => { offset: { x: 6200 }, expectedRects: [{ left: -8899, - top: -9669, + top: -9679, width: 200 }, { left: -10099, - top: -9522, + top: -9525, width: 1400 }] }, @@ -230,11 +230,11 @@ module('Virtual scrolling timelines', () => { offset: { x: 7200 }, expectedRects: [{ left: -9899, - top: -9669, + top: -9679, width: 1200 }, { left: -10299, - top: -9522, + top: -9525, width: 1000 }] }, @@ -242,19 +242,19 @@ module('Virtual scrolling timelines', () => { offset: { x: 8200 }, expectedRects: [{ left: -10299, - top: -9669, - width: 1650 + top: -9679, + width: 1600 }] }, { offset: { x: 9200 }, expectedRects: [{ left: -10299, - top: -9669, + top: -9679, width: 650 }, { left: -9649, - top: -9522, + top: -9525, width: 950 }] }, @@ -262,7 +262,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 10200 }, expectedRects: [{ left: -10299, - top: -9522, + top: -9525, width: 1600 }] }, @@ -270,15 +270,15 @@ module('Virtual scrolling timelines', () => { offset: { x: 12000 }, expectedRects: [{ left: -9899, - top: -9817, + top: -9833, width: 1200 }, { left: -9899, - top: -9669, + top: -9679, width: 1200 }, { left: -10299, - top: -9522, + top: -9525, width: 1600 }] }, @@ -286,15 +286,15 @@ module('Virtual scrolling timelines', () => { offset: { x: 13000 }, expectedRects: [{ left: -10299, - top: -9817, + top: -9833, width: 1600 }, { left: -10299, - top: -9669, + top: -9679, width: 1600 }, { left: -10299, - top: -9522, + top: -9525, width: 1600 }] }, @@ -302,15 +302,15 @@ module('Virtual scrolling timelines', () => { offset: { x: 14000 }, expectedRects: [{ left: -10299, - top: -9817, - width: 1600 + top: -9833, + width: 1650 }, { left: -10299, - top: -9669, + top: -9679, width: 1600 }, { left: -10299, - top: -9522, + top: -9525, width: 1600 }] }, @@ -318,31 +318,31 @@ module('Virtual scrolling timelines', () => { offset: { x: 15000 }, expectedRects: [{ left: -10299, - top: -9817, + top: -9833, width: 1600 }, { left: -10299, - top: -9669, + top: -9679, width: 1600 }, { left: -10299, - top: -9522, - width: 1600 + top: -9525, + width: 1650 }] }, { offset: { x: 17000 }, expectedRects: [{ left: -10299, - top: -9817, + top: -9833, width: 1400 }, { left: -10299, - top: -9669, + top: -9679, width: 1400 }, { left: -10299, - top: -9522, + top: -9525, width: 1600 }] }, @@ -350,47 +350,47 @@ module('Virtual scrolling timelines', () => { offset: { x: 17500 }, expectedRects: [{ left: -10399, - top: -9817, + top: -9833, width: 1000 }, { left: -10399, - top: -9669, + top: -9679, width: 1000 }, { left: -10399, - top: -9522, - width: 1600 + top: -9525, + width: 1650 }] }, { offset: { x: 18000 }, expectedRects: [{ left: -10299, - top: -9817, + top: -9833, width: 400 }, { left: -10299, - top: -9669, + top: -9679, width: 400 }, { left: -10299, - top: -9522, - width: 1600 + top: -9525, + width: 1650 }] }, { offset: { x: 19000 }, expectedRects: [{ left: -10299, - top: -9522, - width: 1600 + top: -9525, + width: 1650 }] }, { offset: { x: 20000 }, expectedRects: [{ left: -10299, - top: -9522, + top: -9525, width: 950 }] }, @@ -398,7 +398,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 20500 }, expectedRects: [{ left: -10399, - top: -9522, + top: -9525, width: 550 }] }, @@ -406,7 +406,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 20800 }, expectedRects: [{ left: -10299, - top: -9522, + top: -9525, width: 150 }] }, @@ -487,7 +487,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 0 }, expectedRects: [{ left: -9899, - top: -9596, + top: -9609, width: 1200 }] }, @@ -495,7 +495,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 10000 }, expectedRects: [{ left: -10299, - top: -9596, + top: -9609, width: 1600 }] }, @@ -503,7 +503,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 20000 }, expectedRects: [{ left: -10299, - top: -9596, + top: -9609, width: 1600 }] }, @@ -511,7 +511,7 @@ module('Virtual scrolling timelines', () => { offset: { x: 21700 }, expectedRects: [{ left: -10399, - top: -9596, + top: -9609, width: 800 }] }, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.api.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.api.tests.js index d4736ae8cb24..98202db67e19 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.api.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.api.tests.js @@ -1,4 +1,4 @@ -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import '__internal/scheduler/workspaces/m_work_space_month'; @@ -50,19 +50,19 @@ module('API', () => { this.createInstance('Week', { width: 800, height: 800, rtlEnabled: true }); const index = this.instance.getCellIndexByCoordinates({ left: 411, top: 50 }); - assert.equal(index, 9, 'Index is OK'); + assert.equal(index, 10, 'Index is OK'); }); test('All day row', async function(assert) { this.createInstance('Week', { width: 800, height: 800 }); - let index = this.instance.getCellIndexByCoordinates({ left: 298, top: 0 }); + let index = this.instance.getCellIndexByCoordinates({ left: 350, top: 0 }); assert.equal(index, 3, 'Index is OK'); - index = this.instance.getCellIndexByCoordinates({ left: 298, top: 45 }); + index = this.instance.getCellIndexByCoordinates({ left: 350, top: 25 }); assert.equal(index, 3, 'Index is OK'); - index = this.instance.getCellIndexByCoordinates({ left: 298, top: 77 }); + index = this.instance.getCellIndexByCoordinates({ left: 350, top: 45 }); assert.equal(index, 10, 'Index is OK'); }); @@ -79,7 +79,7 @@ module('API', () => { }); const index = this.instance.getCellIndexByCoordinates({ left: 100, top: 55 }); - assert.equal(index, 16, 'Index is OK'); + assert.equal(index, 15, 'Index is OK'); }); test('Vertical grouped view', async function(assert) { @@ -105,7 +105,7 @@ module('API', () => { width: 800, height: 500 }); - const index = this.instance.getCellIndexByCoordinates({ left: 228, top: 91 }); + const index = this.instance.getCellIndexByCoordinates({ left: 320, top: 100 }); assert.equal(index, 9, 'Index is OK'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js index ed2bbc97de93..3f674c4d3532 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js @@ -1,6 +1,6 @@ import dateUtils from 'core/utils/date'; import resizeCallbacks from 'core/utils/resize_callbacks'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import dateLocalization from 'common/core/localization/date'; @@ -97,10 +97,10 @@ module('Work Space Base', { this.instance.option('crossScrollingEnabled', true); this.instance.option('width', 400); - assert.equal(this.instance.getWorkSpaceMinWidth(), 298, 'minWidth is ok'); + assert.equal(this.instance.getWorkSpaceMinWidth(), 333, 'minWidth is ok'); this.instance.option('width', 900); - assert.equal(this.instance.getWorkSpaceMinWidth(), 798, 'minWidth is ok'); + assert.equal(this.instance.getWorkSpaceMinWidth(), 833, 'minWidth is ok'); }); } 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 bcac8339b598..e1e7a96b638a 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 @@ -1,6 +1,6 @@ import { getOuterWidth, getOuterHeight } from 'core/utils/size'; import resizeCallbacks from 'core/utils/resize_callbacks'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import '__internal/scheduler/workspaces/m_work_space_month'; @@ -335,8 +335,8 @@ module('Work Space Month', () => { test('Group table content should have right height', async function(assert) { const $groupHeaderContents = this.instance.$element().find('.dx-scheduler-group-header'); resizeCallbacks.fire(); - assert.roughEqual(getOuterHeight($groupHeaderContents.eq(0)), 449, 5, 'Group header content height is OK'); - assert.roughEqual(getOuterHeight($groupHeaderContents.eq(1)), 449, 5, 'Group header content height is OK'); + assert.roughEqual(getOuterHeight($groupHeaderContents.eq(0)), 599, 5, 'Group header content height is OK'); + assert.roughEqual(getOuterHeight($groupHeaderContents.eq(1)), 599, 5, 'Group header content height is OK'); }); test('Group width calculation', async function(assert) { @@ -365,7 +365,7 @@ module('Work Space Month', () => { } ); - assert.equal(groupWidth, 525, 'Group width is OK'); + assert.roughEqual(groupWidth, 532, 3, 'Group width is OK'); }); test('Tables should not be rerendered if dimension was changed and horizontal scrolling is disabled', async function(assert) { 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 dddc38eb4613..59b8c3390b21 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 @@ -1,6 +1,6 @@ import dateUtils from 'core/utils/date'; import { triggerShownEvent } from 'common/core/events/visibility_change'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import '__internal/scheduler/workspaces/m_work_space_week'; @@ -330,7 +330,7 @@ module('Work Space Week', () => { const bounds = this.instance.getVisibleBounds(); assert.deepEqual(bounds.top, { hours: 1, minutes: 0 }, 'Top bound is OK'); - assert.deepEqual(bounds.bottom, { hours: 3, minutes: 30 }, 'Bottom bound is OK'); + assert.deepEqual(bounds.bottom, { hours: 4, minutes: 30 }, 'Bottom bound is OK'); }); test('Get visible bounds if scroll position is not null', async function(assert) { @@ -352,7 +352,7 @@ module('Work Space Week', () => { const bounds = this.instance.getVisibleBounds(); assert.deepEqual(bounds.top, { hours: 3, minutes: 30 }, 'Top bound is OK'); - assert.deepEqual(bounds.bottom, { hours: 8, minutes: 30 }, 'Bottom bound is OK'); + assert.deepEqual(bounds.bottom, { hours: 11, minutes: 30 }, 'Bottom bound is OK'); }); test('Get visible bounds if hoursInterval is set', async function(assert) { @@ -376,8 +376,8 @@ module('Work Space Week', () => { bounds = this.instance.getVisibleBounds(); - assert.deepEqual(bounds.top, { hours: 6, minutes: 0 }, 'Top bound is OK'); - assert.deepEqual(bounds.bottom, { hours: 23, minutes: 30 }, 'Bottom bound is OK'); + assert.deepEqual(bounds.top, { hours: 0, minutes: 30 }, 'Top bound is OK'); + assert.deepEqual(bounds.bottom, { hours: 24, minutes: 0 }, 'Bottom bound is OK'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js index 26c114f91d7f..0f6388dee5b2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js @@ -1,7 +1,7 @@ import { getOuterWidth } from 'core/utils/size'; import devices from '__internal/core/m_devices'; import { triggerHidingEvent, triggerResizeEvent, triggerShownEvent } from 'common/core/events/visibility_change'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import $ from 'jquery'; import '__internal/scheduler/m_scheduler'; @@ -154,9 +154,9 @@ QUnit.module('Vertical Workspace with horizontal scrollbar', { const allDayTableWidth = getOuterWidth($element.find('.dx-scheduler-all-day-table')); const dateTableWidth = getOuterWidth($element.find('.dx-scheduler-date-table')); - assert.roughEqual(headerPanelWidth, 896, 5, 'Width of the header panel is OK'); - assert.roughEqual(allDayTableWidth, 896, 5, 'Width of the allDay table is OK'); - assert.roughEqual(dateTableWidth, 896, 5, 'Width of the date table is OK'); + assert.roughEqual(headerPanelWidth, 932, 5, 'Width of the header panel is OK'); + assert.roughEqual(allDayTableWidth, 932, 5, 'Width of the allDay table is OK'); + assert.roughEqual(dateTableWidth, 932, 5, 'Width of the date table is OK'); }); QUnit.test('Workspace tables width should not be less than element width', async function(assert) { @@ -243,7 +243,7 @@ QUnit.module('Vertical Workspace with horizontal scrollbar, groupOrientation = v const headerPanelWidth = getOuterWidth($element.find('.dx-scheduler-header-panel'), true); const dateTableWidth = getOuterWidth($element.find('.dx-scheduler-date-table'), true); - assert.roughEqual(headerPanelWidth, 797, 1.01, 'Width is OK'); - assert.roughEqual(dateTableWidth, 797, 1.01, 'Width is OK'); + assert.roughEqual(headerPanelWidth, 867, 1.01, 'Width is OK'); + assert.roughEqual(dateTableWidth, 867, 1.01, 'Width is OK'); }); });