feat: allow to update wrapper properties (#187)

Author: timdeschryver

.gitignore

@@ -34,6 +34,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+yarn.lock
 
 # System Files
 .DS_Store

package.json

@@ -35,7 +35,7 @@
     "@nrwl/angular": "^10.3.3",
     "@nrwl/nx-cloud": "^10.0.0",
     "@phenomnomnominal/tsquery": "^4.1.1",
-    "@testing-library/dom": "^7.24.1",
+    "@testing-library/dom": "7.29.4",
     "@testing-library/user-event": "^12.0.11",
     "core-js": "^3.6.5",
     "rxjs": "^6.5.5",

projects/testing-library/package.json

@@ -29,7 +29,7 @@
     "@angular/core": ">= 10.0.0 < 12"
   },
   "dependencies": {
-    "@testing-library/dom": "^7.18.1",
+    "@testing-library/dom": "7.29.4",
     "@phenomnomnominal/tsquery": "^4.1.1",
     "tslib": "^2.0.0",
     "tslint": "^5.16.0"

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

@@ -250,8 +250,8 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
   removeAngularAttributes?: boolean;
 }
 
-export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Queries = typeof queries>
-  extends RenderComponentOptions<DirectiveType, Q> {
+export interface RenderDirectiveOptions<WrapperType, Properties extends object = {}, Q extends Queries = typeof queries>
+  extends RenderComponentOptions<Properties, Q> {
   /**
    * @description
    * The template to render the directive.
@@ -278,7 +278,7 @@ export interface RenderDirectiveOptions<DirectiveType, WrapperType, Q extends Qu
    * })
    */
   wrapper?: Type<WrapperType>;
-  componentProperties?: Partial<any>;
+  componentProperties?: Partial<WrapperType & Properties>;
 }
 
 export interface Config {

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

@@ -34,12 +34,12 @@ export async function render<ComponentType>(
 ): Promise<RenderResult<ComponentType, ComponentType>>;
 export async function render<DirectiveType, WrapperType = WrapperComponent>(
   component: Type<DirectiveType>,
-  renderOptions?: RenderDirectiveOptions<DirectiveType, WrapperType>,
-): Promise<RenderResult<DirectiveType, WrapperType>>;
+  renderOptions?: RenderDirectiveOptions<WrapperType>,
+): Promise<RenderResult<WrapperType>>;
 
 export async function render<SutType, WrapperType = SutType>(
   sut: Type<SutType>,
-  renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<SutType, WrapperType> = {},
+  renderOptions: RenderComponentOptions<SutType> | RenderDirectiveOptions<WrapperType> = {},
 ): Promise<RenderResult<SutType>> {
   const {
     detectChanges: detectChangesOnRender = true,
@@ -55,7 +55,7 @@ export async function render<SutType, WrapperType = SutType>(
     excludeComponentDeclaration = false,
     routes,
     removeAngularAttributes = false,
-  } = renderOptions as RenderDirectiveOptions<SutType, WrapperType>;
+  } = renderOptions as RenderDirectiveOptions<WrapperType>;
 
   const config = getConfig();
 
@@ -191,7 +191,7 @@ async function createComponent<SutType>(component: Type<SutType>): Promise<Compo
 
 async function createComponentFixture<SutType>(
   component: Type<SutType>,
-  { template, wrapper }: Pick<RenderDirectiveOptions<SutType, any>, 'template' | 'wrapper'>,
+  { template, wrapper }: Pick<RenderDirectiveOptions<any>, 'template' | 'wrapper'>,
 ): Promise<ComponentFixture<SutType>> {
   if (template) {
     TestBed.overrideTemplate(wrapper, template);
@@ -205,7 +205,14 @@ function setComponentProperties<SutType>(
   { componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
 ) {
   for (const key of Object.keys(componentProperties)) {
-    fixture.componentInstance[key] = componentProperties[key];
+    let _value =  componentProperties[key];
+    Object.defineProperty(fixture.componentInstance, key, {
+      get: () => _value ,
+      set: (value) => {
+        _value = value;
+        fixture.detectChanges();
+      }
+    });
   }
   return fixture;
 }
@@ -235,7 +242,7 @@ function addAutoDeclarations<SutType>(
     template,
     wrapper,
   }: Pick<
-    RenderDirectiveOptions<SutType, any>,
+    RenderDirectiveOptions<any>,
     'declarations' | 'excludeComponentDeclaration' | 'template' | 'wrapper'
   >,
 ) {

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

@@ -19,6 +19,19 @@ export class OnOffDirective {
     this.clicked.emit(this.el.nativeElement.textContent);
   }
 }
+
+@Directive({
+  selector: '[update]',
+})
+export class UpdateInputDirective {
+  @Input()
+  set update(value: any) {
+    this.el.nativeElement.textContent = value;
+  }
+
+  constructor(private el: ElementRef) {}
+}
+
 test('the directive renders', async () => {
   const component = await render(OnOffDirective, {
     template: '<div onOff></div>',
@@ -98,3 +111,17 @@ describe('removeAngularAttributes', () => {
     expect(document.querySelector('[id]')).not.toBeNull();
   });
 });
+
+
+test('updates properties and invokes change detection', async () => {
+  const component = await render(UpdateInputDirective, {
+    template: '<div [update]="value" ></div>',
+    componentProperties: {
+      value: 'value1'
+    }
+  });
+
+  component.getByText('value1')
+  component.fixture.componentInstance.value = 'updated value'
+  component.getByText('updated value')
+});

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

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { Component } from '@angular/core';
 import { render } from '../../src/public_api';
 
-// tslint:disable: no-use-before-declare
 test('shows the service value', async () => {
   const { getByText } = await render(FixtureComponent);
 

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

@@ -2,7 +2,6 @@ import { Injectable } from '@angular/core';
 import { Component } from '@angular/core';
 import { render } from '../../src/public_api';
 
-// tslint:disable: no-use-before-declare
 test('shows the service value', async () => {
   const { getByText } = await render(FixtureComponent, {
     providers: [Service],