Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 306546e

Browse files
timdeschryvertimdeschryver
authoredJun 28, 2020
feat: upgrade to Angular 10 (#119)
BREAKING CHANGE: - fire events (e.g. `click`, `input`, `change`) are removed from the render result, import `fireEvent` directly from `@testing-library/angular` (as an example take a look at http://github.com/testing-library/angular-testing-library/blob/master/apps/example-app/app/examples/03-forms.spec.ts#L2) - `waitFor` and `waitForElementToBeRemoved` are removed from the render result, import them directly from `@testing-library/angular` - custom user events are removed, use the `@testing-library/user-event` package (testing-library.com/docs/ecosystem-user-event) - `selectOptions` now selects the option based on its value, not via the text of the select option
1 parent 66e98b9 commit 306546e

32 files changed

+3413
-5394
lines changed
 

‎browserslist renamed to ‎.browserslistrc

File renamed without changes.

‎apps/example-app/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"outDir": "../out-tsc/app",
55
"types": [],

‎apps/example-app/tsconfig.spec.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"module": "commonjs",
55
"types": ["jest", "node"]

‎package.json

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,52 +20,52 @@
2020
"semantic-release": "semantic-release"
2121
},
2222
"dependencies": {
23-
"@angular/animations": "^9.0.3",
24-
"@angular/cdk": "^9.1.0",
25-
"@angular/common": "^9.0.3",
26-
"@angular/compiler": "^9.0.3",
27-
"@angular/core": "^9.0.3",
28-
"@angular/forms": "^9.0.3",
29-
"@angular/material": "^9.1.0",
30-
"@angular/platform-browser": "^9.0.3",
31-
"@angular/platform-browser-dynamic": "^9.0.3",
32-
"@angular/router": "^9.0.3",
33-
"@ngrx/store": "^9.0.0-rc.0",
23+
"@angular/animations": "^10.0.0",
24+
"@angular/cdk": "^10.0.0",
25+
"@angular/common": "^10.0.0",
26+
"@angular/compiler": "^10.0.0",
27+
"@angular/core": "^10.0.0",
28+
"@angular/forms": "^10.0.0",
29+
"@angular/material": "^10.0.0",
30+
"@angular/platform-browser": "^10.0.0",
31+
"@angular/platform-browser-dynamic": "^10.0.0",
32+
"@angular/router": "^10.0.0",
33+
"@ngrx/store": "^9.2.0",
3434
"@nrwl/angular": "^9.4.5",
35-
"@phenomnomnominal/tsquery": "^3.0.0",
36-
"@testing-library/dom": "^7.9.0",
37-
"@testing-library/user-event": "^11.0.0",
38-
"core-js": "^3.1.3",
39-
"rxjs": "^6.5.4",
40-
"tslib": "^1.11.1",
41-
"tslint": "^5.16.0",
42-
"zone.js": "~0.10.2"
35+
"@phenomnomnominal/tsquery": "^4.1.0",
36+
"@testing-library/dom": "^7.18.1",
37+
"@testing-library/user-event": "^12.0.11",
38+
"core-js": "^3.6.5",
39+
"rxjs": "^6.5.5",
40+
"tslib": "^2.0.0",
41+
"tslint": "~6.1.0",
42+
"zone.js": "~0.10.3"
4343
},
4444
"devDependencies": {
45-
"@angular-devkit/build-angular": "~0.900.3",
46-
"@angular-devkit/build-ng-packagr": "~0.900.3",
47-
"@angular/cli": "~9.0.3",
48-
"@angular/compiler-cli": "^9.0.3",
49-
"@angular/language-service": "^9.0.3",
45+
"@angular-devkit/build-angular": "~0.1000.0",
46+
"@angular-devkit/build-ng-packagr": "~0.1000.0",
47+
"@angular/cli": "~10.0.0",
48+
"@angular/compiler-cli": "^10.0.0",
49+
"@angular/language-service": "^10.0.0",
5050
"@nrwl/jest": "^9.4.5",
5151
"@nrwl/node": "^9.4.5",
5252
"@nrwl/nx-plugin": "^9.4.5",
5353
"@nrwl/workspace": "^9.4.5",
54-
"@testing-library/jest-dom": "^5.9.0",
55-
"@types/jest": "~24.0.11",
56-
"@types/node": "^14.0.11",
57-
"codelyzer": "^5.1.2",
58-
"cpy-cli": "^3.1.0",
54+
"@testing-library/jest-dom": "^5.11.0",
55+
"@types/jest": "~26.0.3",
56+
"@types/node": "^14.0.14",
57+
"codelyzer": "^5.2.2",
58+
"cpy-cli": "^3.1.1",
5959
"husky": "^4.2.5",
60-
"jest": "^25.5.4",
61-
"jest-preset-angular": "^8.2.0",
62-
"lint-staged": "^10.2.9",
63-
"ng-packagr": "^9.0.0",
60+
"jest": "^26.1.0",
61+
"jest-preset-angular": "^8.2.1",
62+
"lint-staged": "^10.2.11",
63+
"ng-packagr": "^10.0.0",
6464
"prettier": "^2.0.5",
6565
"rimraf": "^3.0.2",
66-
"semantic-release": "^17.0.2",
67-
"ts-jest": "^26.1.0",
66+
"semantic-release": "^17.1.1",
67+
"ts-jest": "^26.1.1",
6868
"ts-node": "~8.10.2",
69-
"typescript": "~3.7.5"
69+
"typescript": "~3.9.5"
7070
}
71-
}
71+
}

