Skip to content

Commit

Permalink
feat(filters): add few Filters and their unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding-SE committed Mar 17, 2020
1 parent e148090 commit c7e5897
Show file tree
Hide file tree
Showing 59 changed files with 2,649 additions and 87 deletions.
33 changes: 18 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Slickgrid-Universal

This is a monorepo project (using Lerna) which regroups a few packages under a single repository. The goal is to create a common repo that includes all Editors, Filters, Extensions and Services that could be used by any Framework (it is framework agnostic). It's also a good opportunity to decouple some other features that not all users need, this will also help in getting a smaller bundle, for example not lot users require backend services (OData, GraphQL), which is why these are better handled in a monorepo structure.
This is a monorepo project (using Lerna) which is regrouping a few packages under a single repository. The goal is to create a common repo that includes all Editors, Filters, Extensions and Services that could be used by any Framework (it is framework agnostic). It's also a good opportunity to decouple some other features that not all users need, this will also help in getting a smaller bundle. For example not lot users require backend services (OData, GraphQL), which is why these are better handled in a monorepo structure.

### Why create this monorepo?
You might be wondering why was this monorepo created?
1. it removes lot of duplicate code that existed in both [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) (over 80% were the same code and that is not very DRY).
2. removes any Services that not all user need (OData, GraphQL, ...)
2. removes any Services that not all user need/want (OData, GraphQL, Export to File, Export to Excel, ...)
3. framework agnostic, it can be implemented in many more frameworks in the future

### Framework using this monorepo
This a Work in Progress, eventually [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) will be rewritten to use this monorepo and have shared common code.
This is a Work in Progress, eventually [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid) and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) will be rewritten to use this monorepo which will simplify debugging/fixing common code.

However, this project is built with a Vanilla Implementation (no associated to any framework) and that is what the UI will be tested with. The Vanilla bundle is also used in our SalesForce (with Lighning Web Component) hence the creation of this monorepo.

