Closed
Description
Hey, thanks for this lib :)
So, I'm facing an issue right now that when calling rerender function with component that uses OnPush doesn't cause component to change the properties. Here's an example:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-test',
template: `
<div data-testid="number" [class.active]="activeField === 'number'">Number</div>
<div data-testid="holder" [class.active]="activeField === 'holder'">Holder</div>
<div data-testid="expiry" [class.active]="activeField === 'expiry'">Expiry</div>
<div data-testid="cvv" [class.active]="activeField === 'cvv'">CVV</div>
`,
})
export class TestComponent {
@Input() activeField: string;
}
//////// Test file
async function setup() {
const { rerender } = await render(TestComponent);
const numberHtmlElementRef = screen.getByTestId('number');
const holderHtmlElementRef = screen.getByTestId('holder');
const expiryHtmlElementRef = screen.getByTestId('expiry');
const cvvHtmlElementRef = screen.getByTestId('cvv');
return {
numberHtmlElementRef,
holderHtmlElementRef,
expiryHtmlElementRef,
cvvHtmlElementRef,
rerender,
} as const;
}
describe(TestComponent.name, () => {
test('someDescription', async () => {
const {
numberHtmlElementRef,
holderHtmlElementRef,
expiryHtmlElementRef,
cvvHtmlElementRef,
rerender,
} = await setup();
rerender({ activeField: 'number' });
expect(numberHtmlElementRef).toHaveClass('active');
rerender({ activeField: 'holder' });
expect(holderHtmlElementRef).toHaveClass('active');
rerender({ activeField: 'expiry' });
expect(expiryHtmlElementRef).toHaveClass('active');
rerender({ activeField: 'cvv' });
expect(cvvHtmlElementRef).toHaveClass('active');
});
}All the tests above fail when using OnPush, but if I remove this, all pass.