Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cccdf03

Browse files
feat: allow to update wrapper properties (testing-library#187)
1 parent 4fe225c commit cccdf03

File tree

9 files changed

+47
-13635
lines changed

9 files changed

+47
-13635
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ npm-debug.log
3434
yarn-error.log
3535
testem.log
3636
/typings
37+
yarn.lock
3738

3839
# System Files
3940
.DS_Store

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"@nrwl/angular": "^10.3.3",
3636
"@nrwl/nx-cloud": "^10.0.0",
3737
"@phenomnomnominal/tsquery": "^4.1.1",
38-
"@testing-library/dom": "^7.24.1",
38+
"@testing-library/dom": "7.29.4",
3939
"@testing-library/user-event": "^12.0.11",
4040
"core-js": "^3.6.5",
4141
"rxjs": "^6.5.5",

‎projects/testing-library/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@angular/core": ">= 10.0.0 < 12"
3030
},
3131
"dependencies": {
32-
"@testing-library/dom": "^7.18.1",
32+
"@testing-library/dom": "7.29.4",
3333
"@phenomnomnominal/tsquery": "^4.1.1",
3434
"tslib": "^2.0.0",
3535
"tslint": "^5.16.0"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -250,8 +250,8 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
250250
removeAngularAttributes?: boolean;
251251
}
252252

253-
export interface RenderDirectiveOptions<DirectiveType,WrapperType, Q extends Queries = typeof queries>
254-
extends RenderComponentOptions<DirectiveType, Q> {
253+
export interface RenderDirectiveOptions<WrapperType,Propertiesextendsobject={}, Q extends Queries = typeof queries>
254+
extends RenderComponentOptions<Properties, Q> {
255255
/**
256256
* @description
257257
* The template to render the directive.
@@ -278,7 +278,7 @@ export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Qu
278278
* })
279279
*/
280280
wrapper?: Type<WrapperType>;
281-
componentProperties?: Partial<any>;
281+
componentProperties?: Partial<WrapperType&Properties>;
282282
}
283283

284284
export interface Config {

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export async function render<ComponentType>(
3434
): Promise<RenderResult<ComponentType, ComponentType>>;
3535
export async function render<DirectiveType, WrapperType = WrapperComponent>(
3636
component: Type<DirectiveType>,
37-
renderOptions?: RenderDirectiveOptions<DirectiveType,WrapperType>,
38-
): Promise<RenderResult<DirectiveType,WrapperType>>;
37+
renderOptions?: RenderDirectiveOptions<WrapperType>,
38+
): Promise<RenderResult<WrapperType>>;
3939

4040
export async function render<SutType, WrapperType = SutType>(
4141
sut: Type<SutType>,
42-
renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<SutType,WrapperType> = {},
42+
renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<WrapperType> = {},
4343
): Promise<RenderResult<SutType>> {
4444
const {
4545
detectChanges: detectChangesOnRender = true,
@@ -55,7 +55,7 @@ export async function render<SutType, WrapperType = SutType>(
5555
excludeComponentDeclaration = false,
5656
routes,
5757
removeAngularAttributes = false,
58-
} = renderOptions as RenderDirectiveOptions<SutType,WrapperType>;
58+
} = renderOptions as RenderDirectiveOptions<WrapperType>;
5959

6060
const config = getConfig();
6161

@@ -191,7 +191,7 @@ async function createComponent<SutType>(component: Type<SutType>): Promise<Compo
191191

192192
async function createComponentFixture<SutType>(
193193
component: Type<SutType>,
194-
{ template, wrapper }: Pick<RenderDirectiveOptions<SutType,any>, 'template' | 'wrapper'>,
194+
{ template, wrapper }: Pick<RenderDirectiveOptions<any>, 'template' | 'wrapper'>,
195195
): Promise<ComponentFixture<SutType>> {
196196
if (template) {
197197
TestBed.overrideTemplate(wrapper, template);
@@ -205,7 +205,14 @@ function setComponentProperties<SutType>(
205205
{ componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
206206
) {
207207
for (const key of Object.keys(componentProperties)) {
208-
fixture.componentInstance[key] = componentProperties[key];
208+
let _value = componentProperties[key];
209+
Object.defineProperty(fixture.componentInstance, key, {
210+
get: () => _value ,
211+
set: (value) => {
212+
_value = value;
213+
fixture.detectChanges();
214+
}
215+
});
209216
}
210217
return fixture;
211218
}
@@ -235,7 +242,7 @@ function addAutoDeclarations<SutType>(
235242
template,
236243
wrapper,
237244
}: Pick<
238-
RenderDirectiveOptions<SutType,any>,
245+
RenderDirectiveOptions<any>,
239246
'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
240247
>,
241248
) {

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@ export class OnOffDirective {
1919
this.clicked.emit(this.el.nativeElement.textContent);
2020
}
2121
}
22+
23+
@Directive({
24+
selector: '[update]',
25+
})
26+
export class UpdateInputDirective {
27+
@Input()
28+
set update(value: any) {
29+
this.el.nativeElement.textContent = value;
30+
}
31+
32+
constructor(private el: ElementRef) {}
33+
}
34+
2235
test('the directive renders', async () => {
2336
const component = await render(OnOffDirective, {
2437
template: '<div onOff></div>',
@@ -98,3 +111,17 @@ describe('removeAngularAttributes', () => {
98111
expect(document.querySelector('[id]')).not.toBeNull();
99112
});
100113
});
114+
115+
116+
test('updates properties and invokes change detection', async () => {
117+
const component = await render(UpdateInputDirective, {
118+
template: '<div [update]="value" ></div>',
119+
componentProperties: {
120+
value: 'value1'
121+
}
122+
});
123+
124+
component.getByText('value1')
125+
component.fixture.componentInstance.value = 'updated value'
126+
component.getByText('updated value')
127+
});

‎projects/testing-library/tests/providers/component-provider.spec.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
22
import { Component } from '@angular/core';
33
import { render } from '../../src/public_api';
44

5-
// tslint:disable: no-use-before-declare
65
test('shows the service value', async () => {
76
const { getByText } = await render(FixtureComponent);
87

‎projects/testing-library/tests/providers/module-provider.spec.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
22
import { Component } from '@angular/core';
33
import { render } from '../../src/public_api';
44

5-
// tslint:disable: no-use-before-declare
65
test('shows the service value', async () => {
76
const { getByText } = await render(FixtureComponent, {
87
providers: [Service],

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /