diff --git a/package.json b/package.json index a2ae735..a4a72f1 100644 --- a/package.json +++ b/package.json @@ -91,15 +91,15 @@ ] }, "dependencies": { - "@slickgrid-universal/common": "~3.7.2", - "@slickgrid-universal/custom-footer-component": "~3.7.2", - "@slickgrid-universal/empty-warning-component": "~3.7.2", - "@slickgrid-universal/event-pub-sub": "~3.7.0", - "@slickgrid-universal/pagination-component": "~3.7.2", + "@slickgrid-universal/common": "~4.0.2", + "@slickgrid-universal/custom-footer-component": "~4.0.2", + "@slickgrid-universal/empty-warning-component": "~4.0.2", + "@slickgrid-universal/event-pub-sub": "~4.0.2", + "@slickgrid-universal/pagination-component": "~4.0.2", "dequal": "^2.0.3", "dompurify": "^3.0.6", "font-awesome": "^4.7.0", - "i18next": ">=22.5.0", + "i18next": "^23.7.9", "moment-mini": "^2.29.4", "regenerator-runtime": "^0.14.0", "sortablejs": "^1.15.1" @@ -110,13 +110,13 @@ "@fnando/sparkline": "^0.3.10", "@popperjs/core": "^2.11.8", "@release-it/conventional-changelog": "^8.0.1", - "@slickgrid-universal/composite-editor-component": "~3.7.2", - "@slickgrid-universal/custom-tooltip-plugin": "~3.7.2", - "@slickgrid-universal/excel-export": "~3.7.2", - "@slickgrid-universal/graphql": "~3.7.2", - "@slickgrid-universal/odata": "~3.7.2", - "@slickgrid-universal/rxjs-observable": "~3.7.2", - "@slickgrid-universal/text-export": "~3.7.2", + "@slickgrid-universal/composite-editor-component": "~4.0.2", + "@slickgrid-universal/custom-tooltip-plugin": "~4.0.2", + "@slickgrid-universal/excel-export": "~4.0.2", + "@slickgrid-universal/graphql": "~4.0.2", + "@slickgrid-universal/odata": "~4.0.2", + "@slickgrid-universal/rxjs-observable": "~4.0.2", + "@slickgrid-universal/text-export": "~4.0.2", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.1", @@ -127,13 +127,13 @@ "@types/i18next-xhr-backend": "^1.4.2", "@types/jest": "^29.5.11", "@types/node": "^20.10.4", - "@types/react": "^18.2.42", + "@types/react": "^18.2.44", "@types/react-dom": "^18.2.17", "@types/sortablejs": "^1.15.7", "@types/text-encoding-utf-8": "^1.0.5", "@types/webpack": "^5.28.5", - "@typescript-eslint/eslint-plugin": "^6.13.2", - "@typescript-eslint/parser": "^6.13.2", + "@typescript-eslint/eslint-plugin": "^6.14.0", + "@typescript-eslint/parser": "^6.14.0", "@webpack-cli/serve": "^2.0.5", "bootstrap": "^5.3.2", "clean-webpack-plugin": "^4.0.0", @@ -164,7 +164,7 @@ "promise-polyfill": "^8.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-i18next": "^12.3.1", + "react-i18next": "^13.5.0", "react-router-dom": "^6.20.1", "release-it": "^17.0.1", "rimraf": "^5.0.5", @@ -175,7 +175,7 @@ "style-loader": "3.3.3", "ts-jest": "^29.1.1", "ts-loader": "^9.5.1", - "typescript": "^5.2.2", + "typescript": "^5.3.3", "webpack": "^5.89.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" diff --git a/src/examples/slickgrid/Example11.tsx b/src/examples/slickgrid/Example11.tsx index f968c0b..523b43c 100644 --- a/src/examples/slickgrid/Example11.tsx +++ b/src/examples/slickgrid/Example11.tsx @@ -74,7 +74,8 @@ export default class Example11 extends React.Component { id: 'delete', field: 'id', excludeFromHeaderMenu: true, - formatter: Formatters.deleteIcon, + formatter: Formatters.icon, + params: { iconCssClass: 'fa fa-trash pointer' }, minWidth: 30, maxWidth: 30, // use onCellClick OR grid.onClick.subscribe which you can see down below diff --git a/src/examples/slickgrid/Example16.tsx b/src/examples/slickgrid/Example16.tsx index 03617f9..4319a99 100644 --- a/src/examples/slickgrid/Example16.tsx +++ b/src/examples/slickgrid/Example16.tsx @@ -156,7 +156,7 @@ export default class Example16 extends React.Component { return mockDataset; } - onBeforeMoveRow(e: Event, data: { rows: number[]; insertBefore: number; }) { + onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number; }) { for (const rowIdx of data.rows) { // no point in moving before or after itself if (rowIdx === data.insertBefore || (rowIdx === data.insertBefore - 1 && ((data.insertBefore - 1) !== this.reactGrid.dataView.getItemCount()))) { @@ -167,7 +167,7 @@ export default class Example16 extends React.Component { return true; } - onMoveRows(_e: Event, args: any) { + onMoveRows(_e: MouseEvent | TouchEvent, args: any) { // rows and insertBefore references, // note that these references are assuming that the dataset isn't filtered at all // which is not always the case so we will recalcualte them and we won't use these reference afterward @@ -255,7 +255,8 @@ export default class Example16 extends React.Component { excludeFromColumnPicker: true, excludeFromGridMenu: true, excludeFromHeaderMenu: true, - formatter: Formatters.editIcon, + formatter: Formatters.icon, + params: { iconCssClass: 'fa fa-pencil pointer' }, minWidth: 30, maxWidth: 30, onCellClick: (clickEvent: Event, args: OnEventArgs) => { @@ -267,7 +268,8 @@ export default class Example16 extends React.Component { excludeFromColumnPicker: true, excludeFromGridMenu: true, excludeFromHeaderMenu: true, - formatter: Formatters.deleteIcon, + formatter: Formatters.icon, + params: { iconCssClass: 'fa fa-trash pointer' }, minWidth: 30, maxWidth: 30, onCellClick: (e: Event, args: OnEventArgs) => { diff --git a/src/examples/slickgrid/Example17.tsx b/src/examples/slickgrid/Example17.tsx index 9e5997b..9f4a4a2 100644 --- a/src/examples/slickgrid/Example17.tsx +++ b/src/examples/slickgrid/Example17.tsx @@ -7,16 +7,13 @@ import { Column, Formatter, GridOption, - SlickNamespace, + SlickEventHandler, SlickgridReact } from '../../slickgrid-react'; import React from 'react'; interface Props { } -declare const Slick: SlickNamespace; -// declare const Slick: any; - const brandFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { return dataContext && dataContext.brand && dataContext.brand.name || ''; }; @@ -31,7 +28,7 @@ const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) = export default class Example17 extends React.Component { search = ''; - private _eventHandler: any = new Slick.EventHandler(); + private _eventHandler = new SlickEventHandler(); title = 'Example 17: Octopart Catalog Search - Remote Model Plugin'; subTitle = ` @@ -66,8 +63,8 @@ export default class Example17 extends React.Component { super(props); // define the grid options & columns and then create the grid itself this.defineGrid(); - this.loaderDataView = new Slick.Data.RemoteModel!(); - this.customDataView = this.loaderDataView && this.loaderDataView.data; + // this.loaderDataView = new Slick.Data.RemoteModel!(); + // this.customDataView = this.loaderDataView && this.loaderDataView.data; } componentDidMount() { diff --git a/src/examples/slickgrid/Example18.tsx b/src/examples/slickgrid/Example18.tsx index f20d2c9..e5485e0 100644 --- a/src/examples/slickgrid/Example18.tsx +++ b/src/examples/slickgrid/Example18.tsx @@ -543,7 +543,7 @@ export default class Example18 extends React.Component { { this.state.columnDefinitions.map((column) => - + ) } diff --git a/src/examples/slickgrid/Example20.tsx b/src/examples/slickgrid/Example20.tsx index 5406391..b96022c 100644 --- a/src/examples/slickgrid/Example20.tsx +++ b/src/examples/slickgrid/Example20.tsx @@ -9,16 +9,13 @@ import { Formatters, GridOption, SlickGrid, - SlickNamespace, + SlickEventHandler, SlickgridReact, - DOMEvent } from '../../slickgrid-react'; import React from 'react'; import './example20.scss'; // provide custom CSS/SASS styling import BaseSlickGridState from './state-slick-grid-base'; -declare const Slick: SlickNamespace; - interface Props { } interface State extends BaseSlickGridState { frozenColumnCount: number; @@ -44,7 +41,7 @@ export default class Example20 extends React.Component { constructor(public readonly props: Props) { super(props); - this.slickEventHandler = new Slick.EventHandler(); + this.slickEventHandler = new SlickEventHandler(); this.state = { gridOptions: undefined, diff --git a/src/examples/slickgrid/Example21.tsx b/src/examples/slickgrid/Example21.tsx index 1c05623..3a1e803 100644 --- a/src/examples/slickgrid/Example21.tsx +++ b/src/examples/slickgrid/Example21.tsx @@ -227,7 +227,7 @@ export default class Example21 extends React.Component { { this.state.columnDefinitions.map((column) => - + ) } diff --git a/src/examples/slickgrid/Example28.tsx b/src/examples/slickgrid/Example28.tsx index 8631bb3..09d08cc 100644 --- a/src/examples/slickgrid/Example28.tsx +++ b/src/examples/slickgrid/Example28.tsx @@ -12,6 +12,7 @@ import { isNumber, // GroupTotalFormatters, // italicFormatter, + SlickDataView, SlickgridReact, SlickgridReactInstance, TreeToggledItem, @@ -257,7 +258,7 @@ export default class Example28 extends React.Component { if (value === null || value === undefined || dataContext === undefined) { return ''; } - const dataView = grid.getData(); + const dataView = grid.getData(); const data = dataView.getItems(); const identifierPropName = dataView.getIdPropertyName() || 'id'; const idx = dataView.getIdxById(dataContext[identifierPropName]) as number; diff --git a/src/examples/slickgrid/Example3.tsx b/src/examples/slickgrid/Example3.tsx index 9b64dd7..780be43 100644 --- a/src/examples/slickgrid/Example3.tsx +++ b/src/examples/slickgrid/Example3.tsx @@ -15,8 +15,8 @@ import { Formatters, OnEventArgs, OperatorType, - SlickNamespace, SortComparers, + SlickGlobalEditorLock, SlickgridReact, GridOption, } from '../../slickgrid-react'; @@ -24,9 +24,6 @@ import { CustomInputEditor } from './custom-inputEditor'; import { CustomInputFilter } from './custom-inputFilter'; import BaseSlickGridState from './state-slick-grid-base'; -// using external non-typed js libraries -declare const Slick: SlickNamespace; - interface Props { } const NB_ITEMS = 100; @@ -132,7 +129,8 @@ export default class Example3 extends React.Component { excludeFromColumnPicker: true, excludeFromGridMenu: true, excludeFromHeaderMenu: true, - formatter: Formatters.editIcon, + formatter: Formatters.icon, + params: { iconCssClass: 'fa fa-pencil pointer' }, minWidth: 30, maxWidth: 30, // use onCellClick OR grid.onClick.subscribe which you can see down below @@ -154,7 +152,8 @@ export default class Example3 extends React.Component { excludeFromColumnPicker: true, excludeFromGridMenu: true, excludeFromHeaderMenu: true, - formatter: Formatters.deleteIcon, + formatter: Formatters.icon, + params: { iconCssClass: 'fa fa-trash pointer' }, minWidth: 30, maxWidth: 30, // use onCellClick OR grid.onClick.subscribe which you can see down below @@ -749,7 +748,7 @@ export default class Example3 extends React.Component { undo() { const command = this._commandQueue.pop(); - if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) { + if (command && SlickGlobalEditorLock.cancelCurrentEdit()) { command.undo(); this.reactGrid.slickGrid.gotoCell(command.row, command.cell, false); } diff --git a/src/examples/slickgrid/Example30.tsx b/src/examples/slickgrid/Example30.tsx index fe5f187..ee36bdf 100644 --- a/src/examples/slickgrid/Example30.tsx +++ b/src/examples/slickgrid/Example30.tsx @@ -1,8 +1,8 @@ -import { SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; +import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component'; +import React from 'react'; import { - SlickgridReactInstance, AutocompleterOption, Column, CompositeEditorModalType, @@ -18,21 +18,18 @@ import { GridStateChange, LongTextEditorOption, OnCompositeEditorChangeEventArgs, + SlickGlobalEditorLock, + SlickgridReactInstance, SlickGrid, - SlickNamespace, - SortComparers, SlickgridReact, + SortComparers, } from '../../slickgrid-react'; -import React from 'react'; import './example30.scss'; // provide custom CSS/SASS styling import BaseSlickGridState from './state-slick-grid-base'; const NB_ITEMS = 500; const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json'; -// using external SlickGrid JS libraries -declare const Slick: SlickNamespace; - /** * Check if the current item (cell) is editable or not * @param {*} dataContext - item data context object @@ -41,12 +38,12 @@ declare const Slick: SlickNamespace; * @returns {boolean} isEditable */ function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGrid) { - const gridOptions = grid && grid.getOptions && grid.getOptions(); + const gridOptions = grid?.getOptions(); const hasEditor = columnDef.editor; const isGridEditable = gridOptions.editable; - let isEditable = !!(isGridEditable && hasEditor); + let isEditable = Boolean(isGridEditable && hasEditor); - if (dataContext && columnDef && gridOptions && gridOptions.editable) { + if (dataContext && columnDef && gridOptions?.editable) { switch (columnDef.id) { case 'finish': // case 'percentComplete': @@ -64,7 +61,6 @@ function checkItemIsEditable(dataContext: any, columnDef: Column, grid: SlickGri return isEditable; } - const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, _dataContext, grid) => { const gridOptions = grid && grid.getOptions && grid.getOptions(); const isEditableLine = gridOptions.editable && columnDef.editor; @@ -262,7 +258,7 @@ export default class Example30 extends React.Component { } as FlatpickrOption, massUpdate: true, validator: (value, args) => { - const dataContext = args && args.item; + const dataContext = args?.item; if (dataContext && (dataContext.completed && !value)) { return { valid: false, msg: 'You must provide a "Finish" date when "Completed" is checked.' }; } @@ -509,7 +505,7 @@ export default class Example30 extends React.Component { handleValidationError(_e: Event, args: any) { if (args.validationResults) { let errorMsg = args.validationResults.msg || ''; - if (args.editor && (args.editor instanceof Slick.CompositeEditor)) { + if (args?.editor instanceof SlickCompositeEditor) { if (args.validationResults.errors) { errorMsg += '\n'; for (const error of args.validationResults.errors) { @@ -746,7 +742,7 @@ export default class Example30 extends React.Component { undoLastEdit(showLastEditor = false) { const lastEdit = this.editQueue.pop(); const lastEditCommand = lastEdit?.editCommand; - if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) { + if (lastEdit && lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) { lastEditCommand.undo(); // remove unsaved css class from that cell @@ -766,7 +762,7 @@ export default class Example30 extends React.Component { undoAllEdits() { for (const lastEdit of this.editQueue) { const lastEditCommand = lastEdit?.editCommand; - if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) { + if (lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) { lastEditCommand.undo(); // remove unsaved css class from that cell diff --git a/src/examples/slickgrid/Example32.tsx b/src/examples/slickgrid/Example32.tsx index 3d67a12..ebebe47 100644 --- a/src/examples/slickgrid/Example32.tsx +++ b/src/examples/slickgrid/Example32.tsx @@ -10,10 +10,10 @@ import { Formatters, GridOption, LongTextEditorOption, + SlickGlobalEditorLock, SlickgridReactInstance, SlickgridReact, SlickGrid, - SlickNamespace, SortComparers, } from '../../slickgrid-react'; import { ExcelExportService } from '@slickgrid-universal/excel-export'; @@ -25,9 +25,6 @@ import './example32.scss'; // provide custom CSS/SASS styling const NB_ITEMS = 400; const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json'; -// using external SlickGrid JS libraries -declare const Slick: SlickNamespace; - /** * Check if the current item (cell) is editable or not * @param {*} dataContext - item data context object @@ -68,8 +65,8 @@ const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, // you can create custom validator to pass to an inline editor const myCustomTitleValidator = (value: any, args: any) => { - if ((value === null || value === undefined || !value.length) && (args.compositeEditorOptions && args.compositeEditorOptions.modalType === 'create' || args.compositeEditorOptions.modalType === 'edit')) { - // we will only check if the field is supplied when it's an inline editing OR a composite editor of type create/edit + if (value === null || value === undefined || !value.length) { + // we will only check if the field is supplied when it's an inline editing return { valid: false, msg: 'This is a required field.' }; } else if (!/^(task\s\d+)*$/i.test(value)) { return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number.' }; @@ -379,7 +376,6 @@ export default class Example32 extends React.Component { rowHeight: 33, headerRowHeight: 35, editCommandHandler: (item, column, editCommand) => { - // composite editors values are saved as array, so let's convert to array in any case and we'll loop through these values const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) ? editCommand.prevSerializedValue : [editCommand.prevSerializedValue]; const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue]; const editorColumns = this.state.columnDefinitions.filter((col) => col.editor !== undefined); @@ -400,8 +396,7 @@ export default class Example32 extends React.Component { } }); - // queued editor only keeps 1 item object even when it's a composite editor, - // so we'll push only 1 change at the end but with all columns modified + // queued editor, so we'll push only 1 change at the end but with all columns modified // this way we can undo the entire row change (for example if user changes 3 field in the editor modal, then doing a undo last change will undo all 3 in 1 shot) this.editQueue.push({ item, columns: modifiedColumns, editCommand }); }, @@ -460,16 +455,14 @@ export default class Example32 extends React.Component { handleValidationError(_e: Event, args: any) { if (args.validationResults) { let errorMsg = args.validationResults.msg || ''; - if (args.editor && (args.editor instanceof Slick.CompositeEditor)) { - if (args.validationResults.errors) { - errorMsg += '\n'; - for (const error of args.validationResults.errors) { - const columnName = error.editor.args.column.name; - errorMsg += `${columnName.toUpperCase()}: ${error.msg}`; - } + if (args.editor && args.validationResults.errors) { + errorMsg += '\n'; + for (const error of args.validationResults.errors) { + const columnName = error.editor.args.column.name; + errorMsg += `${columnName.toUpperCase()}: ${error.msg}`; } - console.log(errorMsg); } + console.log(errorMsg); } else { alert(args.validationResults.msg); } @@ -610,7 +603,7 @@ export default class Example32 extends React.Component { undoLastEdit(showLastEditor = false) { const lastEdit = this.editQueue.pop(); const lastEditCommand = lastEdit?.editCommand; - if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) { + if (lastEdit && lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) { lastEditCommand.undo(); // remove unsaved css class from that cell @@ -630,7 +623,7 @@ export default class Example32 extends React.Component { undoAllEdits() { for (const lastEdit of this.editQueue) { const lastEditCommand = lastEdit?.editCommand; - if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) { + if (lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) { lastEditCommand.undo(); // remove unsaved css class from that cell diff --git a/src/examples/slickgrid/Example34.tsx b/src/examples/slickgrid/Example34.tsx index 0213828..ff3f82a 100644 --- a/src/examples/slickgrid/Example34.tsx +++ b/src/examples/slickgrid/Example34.tsx @@ -33,9 +33,16 @@ const NB_ROWS = 200; const currencyFormatter: Formatter = (cell: number, row: number, value: string) => ` ${value}`; -const priceFormatter: Formatter = (cell: number, row: number, value: number, col: Column, dataContext: any) => { +const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => { const direction = dataContext.priceChange >= 0 ? 'up' : 'down'; - return ` ${value}`; + const fragment = new DocumentFragment(); + const spanElm = document.createElement('span'); + spanElm.className = `fa fa-arrow-${direction} text-${direction === 'up' ? 'success' : 'danger'}`; + fragment.appendChild(spanElm); + if (value instanceof HTMLElement) { + fragment.appendChild(value); + } + return fragment; }; const transactionTypeFormatter: Formatter = (row: number, cell: number, value: string) => diff --git a/src/examples/slickgrid/custom-inputEditor.tsx b/src/examples/slickgrid/custom-inputEditor.tsx index 210dcf1..3dd4e41 100644 --- a/src/examples/slickgrid/custom-inputEditor.tsx +++ b/src/examples/slickgrid/custom-inputEditor.tsx @@ -4,7 +4,6 @@ import { Editor, EditorValidator, EditorValidationResult, - KeyCode } from '../../slickgrid-react'; /* @@ -53,7 +52,7 @@ export class CustomInputEditor implements Editor { handleKeydown(event: KeyboardEvent) { this._lastInputEvent = event; - if (event.keyCode === KeyCode.LEFT || event.keyCode === KeyCode.RIGHT) { + if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.stopImmediatePropagation(); } } @@ -92,8 +91,8 @@ export class CustomInputEditor implements Editor { } isValueChanged(): boolean { - const lastEvent = this._lastInputEvent?.keyCode; - if (this.columnEditor?.alwaysSaveOnEnterKey && lastEvent === KeyCode.ENTER) { + const lastKeyEvent = this._lastInputEvent?.key; + if (this.columnEditor?.alwaysSaveOnEnterKey && lastKeyEvent === 'Enter') { return true; } return (!(this.inputElm.value === '' && this.defaultValue === null)) && (this.inputElm.value !== this.defaultValue); diff --git a/src/slickgrid-react/components/slickgrid-react.tsx b/src/slickgrid-react/components/slickgrid-react.tsx index ed97b45..e102ae4 100644 --- a/src/slickgrid-react/components/slickgrid-react.tsx +++ b/src/slickgrid-react/components/slickgrid-react.tsx @@ -1,12 +1,6 @@ // import 3rd party vendor libs import i18next from 'i18next'; import React from 'react'; -import 'slickgrid/slick.core'; -import 'slickgrid/slick.interactions'; -import 'slickgrid/slick.grid'; -import 'slickgrid/slick.dataview'; -import * as Sortable_ from 'sortablejs'; -const Sortable = ((Sortable_ as any)?.['default'] ?? Sortable_); // patch for rollup import { // interfaces/types @@ -20,6 +14,7 @@ import { ExtensionList, ExternalResource, GridStateType, + ItemMetadata, Locale, Metrics, Pagination, @@ -28,7 +23,6 @@ import { SlickDataView, SlickEventHandler, SlickGrid, - SlickNamespace, // services BackendUtilityService, @@ -55,8 +49,7 @@ import { // utilities autoAddEditorFormatterToColumnsWithEditor, emptyElement, - SlickGridEventData, - SlickEvent, + Utils as SlickUtils, } from '@slickgrid-universal/common'; import { EventPubSubService } from '@slickgrid-universal/event-pub-sub'; import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-component'; @@ -77,12 +70,6 @@ import { Subscription } from 'rxjs'; import { GlobalContainerService } from '../services/singletons'; import { SlickgridReactProps } from './slickgridReactProps'; -// using external non-typed js libraries -declare const Slick: SlickNamespace; - -// add Sortable to the window object so that SlickGrid lib can use globally -(window as any).Sortable = Sortable; - interface State { showPagination: boolean; _gridOptions: GridOption; @@ -95,7 +82,7 @@ class CustomEventPubSubService extends EventPubSubService { } } -export class SlickgridReact extends React.Component { +export class SlickgridReact extends React.Component { protected _mounted = false; protected setStateValue(key: string, value: any, callback?: () => void): void { if ((this.state as any)?.[key] === value) { @@ -115,7 +102,7 @@ export class SlickgridReact extends React.Component }, callback); } - protected _columnDefinitions: Column[] = []; + protected _columnDefinitions: Column[] = []; protected _currentDatasetLength = 0; protected _dataset: any[] | null = null; protected _elm?: HTMLDivElement | null; @@ -132,7 +119,7 @@ export class SlickgridReact extends React.Component protected _gridOptions?: GridOption; protected get gridOptions(): GridOption { - return this._gridOptions || {}; + return this._gridOptions || {} as GridOption; } protected set gridOptions(options: GridOption) { let mergedOptions: GridOption; @@ -140,7 +127,7 @@ export class SlickgridReact extends React.Component // if we already have grid options, when grid was already initialized, we'll merge with those options // else we'll merge with global grid options if (this.grid?.getOptions) { - mergedOptions = Slick.Utils.extend(true, {}, this.grid.getOptions(), options); + mergedOptions = SlickUtils.extend(true, {} as GridOption, this.grid.getOptions() as GridOption, options as GridOption); } else { mergedOptions = this.mergeGridOptions(options); } @@ -192,7 +179,7 @@ export class SlickgridReact extends React.Component sortService: SortService; treeDataService: TreeDataService; - dataView!: SlickDataView; + dataView!: SlickDataView; grid!: SlickGrid; totalItems = 0; @@ -215,7 +202,7 @@ export class SlickgridReact extends React.Component const prevDatasetLn = this._currentDatasetLength; const isDatasetEqual = dequal(newDataset, this.dataset || []); const isDeepCopyDataOnPageLoadEnabled = !!(this._gridOptions?.enableDeepCopyDatasetOnPageLoad); - let data = isDeepCopyDataOnPageLoadEnabled ? Slick.Utils.extend(true, [], newDataset) : newDataset; + let data = isDeepCopyDataOnPageLoadEnabled ? SlickUtils.extend(true, [], newDataset) : newDataset; // when Tree Data is enabled and we don't yet have the hierarchical dataset filled, we can force a convert+sort of the array if (this.grid && this.gridOptions?.enableTreeData && Array.isArray(newDataset) && (newDataset.length > 0 || newDataset.length !== prevDatasetLn || !isDatasetEqual)) { @@ -267,7 +254,7 @@ export class SlickgridReact extends React.Component constructor(public readonly props: SlickgridReactProps) { super(props); const slickgridConfig = new SlickgridConfig(); - this._eventHandler = new Slick.EventHandler(); + this._eventHandler = new SlickEventHandler(); this.showPagination = false; @@ -277,11 +264,7 @@ export class SlickgridReact extends React.Component // save resource refs to register before the grid options are merged and possibly deep copied // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton - this._registeredResources = props.gridOptions?.externalResources || props.gridOptions?.registerExternalResources || []; - /* istanbul ignore if */ - if (props.gridOptions?.registerExternalResources) { - console.warn('[Slickgrid-Universal] Please note that the grid option `registerExternalResources` was deprecated, please use `externalResources` instead.'); - } + this._registeredResources = props.gridOptions?.externalResources || []; this._gridOptions = this.mergeGridOptions(props.gridOptions || {}); @@ -394,11 +377,7 @@ export class SlickgridReact extends React.Component // save resource refs to register before the grid options are merged and possibly deep copied // since a deep copy of grid options would lose original resource refs but we want to keep them as singleton - this._registeredResources = this.gridOptions?.externalResources || this.gridOptions?.registerExternalResources || []; - /* istanbul ignore if */ - if (this.gridOptions?.registerExternalResources) { - console.warn('[Slickgrid-React] Please note that the grid option `registerExternalResources` was deprecated and will be removed in next major, please use `externalResources` instead.'); - } + this._registeredResources = this.gridOptions?.externalResources || []; this.initialization(this._eventHandler); this._isGridInitialized = true; @@ -447,15 +426,15 @@ export class SlickgridReact extends React.Component if (!this.props.customDataView) { const dataviewInlineFilters = this._gridOptions.dataView && this._gridOptions.dataView.inlineFilters || false; - let dataViewOptions: DataViewOption = { inlineFilters: dataviewInlineFilters }; + let dataViewOptions: Partial = { ...this._gridOptions.dataView, inlineFilters: dataviewInlineFilters }; if (this._gridOptions.draggableGrouping || this._gridOptions.enableGrouping) { this.groupItemMetadataProvider = new SlickGroupItemMetadataProvider(); this.sharedService.groupItemMetadataProvider = this.groupItemMetadataProvider; dataViewOptions = { ...dataViewOptions, groupItemMetadataProvider: this.groupItemMetadataProvider }; } - this.dataView = new Slick.Data.DataView(dataViewOptions); - this._eventPubSubService.publish(`onDataviewCreated`, this.dataView); + this.dataView = new SlickDataView(dataViewOptions as Partial); + this._eventPubSubService.publish('onDataviewCreated', this.dataView); } // get any possible Services that user want to register which don't require SlickGrid to be instantiated @@ -487,10 +466,13 @@ export class SlickgridReact extends React.Component } // build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model) - this.grid = new Slick.Grid(`#${this.props.gridId}`, this.props.customDataView || this.dataView, this._columnDefinitions, this._gridOptions); + this.grid = new SlickGrid(`#${this.props.gridId}`, this.props.customDataView || this.dataView, this._columnDefinitions, this._gridOptions); this.sharedService.dataView = this.dataView; this.sharedService.slickGrid = this.grid; this.sharedService.gridContainerElement = this._elm as HTMLDivElement; + if (this.groupItemMetadataProvider) { + this.grid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled + } this.extensionService.bindDifferentExtensions(); this.bindDifferentHooks(this.grid, this._gridOptions, this.dataView); @@ -807,7 +789,7 @@ export class SlickgridReact extends React.Component } if (dataView && grid) { - const slickgridEventPrefix = this._gridOptions?.defaultSlickgridEventPrefix ?? ''; + const slickgridEventPrefix = ''; // expose all Slick Grid Events through dispatch for (const prop in grid) { @@ -906,7 +888,7 @@ export class SlickgridReact extends React.Component // did the user add a colspan callback? If so, hook it into the DataView getItemMetadata if (gridOptions?.colspanCallback && dataView?.getItem && dataView?.getItemMetadata) { dataView.getItemMetadata = (rowNumber: number) => { - let callbackResult = null; + let callbackResult: ItemMetadata | null = null; if (gridOptions.colspanCallback) { callbackResult = gridOptions.colspanCallback(dataView.getItem(rowNumber)); } @@ -1125,7 +1107,7 @@ export class SlickgridReact extends React.Component * @param showing */ showHeaderRow(showing = true) { - this.grid.setHeaderRowVisibility(showing, false); + this.grid.setHeaderRowVisibility(showing); if (showing === true && this._isGridInitialized) { this.grid.setColumns(this.props.columnDefinitions); } @@ -1149,7 +1131,7 @@ export class SlickgridReact extends React.Component * We will re-render the grid so that the new header and data shows up correctly. * If using i18n, we also need to trigger a re-translate of the column headers */ - updateColumnDefinitionsList(newColumnDefinitions: Column[]) { + updateColumnDefinitionsList(newColumnDefinitions: Column[]) { if (this.grid && this._gridOptions && Array.isArray(newColumnDefinitions)) { // map/swap the internal library Editor to the SlickGrid Editor factory newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions); @@ -1181,7 +1163,7 @@ export class SlickgridReact extends React.Component * Loop through all column definitions and copy the original optional `width` properties optionally provided by the user. * We will use this when doing a resize by cell content, if user provided a `width` it won't override it. */ - protected copyColumnWidthsReference(columnDefinitions: Column[]) { + protected copyColumnWidthsReference(columnDefinitions: Column[]) { columnDefinitions.forEach(col => col.originalWidth = col.width); } @@ -1288,7 +1270,7 @@ export class SlickgridReact extends React.Component } } - protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column[]) { + protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column[]) { if (this._columnDefinitions) { const columnPosition = this._columnDefinitions.findIndex(c => c.id === columnId); if (columnPosition >= 0) { @@ -1306,7 +1288,7 @@ export class SlickgridReact extends React.Component protected loadColumnPresetsWhenDatasetInitialized() { // if user entered some Columns "presets", we need to reflect them all in the grid if (this.grid && this.gridOptions.presets && Array.isArray(this.gridOptions.presets.columns) && this.gridOptions.presets.columns.length > 0) { - const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns); + const gridPresetColumns: Column[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.gridOptions.presets.columns); if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columnDefinitions)) { // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail) if (this.gridOptions.enableRowMoveManager) { @@ -1393,7 +1375,7 @@ export class SlickgridReact extends React.Component protected mergeGridOptions(gridOptions: GridOption): GridOption { // use extend to deep merge & copy to avoid immutable properties being changed in GlobalGridOptions after a route change - const options = Slick.Utils.extend(true, {}, GlobalGridOptions, gridOptions) as GridOption; + const options = SlickUtils.extend(true, {}, GlobalGridOptions, gridOptions) as GridOption; options.gridId = this.props.gridId; options.gridContainerId = `slickGridContainer-${this.props.gridId}`; @@ -1511,7 +1493,7 @@ export class SlickgridReact extends React.Component * @param {Boolean} forceGridRefresh - optionally force a full grid refresh * @returns {Array} sort flat parent/child dataset */ - protected sortTreeDataset(flatDatasetInput: T[], forceGridRefresh = false): T[] { + protected sortTreeDataset(flatDatasetInput: U[], forceGridRefresh = false): U[] { const prevDatasetLn = this._currentDatasetLength; let sortedDatasetResult; let flatDatasetOutput: any[] = []; @@ -1548,7 +1530,7 @@ export class SlickgridReact extends React.Component * so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor" * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works */ - protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]) { + protected swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]): Column[] { if (columnDefinitions.some(col => `${col.id}`.includes('.'))) { console.error('[Slickgrid-React] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".'); } @@ -1582,7 +1564,7 @@ export class SlickgridReact extends React.Component * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed. * Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection */ - protected updateEditorCollection(column: Column, newCollection: T[]) { + protected updateEditorCollection(column: Column, newCollection: U[]) { (column.editor as ColumnEditor).collection = newCollection; (column.editor as ColumnEditor).disabled = false; diff --git a/src/slickgrid-react/global-grid-options.ts b/src/slickgrid-react/global-grid-options.ts index bbd537f..3a6e125 100644 --- a/src/slickgrid-react/global-grid-options.ts +++ b/src/slickgrid-react/global-grid-options.ts @@ -1,4 +1,4 @@ -import { Column, DelimiterType, EventNamingStyle, FileType, Filters, GridAutosizeColsMode, OperatorType, TreeDataOption } from '@slickgrid-universal/common'; +import { Column, DelimiterType, EventNamingStyle, FileType, Filters, OperatorType, TreeDataOption } from '@slickgrid-universal/common'; import { GridOption } from './models/index'; /** @@ -31,7 +31,6 @@ export const GlobalGridOptions: Partial = { }, columnGroupSeparator: ' - ', columnPicker: { - fadeSpeed: 0, hideForceFitButton: false, hideSyncResizeButton: true, headerColumnValueExtractor: pickerHeaderColumnValueExtractor @@ -104,7 +103,6 @@ export const GlobalGridOptions: Partial = { defaultFilter: Filters.input, defaultBackendServiceFilterTypingDebounce: 500, defaultColumnSortFieldId: 'id', - defaultComponentEventPrefix: '', defaultFilterPlaceholder: '🔎︎', // magnifying glass icon defaultFilterRangeOperator: OperatorType.rangeInclusive, editable: false, @@ -160,7 +158,6 @@ export const GlobalGridOptions: Partial = { sanitizeDataExport: false, useUtf8WithBom: true }, - gridAutosizeColsMode: GridAutosizeColsMode.none, forceFitColumns: false, frozenHeaderWidthCalcDifferential: 1, gridMenu: { diff --git a/test/cypress/e2e/example03.cy.ts b/test/cypress/e2e/example03.cy.ts index 6975faf..ae2d317 100644 --- a/test/cypress/e2e/example03.cy.ts +++ b/test/cypress/e2e/example03.cy.ts @@ -19,13 +19,13 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to change Title with Custom Editor and expect to save when changing the value and then mouse clicking on a different cell', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 1').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 1').click(); cy.get('input.editor-text') .type('Task 8888'); // mouse click on next cell on the right & expect a save - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 8888'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 8888'); }); it('should be able to undo the editor and expect it to be opened, then clicking on Escape should reveal the cell to have rolled back text of "Task 1"', () => { @@ -35,7 +35,7 @@ describe('Example 3 - Grid with Editors', () => { .should('exist') .type('{esc}'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 1'); }); it('should enable "Auto Commit Edit"', () => { @@ -44,41 +44,41 @@ describe('Example 3 - Grid with Editors', () => { }); it('should be able to change all values of 3rd row', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', 'Task 2').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2').click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 2222'); cy.get('.editor-title .btn-save').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', 'Task 2222'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'Task 2222'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2222'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 2222'); // change duration - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 25).trigger('change', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '25'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '25'); // change % Complete - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background:green; width:95%"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`) + .find('.percent-complete-bar[style="background: green; width: 95%;"]'); // change Finish date - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).click(); cy.get('.flatpickr-monthDropdown-months:visible') .select('January', { force: true }); cy.get('.numInput.cur-year:visible').type('2009'); cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-22'); // change City of Origin - // cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).click({ force: true }); + // cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).click({ force: true }); // cy.get('input.autocomplete.editor-cityOfOrigin.ui-autocomplete-input') // .type('Venice'); // change Effort Driven - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(11)`).click({ force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(11)`).click({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check(); cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') .scrollTo('top'); @@ -91,11 +91,11 @@ describe('Example 3 - Grid with Editors', () => { 'Effort Driven', 'Prerequisites', 'Title', 'Title' ]; - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(13)`).should('not.exist'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(13)`).should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(14)`).should('not.exist'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) .should('contain', 'Task 0') .should('have.length', 1); @@ -108,44 +108,44 @@ describe('Example 3 - Grid with Editors', () => { .click() .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(13)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(13)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(14)`).should('contain', 'Task 0'); }); it('should be able to change value of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 0000'); cy.get('.editor-title .btn-save').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0000'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'Task 0000'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0000'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 0000'); // change duration - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '50'); // change % Complete - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background:green; width:95%"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) + .find('.percent-complete-bar[style="background: green; width: 95%;"]'); // change Finish date - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click(); cy.get('.flatpickr-monthDropdown-months:visible') .select('January', { force: true }); cy.get('.numInput.cur-year:visible').type('2009'); cy.get('.flatpickr-day:visible:nth(25)').click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-22'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-22'); // change Effort Driven - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check().blur(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).find('.fa-check.checkmark-icon'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).check().blur(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).find('.fa-check.checkmark-icon'); cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') .scrollTo('top'); @@ -157,7 +157,7 @@ describe('Example 3 - Grid with Editors', () => { .should('have.value', 'Task 2222'); cy.get('.slick-row').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 2222'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2222'); }); it('should hover over the last "Title" column and click on "Clear Filter" and expect grid to have all rows shown', () => { @@ -183,39 +183,39 @@ describe('Example 3 - Grid with Editors', () => { .click() .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(13)`).should('not.exist'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(14)`).should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(13)`).should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(14)`).should('not.exist'); }); it('should be able to change values again of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0').click(); // change Title & Custom Title cy.get('.editor-title > textarea').type('Task 0000'); cy.get('.editor-title .btn-save').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 0000'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'Task 0000'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0000'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Task 0000'); // change duration - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '50'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '50'); // change % Complete - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).click(); cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(3)').contains('97').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`) - .find('.percent-complete-bar[style="background:green; width:97%"]'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) + .find('.percent-complete-bar[style="background: green; width: 97%;"]'); // change Finish date - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).click(); cy.get('.flatpickr-day:visible:nth(24)').click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '2009-01-21'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '2009-01-21'); // // change Effort Driven - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11)`).click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).uncheck(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`).uncheck(); }); it('should click Add Item button 2x times and expect "Task 100" and "Task 101" to be created', () => { @@ -223,8 +223,8 @@ describe('Example 3 - Grid with Editors', () => { cy.wait(200); cy.get('[data-test="add-item-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 101'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 100'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 101'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 100'); // cy.get('[data-test="toggle-filtering-btn"]').click(); // show it back }); @@ -246,7 +246,7 @@ describe('Example 3 - Grid with Editors', () => { }); it('should open the "Prerequisites" Editor and expect to have Task 100 & 101 in the Editor', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(12)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(12)`) .should('contain', '') .click(); @@ -265,13 +265,13 @@ describe('Example 3 - Grid with Editors', () => { .last() .click({ force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(12)`).should('contain', 'Task 101'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(12)`).should('contain', 'Task 101'); }); it('should delete the last item "Task 101" and expect it to be removed from the Filter', () => { cy.get('[data-test="delete-item-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 100'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 100'); cy.get('div.ms-filter.filter-prerequisites') .trigger('click'); @@ -306,7 +306,7 @@ describe('Example 3 - Grid with Editors', () => { cy.get('.slick-row') .should('have.length', 2); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Task 8'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 8'); }); }); diff --git a/test/cypress/e2e/example05.cy.ts b/test/cypress/e2e/example05.cy.ts index 851746d..f037a7b 100644 --- a/test/cypress/e2e/example05.cy.ts +++ b/test/cypress/e2e/example05.cy.ts @@ -692,7 +692,7 @@ describe('Example 5 - OData Grid', () => { .find('.slick-row') .should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Alisha Myers'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Alisha Myers'); // query should still contain previous sort by + new gender filter cy.get('[data-test=odata-query-result]') diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts index 420ae4d..9f3e96c 100644 --- a/test/cypress/e2e/example13.cy.ts +++ b/test/cypress/e2e/example13.cy.ts @@ -21,13 +21,13 @@ describe('Example 13 - Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="collapse-all-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4'); }); it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => { @@ -35,42 +35,42 @@ describe('Example 13 - Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="expand-all-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '0'); }); it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be collapsed and 3rd row to have group totals', () => { cy.get('[data-test="group-duration-effort-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'Total: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'Total: 0'); }); it('should "Group by Duration then Effort-Driven then Percent" and expect fist 2 rows to be expanded, 3rd row to be collapsed then 4th row to have group total', () => { cy.get('[data-test="group-duration-effort-percent-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^Avg: [0-9]\%$/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^Avg: [0-9]\%$/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2`) .find('.slick-cell:nth(3)').contains('Avg: '); }); }); diff --git a/test/cypress/e2e/example14.cy.ts b/test/cypress/e2e/example14.cy.ts index 119609a..6b57efa 100644 --- a/test/cypress/e2e/example14.cy.ts +++ b/test/cypress/e2e/example14.cy.ts @@ -21,16 +21,16 @@ describe('Example 14 - Column Span & Header Grouping', () => { }); it('should have a frozen grid on page load with 3 columns on the left and 4 columns on the right', () => { - cy.get('#grid2').find('[style="top:0px"]').should('have.length', 2); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4); + cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 2); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days'); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009'); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009'); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009'); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009'); }); it('should have exact Column Pre-Header & Column Header Titles in the grid', () => { @@ -49,14 +49,14 @@ describe('Example 14 - Column Span & Header Grouping', () => { cy.contains('Remove Frozen Columns') .click({ force: true }); - cy.get('#grid2').find('[style="top:0px"]').should('have.length', 1); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7); + cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 1); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '01/01/2009'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/05/2009'); }); it('should have exact Column Pre-Header & Column Header Titles in the grid', () => { @@ -75,16 +75,16 @@ describe('Example 14 - Column Span & Header Grouping', () => { cy.contains('Set 3 Frozen Columns') .click({ force: true }); - cy.get('#grid2').find('[style="top:0px"]').should('have.length', 2); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4); + cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 2); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days'); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009'); - cy.get('#grid2').find('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009'); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009'); + cy.get('#grid2').find('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009'); }); it('should have exact Column Pre-Header & Column Header Titles in the grid', () => { @@ -107,13 +107,13 @@ describe('Example 14 - Column Span & Header Grouping', () => { cy.contains('Unfreeze Columns/Rows') .click({ force: true }); - cy.get('#grid2').find('[style="top:0px"]').should('have.length', 1); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7); + cy.get('#grid2').find('[style="top: 0px;"]').should('have.length', 1); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009'); - cy.get('#grid2').find('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '01/01/2009'); + cy.get('#grid2').find('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/05/2009'); }); }); diff --git a/test/cypress/e2e/example15.cy.ts b/test/cypress/e2e/example15.cy.ts index 19e325c..e479a21 100644 --- a/test/cypress/e2e/example15.cy.ts +++ b/test/cypress/e2e/example15.cy.ts @@ -496,9 +496,9 @@ describe('Example 15: Grid State & Presets using Local Storage', () => { }); it('should have a persisted frozen column after "Description" and a grid with 4 containers on page load with 2 columns on the left and 3 columns on the right', () => { - cy.get('[style="top:0px"]').should('have.length', 2); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 3); + cy.get('[style="top: 0px;"]').should('have.length', 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 3); }); it('should click on the reset button and have exact Column Titles position as in beginning', () => { @@ -573,8 +573,8 @@ describe('Example 15: Grid State & Presets using Local Storage', () => { }); it('should have a persisted frozen column after "Description" and a grid with 4 containers on page load with 2 columns on the left and 3 columns on the right', () => { - cy.get('[style="top:0px"]').should('have.length', 2); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 4); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 3); + cy.get('[style="top: 0px;"]').should('have.length', 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 4); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 3); }); }); diff --git a/test/cypress/e2e/example16.cy.ts b/test/cypress/e2e/example16.cy.ts index fc36221..834296f 100644 --- a/test/cypress/e2e/example16.cy.ts +++ b/test/cypress/e2e/example16.cy.ts @@ -1,4 +1,5 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { + const GRID_ROW_HEIGHT = 35; const fullTitles = ['', '', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed']; it('should display Example title', () => { @@ -22,9 +23,9 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should drag opened row to another position in the grid', () => { - cy.get('[style="top:35px"] > .slick-cell.cell-reorder').as('moveIconTask1'); - cy.get('[style="top:70px"] > .slick-cell.cell-reorder').as('moveIconTask2'); - cy.get('[style="top:105px"] > .slick-cell.cell-reorder').as('moveIconTask3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.cell-reorder`).as('moveIconTask1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell.cell-reorder`).as('moveIconTask2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell.cell-reorder`).as('moveIconTask3'); cy.get('@moveIconTask3').should('have.length', 1); @@ -46,11 +47,11 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('top'); - cy.get('[style="top:0px"] > .slick-cell:nth(2)').should('contain', 'Task 0'); - cy.get('[style="top:35px"] > .slick-cell:nth(2)').should('contain', 'Task 1'); - cy.get('[style="top:70px"] > .slick-cell:nth(2)').should('contain', 'Task 3'); - cy.get('[style="top:105px"] > .slick-cell:nth(2)').should('contain', 'Task 2'); - cy.get('[style="top:140px"] > .slick-cell:nth(2)').should('contain', 'Task 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); cy.get('input[type="checkbox"]:checked') .should('have.length', 4); @@ -72,11 +73,11 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { }); it('should select 2 rows (Task 3,4), then move the rows and expect both rows to still be selected without any other rows', () => { - cy.get('[style="top:70px"] > .slick-cell:nth(1)').click(); - cy.get('[style="top:140px"] > .slick-cell:nth(1)').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).click(); - cy.get('[style="top:70px"] > .slick-cell.cell-reorder').as('moveIconTask3'); - cy.get('[style="top:175px"] > .slick-cell.cell-reorder').as('moveIconTask5'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell.cell-reorder`).as('moveIconTask3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell.cell-reorder`).as('moveIconTask5'); cy.get('@moveIconTask3').should('have.length', 1); @@ -91,17 +92,17 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('top'); - cy.get('[style="top:0px"] > .slick-cell:nth(2)').should('contain', 'Task 0'); - cy.get('[style="top:35px"] > .slick-cell:nth(2)').should('contain', 'Task 1'); - cy.get('[style="top:70px"] > .slick-cell:nth(2)').should('contain', 'Task 2'); - cy.get('[style="top:105px"] > .slick-cell:nth(2)').should('contain', 'Task 4'); - cy.get('[style="top:140px"] > .slick-cell:nth(2)').should('contain', 'Task 5'); - cy.get('[style="top:175px"] > .slick-cell:nth(2)').should('contain', 'Task 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 5'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(2)`).should('contain', 'Task 3'); // Task 4 and 3 should be selected cy.get('input[type="checkbox"]:checked').should('have.length', 2); - cy.get('[style="top:105px"] > .slick-cell:nth(1) input[type="checkbox"]:checked').should('have.length', 1); - cy.get('[style="top:175px"] > .slick-cell:nth(1) input[type="checkbox"]:checked').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1) input[type="checkbox"]:checked`).should('have.length', 1); }); it('should move "Duration" column to a different position in the grid', () => { @@ -418,13 +419,13 @@ describe('Example 16 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('.slick-row') .first() .children('.slick-cell') - .children('.edit-icon') + .children('.fa.fa-pencil') .should('have.length', 1); cy.get('.slick-row') .first() .children('.slick-cell:nth(1)') - .children('.delete-icon') + .children('.fa.fa-trash') .should('have.length', 1); }); }); diff --git a/test/cypress/e2e/example18.cy.ts b/test/cypress/e2e/example18.cy.ts index edb7728..b1eb18c 100644 --- a/test/cypress/e2e/example18.cy.ts +++ b/test/cypress/e2e/example18.cy.ts @@ -23,13 +23,13 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => { cy.get('.grouping-selects select:nth(0)').should('have.value', 'duration'); cy.get('.grouping-selects select:nth(1)').should('not.have.value'); cy.get('.grouping-selects select:nth(2)').should('not.have.value'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4'); }); it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => { @@ -37,11 +37,11 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => { cy.get('[data-test="group-duration-sort-value-btn"]').click(); cy.get('[data-test="expand-all-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '0'); }); it('should show 1 column title (Duration) shown in the pre-header section', () => { @@ -54,14 +54,14 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => { it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => { cy.get('[data-test="group-duration-effort-btn"]').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', '0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', '0'); }); it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section & same select dropdown', () => { @@ -85,14 +85,14 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => { }); it('should expect the grouping to be swapped as well in the grid', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', '0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', '0'); }); it('should expand all rows with "Expand All" from context menu and expect all the Groups to be expanded and the Toogle All icon to be collapsed', () => { @@ -144,21 +144,21 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => { it('should use the preheader Toggle All button and expect all groups to now be expanded', () => { cy.get('.slick-preheader-panel .slick-group-toggle-all').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) .should('have.css', 'marginLeft').and('eq', `0px`); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) .should('have.css', 'marginLeft').and('eq', `15px`); }); it('should use the preheader Toggle All button again and expect all groups to now be collapsed', () => { cy.get('.slick-preheader-panel .slick-group-toggle-all').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: True'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: False'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven: True'); }); it('should clear all groups with "Clear all Grouping" from context menu and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => { diff --git a/test/cypress/e2e/example20.cy.ts b/test/cypress/e2e/example20.cy.ts index 164f95b..cc8a58c 100644 --- a/test/cypress/e2e/example20.cy.ts +++ b/test/cypress/e2e/example20.cy.ts @@ -23,15 +23,15 @@ describe('Example 20 - Frozen Grid', () => { }); it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 4 columns on the right', () => { - cy.get('[style="top:0px"]').should('have.length', 2 * 2); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('[style="top: 0px;"]').should('have.length', 2 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); @@ -55,13 +55,13 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(newColumnList[index])); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', ''); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); it('should show again "Title" column from Grid Menu and expect last frozen column to still be "% Complete"', () => { @@ -83,14 +83,14 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', ''); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); it('should hide "Title" column from Header Menu and expect last frozen column to be "% Complete"', () => { @@ -116,13 +116,13 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(newColumnList[index])); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', ''); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); it('should show again "Title" column from Column Picker and expect last frozen column to still be "% Complete"', () => { @@ -149,28 +149,28 @@ describe('Example 20 - Frozen Grid', () => { .children() .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', ''); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', ''); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); it('should click on the "Remove Frozen Columns" button to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => { cy.get('[data-test=remove-frozen-column-button]') .click({ force: true }); - cy.get('[style="top:0px"]').should('have.length', 1 * 2); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2); + cy.get('[style="top: 0px;"]').should('have.length', 1 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '2009-05-05'); }); it('should have exact Column Header Titles in the grid', () => { @@ -184,15 +184,15 @@ describe('Example 20 - Frozen Grid', () => { cy.get('[data-test=set-3frozen-columns]') .click({ force: true }); - cy.get('[style="top:0px"]').should('have.length', 2 * 2); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2); - cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2); + cy.get('[style="top: 0px;"]').should('have.length', 2 * 2); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2); + cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '2009-05-05'); }); it('should have exact Column Header Titles in the grid', () => { @@ -210,13 +210,13 @@ describe('Example 20 - Frozen Grid', () => { cy.contains('Unfreeze Columns/Rows') .click({ force: true }); - cy.get('[style="top:0px"]').should('have.length', 1); - cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11); + cy.get('[style="top: 0px;"]').should('have.length', 1); + cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '2009-01-01'); - cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '2009-05-05'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '2009-01-01'); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '2009-05-05'); }); }); diff --git a/test/cypress/e2e/example21.cy.ts b/test/cypress/e2e/example21.cy.ts index 6ae1c46..c92d4ad 100644 --- a/test/cypress/e2e/example21.cy.ts +++ b/test/cypress/e2e/example21.cy.ts @@ -72,8 +72,8 @@ describe('Example 21 - Grid AutoHeight', () => { cy.get('[data-test="search-value-input"]') .type('5', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 15'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 15'); }); it('should type a filter which returns an empty dataset', () => { @@ -89,10 +89,10 @@ describe('Example 21 - Grid AutoHeight', () => { cy.get('[data-test="clear-search-value"]') .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); }); }); diff --git a/test/cypress/e2e/example22.cy.ts b/test/cypress/e2e/example22.cy.ts index 5573cd9..d359b54 100644 --- a/test/cypress/e2e/example22.cy.ts +++ b/test/cypress/e2e/example22.cy.ts @@ -16,12 +16,12 @@ describe('Example 22 - Grids in Bootstrap Tabs', () => { }); it('should have "Task 0" incremented by 1 after each row', () => { - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); - cy.get(`.tab-pane#javascript [style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4'); + cy.get(`.tab-pane#javascript [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 5'); }); it('should change open next Tab "Fetch-Client" and expect a grid with 3 columns', () => { @@ -34,16 +34,16 @@ describe('Example 22 - Grids in Bootstrap Tabs', () => { }); it('should expect first 3 rows to be an exact match of data provided by the external JSON file', () => { - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l0`).should('contain', 'Ethel Price'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l1`).should('contain', 'female'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l2`).should('contain', 'Enersol'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l0`).should('contain', 'Ethel Price'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1`).should('contain', 'female'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2`).should('contain', 'Enersol'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l0`).should('contain', 'Claudine Neal'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l1`).should('contain', 'female'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l2`).should('contain', 'Sealoud'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l0`).should('contain', 'Claudine Neal'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l1`).should('contain', 'female'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l2`).should('contain', 'Sealoud'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell.l0`).should('contain', 'Beryl Rice'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell.l1`).should('contain', 'female'); - cy.get(`.tab-pane#fetch [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell.l2`).should('contain', 'Velity'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell.l0`).should('contain', 'Beryl Rice'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell.l1`).should('contain', 'female'); + cy.get(`.tab-pane#fetch [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell.l2`).should('contain', 'Velity'); }); }); diff --git a/test/cypress/e2e/example24.cy.ts b/test/cypress/e2e/example24.cy.ts index 515d9d0..de2643d 100644 --- a/test/cypress/e2e/example24.cy.ts +++ b/test/cypress/e2e/example24.cy.ts @@ -693,7 +693,7 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { it('should reopen Context Menu hover "Priority" column then open options sub-menu & select "High" option and expect Task to be set to High in the UI', () => { const subOptions = ['Low', 'Medium', 'High']; - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(5)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`) .rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-option-list') @@ -713,7 +713,7 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { .contains('High') .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(5)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(5)`) .find('.fa-star.red'); }); @@ -722,9 +722,9 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(1)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) .should('contain', 'Task 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(1)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) .rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') @@ -750,8 +750,8 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(1)`).should('contain', 'Task 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] .slick-cell:nth(1)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(1)`) .rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') @@ -814,8 +814,8 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { const subCommands2 = ['Excel (csv)', 'Excel (xlsx)']; const subOptions = ['Low', 'Medium', 'High']; - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) .rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') @@ -863,8 +863,8 @@ describe('Example 24 - Cell Menu & Context Menu Plugins', () => { const stub = cy.stub(); cy.on('window:alert', stub); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`) .rightclick({ force: true }); cy.get('.slick-context-menu.slick-menu-level-0 .slick-menu-command-list') diff --git a/test/cypress/e2e/example25.cy.ts b/test/cypress/e2e/example25.cy.ts index 172177e..c9ec4b4 100644 --- a/test/cypress/e2e/example25.cy.ts +++ b/test/cypress/e2e/example25.cy.ts @@ -29,52 +29,52 @@ describe('Example 25 - GraphQL Basic API without Pagination', () => { cy.get('.right-footer.metrics') .contains('250 of 250 items'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'AD'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Andorra'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Andorra'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '376'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', 'EUR'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', 'Catalan'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).should('contain', 'Català'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', 'ca'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Europe'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'EU'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'AE'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'United Arab Emirates'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'دولة الإمارات العربية المتحدة'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '971'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).should('contain', 'AED'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(6)`).should('contain', 'Arabic'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).should('contain', 'العربية'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('contain', 'ar'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(9)`).should('contain', 'Asia'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'AS'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'AF'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Afghanistan'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', 'افغانستان'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '93'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', 'AFN'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).should('contain', 'Pashto, Uzbek, Turkmen'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).should('contain', 'پښتو, Ўзбек, Туркмен / تركمن'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).should('contain', 'ps, uz, tk'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(9)`).should('contain', 'Asia'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(10)`).should('contain', 'AS'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'AD'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Andorra'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Andorra'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '376'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', 'EUR'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', 'Catalan'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).should('contain', 'Català'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', 'ca'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Europe'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'EU'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'AE'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'United Arab Emirates'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'دولة الإمارات العربية المتحدة'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '971'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', 'AED'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(6)`).should('contain', 'Arabic'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).should('contain', 'العربية'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', 'ar'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(9)`).should('contain', 'Asia'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'AS'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'AF'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Afghanistan'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', 'افغانستان'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '93'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', 'AFN'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).should('contain', 'Pashto, Uzbek, Turkmen'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).should('contain', 'پښتو, Ўзбек, Туркмен / تركمن'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('contain', 'ps, uz, tk'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(9)`).should('contain', 'Asia'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'AS'); }); it('should sort by country name and expect first 2 rows as Afghanistan and Albania', () => { cy.get(`.slick-header-columns:nth(1) .slick-header-column:nth-child(2)`).contains('Name').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'AF'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Afghanistan'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'افغانستان'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '93'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'AF'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Afghanistan'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'افغانستان'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '93'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'AL'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Albania'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Shqipëria'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '355'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'AL'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Albania'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Shqipëria'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '355'); }); it('should filter by Language Codes "fr, de" and expect 2 rows of data in the grid', () => { @@ -84,27 +84,27 @@ describe('Example 25 - GraphQL Basic API without Pagination', () => { cy.get('.right-footer.metrics') .contains('2 of 250 items'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'BE'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'België'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '32'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', 'EUR'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', 'Dutch, French, German'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).should('contain', 'Nederlands, Français, Deutsch'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', 'nl, fr, de'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Europe'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'EU'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'LU'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Luxembourg'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', 'Luxembourg'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '352'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).should('contain', 'EUR'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(6)`).should('contain', 'French, German, Luxembourgish'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).should('contain', 'Français, Deutsch, Lëtzebuergesch'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('contain', 'fr, de, lb'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(9)`).should('contain', 'Europe'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'EU'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'BE'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'België'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '32'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', 'EUR'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', 'Dutch, French, German'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).should('contain', 'Nederlands, Français, Deutsch'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', 'nl, fr, de'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Europe'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'EU'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'LU'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Luxembourg'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', 'Luxembourg'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '352'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', 'EUR'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(6)`).should('contain', 'French, German, Luxembourgish'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).should('contain', 'Français, Deutsch, Lëtzebuergesch'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', 'fr, de, lb'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(9)`).should('contain', 'Europe'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'EU'); }); it('should Clear all Filters and expect all rows to be back', () => { @@ -140,16 +140,16 @@ describe('Example 25 - GraphQL Basic API without Pagination', () => { cy.get('.right-footer.metrics') .contains('1 of 250 items'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'BO'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Bolivia'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'Bolivia'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '591'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', 'BOB,BOV'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', 'Spanish, Aymara, Quechua'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).should('contain', 'Español, Aymar, Runa Simi'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', 'es, ay, qu'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'South America'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'SA'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'BO'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Bolivia'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'Bolivia'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '591'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', 'BOB,BOV'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', 'Spanish, Aymara, Quechua'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).should('contain', 'Español, Aymar, Runa Simi'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', 'es, ay, qu'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'South America'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'SA'); }); it('should Clear all Filters and expect all rows to be back', () => { @@ -185,14 +185,14 @@ describe('Example 25 - GraphQL Basic API without Pagination', () => { cy.get('.right-footer.metrics') .contains('44 of 250 items'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', 'Dutch, French, German'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', 'nl, fr, de'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Europe'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', 'Dutch, French, German'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', 'nl, fr, de'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Europe'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Benin'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(6)`).should('contain', 'French'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(8)`).should('contain', 'fr'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(9)`).should('contain', 'Africa'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Benin'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(6)`).should('contain', 'French'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('contain', 'fr'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(9)`).should('contain', 'Africa'); }); }); diff --git a/test/cypress/e2e/example27.cy.ts b/test/cypress/e2e/example27.cy.ts index b311842..1a8bf35 100644 --- a/test/cypress/e2e/example27.cy.ts +++ b/test/cypress/e2e/example27.cy.ts @@ -169,7 +169,7 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)' const readLineCount = 10; for (let row = 0; row < readLineCount; row++) { - cy.get(`[style="top:${GRID_ROW_HEIGHT * row}px"]`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * row}px;"]`) .should($elm => { // only read the percent complete value if it's not a parent const $slickGroupToggleNotExpanded = $elm.children('.slick-cell:nth(0)').children('.slick-group-toggle:not(.expanded)'); @@ -224,11 +224,11 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)' } const currentYear = today.getFullYear(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', '11 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '77%'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', '11 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '77%'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', `${currentYear}-${zeroPadding(currentMonth)}-${zeroPadding(currentDate)}`); }); it('should collapse the Tree and not expect to see the newly inserted item (Task 500) because all child will be collapsed', () => { @@ -271,14 +271,14 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)' Task 4 ... */ - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true }); }); it('should be able to click on the "Collapse All (wihout event)" button', () => { @@ -292,12 +292,12 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)' .contains('Reapply Previous Toggled Items') .click({ force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); cy.get(`#grid27 .slick-group-toggle.expanded`).should('have.length', 2); }); diff --git a/test/cypress/e2e/example28.cy.ts b/test/cypress/e2e/example28.cy.ts index b13f34f..30ef4d6 100644 --- a/test/cypress/e2e/example28.cy.ts +++ b/test/cypress/e2e/example28.cy.ts @@ -25,26 +25,26 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' }); it('should expect the "pdf" folder to be closed by the collapsed items grid preset with aggregators of Sum(8.8MB) / Avg(2.2MB)', () => { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); cy.get(`.slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 8.8 MB / avg: 2.2 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 8.8 MB / avg: 2.2 MB'); defaultGridPresetWithoutPdfDocs.forEach((_colName, rowIdx) => { if (rowIdx < defaultGridPresetWithoutPdfDocs.length - 1) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]); } }); }); it('should have documents folder with aggregation of Sum(14.46MB) / Avg(1.45MB)', () => { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'misc'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'misc'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB'); }); it('should expand "pdf" folder and expect all folders to be expanded', () => { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`) + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`) .click(); cy.get('.slick-viewport-top.slick-viewport-left') @@ -56,7 +56,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' if (rowIdx > defaultSortAscList.length - 1) { return; } - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); }); }); @@ -64,12 +64,12 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('center', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 53.3 MB / avg: 26.65 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 53.3 MB / avg: 26.65 MB'); }); it('should be able to add 2 new pop songs into the Music folder', () => { @@ -86,8 +86,8 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' .get('.slick-cell') .contains('pop-80.mp3'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 20}px"] > .slick-cell:nth(3)`).should('contain', '82 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 21}px"] > .slick-cell:nth(3)`).should('contain', '83 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 20}px;"] > .slick-cell:nth(3)`).should('contain', '82 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 21}px;"] > .slick-cell:nth(3)`).should('contain', '83 MB'); }); @@ -95,12 +95,12 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('bottom', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); }); it('should filter the Files column with the word "map" and expect only 4 rows left', () => { @@ -183,7 +183,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' defaultSortAscList.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortAscList.length - 1) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]); } }); }); @@ -194,7 +194,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); } }); }); @@ -223,7 +223,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => { if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]); } }); }); @@ -246,12 +246,12 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('bottom', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); }); it('should return 8 rows when filtering the word "pop" music without excluding children', () => { @@ -263,7 +263,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => { if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 1) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); } }); }); @@ -277,7 +277,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => { if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 3) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]); } }); }); @@ -300,7 +300,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.right-footer .item-count') .contains('1'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); }); it('should use same filter "music" and now expect to see 10 rows (entire music folder content) to show up when "Exclude Children when Filtering Tree" becomes uncheck', () => { @@ -314,7 +314,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' allMusic.forEach((_colName, rowIdx) => { if (rowIdx < allMusic.length - 3) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', allMusic[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', allMusic[rowIdx]); } }); }); @@ -338,7 +338,7 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' expectedFiles.forEach((_colName, rowIdx) => { if (rowIdx < expectedFiles.length - 3) { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', expectedFiles[rowIdx]); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * rowIdx}px;"] > .slick-cell:nth(0)`).should('contain', expectedFiles[rowIdx]); } }); }); @@ -360,24 +360,24 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('center', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB'); }); it('should remove last inserted pop song 81 and expect aggregations to be updated with Sum(316.3MB) / Avg(63.26MB)', () => { cy.get('[data-test="remove-item-btn"]') .click(); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); }); }); @@ -391,32 +391,32 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('center', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 16}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 17}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB'); // next folder is "other" and is empty without aggregations - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(0)`).should('contain', 'pop'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 19}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB'); }); it('should have documents with same Sum as the beginning since auto-recalc is disabled, aggregation should be Sum(14.46MB) / Avg(1.45MB)', () => { cy.get('.slick-viewport-top.slick-viewport-left') .scrollTo('top', { force: true } as any); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'misc'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB (sub-total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'misc'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB (sub-total)'); }); it('should retype filter "map" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => { cy.get('.search-filter.filter-file') .type('map'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (sub-total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (sub-total)'); cy.get('.right-footer .item-count').contains('4'); @@ -432,17 +432,17 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.search-filter.filter-file') .type('b'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); cy.get('.right-footer .item-count').contains('6'); cy.get('.right-footer .total-count').contains('31'); @@ -452,14 +452,14 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.search-filter.filter-file') .type('i'); // will become "bi" - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '1.3 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.5 MB'); cy.get('.right-footer .item-count').contains('4'); cy.get('.right-footer .total-count').contains('31'); @@ -471,19 +471,19 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' }); it('should collapse "pdf" folder and filter with "b" again and expect same updated tree totals as earlier collapsed or expanded should still be Sum(2.8MB) / Avg(1.4MB)', () => { - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`) .click(); cy.get('.search-filter.filter-file') .type('b'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'pdf'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'pdf'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '1.22 MB'); cy.get('.right-footer .item-count').contains('4'); cy.get('.right-footer .total-count').contains('31'); @@ -495,12 +495,12 @@ describe('Example 28 - Tree Data with Aggregators (from a Hierarchical Dataset)' cy.get('.search-filter.filter-file').type('so'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.79 MB / avg: 0.79 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'music'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 104.3 MB / avg: 52.15 MB (total)'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'something.txt'); - cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '90 MB'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'documents'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.79 MB / avg: 0.79 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'music'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'sum: 104.3 MB / avg: 52.15 MB (total)'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'something.txt'); + cy.get(`#slickGridContainer-grid28 [style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '90 MB'); cy.get('.right-footer .item-count').contains('3'); cy.get('.right-footer .total-count').contains('31'); diff --git a/test/cypress/e2e/example30.cy.ts b/test/cypress/e2e/example30.cy.ts index d7e90af..021851f 100644 --- a/test/cypress/e2e/example30.cy.ts +++ b/test/cypress/e2e/example30.cy.ts @@ -34,77 +34,77 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should have "TASK 0" (uppercase) incremented by 1 after each row', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }) .should('have.css', 'text-transform', 'uppercase'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).contains('TASK 3', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).contains('TASK 4', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).contains('TASK 5', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).contains('TASK 3', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).contains('TASK 4', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).contains('TASK 5', { matchCase: false }); }); it('should be able to change "Duration" values of first 4 rows', () => { // change duration - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', 'days').click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', 'days').click(); cy.get('.editor-duration').type('0{enter}'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) .should('contain', '0 day') .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).click().type('1{enter}'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '1 day') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).click().type('1{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '1 day') .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).click().type('2{enter}'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', '2 days') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).click().type('2{enter}'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '2 days') .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); }); it('should be able to change "Title" values of row indexes 1-3', () => { // change title - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1', { matchCase: false }).click(); cy.get('.editor-title').type('task 1111'); cy.get('.editor-title .editor-footer .btn-save').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }).click(); cy.get('.editor-title').type('task 2222'); cy.get('.editor-title .editor-footer .btn-save').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).contains('TASK 2222', { matchCase: false }) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2222', { matchCase: false }) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); }); it('should be able to change "% Complete" values of row indexes 2-4', () => { // change % complete - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 5).trigger('change', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '5') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '5') .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).click(); cy.get('.slider-editor input[type=range]').as('range').invoke('val', 6).trigger('change', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).should('contain', '6') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '6') .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); }); it('should not be able to change the "Finish" dates on first 2 rows', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty cy.get(`.flatpickr-day.today:visible`).should('not.exist'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty cy.get(`.flatpickr-day.today:visible`).should('not.exist'); }); it('should be able to change "Completed" values of row indexes 2-4', () => { // change Completed - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).click(); cy.get('.editor-completed').check(); }); @@ -121,19 +121,19 @@ describe('Example 30 Composite Editor Modal', () => { const currentYear = today.getFullYear(); // change Finish date to today's date - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', '').click(); // this date should also always be initially empty cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).click(); cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).click(); cy.get(`.flatpickr-day.today:visible`).click('bottom', { force: true }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('contain', `${zeroPadding(currentMonth)}/${zeroPadding(currentDate)}/${currentYear}`) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); cy.get('.unsaved-editable-field') @@ -149,7 +149,7 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.unsaved-editable-field') .should('have.length', 12); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`) .should('contain', '') .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR); }); @@ -163,7 +163,7 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.unsaved-editable-field') .should('have.length', 11); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`) .should('contain', '') .should('have.css', 'background-color').and('eq', EDITABLE_CELL_RGB_COLOR); }); @@ -256,21 +256,21 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should have new TASK 8888 displayed on first row', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).contains('TASK 8888', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '22 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '5'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8888', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '22 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '5'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); // next few rows Title should be unchanged - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }); }); it('should open the Composite Editor (Edit Item) and expect all form inputs to be filled with TASK 8888 data of previous create item', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click({ force: true }); cy.get('[data-test="open-modal-edit-btn"]').click(); cy.get('.slick-editor-modal-title').contains('Editing - Task 8888 (id: 501)'); @@ -290,21 +290,21 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should have new TASK 8888 displayed on first row', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '33 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '17'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('not.exist'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5).editable-field`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('not.exist'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table'); // next few rows Title should be unchanged - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 0', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }); }); it('should open the Composite Editor (Mass Update) and be able to change some of the inputs in the form', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click(); cy.get('[data-test="open-modal-mass-update-btn"]').wait(200).click(); cy.get('.slick-editor-modal-title').should('contain', 'Mass Update All Records'); cy.get('.footer-status-text').should('contain', 'All 501 records selected'); @@ -338,33 +338,33 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should have updated values in the entire grid', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); - - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', 'Straightforward'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); it('should open the Composite Editor (Mass Update) change some inputs', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click(); cy.get('[data-test="open-modal-mass-update-btn"]').wait(200).click(); cy.get('.slick-editor-modal-title').should('contain', 'Mass Update All Records'); cy.get('.footer-status-text').should('contain', 'All 501 records selected'); @@ -415,8 +415,8 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should select row 1 and 2', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).click(); cy.get('[data-test="open-modal-mass-selection-btn"]').should('not.be.disabled'); cy.get('[data-test="open-modal-mass-selection-btn"]').wait(50).click(); }); @@ -456,25 +456,25 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should have updated all the changed values BUT only on the 2 selected rows', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'Belize'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '77'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).should('contain', '77'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(10)`).should('contain', 'Belize'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).should('contain', '77'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).should('contain', 'Belize'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); it(`should open the Composite Editor (Mass Update) change "Percent Complete" to 100% and expect "Completed" to become checked and "Finish" date to be today's date`, () => { @@ -489,7 +489,7 @@ describe('Example 30 Composite Editor Modal', () => { } const currentYear = today.getFullYear(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click(); cy.get('[data-test="open-modal-mass-update-btn"]').click(); cy.get('.slick-editor-modal-title').contains('Mass Update All Records'); @@ -513,7 +513,7 @@ describe('Example 30 Composite Editor Modal', () => { }); it('should focus on first row and open the Composite Editor (Clone Item) and expect all form inputs to be filled with first row data', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click({ force: true }); cy.get('[data-test="open-modal-clone-btn"]').click(); cy.get('.slick-editor-modal-title').contains('Clone - Task 8899'); @@ -535,16 +535,16 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.btn-cancel').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '33 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 8899', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); it('should focus again on first row and open the Composite Editor (Clone Item) and expect all form inputs to be filled with first row data', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).click({ force: true }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).click({ force: true }); cy.get('[data-test="open-modal-clone-btn"]').click(); cy.get('.slick-editor-modal-title').contains('Clone - Task 8899'); @@ -569,30 +569,30 @@ describe('Example 30 Composite Editor Modal', () => { cy.get('.btn-save').contains('Clone').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).contains('TASK 9999', { matchCase: false }); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`).should('contain', '44 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(4)`).should('contain', '17'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 0); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).contains('TASK 9999', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '44 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(4)`).should('contain', '17'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 0); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).should('be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); it('should expect original, that was originally used to clone, to now be exist as that 2nd row in the grid', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '8899'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '33 days'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(4)`).should('contain', '51'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).should('not.be.empty'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '8899'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '33 days'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(4)`).should('contain', '51'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.fa.fa-check.checkmark-icon').should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).should('not.be.empty'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); }); it('should be able to clear the "Country of Origin" autocomplete field in the grid via the Clear button from the editor', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', 'Belgium'); // clear Country - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).click(); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).click(); cy.get('.autocomplete-container button.icon-clear').click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(10)`).should('contain', ''); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`).should('contain', ''); }); }); diff --git a/test/cypress/e2e/example31.cy.ts b/test/cypress/e2e/example31.cy.ts index 528e58d..d1dce80 100644 --- a/test/cypress/e2e/example31.cy.ts +++ b/test/cypress/e2e/example31.cy.ts @@ -661,10 +661,10 @@ describe('Example 31 - OData Grid using RxJS', () => { it('should be able to open "Gender" on the first row and expect to find 2 options the editor list (male, female) and expect male to be selected', () => { const expectedOptions = ['male', 'female']; - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`) .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) .should('contain', 'male') .dblclick(); // use double-click since the 1st click will be catch by the row selection because we changed row @@ -691,7 +691,7 @@ describe('Example 31 - OData Grid using RxJS', () => { it('should open the "Gender" editor on the first row and expect to find 1 more option the editor list (male, female, other)', () => { const expectedOptions = ['male', 'female', 'other']; - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(2)`) + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`) .should('contain', 'male') .click(); diff --git a/test/cypress/e2e/example32.cy.ts b/test/cypress/e2e/example32.cy.ts index e2f28fe..b6d775f 100644 --- a/test/cypress/e2e/example32.cy.ts +++ b/test/cypress/e2e/example32.cy.ts @@ -93,15 +93,15 @@ describe('Example 32 - Columns Resize by Content', () => { // Row index 3, 4 and 11 (last one will be on 2nd page) cy.get('input[type="checkbox"]:checked').should('have.length', 2); // 2x in current page and 1x in next page - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); }); it('should go to next page and expect 1 row selected in that second page', () => { cy.get('.icon-seek-next').click(); cy.get('input[type="checkbox"]:checked').should('have.length', 1); // only 1x row in page 2 - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) input[type="checkbox"]`).should('be.checked'); }); it('should click on "Select All" checkbox and expect all rows selected in current page', () => { diff --git a/test/cypress/e2e/example33.cy.ts b/test/cypress/e2e/example33.cy.ts index aebbc9a..bd5246d 100644 --- a/test/cypress/e2e/example33.cy.ts +++ b/test/cypress/e2e/example33.cy.ts @@ -19,7 +19,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over 1st row checkbox column and NOT expect any tooltip to show since it is disabled on that column', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).as('checkbox0-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).as('checkbox0-cell'); cy.get('@checkbox0-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('not.exist'); @@ -27,7 +27,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over Task 2 cell and expect async tooltip to show', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).as('task1-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).as('task1-cell'); cy.get('@task1-cell').should('contain', 'Task 2'); cy.get('@task1-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').contains('loading...'); @@ -46,7 +46,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over Task 6 cell and expect async tooltip to show', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).as('task6-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).as('task6-cell'); cy.get('@task6-cell').should('contain', 'Task 6'); cy.get('@task6-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').contains('loading...'); @@ -65,7 +65,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over Task 6 cell on "Start" column and expect a delayed tooltip opening via async process', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).as('start6-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).as('start6-cell'); cy.get('@start6-cell').contains(/\d{4}-\d{2}-\d{2}$/); // use regexp to make sure it's a number cy.get('@start6-cell').trigger('mouseover'); cy.get('.slick-custom-tooltip').should('not.exist'); @@ -90,7 +90,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over 6th row Description and expect full cell content to show in a tooltip because cell has ellipsis and is too long for the cell itself', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).as('desc6-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).as('desc6-cell'); cy.get('@desc6-cell').should('contain', 'This is a sample task description.'); cy.get('@desc6-cell').trigger('mouseover'); @@ -102,7 +102,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over 6th row Description 2 and expect regular tooltip title + concatenated full cell content when using "useRegularTooltipFromFormatterOnly: true"', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(4)`).as('desc2-5-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(4)`).as('desc2-5-cell'); cy.get('@desc2-5-cell').should('contain', 'This is a sample task description.'); cy.get('@desc2-5-cell').trigger('mouseover'); @@ -113,7 +113,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over 2nd row Duration and expect a custom tooltip shown with 4 label/value pairs displayed', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).as('duration2-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).as('duration2-cell'); cy.get('@duration2-cell').contains(/\d+\sday[s]?$/); cy.get('@duration2-cell').trigger('mouseover'); @@ -136,7 +136,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over % Complete cell of Task 6 and expect regular tooltip to show with content "x %" where x is a number', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(6)`).as('percentage-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(6)`).as('percentage-cell'); cy.get('@percentage-cell').find('.percent-complete-bar').should('exist'); cy.get('@percentage-cell').trigger('mouseover'); @@ -147,7 +147,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should mouse over Prerequisite cell of Task 6 and expect regular tooltip to show with content "Task 6, Task 5"', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(10)`).as('prereq-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(10)`).as('prereq-cell'); cy.get('@prereq-cell').should('contain', 'Task 6, Task 5'); cy.get('@prereq-cell').trigger('mouseover'); @@ -227,7 +227,7 @@ describe('Example 33 - Regular & Custom Tooltips', () => { }); it('should click Prerequisite editor of 1st row (Task 2) and expect Task1 & 2 to be selected in the multiple-select drop', () => { - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(10)`).as('prereq-cell'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(10)`).as('prereq-cell'); cy.get('@prereq-cell') .should('contain', 'Task 2, Task 1') .click(); diff --git a/test/cypress/e2e/example34.cy.ts b/test/cypress/e2e/example34.cy.ts index 0ed7da3..2a3d695 100644 --- a/test/cypress/e2e/example34.cy.ts +++ b/test/cypress/e2e/example34.cy.ts @@ -1,6 +1,6 @@ describe('Example 34 - Real-Time Trading Platform', () => { - const titles = ['Currency', 'Symbol', 'Market', 'Company', 'Type', 'Change', 'Price', 'Quantity', 'Amount', 'Price History', 'Execution Timestamp']; const GRID_ROW_HEIGHT = 35; + const titles = ['Currency', 'Symbol', 'Market', 'Company', 'Type', 'Change', 'Price', 'Quantity', 'Amount', 'Price History', 'Execution Timestamp']; it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/example34`); @@ -16,12 +16,12 @@ describe('Example 34 - Real-Time Trading Platform', () => { it('should check first 5 rows and expect certain data', () => { for (let i = 0; i < 5; i++) { - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(0)`).contains(/CAD|USD$/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(4)`).contains(/Buy|Sell$/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(5)`).contains(/\$\(?[0-9\.]*\)?/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(6)`).contains(/\$[0-9\.]*/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(7)`).contains(/\d$/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * i}px"] > .slick-cell:nth(8)`).contains(/\$[0-9\.]*/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(0)`).contains(/CAD|USD$/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(4)`).contains(/Buy|Sell$/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(5)`).contains(/\$\(?[0-9\.]*\)?/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(6)`).contains(/\$[0-9\.]*/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(7)`).contains(/\d$/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * i}px;"] > .slick-cell:nth(8)`).contains(/\$[0-9\.]*/); } }); @@ -52,12 +52,12 @@ describe('Example 34 - Real-Time Trading Platform', () => { cy.get('.slick-group-toggle-all') .click(); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: CAD'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(8)`).contains(/\$[0-9\,\.]*/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: CAD'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).contains(/\$[0-9\,\.]*/); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: USD'); - cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(8)`).contains(/\$[0-9\,\.]*/); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Currency: USD'); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(8)`).contains(/\$[0-9\,\.]*/); }); }); diff --git a/test/cypress/support/commands.ts b/test/cypress/support/commands.ts index e2ec9e1..8e8a4c1 100644 --- a/test/cypress/support/commands.ts +++ b/test/cypress/support/commands.ts @@ -21,38 +21,42 @@ // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) // // -// -- This is will overwrite an existing command -- +// -- This will overwrite an existing command -- import '@4tw/cypress-drag-drop'; +import { convertPosition } from './common'; declare global { // eslint-disable-next-line @typescript-eslint/no-namespace namespace Cypress { interface Chainable { // triggerHover: (elements: NodeListOf) => void; + convertPosition(viewport: string): Chainable | { x: string; y: string; }>; + getCell(row: number, col: number, viewport?: string, options?: { parentSelector?: string, rowHeight?: number; }): Chainable>; + getNthCell(row: number, nthCol: number, viewport?: string, options?: { parentSelector?: string, rowHeight?: number; }): Chainable>; saveLocalStorage: () => void; restoreLocalStorage: () => void; } } } -// Cypress.Commands.add('triggerHover', (elements: NodeListOf) => { -// elements.each((index, element) => { -// fireEvent(element, 'mouseover'); -// }); +// convert position like 'topLeft' to the object { x: 'left|right', y: 'top|bottom' } +Cypress.Commands.add('convertPosition', (viewport = 'topLeft') => cy.wrap(convertPosition(viewport))); -// function fireEvent(element, event) { -// if (element.fireEvent) { -// element.fireEvent('on' + event); -// } else { -// var evObj = document.createEvent('Events'); +Cypress.Commands.add('getCell', (row, col, viewport = 'topLeft', { parentSelector = '', rowHeight = 35 } = {}) => { + const position = convertPosition(viewport); + const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : ''; + const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : ''; -// evObj.initEvent(event, true, false); + return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell.l${col}.r${col}`); +}); -// element.dispatchEvent(evObj); -// } -// } -// }); +Cypress.Commands.add('getNthCell', (row, nthCol, viewport = 'topLeft', { parentSelector = '', rowHeight = 35 } = {}) => { + const position = convertPosition(viewport); + const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : ''; + const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : ''; + return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell:nth(${nthCol})`); +}); const LOCAL_STORAGE_MEMORY: any = {}; Cypress.Commands.add('saveLocalStorage', () => { @@ -66,4 +70,3 @@ Cypress.Commands.add('restoreLocalStorage', () => { localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]); }); }); - diff --git a/test/cypress/support/drag.ts b/test/cypress/support/drag.ts index 2068f32..ca28e66 100644 --- a/test/cypress/support/drag.ts +++ b/test/cypress/support/drag.ts @@ -5,22 +5,24 @@ declare global { namespace Cypress { interface Chainable { // triggerHover: (elements: NodeListOf) => void; - dragOutside(viewport?: string, ms?: number, px?: number, options?: { parentSelector?: string, scrollbarDimension?: number; }): Chainable; + dragOutside(viewport?: string, ms?: number, px?: number, options?: { parentSelector?: string, scrollbarDimension?: number; rowHeight?: number; }): Chainable; dragStart(options?: { cellWidth?: number; cellHeight?: number; }): Chainable; dragCell(addRow: number, addCell: number, options?: { cellWidth?: number; cellHeight?: number; }): Chainable; dragEnd(gridSelector?: string): Chainable; } } } - -Cypress.Commands.add('dragStart', { prevSubject: true }, (subject, { cellWidth = 90, cellHeight = 35 } = {}) => { - return cy.wrap(subject).click({ force: true }) +// @ts-ignore +Cypress.Commands.add('dragStart', { prevSubject: true }, (subject: HTMLElement, { cellWidth = 90, cellHeight = 35 } = {}) => { + return cy.wrap(subject) + .click({ force: true }) .trigger('mousedown', { which: 1 } as any, { force: true }) .trigger('mousemove', cellWidth / 3, cellHeight / 3); }); // use a different command name than 'drag' so that it doesn't conflict with the '@4tw/cypress-drag-drop' lib -Cypress.Commands.add('dragCell', { prevSubject: true }, (subject, addRow, addCell, { cellWidth = 90, cellHeight = 35 } = {}) => { +// @ts-ignore +Cypress.Commands.add('dragCell', { prevSubject: true }, (subject: HTMLElement, addRow: number, addCell: number, { cellWidth = 90, cellHeight = 35 } = {}) => { return cy.wrap(subject).trigger('mousemove', cellWidth * (addCell + 0.5), cellHeight * (addRow + 0.5), { force: true }); }); @@ -57,7 +59,7 @@ Cypress.Commands.add('dragEnd', { prevSubject: 'optional' }, (_subject, gridSele export function getScrollDistanceWhenDragOutsideGrid(selector: string, viewport: string, dragDirection: string, fromRow: number, fromCol: number, px = 140) { return (cy as any).convertPosition(viewport).then((_viewportPosition: { x: number; y: number; }) => { const viewportSelector = `${selector} .slick-viewport-${_viewportPosition.x}.slick-viewport-${_viewportPosition.y}`; - (cy as any).getCell(fromRow, fromCol, viewport, { parentSelector: selector }) + (cy as any).getNthCell(fromRow, fromCol, viewport, { parentSelector: selector }) .dragStart(); return cy.get(viewportSelector).then($viewport => { const scrollTopBefore = $viewport.scrollTop(); diff --git a/test/cypress/tsconfig.json b/test/cypress/tsconfig.json index 8e43648..f5cccc4 100644 --- a/test/cypress/tsconfig.json +++ b/test/cypress/tsconfig.json @@ -3,7 +3,7 @@ "target": "es5", "allowSyntheticDefaultImports": true, "esModuleInterop": true, - "lib": ["es5", "dom"], + "lib": ["es2021", "dom"], "types": ["cypress", "node"], "jsx": "preserve" }, diff --git a/yarn.lock b/yarn.lock index ad79f4e..6926dd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -329,13 +329,20 @@ dependencies: "@babel/helper-plugin-utils" "^7.20.2" -"@babel/runtime@^7.12.5", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.9.2": version "7.22.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb" integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ== dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d" + integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.21.9", "@babel/template@^7.3.3": version "7.21.9" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb" @@ -1122,121 +1129,124 @@ dependencies: "@sinonjs/commons" "^3.0.0" -"@slickgrid-universal/binding@~3.7.0": - version "3.7.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-3.7.0.tgz#5cc5b21ae90d2f533ae72dbaebcf3f297624e74d" - integrity sha512-qKCYejhhgY14E+yMdvkrcPppdjL1CEp9pff6tONhUzrm+of40fljtESF6gf4t20GgePiPDXwxdmxdrUcZYYPdg== +"@slickgrid-universal/binding@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-4.0.2.tgz#6de082a6ca664bd9a327df42dc4982266f9c3d6c" + integrity sha512-h7QgSqXvIbPpFE9S1iTV3k0j4KjPexNrEfzhi2FQbvzFfsi0Urge62eBb2r6BmG6EUjpRExBshb2IO/qhKJBcg== -"@slickgrid-universal/common@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-3.7.2.tgz#b4b741a1f34fa4e4141713bd1cc80e6e5fc3d378" - integrity sha512-XUPGNzALYTEbzh/Xz+nZY+flDOGfDsMfAxPWpmLm/SlqQ8mk2BZjb2qY/+PPtD+OwfXNm9jX6tgOeKbACJ0uRw== +"@slickgrid-universal/common@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-4.0.2.tgz#f6334d5023068098888bca200df9761bf69fc3c9" + integrity sha512-u89Q7kBo/L+0fkmP23efeaWgtcXp4GiAFhjLj+DLyRKFSmAOp1aPaBZcfXxYIW9SwKZyQB+hPuWpo46suoxMlg== dependencies: - "@slickgrid-universal/event-pub-sub" "~3.7.0" - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/binding" "~4.0.2" + "@slickgrid-universal/event-pub-sub" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" autocompleter "^9.1.2" dequal "^2.0.3" dompurify "^3.0.6" flatpickr "^4.6.13" moment-mini "^2.29.4" - multiple-select-vanilla "^0.6.3" - slickgrid "^4.1.7" + multiple-select-vanilla "^1.1.1" sortablejs "^1.15.1" un-flatten-tree "^2.0.12" -"@slickgrid-universal/composite-editor-component@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-3.7.2.tgz#dd73539b131a684d498dc1378ef9bf926ce7dbd1" - integrity sha512-CQ0tLRO+k7Nxqh37UP5Hw/CEg0gwvpsNPh0wv0AOzd5Ve5ujNepLCXQ+0cNhFj8dA5NqydGlYqJYTDypNMde2g== +"@slickgrid-universal/composite-editor-component@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-4.0.2.tgz#db582fb8a7b3e5c768ed279a76965f9c6825f241" + integrity sha512-SX4QDan1QQYSyBYiBqb8CZ7pB9cKwkPeWEVS2cybcZkyQh876bBg9Ah3Ouc4xwjNRIdHIXlLuXcQyEMt5m1bZg== dependencies: - "@slickgrid-universal/common" "~3.7.2" - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/binding" "~4.0.2" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" -"@slickgrid-universal/custom-footer-component@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-3.7.2.tgz#187f1f5f232f9f37300ddf3dba8fd26a5f5cc11b" - integrity sha512-uz9KmgGLfvKD73NIUghUOCsVO8l1QBoFumsHSK1MkV6fd4mrj8tUf+ULIGV4mjOO7yCWvQvKu2z9gZqIB6beyg== +"@slickgrid-universal/custom-footer-component@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-4.0.2.tgz#c2d7133b1a12ccccc7936f6fdab67b8e92063689" + integrity sha512-noik0HvR7sxHs5xgkWo1MtBuVwTaQg2MLOX5Unx2hhC366QEbPlVOK56DoU3wAgzQldyM7KyL2F89dkzcuNF5w== dependencies: - "@slickgrid-universal/binding" "~3.7.0" - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/binding" "~4.0.2" + "@slickgrid-universal/common" "~4.0.2" moment-mini "^2.29.4" -"@slickgrid-universal/custom-tooltip-plugin@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-3.7.2.tgz#c15220d5492326d9930d16074eab6abca20f1695" - integrity sha512-qn8Jtd4fSqjbKk5/o8Q3eDzxRN+xf2lpjoanyUhNeHRsDjKqKTWbDy/8a6LUYwZEHqmg9XvQTe2Ej01My+9aIg== +"@slickgrid-universal/custom-tooltip-plugin@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-4.0.2.tgz#07b6ea43967c7f970ed6491aa4a65361f5476753" + integrity sha512-wTvCtQgvxdS0xcP0SRry4y8z8oDJxWwVF56b3Rd0sTTHmVZyTPj3pDowHdzzrekEe1JgVCbsSvU3y5URyWXx1w== dependencies: - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" dompurify "^3.0.6" -"@slickgrid-universal/empty-warning-component@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-3.7.2.tgz#020be011627fb31c85eb3679b8e465a4a2c7ff1d" - integrity sha512-kRWphQFmiBnOnZiqBrfAXXEr+g0lkovXsudrRZDJKC5Qi26/EmZ5GKyQqfqUOaZIAxn3obwXwKqQ+f//Zuyc8Q== +"@slickgrid-universal/empty-warning-component@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-4.0.2.tgz#ddf96ed86fdb817650335e32fa83b1fe4b779a1e" + integrity sha512-v6ckzlcjgd8YAEJ0wQhZof4/g3B2KIZIORHSGTYKsPM+xW1kOtcPbEuZmpCu8fvBEQ0RaQ0UBnyjaooLCQ5ygQ== dependencies: - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/common" "~4.0.2" -"@slickgrid-universal/event-pub-sub@~3.7.0": - version "3.7.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/event-pub-sub/-/event-pub-sub-3.7.0.tgz#3bbae10ecf8a58c0b2e61cc219ca775179a8f6f8" - integrity sha512-Ojm7A2PpshrCw2hZx1FLHFuFSr33H/z8yiR4pl8Z1YpsgGlf9xYXkn6Z3P1g8/tHi7vk0P4qd8x62Wa2tkOyAg== +"@slickgrid-universal/event-pub-sub@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/event-pub-sub/-/event-pub-sub-4.0.2.tgz#910c71b89b4921c02fcce533eee55ad7b8a9c5be" + integrity sha512-xngpqOvj5xld0IqWS4mSj8h/IHXrGNPDYYo0vdn9pvxy2mgNZyX9Evkby4u4W/WnzzdL3kBM3fBdodqN8AiulQ== dependencies: - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/utils" "~4.0.2" -"@slickgrid-universal/excel-export@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-3.7.2.tgz#c67c4d9d410b9bdf1c7dca170b48a1f5145a456d" - integrity sha512-8I2OXvtibOVXENYCxho1B+qTjNXGzJ/8co/PcC8CslvDDcXqIgdIIv6UVsMNv9WQ8Cw2ysjoZNBToSFIxyvCWw== +"@slickgrid-universal/excel-export@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-4.0.2.tgz#49d539a08ce1b670fa00e764007a9ad6b89a2898" + integrity sha512-QF+4FO9Xo5Qlb23Vg9mo+4ZbgpU+4n+DaZz3mxxv5f29JjhTmEPu6NsPeFoaGcYBIgYBwl75MnIwEaCnFM6maA== dependencies: - "@slickgrid-universal/common" "~3.7.2" - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" excel-builder-webpacker "^2.1.8" moment-mini "^2.29.4" -"@slickgrid-universal/graphql@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-3.7.2.tgz#37635bf27eb0fffdf833e3cb17251ad0fd581c61" - integrity sha512-aU41zTQ85FVovmxprIFfLF4s0WYL14oWI5spjtuSEKtJrgowUdbV+Au2jIQNzViaPIMAM1NQO7YK4DZL4julZw== +"@slickgrid-universal/graphql@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-4.0.2.tgz#2dcf475ad6fb21094baf98450ed56a1b47d71a9f" + integrity sha512-U2KAvqJT4hk/ZVbEpmNtySrOilHeDfoSwstkmae31cqR+FCxwS/J8NGlNMktMTXLhZKguhIrUEyU+20BnIYB4A== dependencies: - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" -"@slickgrid-universal/odata@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-3.7.2.tgz#52bb1dbcb88895e16855d6b94e8b6d0e7a6482df" - integrity sha512-nDOwbw7jKvBmm3fw/RCtGFWcvjOtelyyN91tIoWOuv71z5HMi8D/GMSG4BDqlVi/0x+icPFRSB6pFAnVxX3d7Q== +"@slickgrid-universal/odata@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-4.0.2.tgz#0dcf0a7b41333935e6369a631d3513b89b75aa50" + integrity sha512-BMld+WbV668OhcOlDjwD69yZCMXFBAViW/SU/o/TbnQFDTCv4/wKTAZuTVL+Ai6IiodI4qldOrDJ+Fm2xfcV/A== dependencies: - "@slickgrid-universal/common" "~3.7.2" - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" -"@slickgrid-universal/pagination-component@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-3.7.2.tgz#9756aaacee7b322c8443f8d3b266fd398fa303ee" - integrity sha512-ljj8l9pG9vf1xY1WfW5ZIdutPW/0QZ7gDC5VdSS0D6SUeQbf/RSihpH+wGx+H2stUOTb1e4oH5T4N4xw9WugYQ== +"@slickgrid-universal/pagination-component@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-4.0.2.tgz#0ae28cb247ae60339582a9fc8313877901ffd0ba" + integrity sha512-JDEMAILpLENxNxA4EMnAieSKf19hiyrXEJUPS3KM+rImNS5isu2Hgo4t/BfWvU3VGIA06w20Evrz1KB/kUXuow== dependencies: - "@slickgrid-universal/binding" "~3.7.0" - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/binding" "~4.0.2" + "@slickgrid-universal/common" "~4.0.2" -"@slickgrid-universal/rxjs-observable@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-3.7.2.tgz#71ecf7355145f781fabbba45a7f570972e908b6b" - integrity sha512-arWD2lTW5kS3/7/jElYZ+iP4mfmplKHSTm4l+4oJnIvRbplbLUc/+f2R9+/PNqjirA8bKMAcQnrziOLbvOASIg== +"@slickgrid-universal/rxjs-observable@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-4.0.2.tgz#2f91a41db73e7831848993767643f9357cfa16bd" + integrity sha512-wjGLB8ZVh8lwDM6HbtHgyD6SX6YIndPcJ9nwx76zf+nqUl2YFYNQrv41YpS8M1vXqvw0nUBw9y65vZu+5GRQHQ== dependencies: - "@slickgrid-universal/common" "~3.7.2" + "@slickgrid-universal/common" "~4.0.2" rxjs "^7.8.1" -"@slickgrid-universal/text-export@~3.7.2": - version "3.7.2" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-3.7.2.tgz#283dc3a03b48d6853b79adf71811f86d7cf2d93f" - integrity sha512-JyeYZfYzzLGos7l8MtTPqSA06WtVUAlFr/X1AZ3wewOSWYzhAOFupMsyqkGOexnVqhaTlKoN5FgfQXEq9Ut5ZA== +"@slickgrid-universal/text-export@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-4.0.2.tgz#a241122984d9a45a12e62c6eb374bae1d9763105" + integrity sha512-glTVyOusBHnk9/wINf/NJ08MG+V8G+Gz/f38wD0g3lpI97FPbbUwQIlWsgpMnMcMCHPsw1kzFTKsnmyBFJnIIg== dependencies: - "@slickgrid-universal/common" "~3.7.2" - "@slickgrid-universal/utils" "~3.7.0" + "@slickgrid-universal/common" "~4.0.2" + "@slickgrid-universal/utils" "~4.0.2" text-encoding-utf-8 "^1.0.2" -"@slickgrid-universal/utils@~3.7.0": - version "3.7.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/utils/-/utils-3.7.0.tgz#0aad56219c4118eae3990a26c4d9fb2a93bcd5ee" - integrity sha512-Hy04lEr4p1HU3ew0OLgJElrCX5gC9nGbnglrXDsQUtJuB7l3pUZ52OEK7pVX8i9UZn5brVWcjw5kRRq8qeWaUw== +"@slickgrid-universal/utils@~4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/utils/-/utils-4.0.2.tgz#4e8ad4f22b60b29f50614f3e32a6736217b5ee11" + integrity sha512-uFvB5zPgp/UitDo7Rq/2uJotzZcv+3clwuEBWfX+6A1GhI+DcVGoAeINoxNZFRo1wi3B06gIM6I9M/JtZdFrNg== "@szmarczak/http-timer@^5.0.1": version "5.0.1" @@ -1590,10 +1600,10 @@ "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^18.2.42": - version "18.2.42" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7" - integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA== +"@types/react@^18.2.44": + version "18.2.44" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.44.tgz#13104f12d30545f4cea11b8d81809bec316fe175" + integrity sha512-i7rRdWr8XsAdqVXU05NSlash6DapNLVoNnsfWfOYN2BUIzkH2YgagIeOuUK1fNmJ08iGHpt2enwi0beaBR+ldA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -1679,10 +1689,10 @@ resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311" integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g== -"@types/trusted-types@^2.0.6": - version "2.0.6" - resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.6.tgz#d12451beaeb9c3838f12024580dc500b7e88b0ad" - integrity sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg== +"@types/trusted-types@^2.0.7": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" + integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== "@types/webpack@^5.28.5": version "5.28.5" @@ -1719,16 +1729,16 @@ dependencies: "@types/node" "*" -"@typescript-eslint/eslint-plugin@^6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.2.tgz#2e03506c5362a65e43cb132c37c9ce2d3cb51470" - integrity sha512-3+9OGAWHhk4O1LlcwLBONbdXsAhLjyCFogJY/cWy2lxdVJ2JrcTF2pTGMaLl2AE7U1l31n8Py4a8bx5DLf/0dQ== +"@typescript-eslint/eslint-plugin@^6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.14.0.tgz#fc1ab5f23618ba590c87e8226ff07a760be3dd7b" + integrity sha512-1ZJBykBCXaSHG94vMMKmiHoL0MhNHKSVlcHVYZNw+BKxufhqQVTOawNpwwI1P5nIFZ/4jLVop0mcY6mJJDFNaw== dependencies: "@eslint-community/regexpp" "^4.5.1" - "@typescript-eslint/scope-manager" "6.13.2" - "@typescript-eslint/type-utils" "6.13.2" - "@typescript-eslint/utils" "6.13.2" - "@typescript-eslint/visitor-keys" "6.13.2" + "@typescript-eslint/scope-manager" "6.14.0" + "@typescript-eslint/type-utils" "6.14.0" + "@typescript-eslint/utils" "6.14.0" + "@typescript-eslint/visitor-keys" "6.14.0" debug "^4.3.4" graphemer "^1.4.0" ignore "^5.2.4" @@ -1736,72 +1746,72 @@ semver "^7.5.4" ts-api-utils "^1.0.1" -"@typescript-eslint/parser@^6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.13.2.tgz#390b79cc9a57a5f904d197a201cc4b6bc4f9afb9" - integrity sha512-MUkcC+7Wt/QOGeVlM8aGGJZy1XV5YKjTpq9jK6r6/iLsGXhBVaGP5N0UYvFsu9BFlSpwY9kMretzdBH01rkRXg== +"@typescript-eslint/parser@^6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.14.0.tgz#a2d6a732e0d2b95c73f6a26ae7362877cc1b4212" + integrity sha512-QjToC14CKacd4Pa7JK4GeB/vHmWFJckec49FR4hmIRf97+KXole0T97xxu9IFiPxVQ1DBWrQ5wreLwAGwWAVQA== dependencies: - "@typescript-eslint/scope-manager" "6.13.2" - "@typescript-eslint/types" "6.13.2" - "@typescript-eslint/typescript-estree" "6.13.2" - "@typescript-eslint/visitor-keys" "6.13.2" + "@typescript-eslint/scope-manager" "6.14.0" + "@typescript-eslint/types" "6.14.0" + "@typescript-eslint/typescript-estree" "6.14.0" + "@typescript-eslint/visitor-keys" "6.14.0" debug "^4.3.4" -"@typescript-eslint/scope-manager@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.13.2.tgz#5fa4e4adace028dafac212c770640b94e7b61052" - integrity sha512-CXQA0xo7z6x13FeDYCgBkjWzNqzBn8RXaE3QVQVIUm74fWJLkJkaHmHdKStrxQllGh6Q4eUGyNpMe0b1hMkXFA== +"@typescript-eslint/scope-manager@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.14.0.tgz#53d24363fdb5ee0d1d8cda4ed5e5321272ab3d48" + integrity sha512-VT7CFWHbZipPncAZtuALr9y3EuzY1b1t1AEkIq2bTXUPKw+pHoXflGNG5L+Gv6nKul1cz1VH8fz16IThIU0tdg== dependencies: - "@typescript-eslint/types" "6.13.2" - "@typescript-eslint/visitor-keys" "6.13.2" + "@typescript-eslint/types" "6.14.0" + "@typescript-eslint/visitor-keys" "6.14.0" -"@typescript-eslint/type-utils@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.13.2.tgz#ebec2da14a6bb7122e0fd31eea72a382c39c6102" - integrity sha512-Qr6ssS1GFongzH2qfnWKkAQmMUyZSyOr0W54nZNU1MDfo+U4Mv3XveeLZzadc/yq8iYhQZHYT+eoXJqnACM1tw== +"@typescript-eslint/type-utils@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.14.0.tgz#ac9cb5ba0615c837f1a6b172feeb273d36e4f8af" + integrity sha512-x6OC9Q7HfYKqjnuNu5a7kffIYs3No30isapRBJl1iCHLitD8O0lFbRcVGiOcuyN837fqXzPZ1NS10maQzZMKqw== dependencies: - "@typescript-eslint/typescript-estree" "6.13.2" - "@typescript-eslint/utils" "6.13.2" + "@typescript-eslint/typescript-estree" "6.14.0" + "@typescript-eslint/utils" "6.14.0" debug "^4.3.4" ts-api-utils "^1.0.1" -"@typescript-eslint/types@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.13.2.tgz#c044aac24c2f6cefb8e921e397acad5417dd0ae6" - integrity sha512-7sxbQ+EMRubQc3wTfTsycgYpSujyVbI1xw+3UMRUcrhSy+pN09y/lWzeKDbvhoqcRbHdc+APLs/PWYi/cisLPg== +"@typescript-eslint/types@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.14.0.tgz#935307f7a931016b7a5eb25d494ea3e1f613e929" + integrity sha512-uty9H2K4Xs8E47z3SnXEPRNDfsis8JO27amp2GNCnzGETEW3yTqEIVg5+AI7U276oGF/tw6ZA+UesxeQ104ceA== -"@typescript-eslint/typescript-estree@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.2.tgz#ae556ee154c1acf025b48d37c3ef95a1d55da258" - integrity sha512-SuD8YLQv6WHnOEtKv8D6HZUzOub855cfPnPMKvdM/Bh1plv1f7Q/0iFUDLKKlxHcEstQnaUU4QZskgQq74t+3w== +"@typescript-eslint/typescript-estree@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.14.0.tgz#90c7ddd45cd22139adf3d4577580d04c9189ac13" + integrity sha512-yPkaLwK0yH2mZKFE/bXkPAkkFgOv15GJAUzgUVonAbv0Hr4PK/N2yaA/4XQbTZQdygiDkpt5DkxPELqHguNvyw== dependencies: - "@typescript-eslint/types" "6.13.2" - "@typescript-eslint/visitor-keys" "6.13.2" + "@typescript-eslint/types" "6.14.0" + "@typescript-eslint/visitor-keys" "6.14.0" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" semver "^7.5.4" ts-api-utils "^1.0.1" -"@typescript-eslint/utils@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.13.2.tgz#8eb89e53adc6d703a879b131e528807245486f89" - integrity sha512-b9Ptq4eAZUym4idijCRzl61oPCwwREcfDI8xGk751Vhzig5fFZR9CyzDz4Sp/nxSLBYxUPyh4QdIDqWykFhNmQ== +"@typescript-eslint/utils@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.14.0.tgz#856a9e274367d99ffbd39c48128b93a86c4261e3" + integrity sha512-XwRTnbvRr7Ey9a1NT6jqdKX8y/atWG+8fAIu3z73HSP8h06i3r/ClMhmaF/RGWGW1tHJEwij1uEg2GbEmPYvYg== dependencies: "@eslint-community/eslint-utils" "^4.4.0" "@types/json-schema" "^7.0.12" "@types/semver" "^7.5.0" - "@typescript-eslint/scope-manager" "6.13.2" - "@typescript-eslint/types" "6.13.2" - "@typescript-eslint/typescript-estree" "6.13.2" + "@typescript-eslint/scope-manager" "6.14.0" + "@typescript-eslint/types" "6.14.0" + "@typescript-eslint/typescript-estree" "6.14.0" semver "^7.5.4" -"@typescript-eslint/visitor-keys@6.13.2": - version "6.13.2" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.2.tgz#e0a4a80cf842bb08e6127b903284166ac4a5594c" - integrity sha512-OGznFs0eAQXJsp+xSd6k/O1UbFi/K/L7WjqeRoFE7vadjAF9y0uppXhYNQNEqygjou782maGClOoZwPqF0Drlw== +"@typescript-eslint/visitor-keys@6.14.0": + version "6.14.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.14.0.tgz#1d1d486581819287de824a56c22f32543561138e" + integrity sha512-fB5cw6GRhJUz03MrROVuj5Zm/Q+XWlVdIsFj+Zb1Hvqouc8t+XP2H5y53QYU/MGtd2dPg6/vJJlhoX3xc2ehfw== dependencies: - "@typescript-eslint/types" "6.13.2" + "@typescript-eslint/types" "6.14.0" eslint-visitor-keys "^3.4.1" "@ungap/structured-clone@^1.2.0": @@ -5412,12 +5422,12 @@ i18next-xhr-backend@*: dependencies: "@babel/runtime" "^7.5.5" -i18next@>=22.5.0: - version "22.5.0" - resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.5.0.tgz#16d98eba7c748ab183a36505046b5b91f87e989b" - integrity sha512-sqWuJFj+wJAKQP2qBQ+b7STzxZNUmnSxrehBCCj9vDOW9RDYPfqCaK1Hbh2frNYQuPziz6O2CGoJPwtzY3vAYA== +i18next@^23.7.9: + version "23.7.9" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.9.tgz#1c42e7467ac5ee21ca830a0a4d3f9595cd826498" + integrity sha512-wturtxTfJLJdLzHhyfxXo2l9Cbu2Iz4wF4065oWThPvdFJMUUG3fhXD3BLCHgrv4VxfScORq0i9sfCdjVPbgiw== dependencies: - "@babel/runtime" "^7.20.6" + "@babel/runtime" "^7.23.2" iconv-lite@0.4.24, iconv-lite@^0.4.24: version "0.4.24" @@ -7096,12 +7106,12 @@ multicast-dns@^7.2.5: dns-packet "^5.2.2" thunky "^1.0.2" -multiple-select-vanilla@^0.6.3: - version "0.6.3" - resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-0.6.3.tgz#1ed184f8e310245082352638bad8b6b27092e970" - integrity sha512-vgLylsAMjrncodvoWu/x3i6o4f4i8hiyTezJ66HRCZLXVZPDO4hy4nSUZ9RNSXxeuDtkw41Ecl247Paf6x/zyg== +multiple-select-vanilla@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-1.1.1.tgz#0a0cd7357abaee01c6ee4db4b4d533b9c3d4eb3d" + integrity sha512-bSRyHinSNnTOAirlTxdXYor1c4yUYlQPHmODowq+r6S56bVe5vn2wtnZ/WYi+kBiolMb8LsYw4d9ubDPwhwgTw== dependencies: - "@types/trusted-types" "^2.0.6" + "@types/trusted-types" "^2.0.7" mute-stream@1.0.0: version "1.0.0" @@ -8051,12 +8061,12 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-i18next@^12.3.1: - version "12.3.1" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.3.1.tgz#30134a41a2a71c61dc69c6383504929aed1c99e7" - integrity sha512-5v8E2XjZDFzK7K87eSwC7AJcAkcLt5xYZ4+yTPDAW1i7C93oOY1dnr4BaQM7un4Hm+GmghuiPvevWwlca5PwDA== +react-i18next@^13.5.0: + version "13.5.0" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.5.0.tgz#44198f747628267a115c565f0c736a50a76b1ab0" + integrity sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA== dependencies: - "@babel/runtime" "^7.20.6" + "@babel/runtime" "^7.22.5" html-parse-stringify "^3.0.1" react-is@^17.0.1: @@ -8766,13 +8776,6 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" -slickgrid@^4.1.7: - version "4.1.7" - resolved "https://registry.yarnpkg.com/slickgrid/-/slickgrid-4.1.7.tgz#743149e1cefcdb0cd6fba61e3fc7e31b3193dba8" - integrity sha512-dWaJjOlOdBXjQN/ivwzTGlF+Xx3ktKNK+CxejnsMXUybgUj32vqAjwezeTYkiDZDr5K0MMPMXvNysfIhjn79KA== - dependencies: - sortablejs "^1.15.0" - smart-buffer@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae" @@ -8804,11 +8807,6 @@ socks@^2.7.1: ip "^2.0.0" smart-buffer "^4.2.0" -sortablejs@^1.15.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a" - integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w== - sortablejs@^1.15.1: version "1.15.1" resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.1.tgz#9a35f52cdff449fb42ea8ecf222f3468d76e0a47" @@ -9461,10 +9459,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typescript@^5.2.2: - version "5.2.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" - integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== +typescript@^5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37" + integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw== uglify-js@^3.1.4: version "3.17.4"