Merge pull request #225 from ghiscoding/feat/gridodata-unit-tests

feat(odata): add presets to GridOdata Service (and unit tests), closes #206

Author: ghiscoding

src/app/examples/grid-graphql.component.ts

@@ -135,7 +135,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
           { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' }
         ],
         sorters: [
-          // direction can typed as 'asc' (uppercase or lowercase) and/or use the SortDirection type
+          // direction can written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
           { columnId: 'name', direction: 'asc' },
           { columnId: 'company', direction: SortDirection.DESC }
         ],

src/app/examples/grid-odata.component.ts

@@ -6,7 +6,9 @@ import {
   Filters,
   GridOdataService,
   GridOption,
-  Statistic
+  Statistic,
+  SortDirection,
+  OperatorType
 } from './../modules/angular-slickgrid';
 
 const defaultPageSize = 20;
@@ -41,20 +43,22 @@ export class GridOdataComponent implements OnInit {
   processing = true;
   status = { text: 'processing...', class: 'alert alert-danger' };
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
   ngOnInit(): void {
     this.columnDefinitions = [
-      { id: 'name', name: 'Name', field: 'name', sortable: true, type: FieldType.string,
+      {
+        id: 'name', name: 'Name', field: 'name', sortable: true, type: FieldType.string,
         filterable: true,
         filter: {
           model: Filters.compoundInput
         }
       },
-      { id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true,
+      {
+        id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true,
         filter: {
           model: Filters.singleSelect,
-          collection: [ { value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]
+          collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }]
         }
       },
       { id: 'company', name: 'Company', field: 'company' }
@@ -80,6 +84,18 @@ export class GridOdataComponent implements OnInit {
         pageSize: defaultPageSize,
         totalItems: 0
       },
+      presets: {
+        // you can also type operator as string, e.g.: operator: 'EQ'
+        filters: [
+          { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
+        ],
+        sorters: [
+          // direction can be written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
+          { columnId: 'name', direction: 'asc' },
+          { columnId: 'gender', direction: SortDirection.DESC }
+        ],
+        pagination: { pageNumber: 2, pageSize: 20 }
+      },
       backendServiceApi: {
         service: new GridOdataService(),
         preProcess: () => this.displaySpinner(true),
@@ -200,7 +216,7 @@ export class GridOdataComponent implements OnInit {
       }
 
       this.http.get(url).subscribe(data => {
-        const dataArray = <any[]> data;
+        const dataArray = <any[]>data;
 
         // Read the result field from the JSON response.
         const firstRow = skip;

src/app/modules/angular-slickgrid/models/caseType.ts

@@ -1,5 +1,13 @@
 export enum CaseType {
+  /** For example: camelCase */
   camelCase,
+
+  /** For example: PascalCase */
   pascalCase,
-  snakeCase
+
+  /** For example: snake_case */
+  snakeCase,
+
+  /** For example: kebab-case */
+  kebabCase,
 }

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

@@ -82,6 +82,7 @@ export * from './keyCode.enum';
 export * from './multiColumnSort.interface';
 export * from './multipleSelectOption.interface';
 export * from './odataOption.interface';
+export * from './odataSortingOption.interface';
 export * from './onEventArgs.interface';
 export * from './operatorString';
 export * from './operatorType.enum';

src/app/modules/angular-slickgrid/models/odataOption.interface.ts

@@ -2,13 +2,30 @@ import { BackendServiceOption } from './backendServiceOption.interface';
 import { CaseType } from './caseType';
 
 export interface OdataOption extends BackendServiceOption {
-    caseType?: CaseType;
-    top?: number;
-    skip?: number;
-    filter?: string;
-    filterBy?: any;
-    filterBySeparator?: string;
-    filterQueue?: any[];
-    orderBy?: string;
-    [key: string]: any;
+  /** What is the casing type to use? Typically that would be 1 of the following 2: camelCase or PascalCase */
+  caseType?: CaseType;
+
+  /** How many rows to pull? */
+  top?: number;
+
+  /** How many rows to skip on the pagination? */
+  skip?: number;
+
+  /** (alias to "filter") Filter string (or array of string) that must be a valid OData string */
+  filter?: string | string[];
+
+  /** Filter string (or array of string) that must be a valid OData string */
+  filterBy?: any;
+
+  /** What is separator between each filters? Typically "and", "or" */
+  filterBySeparator?: 'and' | 'or';
+
+  /** Filter queue */
+  filterQueue?: any[];
+
+  /** Sorting string (or array of string) that must be a valid OData string */
+  orderBy?: string | string[];
+
+  /** When accessed as an object */
+  [key: string]: any;
 }

src/app/modules/angular-slickgrid/models/odataSortingOption.interface.ts

@@ -0,0 +1,6 @@
+import { SortDirection, SortDirectionString } from './index';
+
+export interface OdataSortingOption {
+  field: string;
+  direction: SortDirection | SortDirectionString;
+}

src/app/modules/angular-slickgrid/models/operatorString.ts

@@ -1 +1 @@
-export type OperatorString = '' | '<>' | '!=' | '=' | '==' | '>' | '>=' | '<' | '<=' | '*' | 'a*' | '*z' | 'EQ' | 'GE' | 'GT' | 'NE' | 'LE' | 'LT' | 'IN' | 'NIN' | 'NOT_IN' | 'IN_CONTAINS' | 'NIN_CONTAINS' | 'NOT_IN_CONTAINS' | 'endsWith' | 'startsWith';
+export type OperatorString = '' | '<>' | '!=' | '=' | '==' | '>' | '>=' | '<' | '<=' | '*' | 'a*' | '*z' | 'EQ' | 'GE' | 'GT' | 'NE' | 'LE' | 'LT' | 'IN' | 'NIN' | 'NOT_IN' | 'IN_CONTAINS' | 'NIN_CONTAINS' | 'NOT_IN_CONTAINS' | 'NOT_CONTAINS' | 'Not_Contains' | 'Contains' | 'endsWith' | 'startsWith';

src/app/modules/angular-slickgrid/services/__tests__/graphql.service.spec.ts

@@ -45,7 +45,7 @@ const gridStub = {
   setSortColumns: jest.fn(),
 };
 
-describe('CollectionService', () => {
+describe('GraphqlService', () => {
   let mockColumns: Column[];
   let service: GraphqlService;
   let paginationOptions: Pagination;
@@ -203,10 +203,11 @@ describe('CollectionService', () => {
       gridOptionMock.enablePagination = false;
 
       service.init({ datasetName: 'users', columnDefinitions: columns }, paginationOptions, gridStub);
+      service.updatePagination(3, 20);
       const query = service.buildQuery();
-      gridOptionMock.enablePagination = true; // reset it for the next test
 
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+      gridOptionMock.enablePagination = true; // reset it for the next test
     });
 
     it('should have a different pagination offset when it is updated before calling the buildQuery query (presets does that)', () => {
@@ -480,7 +481,7 @@ describe('CollectionService', () => {
       expect(currentPagination).toEqual({ pageNumber: 3, pageSize: 20 });
     });
 
-    it('should return a query with the new pagination and use default pagination size when not provided as argument', () => {
+    it('should return a query with the new pagination and use pagination size options that was passed to service options when it is not provided as argument to "processOnPaginationChanged"', () => {
       const expectation = `query{users(first:10, offset:20) { totalCount,nodes { id, field1, field2 }}}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
 
@@ -589,12 +590,12 @@ describe('CollectionService', () => {
     });
 
     it('should return a query with multiple filters when the filters object has multiple search and they are passed as a filter trigger by a filter event and is of type ColumnFilters', () => {
-      const expectation = `query{users(first:10, offset:0, filterBy:[{field:gender, operator:EQ, value:"female"}, {field:company, operator:Contains, value:"abc"}]) { totalCount,nodes{ id,company,gender,name } }}`;
+      const expectation = `query{users(first:10, offset:0, filterBy:[{field:gender, operator:EQ, value:"female"}, {field:company, operator:Not_Contains, value:"abc"}]) { totalCount,nodes{ id,company,gender,name } }}`;
       const mockColumnGender = { id: 'gender', field: 'gender' } as Column;
       const mockColumnCompany = { id: 'company', field: 'company' } as Column;
       const mockColumnFilters = {
         gender: { columnId: 'gender', columnDef: mockColumnGender, searchTerms: ['female'], operator: 'EQ' },
-        company: { columnId: 'company', columnDef: mockColumnCompany, searchTerms: ['abc'], operator: 'Contains' },
+        company: { columnId: 'company', columnDef: mockColumnCompany, searchTerms: ['abc'], operator: OperatorType.notContains },
       } as ColumnFilters;
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -807,10 +808,10 @@ describe('CollectionService', () => {
     });
 
     it('should return a query using a different field to query when the column has a "queryField" defined in its definition', () => {
-      const expectation = `query{users(first:10, offset:0, filterBy:[{field:isMale, operator:EQ, value:"female"}]) { totalCount,nodes{ id,company,gender,name } }}`;
+      const expectation = `query{users(first:10, offset:0, filterBy:[{field:isMale, operator:EQ, value:"true"}]) { totalCount,nodes{ id,company,gender,name } }}`;
       const mockColumn = { id: 'gender', field: 'gender', queryField: 'isMale' } as Column;
       const mockColumnFilters = {
-        gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: ['female'], operator: 'EQ' },
+        gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: [true], operator: 'EQ' },
       } as ColumnFilters;
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -847,6 +848,23 @@ describe('CollectionService', () => {
 
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
     });
+
+    it('should return a query without any sorting after clearFilters was called', () => {
+      const expectation = `query{ users(first:10,offset:0) { totalCount,nodes{id, company, gender,name} }}`;
+      const mockColumn = { id: 'gender', field: 'gender' } as Column;
+      const mockColumnFilters = {
+        gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: ['female'], operator: 'EQ' },
+      } as ColumnFilters;
+
+      service.init(serviceOptions, paginationOptions, gridStub);
+      service.updateFilters(mockColumnFilters, false);
+      service.clearFilters();
+      const currentFilters = service.getCurrentFilters();
+      const query = service.buildQuery();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+      expect(currentFilters).toEqual([]);
+    });
   });
 
   describe('updateSorters method', () => {
@@ -925,5 +943,40 @@ describe('CollectionService', () => {
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
       expect(currentSorters).toEqual([{ columnId: 'gender', direction: 'DESC' }, { columnId: 'name', direction: 'ASC' }]);
     });
+
+    it('should return a query without the field sorter when its field property is missing', () => {
+      const expectation = `query { users(first:10, offset:0, orderBy:[{field:gender, direction:DESC}]) {
+                          totalCount, nodes { id,company,gender,name }}}`;
+      const mockColumnSort = [
+        { columnId: 'gender', sortCol: { id: 'gender', field: 'gender' }, sortAsc: false },
+        { columnId: 'firstName', sortCol: { id: 'firstName' }, sortAsc: true }
+      ] as ColumnSort[];
+
+      service.init(serviceOptions, paginationOptions, gridStub);
+      service.updateSorters(mockColumnSort);
+      const query = service.buildQuery();
+      const currentSorters = service.getCurrentSorters();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+      expect(currentSorters).toEqual([{ columnId: 'gender', direction: 'DESC' }, { columnId: 'firstName', direction: 'ASC' }]);
+    });
+
+    it('should return a query without any sorting after clearSorters was called', () => {
+      const expectation = `query { users(first:10, offset:0) {
+        totalCount, nodes { id,company,gender,name }}}`;
+      const mockColumnSort = [
+        { columnId: 'gender', sortCol: { id: 'gender', field: 'gender' }, sortAsc: false },
+        { columnId: 'firstName', sortCol: { id: 'firstName', field: 'firstName' }, sortAsc: true }
+      ] as ColumnSort[];
+
+      service.init(serviceOptions, paginationOptions, gridStub);
+      service.updateSorters(mockColumnSort);
+      service.clearSorters();
+      const query = service.buildQuery();
+      const currentSorters = service.getCurrentSorters();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+      expect(currentSorters).toEqual([]);
+    });
   });
 });