fix(formatters): update some Formatter behaviors and add unit testing

- update some Formatters and add new functionality to some of them, mainly: complexObjectFormatter, hyperlinkFormatter
- delete "hyperlinkUriPrefixFormatter" since the "hyperlinkFormatter" now covers all behaviors under 1 formatter
- a few formatters were behaving incorrectly in some cases, while adding unit tests, we tweaked Formatters to go along the tests

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/formatters/complexObjectFormatter.spec.ts

@@ -0,0 +1,64 @@
+import { Column } from '../models';
+import { complexObjectFormatter } from './complexObjectFormatter';
+
+describe('the ComplexObject Formatter', () => {
+  const allRoles = [{ roleId: 0, name: 'Administrator' }, { roleId: 1, name: 'Regular User' }];
+
+  const dataset = [
+    { id: 0, firstName: 'John', lastName: 'Smith', email: '[email protected]', role: allRoles[0] },
+    { id: 1, firstName: 'Jane', lastName: 'Doe', email: '[email protected]', role: allRoles[1] },
+    { id: 2, firstName: 'Bob', lastName: 'Cane', email: '[email protected]', role: null },
+  ];
+
+  it('should throw an error when omitting to pass "complexFieldLabel" to "params"', () => {
+    expect(() => complexObjectFormatter(0, 0, 'anything', {} as Column, {}))
+      .toThrowError('For the Formatters.complexObject to work properly');
+  });
+
+  it('should return empty string when no column definition is provided', () => {
+    const result = complexObjectFormatter(0, 0, 'anything', null as Column, {});
+    expect(result).toBe('');
+  });
+
+  it('should return original input value when the "field" property does not include a not ".", neither "complexFieldLabel"', () => {
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role' } as Column, {});
+    expect(result).toBe('anything');
+  });
+
+  it('should return original input value when the "field" property was not found in the data context object', () => {
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'invalid.object' } as Column, dataset[2]);
+    expect(result).toBe('anything');
+  });
+
+  it('should return original input value when the "complexFieldLabel" does not include a not "." within its string', () => {
+    const params = { complexFieldLabel: 'name' };
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, {});
+    expect(result).toBe('anything');
+  });
+
+  it('should return original input value when the "complexFieldLabel" was not found in the data context object', () => {
+    const params = { complexFieldLabel: 'invalid.object' };
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[2]);
+    expect(result).toBe('anything');
+  });
+
+  it('should return the value from the complex object when "field" property with dot notation was found in the data context object', () => {
+    const expectedOutput = 'Administrator';
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role.name' } as Column, dataset[0]);
+    expect(result).toBe(expectedOutput);
+  });
+
+  it('should return the value from the complex object when "complexFieldLabel" property with dot notation was found in the data context object', () => {
+    const params = { complexFieldLabel: 'role.name' };
+    const expectedOutput = 'Administrator';
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', params } as Column, dataset[0]);
+    expect(result).toBe(expectedOutput);
+  });
+
+  it('should return the value from the complex object when "complexFieldLabel" is not dot notation but has a "labelKey" was found in the data context object', () => {
+    const params = { complexFieldLabel: 'role' };
+    const expectedOutput = 'Administrator';
+    const result = complexObjectFormatter(0, 0, 'anything', { field: 'role', labelKey: 'name', params } as Column, dataset[0]);
+    expect(result).toBe(expectedOutput);
+  });
+});

src/app/modules/angular-slickgrid/formatters/complexObjectFormatter.ts

@@ -1,7 +1,7 @@
 import { Column } from './../models/column.interface';
 import { Formatter } from './../models/formatter.interface';
 
