-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ngrid/testing): add test harnesses for ngrid, columns and data r…
…ows/cells This commit add support for common actions when testing nGrid, getting columns and data. In addition, a restructure was made in the testing infrastructure and project configuration to start testing the code with these helpers.
- Loading branch information
1 parent
e064725
commit 19bbba6
Showing
54 changed files
with
1,262 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...emo-app/content/concepts/datasource/introduction/simple-model/simple-model.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <pbl-ngrid style="height: 110px" [dataSource]="ds" [columns]="columns"></pbl-ngrid> | ||
| <pbl-ngrid style="height: 500px" [dataSource]="ds" [columns]="columns"></pbl-ngrid> |
37 changes: 37 additions & 0 deletions
37
...-app/content/concepts/datasource/introduction/simple-model/simple-model.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
|
|
||
| import { HarnessLoader } from '@angular/cdk/testing'; | ||
| import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { PblNgridModule } from '@pebula/ngrid'; | ||
| import { PblNgridHarness } from '@pebula/ngrid/testing'; | ||
| import { DatasourceIntroductionSimpleModelExample } from './simple-model.component'; | ||
|
|
||
| describe('demo-app/datasource/simple-model', () => { | ||
| let fixture: ComponentFixture<DatasourceIntroductionSimpleModelExample>; | ||
| let loader: HarnessLoader; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [PblNgridModule.forRoot({}, [])], | ||
| declarations: [DatasourceIntroductionSimpleModelExample], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(DatasourceIntroductionSimpleModelExample); | ||
| fixture.detectChanges(); | ||
| loader = TestbedHarnessEnvironment.loader(fixture); | ||
| }); | ||
|
|
||
| it('should have the columns provided', async () => { | ||
| const columnIds = await (await loader.getHarness(PblNgridHarness)).getColumnIds(); | ||
| expect(columnIds).toEqual(['id', 'name', 'email']); | ||
| }); | ||
|
|
||
| it('should show the data provided', async () => { | ||
| const data = await (await loader.getHarness(PblNgridHarness)).getViewPortData(); | ||
|
|
||
| expect(data).toEqual([ | ||
| ['10', 'John Doe', '[email protected]'] | ||
| ]); | ||
| }); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,8 @@ | ||
| import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; | ||
| import { Example } from '@pebula/apps/shared'; | ||
| import { createDS } from '@pebula/ngrid'; | ||
| import { of, timer } from 'rxjs'; | ||
| import { mapTo } from 'rxjs/operators'; | ||
|
|
||
| @Component({ | ||
| selector: 'pbl-datasource-introduction-simple-model-example', | ||
|
|
@@ -21,5 +24,5 @@ export class DatasourceIntroductionSimpleModelExample { | |
| }, | ||
| }; | ||
|
|
||
| ds = [ { id: 10, name: 'John Doe', email: '[email protected]' }]; | ||
| ds = timer(1000).pipe(mapTo([ { id: 10, name: 'John Doe', email: '[email protected]' }])); | ||
| } | ||
45 changes: 45 additions & 0 deletions
45
...ce/introduction/working-with-pbl-datasource/working-with-pbl-datasource.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { HarnessLoader } from '@angular/cdk/testing'; | ||
| import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; | ||
| import { PblNgridModule } from '@pebula/ngrid'; | ||
| import { PblNgridHarness, ScrollToLocation } from '@pebula/ngrid/testing'; | ||
| import { WorkingWithPblDataSourceExample } from './working-with-pbl-datasource.component'; | ||
| import { getDataSourceProvider, getDataSource } from '../../../../../src/__test-runners/test-datasource'; | ||
|
|
||
| describe('demo-app/datasource/working-with-pbl-datasource', () => { | ||
| let fixture: ComponentFixture<WorkingWithPblDataSourceExample>; | ||
| let loader: HarnessLoader; | ||
| let nGridHarness: PblNgridHarness; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [PblNgridModule.forRoot({}, [])], | ||
| declarations: [WorkingWithPblDataSourceExample], | ||
| providers: [ | ||
| await getDataSourceProvider(), | ||
| ] | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(WorkingWithPblDataSourceExample); | ||
| fixture.detectChanges(); | ||
| loader = TestbedHarnessEnvironment.loader(fixture); | ||
| nGridHarness = await loader.getHarness(PblNgridHarness); | ||
| }); | ||
|
|
||
| it('should show the data provided', async () => { | ||
| const data = await nGridHarness.getViewPortData(); | ||
| expect(data.length).toBeGreaterThanOrEqual(1); | ||
| const dsData = await getDataSource().getPeople(0, data.length); | ||
| expect(data).toEqual(dsData.map( d => [d.id.toString(), d.name, d.email])); | ||
| }); | ||
|
|
||
| it('should show the data provided scrolling to the end (vScroll)', async () => { | ||
| await nGridHarness.waitForRenderChanged(() => nGridHarness.scrollToLocation(ScrollToLocation.VerticalEnd)) | ||
| const data = await nGridHarness.getViewPortData(); | ||
| expect(data.length).toBeGreaterThanOrEqual(1); | ||
| const dsData = await getDataSource().getPeople(0, 500); | ||
| dsData.splice(0, dsData.length - data.length); | ||
| expect(data).toEqual(dsData.map( d => [d.id.toString(), d.name, d.email])); | ||
| }); | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| title: E2E Testing | ||
| path: concepts/testing/e2e-testing | ||
| parent: concepts/testing | ||
| ordinal: 1 | ||
| --- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| title: Testing | ||
| path: concepts/testing | ||
| parent: concepts | ||
| ordinal: 4 | ||
| empty: true | ||
| --- |
55 changes: 55 additions & 0 deletions
55
apps/ngrid-demo-app/content/concepts/testing/unit-testing.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| title: Unit Testing | ||
| path: concepts/testing/unit-testing | ||
| parent: concepts/testing | ||
| ordinal: 0 | ||
| --- | ||
| # Unit Testing | ||
|
|
||
| **nGrid** comes with built in helpers to support unit testing of the grid. | ||
|
|
||
| The helpers are actually classes that encapsulate internal logic done by the grid and allow the tester to focus on testing | ||
| what's required for the task at hand. | ||
|
|
||
| These classes are called [Component test harnesses](https://material.angular.io/cdk/test-harnesses/overview) and they are part | ||
| of the test harness suite provided by the angular cdk, you can read more about it [here](https://material.angular.io/cdk/test-harnesses/overview). | ||
|
|
||
| The helpers are not coupled with any testing framework or runners. You can use them with karma or with protractor to execute E2E tests. | ||
|
|
||
| I> Using the harness is optional, you can use them to test most of the scenarios however, if you need to use plain old unit testing | ||
| techniques you are free to do so. | ||
|
|
||
| ## NGrid Component Harness | ||
|
|
||
| The main harness used to interact with **nGrid** is `PblNgridHarness` located in `@pebula/ngrid/testing`. | ||
|
|
||
| From `PblNgridHarness` you can query for other harness components that wrap cells, columns, rows and other building blocks. | ||
|
|
||
| For example, `PblNgridHarness.getViewPortData()` will return a `string[][]` which represents the currently rendered row matrix | ||
| with cell data as it is rendered in the DOM. | ||
|
|
||
| `getViewPortData()` is helper function which uses the row harness component `PblNgridDataRowHarness` to get all rows | ||
| and in each row, the `PblNgridColumnHeaderCellHarness` component to get each cell. | ||
|
|
||
| I> The entire documentation site is using nGrid's test harness components. | ||
|
|
||
| ## Testing nGrid with Jest using JSDom | ||
|
|
||
| The component harness helpers will work with any framework / runner, including Jest, however using Jest with JSDOM is not | ||
| recommended. | ||
|
|
||
| Wether you use the component harness or not, using Jest exposes a limited set of UI functionality when testing. | ||
| This is true in general, but has a deep impact on big UI components like **nGrid**. | ||
|
|
||
| Jest uses JSDOM to allow fest unit testing but it comes with a cost, it is not a browser. | ||
| There is no layout rendering, no CSS calculation, no scroll API support and more. | ||
|
|
||
| This does not allow proper UI testing for a component such as the grid. | ||
| For example, it is nearly impossible to deep test the grid with virtual scroll enabled since it is not possible to scroll. | ||
| This will also be true when working with grid's that have a lot of columns which exceed the viewport size, you will not be able | ||
| to bring them into the view, no scrolling. | ||
|
|
||
| That being said, if you're already using Jest you might not have any other option but to use it. | ||
| The component harness helpers will work but some functionality will not. | ||
|
|
||
| You will be able to test columns, data and other functionality but not all. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,6 +2,6 @@ | |
| title: Theming | ||
| path: concepts/theming | ||
| parent: concepts | ||
| ordinal: 4 | ||
| ordinal: 5 | ||
| empty: true | ||
| --- | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,3 @@ tags: internalPlugin | |
| empty: true | ||
| --- | ||
| # Drag & Drop Plugin | ||
|
|
||
Oops, something went wrong.