From 891b61a0b1f4c836ad7278f1c288010539e55021 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 27 Nov 2023 12:13:00 -0500 Subject: [PATCH 1/3] feat: remove unnecessary Formatters, replace by `cssClass` --- .../src/examples/example11.ts | 2 +- .../src/examples/example12.ts | 2 +- .../src/examples/example14.ts | 2 +- .../src/examples/icons.html | 2 ++ .../slickCellExcelCopyManager.spec.ts | 7 +++--- .../__tests__/slickContextMenu.spec.ts | 5 ++-- .../__tests__/boldFormatter.spec.ts | 16 ------------- .../__tests__/uppercaseFormatter.spec.ts | 24 ------------------- .../common/src/formatters/boldFormatter.ts | 6 ----- .../common/src/formatters/formatters.index.ts | 10 +------- packages/common/src/formatters/index.ts | 2 -- .../src/formatters/multipleFormatter.ts | 4 ++-- .../src/formatters/uppercaseFormatter.ts | 10 -------- packages/common/src/styles/extra-styling.scss | 7 +++--- packages/excel-export/src/excelUtils.spec.ts | 12 ++++++---- 15 files changed, 25 insertions(+), 86 deletions(-) delete mode 100644 packages/common/src/formatters/__tests__/boldFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/uppercaseFormatter.spec.ts delete mode 100644 packages/common/src/formatters/boldFormatter.ts delete mode 100644 packages/common/src/formatters/uppercaseFormatter.ts diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts index 58af43c43..8012c03fb 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts @@ -136,9 +136,9 @@ export default class Example11 { this.columnDefinitions = [ { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 80, + cssClass: 'text-bold text-uppercase', editor: { model: Editors.text, massUpdate: true, required: true, alwaysSaveOnEnterKey: true, validator: myCustomTitleValidator, }, filterable: true, - formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] }, }, { id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, minWidth: 80, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index da3060048..36903193a 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts @@ -143,9 +143,9 @@ export default class Example12 { this.columnDefinitions = [ { id: 'title', name: ' Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 75, + cssClass: 'text-bold text-uppercase', filterable: true, columnGroup: 'Common Factor', filter: { model: Filters.compoundInputText }, - formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] }, editor: { model: Editors.longText, massUpdate: false, required: true, alwaysSaveOnEnterKey: true, maxLength: 12, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts index 97d1716fa..3bb483e7e 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -135,6 +135,7 @@ export default class Example14 { this.columnDefinitions = [ { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, minWidth: 65, + cssClass: 'text-bold text-uppercase', // you can adjust the resize calculation via multiple options resizeExtraWidthPadding: 4, resizeCharWidthInPx: 7.6, @@ -142,7 +143,6 @@ export default class Example14 { resizeMaxWidthThreshold: 200, filterable: true, columnGroup: 'Common Factor', filter: { model: Filters.compoundInputText }, - formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] }, editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true, maxLength: 12, diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.html b/examples/vite-demo-vanilla-bundle/src/examples/icons.html index da8251b53..92bde6db8 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/vite-demo-vanilla-bundle/src/examples/icons.html @@ -62,6 +62,8 @@
text-italic
+
text-bold +
diff --git a/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts b/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts index 168378106..3055ec67a 100644 --- a/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts @@ -59,6 +59,7 @@ describe('CellExcelCopyManager', () => { const mockEventCallback = () => { }; const mockSelectRange = [{ fromCell: 1, fromRow: 1, toCell: 1, toRow: 1 }] as SlickRange[]; const mockSelectRangeEvent = { ranges: mockSelectRange }; + const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : null as any; let plugin: SlickCellExcelCopyManager; const gridOptionsMock = { @@ -306,13 +307,12 @@ describe('CellExcelCopyManager', () => { it('should expect a formatted output after calling "dataItemColumnValueExtractor" callback', () => { plugin.init(gridStub); - const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: Formatters.bold }); + const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: myBoldFormatter }); expect(output).toBe('John'); }); it('should expect a sanitized formatted and empty output after calling "dataItemColumnValueExtractor" callback', () => { gridOptionsMock.textExportOptions = { sanitizeDataExport: true }; - const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : null as any; jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock); plugin.init(gridStub); @@ -326,13 +326,12 @@ describe('CellExcelCopyManager', () => { jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock); plugin.init(gridStub); - const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: Formatters.bold }); + const output = plugin.addonOptions!.dataItemColumnValueExtractor!({ firstName: 'John', lastName: 'Doe' }, { id: 'firstName', field: 'firstName', exportWithFormatter: true, formatter: myBoldFormatter }); expect(output).toBe('John'); }); it('should expect a sanitized formatted output, from a Custom Formatter, after calling "dataItemColumnValueExtractor" callback', () => { - const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : ''; gridOptionsMock.textExportOptions = { sanitizeDataExport: true }; jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock); plugin.init(gridStub); diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts index 16382532b..9308d9a86 100644 --- a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts +++ b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts @@ -3,7 +3,7 @@ import { deepCopy } from '@slickgrid-universal/utils'; import { type SlickDataView, SlickEvent, SlickEventData, SlickGrid } from '../../core/index'; import { DelimiterType, FileType } from '../../enums/index'; -import type { ContextMenu, Column, ElementPosition, GridOption, MenuCommandItem, MenuOptionItem } from '../../interfaces/index'; +import type { ContextMenu, Column, ElementPosition, GridOption, MenuCommandItem, MenuOptionItem, Formatter } from '../../interfaces/index'; import { BackendUtilityService, ExcelExportService, SharedService, TextExportService, TreeDataService, } from '../../services/index'; import { ExtensionUtility } from '../../extensions/extensionUtility'; import { Formatters } from '../../formatters'; @@ -159,6 +159,7 @@ describe('ContextMenu Plugin', () => { let translateService: TranslateServiceStub; let plugin: SlickContextMenu; let sharedService: SharedService; + const myUppercaseFormatter: Formatter = (_row, _cell, value) => value !== undefined ? { text: String(value).toUpperCase() } : ''; beforeEach(() => { backendUtilityService = new BackendUtilityService(); @@ -827,7 +828,7 @@ describe('ContextMenu Plugin', () => { it('should call "copyToClipboard", WITH export formatter, when the command triggered is "copy"', () => { const copyGridOptionsMock = { ...gridOptionsMock, enableExcelExport: false, enableTextExport: false, excelExportOptions: { exportWithFormatter: true } } as GridOption; - const columnMock = { id: 'firstName', name: 'First Name', field: 'firstName', formatter: Formatters.uppercase } as Column; + const columnMock = { id: 'firstName', name: 'First Name', field: 'firstName', formatter: myUppercaseFormatter } as Column; const dataContextMock = { id: 123, firstName: 'John', lastName: 'Doe', age: 50 }; jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(copyGridOptionsMock); const execSpy = jest.spyOn(window.document, 'execCommand'); diff --git a/packages/common/src/formatters/__tests__/boldFormatter.spec.ts b/packages/common/src/formatters/__tests__/boldFormatter.spec.ts deleted file mode 100644 index 5c42740cf..000000000 --- a/packages/common/src/formatters/__tests__/boldFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { boldFormatter } from '../boldFormatter'; - -describe('the Bold Formatter', () => { - it('should return an empty string when no value is passed', () => { - const value = null; - const result = boldFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return a bold html formatted string when value is filled', () => { - const value = 'john'; - const result = boldFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(`${value}`); - }); -}); diff --git a/packages/common/src/formatters/__tests__/uppercaseFormatter.spec.ts b/packages/common/src/formatters/__tests__/uppercaseFormatter.spec.ts deleted file mode 100644 index 3265d2808..000000000 --- a/packages/common/src/formatters/__tests__/uppercaseFormatter.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { uppercaseFormatter } from '../uppercaseFormatter'; - -describe('the Uppercase Formatter', () => { - it('should return an empty string when no value is passed', () => { - const output = uppercaseFormatter(1, 1, '', {} as Column, {}, {} as any); - expect(output).toBe(''); - }); - - it('should return a string all in uppercase', () => { - const output = uppercaseFormatter(1, 1, 'hello', {} as Column, {}, {} as any); - expect(output).toBe('HELLO'); - }); - - it('should return a number as a string', () => { - const output = uppercaseFormatter(1, 1, 99, {} as Column, {}, {} as any); - expect(output).toBe('99'); - }); - - it('should return a boolean as a string all in uppercase', () => { - const output = uppercaseFormatter(1, 1, false, {} as Column, {}, {} as any); - expect(output).toBe('FALSE'); - }); -}); diff --git a/packages/common/src/formatters/boldFormatter.ts b/packages/common/src/formatters/boldFormatter.ts deleted file mode 100644 index 10c99e840..000000000 --- a/packages/common/src/formatters/boldFormatter.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { Formatter } from './../interfaces/index'; - -/** show value in bold font weight */ -export const boldFormatter: Formatter = (_row, _cell, value) => { - return value ? `${value}` : ''; -}; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index 429743aca..c9b5d4c4e 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -3,7 +3,6 @@ import { getAssociatedDateFormatter } from './formatterUtilities'; import { alignRightFormatter } from './alignRightFormatter'; import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; import { arrayToCsvFormatter } from './arrayToCsvFormatter'; -import { boldFormatter } from './boldFormatter'; import { centerFormatter } from './centerFormatter'; import { checkboxFormatter } from './checkboxFormatter'; import { checkmarkFormatter } from './checkmarkFormatter'; @@ -37,7 +36,6 @@ import { treeExportFormatter } from './treeExportFormatter'; import { treeFormatter } from './treeFormatter'; import { treeParseTotalsFormatter } from './treeParseTotalsFormatter'; import { translateBooleanFormatter } from './translateBooleanFormatter'; -import { uppercaseFormatter } from './uppercaseFormatter'; import { yesNoFormatter } from './yesNoFormatter'; /** Provides a list of different Formatters that will change the cell value displayed in the UI */ @@ -59,9 +57,6 @@ export const Formatters = { /** Takes an array of string and converts it to a comma delimited string */ arrayToCsv: arrayToCsvFormatter, - /** show value in bold font weight */ - bold: boldFormatter, - /** Center a text value horizontally */ center: centerFormatter, @@ -254,7 +249,7 @@ export const Formatters = { * You can pipe multiple formatters (executed in sequence), use params to pass the list of formatters. * Requires to pass an array of "formatters" in the column definition the generic "params" property * For example:: - * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.lowercase, Formatters.uppercase ] } + * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.dollar, myCustomFormatter ] } */ multiple: multipleFormatter, @@ -299,9 +294,6 @@ export const Formatters = { /** Formatter that must be use with a Tree Data column for Exporting the data */ treeExport: treeExportFormatter, - /** Takes a value and displays it all uppercase */ - uppercase: uppercaseFormatter, - /** Takes a boolean value and display a string 'Yes' or 'No' */ yesNo: yesNoFormatter }; diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts index 164eff73b..e7cd3e7c6 100644 --- a/packages/common/src/formatters/index.ts +++ b/packages/common/src/formatters/index.ts @@ -1,7 +1,6 @@ export * from './alignRightFormatter'; export * from './arrayObjectToCsvFormatter'; export * from './arrayToCsvFormatter'; -export * from './boldFormatter'; export * from './centerFormatter'; export * from './checkboxFormatter'; export * from './checkmarkMaterialFormatter'; @@ -35,5 +34,4 @@ export * from './translateBooleanFormatter'; export * from './treeExportFormatter'; export * from './treeFormatter'; export * from './treeParseTotalsFormatter'; -export * from './uppercaseFormatter'; export * from './yesNoFormatter'; diff --git a/packages/common/src/formatters/multipleFormatter.ts b/packages/common/src/formatters/multipleFormatter.ts index f0990835e..02e68f392 100644 --- a/packages/common/src/formatters/multipleFormatter.ts +++ b/packages/common/src/formatters/multipleFormatter.ts @@ -4,13 +4,13 @@ import { type Formatter } from './../interfaces/index'; * You can pipe multiple formatters (executed in sequence), use params to pass the list of formatters. * Requires to pass an array of "formatters" in the column definition the generic "params" property * For example:: - * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.lowercase, Formatters.uppercase ] } + * { field: 'title', formatter: Formatters.multiple, params: { formatters: [ Formatters.dollar, myCustomFormatter ] } */ export const multipleFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => { const params = columnDef.params || {}; if (!params.formatters || !Array.isArray(params.formatters)) { throw new Error(`The multiple formatter requires the "formatters" to be provided as a column params. - For example: this.columnDefinitions = [{ id: title, field: title, formatter: Formatters.multiple, params: { formatters: [Formatters.lowercase, Formatters.uppercase] }`); + For example: this.columnDefinitions = [{ id: title, field: title, formatter: Formatters.multiple, params: { formatters: [Formatters.dollar, myCustomFormatter] }`); } const formatters: Formatter[] = params.formatters; diff --git a/packages/common/src/formatters/uppercaseFormatter.ts b/packages/common/src/formatters/uppercaseFormatter.ts deleted file mode 100644 index 65bf4137e..000000000 --- a/packages/common/src/formatters/uppercaseFormatter.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Takes a value and displays it all uppercase */ -export const uppercaseFormatter: Formatter = (_row, _cell, value) => { - // make sure the value is a string - if (value !== undefined && typeof value !== 'string') { - value = value + ''; - } - return value ? value.toUpperCase() : ''; -}; diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss index 27bd1a783..a4d13ffe7 100644 --- a/packages/common/src/styles/extra-styling.scss +++ b/packages/common/src/styles/extra-styling.scss @@ -58,13 +58,14 @@ $slick-padding-max-count: 30; } /* Text and Alignment Utilities */ +.text-bold { font-weight: bold; } +.text-italic { font-style: italic; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } -.text-lowercase { text-transform: lowercase; } -.text-uppercase { text-transform: uppercase; } +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } .text-underline { text-decoration: underline; } -.text-italic { font-style: italic; } .vertical-align-bottom { display: inline-block; diff --git a/packages/excel-export/src/excelUtils.spec.ts b/packages/excel-export/src/excelUtils.spec.ts index d2b515579..51bfdbff6 100644 --- a/packages/excel-export/src/excelUtils.spec.ts +++ b/packages/excel-export/src/excelUtils.spec.ts @@ -2,6 +2,7 @@ import { Column, ExcelStylesheet, FieldType, + Formatter, Formatters, GridOption, GroupTotalFormatters, @@ -30,6 +31,7 @@ const stylesheetStub = { describe('excelUtils', () => { const mockedFormatId = 135; let createFormatSpy: any; + const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : ''; beforeEach(() => { createFormatSpy = jest.spyOn(stylesheetStub, 'createFormat').mockReturnValue({ id: mockedFormatId }); @@ -383,7 +385,7 @@ describe('excelUtils', () => { it('should get formatter options for Formatters.dollarColoredBold when using Formatters.multiple and 1 of its formatter is dollarColoredBold formatter', () => { const column = { type: FieldType.number, formatter: Formatters.multiple, - params: { formatters: [Formatters.dollarColoredBold, Formatters.bold], displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } + params: { formatters: [Formatters.dollarColoredBold, myBoldFormatter], displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column; const output = getNumericFormatterOptions(column, gridStub, 'cell'); @@ -463,7 +465,7 @@ describe('excelUtils', () => { it('should get formatter options for Formatters.percent when using Formatters.multiple and 1 of its formatter is percent formatter', () => { const column = { type: FieldType.number, formatter: Formatters.multiple, - params: { formatters: [Formatters.percent, Formatters.bold], displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } + params: { formatters: [Formatters.percent, myBoldFormatter], displayNegativeNumberWithParentheses: true, thousandSeparator: ',' } } as Column; const output = getNumericFormatterOptions(column, gridStub, 'cell'); @@ -801,7 +803,7 @@ describe('excelUtils', () => { const columnDef = { type: FieldType.number, formatter: Formatters.multiple, - params: { formatters: [() => `Something rendered`, Formatters.bold], }, + params: { formatters: [() => `Something rendered`, myBoldFormatter], }, } as unknown as Column; const output = getExcelFormatFromGridFormatter(stylesheetStub, { numberFormatter: { id: 3 } }, columnDef, gridStub, 'cell'); @@ -812,7 +814,7 @@ describe('excelUtils', () => { const column = { type: FieldType.number, formatter: Formatters.multiple, - params: { formatters: [Formatters.currency, Formatters.bold], displayNegativeNumberWithParentheses: false, thousandSeparator: ' ' } + params: { formatters: [Formatters.currency, myBoldFormatter], displayNegativeNumberWithParentheses: false, thousandSeparator: ' ' } } as Column; const output = getExcelFormatFromGridFormatter(stylesheetStub, {}, column, gridStub, 'cell'); @@ -823,7 +825,7 @@ describe('excelUtils', () => { const column = { type: FieldType.number, formatter: Formatters.multiple, - params: { formatters: [Formatters.bold, Formatters.dollar], displayNegativeNumberWithParentheses: false, thousandSeparator: ' ' } + params: { formatters: [myBoldFormatter, Formatters.dollar], displayNegativeNumberWithParentheses: false, thousandSeparator: ' ' } } as Column; const output = getExcelFormatFromGridFormatter(stylesheetStub, {}, column, gridStub, 'cell'); From d70ec04a1776d26f949cfac194a54004605565ae Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 27 Nov 2023 13:42:23 -0500 Subject: [PATCH 2/3] chore: fix failing unit tests and E2E tests --- .../slickCellExcelCopyManager.spec.ts | 2 +- .../__tests__/formatterUtilities.spec.ts | 8 +-- .../__tests__/multipleFormatter.spec.ts | 9 ++-- packages/excel-export/src/excelUtils.spec.ts | 2 +- test/cypress/e2e/example11.cy.ts | 52 ++++++++++--------- test/cypress/e2e/example12.cy.ts | 38 +++++++------- 6 files changed, 58 insertions(+), 53 deletions(-) diff --git a/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts b/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts index 3055ec67a..7e1722b1b 100644 --- a/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCellExcelCopyManager.spec.ts @@ -59,7 +59,7 @@ describe('CellExcelCopyManager', () => { const mockEventCallback = () => { }; const mockSelectRange = [{ fromCell: 1, fromRow: 1, toCell: 1, toRow: 1 }] as SlickRange[]; const mockSelectRangeEvent = { ranges: mockSelectRange }; - const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : null as any; + const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : null as any; let plugin: SlickCellExcelCopyManager; const gridOptionsMock = { diff --git a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts index d1b4d075b..77d5b42bb 100644 --- a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts +++ b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts @@ -3,7 +3,6 @@ import { FieldType } from '../../enums/index'; import { Editors } from '../../editors/index'; import { Column, Formatter, GridOption } from '../../interfaces/index'; import { complexObjectFormatter } from '../complexObjectFormatter'; -import { boldFormatter } from '../boldFormatter'; import { italicFormatter } from '../italicFormatter'; import { multipleFormatter } from '../multipleFormatter'; import { type SlickGrid } from '../../core/index'; @@ -20,11 +19,12 @@ describe('formatterUtilities', () => { value = (value === null || value === undefined) ? '' : value; return isEditableLine ? `
${value}
` : value; }; + const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; beforeEach(() => { columnDefinitions = [ { id: 'firstName', field: 'firstName', editor: { model: Editors.text } }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: complexObjectFormatter }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, @@ -36,7 +36,7 @@ describe('formatterUtilities', () => { expect(columnDefinitions).toEqual([ { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter, customEditableInputFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter, customEditableInputFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, @@ -49,7 +49,7 @@ describe('formatterUtilities', () => { expect(columnDefinitions).toEqual([ { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, boldFormatter, customEditableInputFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter, customEditableInputFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, diff --git a/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts b/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts index 4725b4c58..f841a1e0c 100644 --- a/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts @@ -1,19 +1,20 @@ -import { Column } from '../../interfaces/index'; -import { boldFormatter } from '../boldFormatter'; +import { Column, Formatter } from '../../interfaces/index'; import { italicFormatter } from '../italicFormatter'; import { multipleFormatter } from '../multipleFormatter'; +const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; + describe('the Multiple Formatter', () => { it('should return text output wrapped first as bold then wrapped as italic html formatted string', () => { const value = 'john'; - const params = { formatters: [boldFormatter, italicFormatter] }; + const params = { formatters: [myBoldFormatter, italicFormatter] }; const result = multipleFormatter(0, 0, value, { params } as Column, {}, {} as any); expect(result).toBe(`${value}`); }); it('should expect the first formatter to be the last wrapped format and not the other way around', () => { const value = 'john'; - const params = { formatters: [boldFormatter, italicFormatter] }; + const params = { formatters: [myBoldFormatter, italicFormatter] }; const result = multipleFormatter(0, 0, value, { params } as Column, {}, {} as any); expect(result).toBe(`${value}`); expect(result).not.toBe(`${value}`); diff --git a/packages/excel-export/src/excelUtils.spec.ts b/packages/excel-export/src/excelUtils.spec.ts index 51bfdbff6..d9151d6dc 100644 --- a/packages/excel-export/src/excelUtils.spec.ts +++ b/packages/excel-export/src/excelUtils.spec.ts @@ -31,7 +31,7 @@ const stylesheetStub = { describe('excelUtils', () => { const mockedFormatId = 135; let createFormatSpy: any; - const myBoldFormatter: Formatter = (_row, _cell, value) => value ? { text: `${value}` } : ''; + const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; beforeEach(() => { createFormatSpy = jest.spyOn(stylesheetStub, 'createFormat').mockReturnValue({ id: mockedFormatId }); diff --git a/test/cypress/e2e/example11.cy.ts b/test/cypress/e2e/example11.cy.ts index f4e3ad1e9..871224dfb 100644 --- a/test/cypress/e2e/example11.cy.ts +++ b/test/cypress/e2e/example11.cy.ts @@ -39,12 +39,14 @@ describe('Example 11 - Batch Editing', () => { }); 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)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 3'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 4'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 5'); + 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 }); }); it('should be able to change "Duration" values of first 4 rows', () => { @@ -73,19 +75,19 @@ describe('Example 11 - Batch Editing', () => { 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)`).should('contain', 'TASK 1').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').type('{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111') + 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)`).click() .type('task 2222{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2222') + 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); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).click() .type('task 3333').type('{enter}'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 3333') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).contains('TASK 3333', { matchCase: false }) .should('have.css', 'background-color').and('eq', UNSAVED_RGB_COLOR); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).click() @@ -543,12 +545,12 @@ describe('Example 11 - Batch Editing', () => { }); it('should be able to click on the delete button from the "Action" column of the 2nd row and expect "Task 1" to be delete', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 3'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 4'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 5'); + 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 * 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(10)`) .find('.mdi-close') @@ -556,16 +558,16 @@ describe('Example 11 - Batch Editing', () => { cy.on('window:confirm', () => true); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 3'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 4'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 5'); + 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 * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 3', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).contains('TASK 4', { matchCase: false }); + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).contains('TASK 5', { matchCase: false }); }); it('should be able to click on the checked 2nd button from the "Action" column of the 2nd row and expect "Task 2" to be completed', () => { - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2'); + 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 * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 2', { matchCase: false }); cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(10)`) .find('.mdi-check-underline') @@ -638,7 +640,7 @@ describe('Example 11 - Batch Editing', () => { cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8); 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)').contains(/^TASK [0-9]*$/); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').contains(/^TASK [0-9]*$/i); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').contains(/^[0-9]*\sday[s]?$/); cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').contains(/\$[0-9\.]*/); @@ -734,7 +736,7 @@ describe('Example 11 - Batch Editing', () => { cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8); 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)').contains(/^TASK [0-9]*$/); + cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').contains(/^TASK [0-9]*$/i); cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').contains(/^[0-9]*\sday[s]?$/); cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').contains(/\$?[0-9\.]*/); diff --git a/test/cypress/e2e/example12.cy.ts b/test/cypress/e2e/example12.cy.ts index b87902131..24aa06a67 100644 --- a/test/cypress/e2e/example12.cy.ts +++ b/test/cypress/e2e/example12.cy.ts @@ -32,12 +32,14 @@ describe('Example 12 - 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)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 3'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 4'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 5'); + 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 }); }); it('should be able to change "Duration" values of first 4 rows', () => { @@ -65,18 +67,18 @@ describe('Example 12 - Composite Editor Modal', () => { 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)`).should('contain', 'TASK 1').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)`).should('contain', 'TASK 1111') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).contains('TASK 1111', { matchCase: false }) .get('.editing-field') .should('have.css', 'border') .and('contain', `solid ${UNSAVED_RGB_COLOR}`); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 2').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)`).should('contain', 'TASK 2222') + cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).contains('TASK 2222', { matchCase: false }) .get('.editing-field') .should('have.css', 'border') .and('contain', `solid ${UNSAVED_RGB_COLOR}`); @@ -280,7 +282,7 @@ describe('Example 12 - 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)`).should('contain', 'TASK 8888'); + 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)`).find('.editing-field').should('have.length', 1); @@ -289,8 +291,8 @@ describe('Example 12 - Composite Editor Modal', () => { 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)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111'); + 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', () => { @@ -314,7 +316,7 @@ describe('Example 12 - 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)`).should('contain', 'TASK 8899'); + 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)`).find('.editing-field').should('have.length', 1); @@ -323,8 +325,8 @@ describe('Example 12 - Composite Editor Modal', () => { 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)`).should('contain', 'TASK 0'); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111'); + 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', () => { @@ -559,7 +561,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get('.btn-cancel').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 8899'); + 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('.mdi.mdi-check.checkmark-icon').should('have.length', 1); @@ -593,7 +595,7 @@ describe('Example 12 - Composite Editor Modal', () => { cy.get('.btn-save').contains('Clone').click(); - cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'TASK 9999'); + 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('.mdi.mdi-check.checkmark-icon').should('have.length', 0); From 2028df0f73ef30e25fc76d247c3b85b574c457de Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 27 Nov 2023 17:54:08 -0500 Subject: [PATCH 3/3] chore: remove a bunch of other formatters --- .../src/examples/example07.ts | 4 +- .../src/examples/example12.ts | 5 +-- .../src/examples/example14.ts | 5 +-- .../__tests__/alignRightFormatter.spec.ts | 32 --------------- .../__tests__/centerFormatter.spec.ts | 33 ---------------- .../__tests__/deleteIconFormatter.spec.ts | 16 -------- .../__tests__/editIconFormatter.spec.ts | 16 -------- .../__tests__/fakeHyperlinkFormatter.spec.ts | 16 -------- .../__tests__/formatterUtilities.spec.ts | 8 ++-- .../__tests__/infoIconFormatter.spec.ts | 16 -------- .../__tests__/italicFormatter.spec.ts | 16 -------- .../__tests__/lowercaseFormatter.spec.ts | 24 ------------ .../__tests__/multipleFormatter.spec.ts | 6 +-- .../treeParseTotalFormatters.spec.ts | 12 +++--- .../__tests__/yesNoFormatter.spec.ts | 19 --------- .../src/formatters/alignRightFormatter.ts | 11 ------ .../common/src/formatters/centerFormatter.ts | 11 ------ .../src/formatters/deleteIconFormatter.ts | 5 --- .../src/formatters/editIconFormatter.ts | 5 --- .../src/formatters/fakeHyperlinkFormatter.ts | 6 --- .../common/src/formatters/formatters.index.ts | 39 ------------------- packages/common/src/formatters/index.ts | 8 ---- .../src/formatters/infoIconFormatter.ts | 5 --- .../common/src/formatters/italicFormatter.ts | 6 --- .../src/formatters/lowercaseFormatter.ts | 10 ----- .../common/src/formatters/yesNoFormatter.ts | 5 --- 26 files changed, 19 insertions(+), 320 deletions(-) delete mode 100644 packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/centerFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/deleteIconFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/editIconFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/infoIconFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/italicFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/lowercaseFormatter.spec.ts delete mode 100644 packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts delete mode 100644 packages/common/src/formatters/alignRightFormatter.ts delete mode 100644 packages/common/src/formatters/centerFormatter.ts delete mode 100644 packages/common/src/formatters/deleteIconFormatter.ts delete mode 100644 packages/common/src/formatters/editIconFormatter.ts delete mode 100644 packages/common/src/formatters/fakeHyperlinkFormatter.ts delete mode 100644 packages/common/src/formatters/infoIconFormatter.ts delete mode 100644 packages/common/src/formatters/italicFormatter.ts delete mode 100644 packages/common/src/formatters/lowercaseFormatter.ts delete mode 100644 packages/common/src/formatters/yesNoFormatter.ts diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts index 1ab04498f..dac6ab2e7 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts @@ -239,7 +239,7 @@ export default class Example07 { // OR 2- use a Promise collectionAsync: new Promise((resolve) => { setTimeout(() => { - resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' }))); + resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' }))); }, 500); }), @@ -264,7 +264,7 @@ export default class Example07 { // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA), collectionAsync: new Promise((resolve) => { setTimeout(() => { - resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` }))); + resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: `Task ${k}` }))); }); }), diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts index 36903193a..89c8988ca 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts @@ -239,9 +239,8 @@ export default class Example12 { }, { id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, - sortable: true, filterable: true, columnGroup: 'Period', - formatter: Formatters.multiple, - params: { formatters: [Formatters.checkmarkMaterial, Formatters.center] }, + sortable: true, filterable: true, columnGroup: 'Period', cssClass: 'text-center', + formatter: Formatters.checkmarkMaterial, exportWithFormatter: false, filter: { collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts index 3bb483e7e..452946138 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -217,9 +217,8 @@ export default class Example14 { }, { id: 'completed', name: 'Completed', field: 'completed', width: 80, minWidth: 75, maxWidth: 100, - sortable: true, filterable: true, columnGroup: 'Period', - formatter: Formatters.multiple, - params: { formatters: [Formatters.checkmarkMaterial, Formatters.center] }, + sortable: true, filterable: true, columnGroup: 'Period', cssClass: 'text-center', + formatter: Formatters.checkmarkMaterial, exportWithFormatter: false, filter: { collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }], diff --git a/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts b/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts deleted file mode 100644 index 4f3983737..000000000 --- a/packages/common/src/formatters/__tests__/alignRightFormatter.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { alignRightFormatter } from '../alignRightFormatter'; - -describe('Right Alignment Formatter', () => { - it('should return an empty string when no value is passed', () => { - const output = alignRightFormatter(1, 1, '', {} as Column, {}, {} as any); - expect(output).toBe('
'); - }); - - it('should return an empty string when value is null or undefined', () => { - const output1 = alignRightFormatter(1, 1, null, {} as Column, {}, {} as any); - const output2 = alignRightFormatter(1, 1, undefined, {} as Column, {}, {} as any); - - expect(output1).toBe('
'); - expect(output2).toBe('
'); - }); - - it('should return a string all in uppercase', () => { - const output = alignRightFormatter(1, 1, 'hello', {} as Column, {}, {} as any); - expect(output).toBe('
hello
'); - }); - - it('should return a number as a string', () => { - const output = alignRightFormatter(1, 1, 99, {} as Column, {}, {} as any); - expect(output).toBe('
99
'); - }); - - it('should return a boolean as a string all in uppercase', () => { - const output = alignRightFormatter(1, 1, false, {} as Column, {}, {} as any); - expect(output).toBe('
false
'); - }); -}); diff --git a/packages/common/src/formatters/__tests__/centerFormatter.spec.ts b/packages/common/src/formatters/__tests__/centerFormatter.spec.ts deleted file mode 100644 index 4f0e0a9fd..000000000 --- a/packages/common/src/formatters/__tests__/centerFormatter.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { centerFormatter } from '../centerFormatter'; - -describe('Center Alignment Formatter', () => { - it('should return an empty string when no value is passed', () => { - const output = centerFormatter(1, 1, '', {} as Column, {}, {} as any); - expect(output).toBe('
'); - }); - - it('should return an empty string when value is null or undefined', () => { - const output1 = centerFormatter(1, 1, null, {} as Column, {}, {} as any); - const output2 = centerFormatter(1, 1, undefined, {} as Column, {}, {} as any); - - expect(output1).toBe('
'); - expect(output2).toBe('
'); - }); - - - it('should return a string all in uppercase', () => { - const output = centerFormatter(1, 1, 'hello', {} as Column, {}, {} as any); - expect(output).toBe('
hello
'); - }); - - it('should return a number as a string', () => { - const output = centerFormatter(1, 1, 99, {} as Column, {}, {} as any); - expect(output).toBe('
99
'); - }); - - it('should return a boolean as a string all in uppercase', () => { - const output = centerFormatter(1, 1, false, {} as Column, {}, {} as any); - expect(output).toBe('
false
'); - }); -}); diff --git a/packages/common/src/formatters/__tests__/deleteIconFormatter.spec.ts b/packages/common/src/formatters/__tests__/deleteIconFormatter.spec.ts deleted file mode 100644 index 2829eaa3f..000000000 --- a/packages/common/src/formatters/__tests__/deleteIconFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { deleteIconFormatter } from '../deleteIconFormatter'; - -describe('the Delete Icon Formatter', () => { - it('should always return the Font Awesome Trash icon even when False is provided', () => { - const value = false; - const result = deleteIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return the Font Awesome Trash icon when input is filled with any string', () => { - const value = 'anything'; - const result = deleteIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); -}); diff --git a/packages/common/src/formatters/__tests__/editIconFormatter.spec.ts b/packages/common/src/formatters/__tests__/editIconFormatter.spec.ts deleted file mode 100644 index c71712ba2..000000000 --- a/packages/common/src/formatters/__tests__/editIconFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { editIconFormatter } from '../editIconFormatter'; - -describe('the Edit Icon Formatter', () => { - it('should always return the Font Awesome Pencil icon even when False is provided', () => { - const value = false; - const result = editIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return the Font Awesome Pencil icon when input is filled with any string', () => { - const value = 'anything'; - const result = editIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); -}); diff --git a/packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts b/packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts deleted file mode 100644 index 4df3f4427..000000000 --- a/packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/column.interface'; -import { fakeHyperlinkFormatter } from '../fakeHyperlinkFormatter'; - -describe('the Edit Icon Formatter', () => { - it('should return a span with the "fake-hyperlink" class when a value is provided', () => { - const value = 'Custom Value'; - const result = fakeHyperlinkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe('Custom Value'); - }); - - it('should return an empty string formatter when no value is provided', () => { - const value = null; - const result = fakeHyperlinkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); -}); diff --git a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts index 77d5b42bb..ff610be20 100644 --- a/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts +++ b/packages/common/src/formatters/__tests__/formatterUtilities.spec.ts @@ -3,7 +3,6 @@ import { FieldType } from '../../enums/index'; import { Editors } from '../../editors/index'; import { Column, Formatter, GridOption } from '../../interfaces/index'; import { complexObjectFormatter } from '../complexObjectFormatter'; -import { italicFormatter } from '../italicFormatter'; import { multipleFormatter } from '../multipleFormatter'; import { type SlickGrid } from '../../core/index'; @@ -20,11 +19,12 @@ describe('formatterUtilities', () => { return isEditableLine ? `
${value}
` : value; }; const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; + const myItalicFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; beforeEach(() => { columnDefinitions = [ { id: 'firstName', field: 'firstName', editor: { model: Editors.text } }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: complexObjectFormatter }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, @@ -36,7 +36,7 @@ describe('formatterUtilities', () => { expect(columnDefinitions).toEqual([ { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter, customEditableInputFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter, customEditableInputFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, @@ -49,7 +49,7 @@ describe('formatterUtilities', () => { expect(columnDefinitions).toEqual([ { id: 'firstName', field: 'firstName', editor: { model: Editors.text }, formatter: customEditableInputFormatter }, - { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [italicFormatter, myBoldFormatter, customEditableInputFormatter] } }, + { id: 'lastName', field: 'lastName', editor: { model: Editors.text }, formatter: multipleFormatter, params: { formatters: [myItalicFormatter, myBoldFormatter, customEditableInputFormatter] } }, { id: 'age', field: 'age', type: 'number', formatter: multipleFormatter }, { id: 'address', field: 'address.street', editor: { model: Editors.longText }, formatter: multipleFormatter, params: { formatters: [complexObjectFormatter, customEditableInputFormatter] } }, { id: 'zip', field: 'address.zip', type: 'number', formatter: complexObjectFormatter }, diff --git a/packages/common/src/formatters/__tests__/infoIconFormatter.spec.ts b/packages/common/src/formatters/__tests__/infoIconFormatter.spec.ts deleted file mode 100644 index f377c4b85..000000000 --- a/packages/common/src/formatters/__tests__/infoIconFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { infoIconFormatter } from '../infoIconFormatter'; - -describe('the Info Icon Formatter', () => { - it('should always return the Font Awesome Info icon even when False is provided', () => { - const value = false; - const result = infoIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return the Font Awesome Info icon when input is filled with any string', () => { - const value = 'anything'; - const result = infoIconFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); -}); diff --git a/packages/common/src/formatters/__tests__/italicFormatter.spec.ts b/packages/common/src/formatters/__tests__/italicFormatter.spec.ts deleted file mode 100644 index 707437700..000000000 --- a/packages/common/src/formatters/__tests__/italicFormatter.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { italicFormatter } from '../italicFormatter'; - -describe('the Italic Formatter', () => { - it('should return an empty string when no value is passed', () => { - const value = null; - const result = italicFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return an italic html formatted string when value is filled', () => { - const value = 'john'; - const result = italicFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(`${value}`); - }); -}); diff --git a/packages/common/src/formatters/__tests__/lowercaseFormatter.spec.ts b/packages/common/src/formatters/__tests__/lowercaseFormatter.spec.ts deleted file mode 100644 index 0cf587857..000000000 --- a/packages/common/src/formatters/__tests__/lowercaseFormatter.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { lowercaseFormatter } from '../lowercaseFormatter'; - -describe('the Lowercase Formatter', () => { - it('should return an empty string when no value is passed', async () => { - const output = lowercaseFormatter(1, 1, '', {} as Column, {}, {} as any); - expect(output).toBe(''); - }); - - it('should return a string all in lowercase', () => { - const output = lowercaseFormatter(1, 1, 'HeLlo', {} as Column, {}, {} as any); - expect(output).toBe('hello'); - }); - - it('should return a number as a string', () => { - const output = lowercaseFormatter(1, 1, 99, {} as Column, {}, {} as any); - expect(output).toBe('99'); - }); - - it('should return a boolean as a string all in lowercase', () => { - const output = lowercaseFormatter(1, 1, false, {} as Column, {}, {} as any); - expect(output).toBe('false'); - }); -}); diff --git a/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts b/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts index f841a1e0c..af50adecf 100644 --- a/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts +++ b/packages/common/src/formatters/__tests__/multipleFormatter.spec.ts @@ -1,20 +1,20 @@ import { Column, Formatter } from '../../interfaces/index'; -import { italicFormatter } from '../italicFormatter'; import { multipleFormatter } from '../multipleFormatter'; const myBoldFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; +const myItalicFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; describe('the Multiple Formatter', () => { it('should return text output wrapped first as bold then wrapped as italic html formatted string', () => { const value = 'john'; - const params = { formatters: [myBoldFormatter, italicFormatter] }; + const params = { formatters: [myBoldFormatter, myItalicFormatter] }; const result = multipleFormatter(0, 0, value, { params } as Column, {}, {} as any); expect(result).toBe(`${value}`); }); it('should expect the first formatter to be the last wrapped format and not the other way around', () => { const value = 'john'; - const params = { formatters: [myBoldFormatter, italicFormatter] }; + const params = { formatters: [myBoldFormatter, myItalicFormatter] }; const result = multipleFormatter(0, 0, value, { params } as Column, {}, {} as any); expect(result).toBe(`${value}`); expect(result).not.toBe(`${value}`); diff --git a/packages/common/src/formatters/__tests__/treeParseTotalFormatters.spec.ts b/packages/common/src/formatters/__tests__/treeParseTotalFormatters.spec.ts index ba71c93bb..d70da241b 100644 --- a/packages/common/src/formatters/__tests__/treeParseTotalFormatters.spec.ts +++ b/packages/common/src/formatters/__tests__/treeParseTotalFormatters.spec.ts @@ -1,5 +1,4 @@ -import { Column, GridOption } from '../../interfaces/index'; -import { italicFormatter } from '../italicFormatter'; +import { Column, Formatter, GridOption } from '../../interfaces/index'; import { GroupTotalFormatters } from '../../grouping-formatters'; import { treeParseTotalsFormatter } from '../treeParseTotalsFormatter'; import { dollarFormatter } from '../dollarFormatter'; @@ -13,6 +12,7 @@ const gridStub = { describe('TreeParseTotalFormatters', () => { let mockGridOptions: GridOption; const colFieldName = 'fileSize'; + const myItalicFormatter: Formatter = (_row, _cell, value) => value ? `${value}` : ''; beforeEach(() => { mockGridOptions = { @@ -24,7 +24,7 @@ describe('TreeParseTotalFormatters', () => { it('should return expected output of groupTotalsFormatter when detecting the dataContext has tree children and a "__treeTotals" prop', () => { const cellValue = 2.1; const sumTotal = 12.33; - const params = { formatters: [italicFormatter] }; + const params = { formatters: [myItalicFormatter] }; const result = treeParseTotalsFormatter(0, 0, cellValue, { field: colFieldName, groupTotalsFormatter: GroupTotalFormatters.sumTotalsBold, params } as Column, { __hasChildren: true, __treeTotals: { sum: { [colFieldName]: sumTotal } } }, gridStub); expect(result).toBe(`${sumTotal}`); }); @@ -32,21 +32,21 @@ describe('TreeParseTotalFormatters', () => { it('should return expected output of treeTotalsFormatter when detecting the dataContext has tree children and a "__treeTotals" prop', () => { const cellValue = 2.1; const sumTotal = 12.33; - const params = { formatters: [italicFormatter] }; + const params = { formatters: [myItalicFormatter] }; const result = treeParseTotalsFormatter(0, 0, cellValue, { field: colFieldName, treeTotalsFormatter: GroupTotalFormatters.sumTotalsBold, params } as Column, { __hasChildren: true, __treeTotals: { sum: { [colFieldName]: sumTotal } } }, gridStub); expect(result).toBe(`${sumTotal}`); }); it('should return expected output of italic formatter when detecting the dataContext does not has tree children, neither a "__treeTotals" prop', () => { const cellValue = 2.1; - const params = { formatters: [italicFormatter] }; + const params = { formatters: [myItalicFormatter] }; const result = treeParseTotalsFormatter(0, 0, cellValue, { field: colFieldName, treeTotalsFormatter: GroupTotalFormatters.sumTotalsBold, params } as Column, {}, gridStub); expect(result).toBe(`${cellValue}`); }); it('should return expected output of when multiple formatters (uppercase & italic) are provided and dataContext does not has tree children, neither a "__treeTotals" prop', () => { const cellValue = 2.1; - const params = { formatters: [dollarFormatter, italicFormatter] }; + const params = { formatters: [dollarFormatter, myItalicFormatter] }; const result = treeParseTotalsFormatter(0, 0, cellValue, { field: colFieldName, treeTotalsFormatter: GroupTotalFormatters.sumTotalsBold, params } as Column, {}, gridStub); expect(result).toBe(`$2.10`); }); diff --git a/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts b/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts deleted file mode 100644 index 30a3574a3..000000000 --- a/packages/common/src/formatters/__tests__/yesNoFormatter.spec.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { yesNoFormatter } from '../yesNoFormatter'; - -describe('Yes/No Formatter', () => { - it('should return a "Yes" string when value is passed', () => { - const output = yesNoFormatter(1, 1, 'blah', {} as Column, {}, {} as any); - expect(output).toBe('Yes'); - }); - - it('should return the string "No" string when empty string provided', () => { - const output = yesNoFormatter(1, 1, '', {} as Column, {}, {} as any); - expect(output).toBe('No'); - }); - - it('should return the string "No" string when value is null', () => { - const output = yesNoFormatter(1, 1, null, {} as Column, {}, {} as any); - expect(output).toBe('No'); - }); -}); diff --git a/packages/common/src/formatters/alignRightFormatter.ts b/packages/common/src/formatters/alignRightFormatter.ts deleted file mode 100644 index d4fb4eb61..000000000 --- a/packages/common/src/formatters/alignRightFormatter.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Formatter } from './../interfaces/index'; - -/** Align cell value to the right */ -export const alignRightFormatter: Formatter = (_row, _cell, value) => { - let outputValue = value; - - if (value === null || value === undefined) { - outputValue = ''; - } - return `
${outputValue}
`; -}; diff --git a/packages/common/src/formatters/centerFormatter.ts b/packages/common/src/formatters/centerFormatter.ts deleted file mode 100644 index 1dd43f4c3..000000000 --- a/packages/common/src/formatters/centerFormatter.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Formatter } from './../interfaces/index'; - -/** Align cell value to the center (alias to Formatters.center) */ -export const centerFormatter: Formatter = (_row, _cell, value) => { - let outputValue = value; - - if (value === null || value === undefined) { - outputValue = ''; - } - return `
${outputValue}
`; -}; diff --git a/packages/common/src/formatters/deleteIconFormatter.ts b/packages/common/src/formatters/deleteIconFormatter.ts deleted file mode 100644 index e67ee7d83..000000000 --- a/packages/common/src/formatters/deleteIconFormatter.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Displays a Font-Awesome delete icon (fa-trash) */ -export const deleteIconFormatter: Formatter = () => - ``; diff --git a/packages/common/src/formatters/editIconFormatter.ts b/packages/common/src/formatters/editIconFormatter.ts deleted file mode 100644 index 5a89c0b29..000000000 --- a/packages/common/src/formatters/editIconFormatter.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Displays a Font-Awesome edit icon (fa-pencil) */ -export const editIconFormatter: Formatter = () => - ``; diff --git a/packages/common/src/formatters/fakeHyperlinkFormatter.ts b/packages/common/src/formatters/fakeHyperlinkFormatter.ts deleted file mode 100644 index 37df3b1d6..000000000 --- a/packages/common/src/formatters/fakeHyperlinkFormatter.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Takes any text value and display it as a fake a hyperlink (only styled as an hyperlink), this can be used in combo with "onCellClick" event */ -export const fakeHyperlinkFormatter: Formatter = (_row, _cell, value) => { - return value ? `${value}` : ''; -}; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index c9b5d4c4e..36e9d16d9 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -1,9 +1,7 @@ import { FieldType } from '../enums/index'; import { getAssociatedDateFormatter } from './formatterUtilities'; -import { alignRightFormatter } from './alignRightFormatter'; import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; import { arrayToCsvFormatter } from './arrayToCsvFormatter'; -import { centerFormatter } from './centerFormatter'; import { checkboxFormatter } from './checkboxFormatter'; import { checkmarkFormatter } from './checkmarkFormatter'; import { checkmarkMaterialFormatter } from './checkmarkMaterialFormatter'; @@ -12,17 +10,11 @@ import { collectionFormatter } from './collectionFormatter'; import { collectionEditorFormatter } from './collectionEditorFormatter'; import { complexObjectFormatter } from './complexObjectFormatter'; import { decimalFormatter } from './decimalFormatter'; -import { deleteIconFormatter } from './deleteIconFormatter'; import { dollarColoredBoldFormatter } from './dollarColoredBoldFormatter'; import { dollarColoredFormatter } from './dollarColoredFormatter'; import { dollarFormatter } from './dollarFormatter'; -import { editIconFormatter } from './editIconFormatter'; -import { fakeHyperlinkFormatter } from './fakeHyperlinkFormatter'; import { hyperlinkFormatter } from './hyperlinkFormatter'; import { iconFormatter } from './iconFormatter'; -import { infoIconFormatter } from './infoIconFormatter'; -import { italicFormatter } from './italicFormatter'; -import { lowercaseFormatter } from './lowercaseFormatter'; import { maskFormatter } from './maskFormatter'; import { multipleFormatter } from './multipleFormatter'; import { percentFormatter } from './percentFormatter'; @@ -36,16 +28,9 @@ import { treeExportFormatter } from './treeExportFormatter'; import { treeFormatter } from './treeFormatter'; import { treeParseTotalsFormatter } from './treeParseTotalsFormatter'; import { translateBooleanFormatter } from './translateBooleanFormatter'; -import { yesNoFormatter } from './yesNoFormatter'; /** Provides a list of different Formatters that will change the cell value displayed in the UI */ export const Formatters = { - /** Align cell value to the center (alias to Formatters.center) */ - alignCenter: centerFormatter, - - /** Align cell value to the right */ - alignRight: alignRightFormatter, - /** * Takes an array of complex objects converts it to a comma delimited string. * Requires to pass an array of "propertyNames" in the column definition the generic "params" property @@ -57,9 +42,6 @@ export const Formatters = { /** Takes an array of string and converts it to a comma delimited string */ arrayToCsv: arrayToCsvFormatter, - /** Center a text value horizontally */ - center: centerFormatter, - /** When value is filled (true), it will display a checkbox Unicode icon */ checkbox: checkboxFormatter, @@ -190,9 +172,6 @@ export const Formatters = { /** Takes a Date object and displays it as a regular TZ timestamp format (YYYY-MM-DDTHH:mm:ss.SSSZ) */ dateUtc: getAssociatedDateFormatter(FieldType.dateUtc, '-'), - /** Displays a Font-Awesome delete icon (fa-trash) */ - deleteIcon: deleteIconFormatter, - /** * Display the value as x decimals formatted, defaults to 2 decimals. * You can pass "minDecimal" and/or "maxDecimal" to the "params" property. @@ -209,12 +188,6 @@ export const Formatters = { /** Display the value as 2 decimals formatted with dollar sign '$' at the end of of the value, change color of text to red/green on negative/positive value, show it in bold font weight as well */ dollarColoredBold: dollarColoredBoldFormatter, - /** Displays a Font-Awesome edit icon (fa-pencil) */ - editIcon: editIconFormatter, - - /** Takes any text value and display it as a fake a hyperlink (only styled as an hyperlink), this can be used in combo with "onCellClick" event */ - fakeHyperlink: fakeHyperlinkFormatter, - /** * Takes an hyperlink cell value and transforms it into a real hyperlink, given that the value starts with 1 of these (http|ftp|https). * The structure will be "hyperlink" @@ -230,15 +203,6 @@ export const Formatters = { /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ icon: iconFormatter, - /** Displays a Font-Awesome edit icon (fa-info-circle) */ - infoIcon: infoIconFormatter, - - /** show input text value as italic text */ - italic: italicFormatter, - - /** Takes a value and displays it all lowercase */ - lowercase: lowercaseFormatter, - /** * Takes a value display it according to a mask provided * e.: 1234567890 with mask "(000) 000-0000" will display "(123) 456-7890" @@ -293,7 +257,4 @@ export const Formatters = { /** Formatter that must be use with a Tree Data column for Exporting the data */ treeExport: treeExportFormatter, - - /** Takes a boolean value and display a string 'Yes' or 'No' */ - yesNo: yesNoFormatter }; diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts index e7cd3e7c6..b8f63470d 100644 --- a/packages/common/src/formatters/index.ts +++ b/packages/common/src/formatters/index.ts @@ -1,7 +1,5 @@ -export * from './alignRightFormatter'; export * from './arrayObjectToCsvFormatter'; export * from './arrayToCsvFormatter'; -export * from './centerFormatter'; export * from './checkboxFormatter'; export * from './checkmarkMaterialFormatter'; export * from './checkmarkFormatter'; @@ -9,18 +7,13 @@ export * from './collectionEditorFormatter'; export * from './collectionFormatter'; export * from './complexObjectFormatter'; export * from './decimalFormatter'; -export * from './deleteIconFormatter'; export * from './dollarFormatter'; export * from './dollarColoredFormatter'; export * from './dollarColoredBoldFormatter'; -export * from './editIconFormatter'; export * from './formatters.index'; export * from './formatterUtilities'; export * from './hyperlinkFormatter'; export * from './iconFormatter'; -export * from './infoIconFormatter'; -export * from './italicFormatter'; -export * from './lowercaseFormatter'; export * from './maskFormatter'; export * from './multipleFormatter'; export * from './percentCompleteFormatter'; @@ -34,4 +27,3 @@ export * from './translateBooleanFormatter'; export * from './treeExportFormatter'; export * from './treeFormatter'; export * from './treeParseTotalsFormatter'; -export * from './yesNoFormatter'; diff --git a/packages/common/src/formatters/infoIconFormatter.ts b/packages/common/src/formatters/infoIconFormatter.ts deleted file mode 100644 index 4ddf930ce..000000000 --- a/packages/common/src/formatters/infoIconFormatter.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Displays a Font-Awesome edit icon (fa-info-circle) */ -export const infoIconFormatter: Formatter = () => - ``; diff --git a/packages/common/src/formatters/italicFormatter.ts b/packages/common/src/formatters/italicFormatter.ts deleted file mode 100644 index c197379ee..000000000 --- a/packages/common/src/formatters/italicFormatter.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** show input text value as italic text */ -export const italicFormatter: Formatter = (_row, _cell, value) => { - return value ? `${value}` : ''; -}; diff --git a/packages/common/src/formatters/lowercaseFormatter.ts b/packages/common/src/formatters/lowercaseFormatter.ts deleted file mode 100644 index 27575da87..000000000 --- a/packages/common/src/formatters/lowercaseFormatter.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Takes a value and displays it all lowercase */ -export const lowercaseFormatter: Formatter = (_row, _cell, value) => { - // make sure the value is a string - if (value !== undefined && typeof value !== 'string') { - value = value + ''; - } - return value ? value.toLowerCase() : ''; -}; diff --git a/packages/common/src/formatters/yesNoFormatter.ts b/packages/common/src/formatters/yesNoFormatter.ts deleted file mode 100644 index 701602207..000000000 --- a/packages/common/src/formatters/yesNoFormatter.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { type Formatter } from './../interfaces/index'; - -/** Takes a boolean value and display a string 'Yes' or 'No' */ -export const yesNoFormatter: Formatter = (_row, _cell, value) => - value ? 'Yes' : 'No';