Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: testing-library/angular-testing-library
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 4b6e491
Choose a base ref
...
head repository: testing-library/angular-testing-library
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 0143973
Choose a head ref
  • 1 commit
  • 3 files changed
  • 1 contributor

Commits on Mar 25, 2021

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    0143973 View commit details
25 changes: 25 additions & 0 deletions apps/example-app/app/examples/16-input-getter-setter.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { render, screen } from '@testing-library/angular';
import { InputGetterSetter } from './16-input-getter-setter';

test('should run logic in the input setter and getter', async () => {
await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
const valueControl = screen.getByTestId('value');
const getterValueControl = screen.getByTestId('value-getter');

expect(valueControl.textContent).toBe('I am value from setter Angular');
expect(getterValueControl.textContent).toBe('I am value from getter Angular');
});

test('should run logic in the input setter and getter while re-rendering', async () => {
const component = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
const valueControl = screen.getByTestId('value');
const getterValueControl = screen.getByTestId('value-getter');

expect(valueControl.textContent).toBe('I am value from setter Angular');
expect(getterValueControl.textContent).toBe('I am value from getter Angular');

await component.rerender({ value: 'React' });

expect(valueControl.textContent).toBe('I am value from setter React');
expect(getterValueControl.textContent).toBe('I am value from getter React');
});
22 changes: 22 additions & 0 deletions apps/example-app/app/examples/16-input-getter-setter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-fixture',
template: `
<span data-testid="value">{{ derivedValue }}</span>
<span data-testid="value-getter">{{ value }}</span>
`,
})
export class InputGetterSetter {
@Input() set value(value: string) {
this.originalValue = value;
this.derivedValue = 'I am value from setter ' + value;
}

get value() {
return 'I am value from getter ' + this.originalValue;
}

private originalValue: string;
derivedValue: string;
}
20 changes: 15 additions & 5 deletions projects/testing-library/src/lib/testing-library.ts
Original file line number Diff line number Diff line change
@@ -205,14 +205,24 @@ function setComponentProperties<SutType>(
{ componentProperties = {} }: Pick<RenderDirectiveOptions<SutType, any>, 'componentProperties'>,
) {
for (const key of Object.keys(componentProperties)) {
const descriptor: PropertyDescriptor = Object.getOwnPropertyDescriptor(
fixture.componentInstance.constructor.prototype,
key,
);
let _value = componentProperties[key];
const defaultGetter = () => _value;
const extendedSetter = (value) => {
_value = value;
descriptor?.set?.call(fixture.componentInstance, _value);
fixture.detectChanges();
};

Object.defineProperty(fixture.componentInstance, key, {
get: () => _value,
set: (value) => {
_value = value;
fixture.detectChanges();
},
get: descriptor?.get || defaultGetter,
set: extendedSetter,
});

descriptor?.set?.call(fixture.componentInstance, _value);
}
return fixture;
}