Expand Down Expand Up @@ -52,7 +52,7 @@ npm run test
npm run test:watch
```

TODO
## TODO
#### Implementation
- [x] Aggregators (4)
- [ ] Editors
Expand All @@ -62,8 +62,8 @@ TODO
- [x] Float
- [x] Integer
- [x] Long Text
- [ ] Multiple Select
- [ ] Single Select
- [x] Multiple Select
- [x] Single Select
- [x] Slider
- [x] Text
- [ ] Filters
Expand All @@ -73,11 +73,11 @@ TODO
- [ ] Compound Slider
- [ ] Date Range
- [x] Input(s)
- [ ] Multiple Select
- [ ] Single Select
- [x] Multiple Select
- [x] Single Select
- [x] Native Select
- [ ] Slider
- [ ] Slider Range
- [x] Slider
- [x] Slider Range
- [x] Formatters (31)
- [ ] Extensions
- [x] AutoTooltip
Expand All @@ -96,12 +96,12 @@ TODO
- [x] Sorters (5)
- [ ] Services
- [x] Collection
- [ ] Excel Export
- [ ] Export Text
- [ ] Excel Export (separate package)
- [ ] Export Text (separate package?!)
- [x] Extension
- [x] Filter
- [ ] GraphQL
- [ ] OData
- [ ] GraphQL (separate package)
- [ ] OData (separate package)
- [ ] Grid Event
- [ ] Grid State
- [x] Grouping & Col Span
Expand All @@ -112,6 +112,9 @@ TODO

#### Extra Todos
- [ ] Add Multiple Example Demos with Vanilla implementation
- [ ] Add built demo as a GitHub Demo website
- [ ] Add GitHub Demo website
- [ ] Add Cypress E2E tests
- [ ] Add Jest Unit tests
- [ ] Add CI/CD (CircleCI or GitHub Actions)
- [x] VScode Chrome Debugger
- [x] Jest Debugger
2 changes: 1 addition & 1 deletion packages/common/src/filters/__tests__/inputFilter.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InputFilter } from '../inputFilter';
import { GridOption, FilterArguments, Column } from '../../interfaces';
import { GridOption, FilterArguments, Column } from '../../interfaces/index';
import { Filters } from '..';

const containerId = 'demo-container';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InputMaskFilter } from '../inputMaskFilter';
import { GridOption, FilterArguments, Column } from '../../interfaces';
import { GridOption, FilterArguments, Column } from '../../interfaces/index';
import { Filters } from '..';

const containerId = 'demo-container';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InputNumberFilter } from '../inputNumberFilter';
import { GridOption, FilterArguments, Column } from '../../interfaces';
import { GridOption, FilterArguments, Column } from '../../interfaces/index';
import { Filters } from '..';

const containerId = 'demo-container';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InputPasswordFilter } from '../inputPasswordFilter';
import { GridOption, FilterArguments, Column } from '../../interfaces';
import { GridOption, FilterArguments, Column } from '../../interfaces/index';
import { Filters } from '..';

const containerId = 'demo-container';
Expand Down
76 changes: 76 additions & 0 deletions packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
// import 3rd party lib multiple-select for the tests
import 'multiple-select-adapted/src/multiple-select.js';

import { Filters } from '..';
import { Column, FilterArguments, GridOption } from '../../interfaces/index';
import { CollectionService } from './../../services/collection.service';
import { MultipleSelectFilter } from '../multipleSelectFilter';
import { TranslateServiceStub } from '../../../../../test/translateServiceStub';

const containerId = 'demo-container';

// define a <div> container to simulate the grid container
const template = `<div id="${containerId}"></div>`;

const gridOptionMock = {
enableFiltering: true,
enableFilterTrimWhiteSpace: true,
} as GridOption;

const gridStub = {
getOptions: () => gridOptionMock,
getColumns: jest.fn(),
getHeaderRowColumn: jest.fn(),
render: jest.fn(),
};

describe('SelectFilter', () => {
let translateService: TranslateServiceStub;
let divContainer: HTMLDivElement;
let filter: SingleSelectFilter;
let filterArguments: FilterArguments;
let spyGetHeaderRow;
let mockColumn: Column;
let collectionService: CollectionService;

beforeEach(() => {
translateService = new TranslateServiceStub();
collectionService = new CollectionService(translateService);

divContainer = document.createElement('div');
divContainer.innerHTML = template;
document.body.appendChild(divContainer);
spyGetHeaderRow = jest.spyOn(gridStub, 'getHeaderRowColumn').mockReturnValue(divContainer);

mockColumn = {
id: 'gender', field: 'gender', filterable: true,
filter: {
model: Filters.multipleSelect,
collection: [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }]
}
};

filterArguments = {
grid: gridStub,
columnDef: mockColumn,
callback: jest.fn()
};

filter = new MultipleSelectFilter(collectionService, translateService);
});

afterEach(() => {
filter.destroy();
});

it('should be a multiple-select filter', () => {
mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
filter = new MultipleSelectFilter(collectionService, translateService);
filter.init(filterArguments, true);
const filterCount = divContainer.querySelectorAll('select.ms-filter.search-filter.filter-gender').length;

expect(spyGetHeaderRow).toHaveBeenCalled();
expect(filterCount).toBe(1);
expect(filter.isMultipleSelect).toBe(true);
});
});
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { FieldType, OperatorType } from '../../enums';
import { Column, FilterArguments, GridOption } from '../../interfaces';
import { FieldType, OperatorType } from '../../enums/index';
import { Column, FilterArguments, GridOption } from '../../interfaces/index';
import { CollectionService } from './../../services/collection.service';
import { Filters } from '..';
import { NativeSelectFilter } from '../nativeSelectFilter';
Expand Down
Loading

0 comments on commit c7e5897

Please sign in to comment.