-export const complexObjectFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
+export const complexObjectFormatter: Formatter = (row: number, cell: number, cellValue: any, columnDef: Column, dataContext: any) => {
   if (!columnDef) {
     return '';
   }
@@ -11,14 +11,20 @@ export const complexObjectFormatter: Formatter = (row: number, cell: number, val
 
   if (!complexFieldLabel) {
     throw new Error(`For the Formatters.complexObject to work properly, you need to tell it which property of the complex object to use.
-      You can provide via 2 ways:
+      There are 3 ways to provide it:
       1- via the generic "params" with a "complexFieldLabel" property on your Column Definition, example: this.columnDefs = [{ id: 'user', field: 'user', params: { complexFieldLabel: 'user.firstName' } }]
-      2- via the field name that includes a dot notation, example: this.columnDefs = [{ id: 'user', field: 'user.firstName'}] `);
+      2- via the generic "params" with a "complexFieldLabel" and a "labelKey" property on your Column Definition, example: this.columnDefs = [{ id: 'user', field: 'user', labelKey: 'firstName' params: { complexFieldLabel: 'user' } }]
+      3- via the field name that includes a dot notation, example: this.columnDefs = [{ id: 'user', field: 'user.firstName'}] `);
   }
 
-  if (columnDef.labelKey) {
+  if (columnDef.labelKey && dataContext.hasOwnProperty(complexFieldLabel)) {
     return dataContext[complexFieldLabel] && dataContext[complexFieldLabel][columnDef.labelKey];
   }
 
-  return complexFieldLabel.split('.').reduce((obj, i) => (obj ? obj[i] : ''), dataContext);
+  // when complexFieldLabel includes the dot ".", we will do the split and get the value from the complex object
+  // however we also need to make sure that the complex objet exist, else we'll return the cell value (original value)
+  if (typeof complexFieldLabel === 'string' && complexFieldLabel.indexOf('.') > 0) {
+    return complexFieldLabel.split('.').reduce((obj, i) => (obj && obj.hasOwnProperty(i) ? obj[i] : cellValue), dataContext);
+  }
+  return cellValue;
 };

src/app/modules/angular-slickgrid/formatters/deleteIconFormatter.spec.ts

@@ -7,6 +7,7 @@ describe('the Delete Icon Formatter', () => {
     const result = deleteIconFormatter(0, 0, value, {} as Column, {});
     expect(result).toBe('<i class="fa fa-trash pointer delete-icon" aria-hidden="true"></i>');
   });
+
   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, {});

src/app/modules/angular-slickgrid/formatters/editIconFormatter.spec.ts

@@ -7,6 +7,7 @@ describe('the Edit Icon Formatter', () => {
     const result = editIconFormatter(0, 0, value, {} as Column, {});
     expect(result).toBe('<i class="fa fa-pencil pointer edit-icon" aria-hidden="true"></i>');
   });
+
   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, {});

src/app/modules/angular-slickgrid/formatters/hyperlinkFormatter.spec.ts

@@ -0,0 +1,107 @@
+import { Column } from '../models';
+import { hyperlinkFormatter } from './hyperlinkFormatter';
+
+describe('the Hyperlink Formatter', () => {
+  it('should return empty string when value is not an hyperlink and is empty', () => {
+    const result = hyperlinkFormatter(0, 0, '', {} as Column, {});
+    expect(result).toBe('');
+  });
+
+  it('should return original value when value is not an hyperlink', () => {
+    const result = hyperlinkFormatter(0, 0, 'anything', {} as Column, {});
+    expect(result).toBe('anything');
+  });
+
+  it('should return original value when URL passed through the generic params "hyperlinkUrl" is not a valid hyperlink', () => {
+    const hyperlinkUrl1 = '';
+    const inputValue = 'Company Name';
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {});
+    expect(result1).toBe(inputValue);
+  });
+
+  it('should not permit sanitize/remove any bad script code', () => {
+    const inputValue = 'http://<script>alert("test")</script>company.com';
+    const sanitizedValue = 'http://company.com';
+    const result = hyperlinkFormatter(0, 0, inputValue, {} as Column, {});
+    expect(result).toBe(`<a href="${sanitizedValue}">${sanitizedValue}</a>`);
+  });
+
+  it('should return original value when value is not a valid hyperlink', () => {
+    const inputValue1 = 'http:/something.com';
+    const inputValue2 = 'https//something.com';
+    const inputValue3 = 'ftpp://something.com';
+
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {});
+
+    expect(result1).toBe(inputValue1);
+    expect(result2).toBe(inputValue2);
+    expect(result3).toBe(inputValue3);
+  });
+
+  it('should return an href link when input value is a valid hyperlink', () => {
+    const inputValue1 = 'http://something.com';
+    const inputValue2 = 'https://something.com';
+    const inputValue3 = 'ftp://something.com';
+
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, {} as Column, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, {} as Column, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, {} as Column, {});
+
+
+    expect(result1).toBe(`<a href="${inputValue1}">${inputValue1}</a>`);
+    expect(result2).toBe(`<a href="${inputValue2}">${inputValue2}</a>`);
+    expect(result3).toBe(`<a href="${inputValue3}">${inputValue3}</a>`);
+  });
+
+  it('should return an href link with a different text when input value is a valid hyperlink and has the generic params "hyperlinkText" provided', () => {
+    const inputValue1 = 'http://something.com';
+    const inputValue2 = 'https://something.com';
+    const inputValue3 = 'ftp://something.com';
+    const linkText = 'Company Website';
+
+    const result1 = hyperlinkFormatter(0, 0, inputValue1, { params: { hyperlinkText: linkText } } as Column, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue2, { params: { hyperlinkText: linkText } } as Column, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue3, { params: { hyperlinkText: linkText } } as Column, {});
+
+
+    expect(result1).toBe(`<a href="${inputValue1}">${linkText}</a>`);
+    expect(result2).toBe(`<a href="${inputValue2}">${linkText}</a>`);
+    expect(result3).toBe(`<a href="${inputValue3}">${linkText}</a>`);
+  });
+
+  it('should return an href link with a different url than value it is provided as a valid hyperlink through the generic params "hyperlinkUrl"', () => {
+    const hyperlinkUrl1 = 'http://something.com';
+    const hyperlinkUrl2 = 'https://something.com';
+    const hyperlinkUrl3 = 'ftp://something.com';
+    const inputValue = 'Company Name';
+
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1 } } as Column, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2 } } as Column, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3 } } as Column, {});
+
+
+    expect(result1).toBe(`<a href="${hyperlinkUrl1}">${inputValue}</a>`);
+    expect(result2).toBe(`<a href="${hyperlinkUrl2}">${inputValue}</a>`);
+    expect(result3).toBe(`<a href="${hyperlinkUrl3}">${inputValue}</a>`);
+  });
+
+  it('should return an href link when hyperlink URL & Text are provided through the generic params "hyperlinkUrl" and "hyperlinkText"', () => {
+    const hyperlinkUrl1 = 'http://something.com';
+    const hyperlinkUrl2 = 'https://something.com';
+    const hyperlinkUrl3 = 'ftp://something.com';
+    const linkText1 = 'Company ABC';
+    const linkText2 = 'Company DEF';
+    const linkText3 = 'Company XYZ';
+    const inputValue = 'anything';
+
+    const result1 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl1, hyperlinkText: linkText1 } } as Column, {});
+    const result2 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl2, hyperlinkText: linkText2 } } as Column, {});
+    const result3 = hyperlinkFormatter(0, 0, inputValue, { params: { hyperlinkUrl: hyperlinkUrl3, hyperlinkText: linkText3 } } as Column, {}); 3
+
+    expect(result1).toBe(`<a href="${hyperlinkUrl1}">${linkText1}</a>`);
+    expect(result2).toBe(`<a href="${hyperlinkUrl2}">${linkText2}</a>`);
+    expect(result3).toBe(`<a href="${hyperlinkUrl3}">${linkText3}</a>`);
+  });
+});

src/app/modules/angular-slickgrid/formatters/hyperlinkFormatter.ts

@@ -1,12 +1,33 @@
 import { Column } from './../models/column.interface';
 import { Formatter } from './../models/formatter.interface';
+import * as DOMPurify_ from 'dompurify';
+const DOMPurify = DOMPurify_; // patch to fix rollup to work
 
+/**
+ * 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 "<a href="hyperlink">hyperlink</a>"
+ *
+ * You can optionally change the hyperlink text displayed by using the generic params "hyperlinkText" in the column definition
+ * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website' } } will display "<a href="link">Company Website</a>"
+ *
+ * You can also optionally provide the hyperlink URL by using the generic params "hyperlinkUrl" in the column definition
+ * For example: { id: 'link', field: 'link', params: {  hyperlinkText: 'Company Website', hyperlinkUrl: 'http://www.somewhere.com' } } will display "<a href="http://www.somewhere.com">Company Website</a>"
+ */
 export const hyperlinkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
-  if (value && typeof value === 'string') {
-    const matchUrl = value.match(/^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:\/~\+#]*[\w\-\@?^=%&amp;\/~\+#])?/i);
-    if (matchUrl && Array.isArray(matchUrl)) {
-      return `<a href="${matchUrl[0]}">' + value + '</a>`;
-    }
+  const columnParams = columnDef && columnDef.params || {};
+
+  let displayedText = columnParams.hyperlinkText ? columnParams.hyperlinkText : value;
+  displayedText = DOMPurify.sanitize(displayedText || '');
+
+  let outputLink = columnParams.hyperlinkUrl ? columnParams.hyperlinkUrl : value;
+  outputLink = DOMPurify.sanitize(outputLink || '');
+
+  const matchUrl = outputLink.match(/^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:\/~\+#]*[\w\-\@?^=%&amp;\/~\+#])?/i);
+
+  if (matchUrl && Array.isArray(matchUrl) && matchUrl.length > 0) {
+    const finalUrl = matchUrl[0];
+    return `<a href="${finalUrl}">${displayedText}</a>`;
   }
-  return '';
+
+  return value;
 };

src/app/modules/angular-slickgrid/formatters/hyperlinkUriPrefixFormatter.ts

@@ -21,7 +21,6 @@ import { dollarColoredFormatter } from './dollarColoredFormatter';
 import { dollarFormatter } from './dollarFormatter';
 import { editIconFormatter } from './editIconFormatter';
 import { hyperlinkFormatter } from './hyperlinkFormatter';
-import { hyperlinkUriPrefixFormatter } from './hyperlinkUriPrefixFormatter';
 import { infoIconFormatter } from './infoIconFormatter';
 import { italicFormatter } from './italicFormatter';
 import { lowercaseFormatter } from './lowercaseFormatter';
@@ -133,12 +132,14 @@ export const Formatters = {
   /** Displays a Font-Awesome edit icon (fa-pencil) */
   editIcon: editIconFormatter,
 
-  /** 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 "<a href="hyperlink">hyperlink</a>" */
+  /**
+   * 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 "<a href="hyperlink">hyperlink</a>"
+   * You can optionally change the hyperlink text displayed by using the generic params "hyperlinkText" in the column definition
+   * For example: { id: 'link', field: 'link', params: { hyperlinkText: 'Company Website' } } will display "<a href="link">Company Website</a>"
+   */
   hyperlink: hyperlinkFormatter,
 
-  /** Takes an hyperlink URI prefix (passed in column definition "params.uriPrefix") and adds the cell value. The structure will be "<a href="uriPrefix">value</a>"  */
-  hyperlinkUriPrefix: hyperlinkUriPrefixFormatter,
-
   /** Displays a Font-Awesome edit icon (fa-info-circle) */
   infoIcon: infoIconFormatter,
 

src/app/modules/angular-slickgrid/formatters/index.ts

@@ -7,6 +7,7 @@ describe('the Info Icon Formatter', () => {
     const result = infoIconFormatter(0, 0, value, {} as Column, {});
     expect(result).toBe('<i class="fa fa-info-circle pointer info-icon" aria-hidden="true"></i>');
   });
+
   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, {});

src/app/modules/angular-slickgrid/formatters/infoIconFormatter.spec.ts

@@ -2,31 +2,31 @@ import { Column } from '../models';
 import { percentCompleteBarFormatter } from './percentCompleteBarFormatter';
 
 describe('the Percent Complete Formatter', () => {
-  it('should return an empty string when no value is provided', async () => {
+  it('should return an empty string when no value is provided', () => {
     const output = percentCompleteBarFormatter(1, 1, '', {} as Column, {});
     expect(output).toBe('');
   });
 
-  it('should return empty string when non-numeric value is provided', async () => {
+  it('should return empty string when non-numeric value is provided', () => {
     const output = percentCompleteBarFormatter(1, 1, 'hello', {} as Column, {});
     expect(output).toBe('');
   });
 
-  it('should display a red color bar formatter when number 0 is provided', async () => {
+  it('should display a red color bar formatter when number 0 is provided', () => {
     const input = 0;
     const color = 'red';
     const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
 
-  it('should display a red color bar when value is a negative number', async () => {
+  it('should display a red color bar when value is a negative number', () => {
     const input = -15;
     const color = 'red';
     const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
 
-  it('should display a silver color bar when value is between 30 and 69', async () => {
+  it('should display a silver color bar when value is between 30 and 69', () => {
     const input1 = 30;
     const input2 = 69;
     const color = 'silver';
@@ -36,10 +36,17 @@ describe('the Percent Complete Formatter', () => {
     expect(output2).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input2}%"></span>`);
   });
 
-  it('should display a green color bar when value greater or equal to 70 and is a type string', async () => {
+  it('should display a green color bar when value greater or equal to 70 and is a type string', () => {
     const input = '70';
     const color = 'green';
     const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
     expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:${input}%"></span>`);
   });
+
+  it('should display a green color bar with percentage of 100% when number is greater than 100 is provided', () => {
+    const input = 125;
+    const color = 'green';
+    const output = percentCompleteBarFormatter(1, 1, input, {} as Column, {});
+    expect(output).toBe(`<span class="percent-complete-bar" style="background:${color}; width:100%"></span>`);
+  });
 });