‎projects/jest-utils/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,8 @@
2626
},
2727
"publishConfig": {
2828
"access": "public"
29+
},
30+
"dependencies": {
31+
"tslib": "^2.0.0"
2932
}
3033
}

‎projects/jest-utils/tests/create-mock.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
22
import { TestBed } from '@angular/core/testing';
33

44
import { createMock, provideMock, Mock } from '../src/public_api';
5-
import { render } from '../../testing-library/src/public_api';
5+
import { render, fireEvent } from '../../testing-library/src/public_api';
66

77
class FixtureService {
88
constructor(private foo: string, public bar: string) {}
@@ -30,22 +30,22 @@ it('mocks all functions', () => {
3030
});
3131

3232
it('provides a mock service', async () => {
33-
const { click, getByText } = await render(FixtureComponent, {
33+
const { getByText } = await render(FixtureComponent, {
3434
providers: [provideMock(FixtureService)],
3535
});
3636
const service = TestBed.inject(FixtureService);
3737

38-
click(getByText('Print'));
38+
fireEvent.click(getByText('Print'));
3939
expect(service.print).toHaveBeenCalledTimes(1);
4040
});
4141

4242
it('is possible to write a mock implementation', async (done) => {
43-
const { click, getByText } = await render(FixtureComponent, {
43+
const { getByText } = await render(FixtureComponent, {
4444
providers: [provideMock(FixtureService)],
4545
});
4646

4747
const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
4848
service.print.mockImplementation(() => done());
4949

50-
click(getByText('Print'));
50+
fireEvent.click(getByText('Print'));
5151
});

‎projects/jest-utils/tsconfig.lib.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"outDir": "../../out-tsc/lib",
55
"target": "es2015",

‎projects/jest-utils/tsconfig.spec.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"module": "commonjs",
55
"types": ["jest", "node"]

‎projects/testing-library/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@
2222
},
2323
"homepage": "https://github.com/testing-library/angular-testing-library#readme",
2424
"peerDependencies": {
25-
"@angular/common": "^9.0.0",
26-
"@angular/platform-browser": "^9.0.0",
27-
"@angular/animations": "^9.0.0",
28-
"@angular/router": "^9.0.0",
29-
"@angular/core": "^9.0.0"
25+
"@angular/common": "^10.0.0",
26+
"@angular/platform-browser": "^10.0.0",
27+
"@angular/animations": "^10.0.0",
28+
"@angular/router": "^10.0.0",
29+
"@angular/core": "^10.0.0"
3030
},
3131
"dependencies": {
32-
"@testing-library/dom": "^7.9.0",
33-
"@testing-library/user-event": "^8.1.0",
32+
"@testing-library/dom": "^7.18.1",
3433
"@phenomnomnominal/tsquery": "^3.0.0",
34+
"tslib": "^2.0.0",
3535
"tslint": "^5.16.0"
3636
},
3737
"publishConfig": {

‎projects/testing-library/src/lib/models.ts

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,11 @@
11
import { Type, DebugElement } from '@angular/core';
22
import { ComponentFixture } from '@angular/core/testing';
33
import { Routes } from '@angular/router';
4-
import {
5-
BoundFunction,
6-
FireObject,
7-
Queries,
8-
queries,
9-
waitFor,
10-
waitForElementToBeRemoved,
11-
Config as dtlConfig,
12-
} from '@testing-library/dom';
13-
import { UserEvents } from './user-events';
4+
import { BoundFunction, Queries, queries, Config as dtlConfig } from '@testing-library/dom';
145
import { OptionsReceived } from 'pretty-format';
156

167
export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
17-
export interface RenderResult<ComponentType, WrapperType = ComponentType>
18-
extends RenderResultQueries,
19-
FireObject,
20-
UserEvents {
8+
export interface RenderResult<ComponentType, WrapperType = ComponentType> extends RenderResultQueries {
219
/**
2210
* @description
2311
* The containing DOM node of your rendered Angular Component.
@@ -70,26 +58,6 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType>
7058
* Re-render the same component with different props.
7159
*/
7260
rerender: (componentProperties: Partial<ComponentType>) => void;
73-
/**
74-
* @deprecated
75-
* Usage of `waitForElementToBeRemoved` from render is deprecated, use this method directly from `@testing-library/angular`
76-
*
77-
* @description
78-
* Wait for the removal of element(s) from the DOM.
79-
*
80-
* For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitforelementtoberemoved
81-
*/
82-
waitForElementToBeRemoved: typeof waitForElementToBeRemoved;
83-
/**
84-
* @deprecated
85-
* Usage of `waitFor` from render is deprecated, use this method directly from `@testing-library/angular`
86-
*
87-
* @description
88-
* When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass.
89-
*
90-
* For more info see https://testing-library.com/docs/dom-testing-library/api-async#waitFor
91-
*/
92-
waitFor: typeof waitFor;
9361
}
9462

9563
export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {

‎projects/testing-library/src/lib/testing-library.ts

Lines changed: 5 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,17 @@ import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform
55
import { Router } from '@angular/router';
66
import { RouterTestingModule } from '@angular/router/testing';
77
import {
8-
FireFunction,
9-
FireObject,
108
getQueriesForElement as dtlGetQueriesForElement,
119
prettyDOM as dtlPrettyDOM,
1210
waitFor as dtlWaitFor,
1311
waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
14-
fireEvent as dtlFireEvent,
1512
screen as dtlScreen,
1613
queries as dtlQueries,
1714
waitForOptions as dtlWaitForOptions,
1815
configure as dtlConfigure,
1916
} from '@testing-library/dom';
2017
import { RenderComponentOptions, RenderDirectiveOptions, RenderResult } from './models';
2118
import { getConfig } from './config';
22-
import { createSelectOptions, createType, tab } from './user-events';
2319

2420
const mountedFixtures = new Set<ComponentFixture<any>>();
2521

@@ -113,15 +109,6 @@ export async function render<SutType, WrapperType = SutType>(
113109
detectChanges();
114110
}
115111

116-
const eventsWithDetectChanges = Object.keys(dtlFireEvent).reduce((events, key) => {
117-
events[key] = (element: HTMLElement, options?: {}) => {
118-
const result = dtlFireEvent[key](element, options);
119-
detectChanges();
120-
return result;
121-
};
122-
return events;
123-
}, {} as FireFunction & FireObject);
124-
125112
const rerender = (rerenderedProperties: Partial<SutType>) => {
126113
const changes = getChangesObj(fixture.componentInstance, rerenderedProperties);
127114

@@ -168,20 +155,6 @@ export async function render<SutType, WrapperType = SutType>(
168155
return result;
169156
};
170157

171-
function componentWaitFor<T>(
172-
callback,
173-
options: dtlWaitForOptions = { container: fixture.nativeElement },
174-
): Promise<T> {
175-
return waitForWrapper(detectChanges, callback, options);
176-
}
177-
178-
function componentWaitForElementToBeRemoved<T>(
179-
callback: (() => T) | T,
180-
options: dtlWaitForOptions = { container: fixture.nativeElement },
181-
): Promise<T> {
182-
return waitForElementToBeRemovedWrapper(detectChanges, callback, options);
183-
}
184-
185158
return {
186159
fixture,
187160
detectChanges,
@@ -193,16 +166,10 @@ export async function render<SutType, WrapperType = SutType>(
193166
Array.isArray(element)
194167
? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
195168
: console.log(dtlPrettyDOM(element, maxLength, options)),
196-
type: createType(eventsWithDetectChanges),
197-
selectOptions: createSelectOptions(eventsWithDetectChanges),
198-
tab,
199-
waitFor: componentWaitFor,
200-
waitForElementToBeRemoved: componentWaitForElementToBeRemoved,
201169
...replaceFindWithFindAndDetectChanges(
202170
fixture.nativeElement,
203171
dtlGetQueriesForElement(fixture.nativeElement, queries),
204172
),
205-
...eventsWithDetectChanges,
206173
};
207174
}
208175

@@ -302,7 +269,7 @@ async function waitForElementToBeRemovedWrapper<T>(
302269
detectChanges: () => void,
303270
callback: (() => T) | T,
304271
options?: dtlWaitForOptions,
305-
): Promise<T> {
272+
): Promise<void> {
306273
let cb;
307274
if (typeof callback !== 'function') {
308275
const elements = (Array.isArray(callback) ? callback : [callback]) as HTMLElement[];
@@ -383,18 +350,6 @@ function detectChangesForMountedFixtures() {
383350
});
384351
}
385352

386-
/**
387-
* Wrap dom-fireEvent to poke the Angular change detection cycle after an event is fired
388-
*/
389-
const fireEvent = Object.keys(dtlFireEvent).reduce((events, key) => {
390-
events[key] = (element: HTMLElement, options?: {}) => {
391-
const result = dtlFireEvent[key](element, options);
392-
detectChangesForMountedFixtures();
393-
return result;
394-
};
395-
return events;
396-
}, {} as typeof dtlFireEvent);
397-
398353
/**
399354
* Re-export screen with patched queries
400355
*/
@@ -410,25 +365,17 @@ async function waitFor<T>(callback: () => T extends Promise<any> ? never : T, op
410365
/**
411366
* Re-export waitForElementToBeRemoved with patched waitForElementToBeRemoved
412367
*/
413-
async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<T> {
368+
async function waitForElementToBeRemoved<T>(callback: (() => T) | T, options?: dtlWaitForOptions): Promise<void> {
414369
return waitForElementToBeRemovedWrapper(detectChangesForMountedFixtures, callback, options);
415370
}
416371

417-
/**
418-
* Re-export userEvent with the patched fireEvent
419-
*/
420-
const userEvent = {
421-
type: createType(fireEvent),
422-
selectOptions: createSelectOptions(fireEvent),
423-
tab: tab,
424-
};
425-
426372
/**
427373
* Manually export otherwise we get the following error while running Jest tests
428374
* TypeError: Cannot set property fireEvent of [object Object] which has only a getter
429375
* exports.fireEvent = fireEvent
430376
*/
431377
export {
378+
fireEvent,
432379
buildQueries,
433380
getByLabelText,
434381
getAllByLabelText,
@@ -495,4 +442,5 @@ export {
495442
within,
496443
} from '@testing-library/dom';
497444

498-
export { fireEvent, screen, userEvent, waitFor, waitForElementToBeRemoved };
445+
// export patched dtl
446+
export { screen, waitFor, waitForElementToBeRemoved };

‎projects/testing-library/src/lib/user-events/index.ts

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎projects/testing-library/src/lib/user-events/selectOptions.ts

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎projects/testing-library/src/lib/user-events/tab.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎projects/testing-library/src/lib/user-events/type.ts

Lines changed: 0 additions & 103 deletions
This file was deleted.

‎projects/testing-library/src/public_api.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,5 @@
33
*/
44

55
export * from './lib/models';
6-
export * from './lib/user-events';
76
export * from './lib/config';
87
export * from './lib/testing-library';

‎projects/testing-library/tests/debug.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { render } from '../src/public_api';
33

44
@Component({

‎projects/testing-library/tests/detect-changes.spec.ts

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
22
import { fakeAsync, tick } from '@angular/core/testing';
33
import { FormControl, ReactiveFormsModule } from '@angular/forms';
44
import { delay } from 'rxjs/operators';
5-
import { render } from '../src/public_api';
5+
import { render, fireEvent } from '../src/public_api';
66

77
@Component({
88
selector: 'fixture',
@@ -22,18 +22,26 @@ class FixtureComponent implements OnInit {
2222

2323
describe('detectChanges', () => {
2424
test('does not recognize change if execution is delayed', async () => {
25-
const { getByTestId, type } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
25+
const { getByTestId } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
2626

27-
type(getByTestId('input'), 'What a great day!');
27+
fireEvent.input(getByTestId('input'), {
28+
target: {
29+
value: 'What a great day!',
30+
},
31+
});
2832
expect(getByTestId('button').innerHTML).toBe('Button');
2933
});
3034

3135
test('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
32-
const { getByTestId, type, detectChanges } = await render(FixtureComponent, {
36+
const { getByTestId, detectChanges } = await render(FixtureComponent, {
3337
imports: [ReactiveFormsModule],
3438
});
3539

36-
type(getByTestId('input'), 'What a great day!');
40+
fireEvent.input(getByTestId('input'), {
41+
target: {
42+
value: 'What a great day!',
43+
},
44+
});
3745

3846
tick(500);
3947
detectChanges();
@@ -42,11 +50,15 @@ describe('detectChanges', () => {
4250
}));
4351

4452
test('does not throw on a destroyed fixture', async () => {
45-
const { getByTestId, type, fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
53+
const { getByTestId, fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
4654

4755
fixture.destroy();
4856

49-
type(getByTestId('input'), 'What a great day!');
57+
fireEvent.input(getByTestId('input'), {
58+
target: {
59+
value: 'What a great day!',
60+
},
61+
});
5062
expect(getByTestId('button').innerHTML).toBe('Button');
5163
});
5264
});

‎projects/testing-library/tests/directive.spec.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Directive, HostListener, ElementRef, Input, Output, EventEmitter, Component } from '@angular/core';
22

3-
import { render } from '../src/public_api';
3+
import { render, fireEvent } from '../src/public_api';
44

55
@Directive({
66
selector: '[onOff]',
@@ -32,19 +32,19 @@ test('uses the default props', async () => {
3232
template: '<div onOff></div>',
3333
});
3434

35-
component.click(component.getByText('init'));
36-
component.click(component.getByText('on'));
37-
component.click(component.getByText('off'));
35+
fireEvent.click(component.getByText('init'));
36+
fireEvent.click(component.getByText('on'));
37+
fireEvent.click(component.getByText('off'));
3838
});
3939

4040
test('overrides input properties', async () => {
4141
const component = await render(OnOffDirective, {
4242
template: '<div onOff on="hello"></div>',
4343
});
4444

45-
component.click(component.getByText('init'));
46-
component.click(component.getByText('hello'));
47-
component.click(component.getByText('off'));
45+
fireEvent.click(component.getByText('init'));
46+
fireEvent.click(component.getByText('hello'));
47+
fireEvent.click(component.getByText('off'));
4848
});
4949

5050
test('overrides input properties via a wrapper', async () => {
@@ -56,9 +56,9 @@ test('overrides input properties via a wrapper', async () => {
5656
},
5757
});
5858

59-
component.click(component.getByText('init'));
60-
component.click(component.getByText('hello'));
61-
component.click(component.getByText('off'));
59+
fireEvent.click(component.getByText('init'));
60+
fireEvent.click(component.getByText('hello'));
61+
fireEvent.click(component.getByText('off'));
6262
});
6363

6464
test('overrides output properties', async () => {
@@ -71,10 +71,10 @@ test('overrides output properties', async () => {
7171
},
7272
});
7373

74-
component.click(component.getByText('init'));
74+
fireEvent.click(component.getByText('init'));
7575
expect(clicked).toHaveBeenCalledWith('on');
7676

77-
component.click(component.getByText('on'));
77+
fireEvent.click(component.getByText('on'));
7878
expect(clicked).toHaveBeenCalledWith('off');
7979
});
8080

‎projects/testing-library/tests/fire-event.spec.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { render } from '../src/public_api';
2+
import { render, fireEvent } from '../src/public_api';
33

44
@Component({
55
selector: 'fixture',
@@ -13,6 +13,5 @@ test('does not call detect changes when fixture is destroyed', async () => {
1313
component.fixture.destroy();
1414

1515
// should otherwise throw
16-
component.input(component.getByTestId('input'), { target: { value: 'Bonjour' } });
17-
component.type(component.getByTestId('input'), 'Alles klar');
16+
fireEvent.input(component.getByTestId('input'), { target: { value: 'Bonjour' } });
1817
});

‎projects/testing-library/tests/render.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, NgModule, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
22
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
33
import { TestBed } from '@angular/core/testing';
4-
import { render } from '../src/public_api';
4+
import { render, fireEvent } from '../src/public_api';
55

66
@Component({
77
selector: 'fixture',
@@ -15,9 +15,9 @@ class FixtureComponent {}
1515
test('creates queries and events', async () => {
1616
const component = await render(FixtureComponent);
1717

18-
component.input(component.getByTestId('input'), { target: { value: 'a super awesome input' } });
18+
fireEvent.input(component.getByTestId('input'), { target: { value: 'a super awesome input' } });
1919
component.getByDisplayValue('a super awesome input');
20-
component.click(component.getByText('button'));
20+
fireEvent.click(component.getByText('button'));
2121
});
2222

2323
describe('removeAngularAttributes', () => {

‎projects/testing-library/tests/user-events/selectOptions.spec.ts

Lines changed: 0 additions & 236 deletions
This file was deleted.

‎projects/testing-library/tests/user-events/tab.spec.ts

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎projects/testing-library/tests/user-events/type.spec.ts

Lines changed: 0 additions & 301 deletions
This file was deleted.

‎projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { render, screen, waitForElementToBeRemoved as waitForElementToBeRemovedATL } from '../src/public_api';
2+
import { render, screen, waitForElementToBeRemoved } from '../src/public_api';
33
import { timer } from 'rxjs';
44

55
@Component({
@@ -13,54 +13,26 @@ class FixtureComponent implements OnInit {
1313
}
1414
}
1515

16-
describe('from import', () => {
17-
test('waits for element to be removed (callback)', async () => {
18-
await render(FixtureComponent);
16+
test('waits for element to be removed (callback)', async () => {
17+
await render(FixtureComponent);
1918

20-
await waitForElementToBeRemovedATL(() => screen.getByTestId('im-here'));
19+
await waitForElementToBeRemoved(() => screen.getByTestId('im-here'));
2120

22-
expect(screen.queryByTestId('im-here')).toBeNull();
23-
});
24-
25-
test('waits for element to be removed (element)', async () => {
26-
await render(FixtureComponent);
27-
28-
await waitForElementToBeRemovedATL(screen.getByTestId('im-here'));
29-
30-
expect(screen.queryByTestId('im-here')).toBeNull();
31-
});
32-
33-
test('allows to override options', async () => {
34-
await render(FixtureComponent);
35-
36-
await expect(waitForElementToBeRemovedATL(() => screen.getByTestId('im-here'), { timeout: 200 })).rejects.toThrow(
37-
/Timed out in waitForElementToBeRemoved/i,
38-
);
39-
});
21+
expect(screen.queryByTestId('im-here')).toBeNull();
4022
});
41-
describe('from render', () => {
42-
test('waits for element to be removed (callback)', async () => {
43-
const { queryByTestId, getByTestId, waitForElementToBeRemoved } = await render(FixtureComponent);
44-
45-
await waitForElementToBeRemoved(() => getByTestId('im-here'));
4623

47-
expect(queryByTestId('im-here')).toBeNull();
48-
});
24+
test('waits for element to be removed (element)', async () => {
25+
await render(FixtureComponent);
4926

50-
test('waits for element to be removed (element)', async () => {
51-
const { queryByTestId, getByTestId, waitForElementToBeRemoved } = await render(FixtureComponent);
27+
await waitForElementToBeRemoved(screen.getByTestId('im-here'));
5228

53-
const node = getByTestId('im-here');
54-
await waitForElementToBeRemoved(node);
55-
56-
expect(queryByTestId('im-here')).toBeNull();
57-
});
29+
expect(screen.queryByTestId('im-here')).toBeNull();
30+
});
5831

59-
test('allows to override options', async () => {
60-
const { getByTestId, waitForElementToBeRemoved } = await render(FixtureComponent);
32+
test('allows to override options', async () => {
33+
await render(FixtureComponent);
6134

62-
await expect(waitForElementToBeRemoved(() => getByTestId('im-here'), { timeout: 200 })).rejects.toThrow(
63-
/Timed out in waitForElementToBeRemoved/i,
64-
);
65-
});
35+
await expect(waitForElementToBeRemoved(() => screen.getByTestId('im-here'), { timeout: 200 })).rejects.toThrow(
36+
/Timed out in waitForElementToBeRemoved/i,
37+
);
6638
});

‎projects/testing-library/tests/wait-for.spec.ts

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -17,48 +17,23 @@ class FixtureComponent {
1717
}
1818
}
1919

20-
describe('from import', () => {
21-
test('waits for assertion to become true', async () => {
22-
await render(FixtureComponent);
20+
test('waits for assertion to become true', async () => {
21+
await render(FixtureComponent);
2322

24-
expect(screen.queryByText('Success')).toBeNull();
23+
expect(screen.queryByText('Success')).toBeNull();
2524

26-
fireEvent.click(screen.getByTestId('button'));
25+
fireEvent.click(screen.getByTestId('button'));
2726

28-
await waitForATL(() => screen.getByText('Success'));
29-
screen.getByText('Success');
30-
});
31-
32-
test('allows to override options', async () => {
33-
await render(FixtureComponent);
34-
35-
fireEvent.click(screen.getByTestId('button'));
36-
37-
await expect(waitForATL(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(
38-
/Unable to find an element with the text: Success/i,
39-
);
40-
});
27+
await waitForATL(() => screen.getByText('Success'));
28+
screen.getByText('Success');
4129
});
4230

43-
describe('from render', () => {
44-
test('waits for assertion to become true', async () => {
45-
const { queryByText, getByTestId, click, waitFor, getByText } = await render(FixtureComponent);
46-
47-
expect(queryByText('Success')).toBeNull();
48-
49-
click(getByTestId('button'));
50-
51-
await waitFor(() => getByText('Success'));
52-
getByText('Success');
53-
});
54-
55-
test('allows to override options', async () => {
56-
const { getByTestId, click, waitFor, getByText } = await render(FixtureComponent);
31+
test('allows to override options', async () => {
32+
await render(FixtureComponent);
5733

58-
click(getByTestId('button'));
34+
fireEvent.click(screen.getByTestId('button'));
5935

60-
await expect(waitFor(() => getByText('Success'), { timeout: 200 })).rejects.toThrow(
61-
/Unable to find an element with the text: Success/i,
62-
);
63-
});
36+
await expect(waitForATL(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(
37+
/Unable to find an element with the text: Success/i,
38+
);
6439
});

‎projects/testing-library/tsconfig.lib.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"outDir": "../../out-tsc/lib",
55
"target": "es2015",

‎projects/testing-library/tsconfig.spec.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": "../../tsconfig.json",
2+
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"module": "commonjs",
55
"types": ["jest", "node"]

‎tsconfig.base.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compileOnSave": false,
3+
"compilerOptions": {
4+
"baseUrl": "./",
5+
"importHelpers": true,
6+
"module": "esnext",
7+
"outDir": "./dist/out-tsc",
8+
"sourceMap": true,
9+
"declaration": false,
10+
"moduleResolution": "node",
11+
"emitDecoratorMetadata": true,
12+
"experimentalDecorators": true,
13+
"target": "es2015",
14+
"typeRoots": ["node_modules/@types"],
15+
"lib": ["es2017", "dom"],
16+
"paths": {
17+
"@testing-library/angular": ["projects/testing-library"],
18+
"@testing-library/angular/jest-utils": ["projects/jest-utils"]
19+
}
20+
}
21+
}

‎tsconfig.json

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1+
/*
2+
This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
3+
It is not intended to be used to perform a compilation.
4+
5+
To learn more about this file see: https://angular.io/config/solution-tsconfig.
6+
*/
17
{
2-
"compileOnSave": false,
3-
"compilerOptions": {
4-
"baseUrl": "./",
5-
"importHelpers": true,
6-
"module": "esnext",
7-
"outDir": "./dist/out-tsc",
8-
"sourceMap": true,
9-
"declaration": false,
10-
"moduleResolution": "node",
11-
"emitDecoratorMetadata": true,
12-
"experimentalDecorators": true,
13-
"target": "es2015",
14-
"typeRoots": ["node_modules/@types"],
15-
"lib": ["es2017", "dom"],
16-
"paths": {
17-
"@testing-library/angular": ["projects/testing-library"],
18-
"@testing-library/angular/jest-utils": ["projects/jest-utils"]
8+
"files": [],
9+
"references": [
10+
{
11+
"path": "./apps/example-app/tsconfig.json"
12+
},
13+
{
14+
"path": "./apps/example-app/tsconfig.spec.json"
15+
},
16+
{
17+
"path": "./projects/testing-library/tsconfig.lib.json"
18+
},
19+
{
20+
"path": "./projects/testing-library/tsconfig.spec.json"
21+
},
22+
{
23+
"path": "./projects/jest-utils/tsconfig.lib.json"
24+
},
25+
{
26+
"path": "./projects/jest-utils/tsconfig.spec.json"
1927
}
20-
}
21-
}
28+
]
29+
}

‎tslint.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
"no-trailing-whitespace": true,
4343
"no-unnecessary-initializer": true,
4444
"no-unused-expression": true,
45-
"no-use-before-declare": false,
4645
"no-var-keyword": true,
4746
"object-literal-sort-keys": false,
4847
"one-line": [true, "check-open-brace", "check-catch", "check-else", "check-whitespace"],

‎yarn.lock

Lines changed: 3236 additions & 4310 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.