-
Notifications
You must be signed in to change notification settings - Fork 92
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE:
`rerender` has been renamed to `change`.
The `change` method keeps the current fixture intact and invokes `ngOnChanges`.
The new `rerender` method destroys the current component and creates a new instance with the updated properties.
BEFORE:
```ts
const { rerender } = render(...)
rerender({...})
```
AFTER:
```ts
const { change } = render(...)
change({...})
```- Loading branch information
1 parent
5b4270c
commit 0e5e3c7
Showing
6 changed files
with
208 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,28 @@ | ||
| import { render, screen } from '@testing-library/angular'; | ||
|
|
||
| it('https://github.com/testing-library/angular-testing-library/issues/222', async () => { | ||
| it('https://github.com/testing-library/angular-testing-library/issues/222 with rerender', async () => { | ||
| const { rerender } = await render(`<div>Hello {{ name}}</div>`, { | ||
| componentProperties: { | ||
| name: 'Sarah', | ||
| }, | ||
| }); | ||
|
|
||
| expect(screen.getByText('Hello Sarah')).toBeTruthy(); | ||
| rerender({ name: 'Mark' }); | ||
|
|
||
| await rerender({ name: 'Mark' }); | ||
|
|
||
| expect(screen.getByText('Hello Mark')).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('https://github.com/testing-library/angular-testing-library/issues/222 with change', async () => { | ||
| const { change } = await render(`<div>Hello {{ name}}</div>`, { | ||
| componentProperties: { | ||
| name: 'Sarah', | ||
| }, | ||
| }); | ||
|
|
||
| expect(screen.getByText('Hello Sarah')).toBeTruthy(); | ||
| await change({ name: 'Mark' }); | ||
|
|
||
| expect(screen.getByText('Hello Mark')).toBeTruthy(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; | ||
| import { render, screen } from '../src/public_api'; | ||
|
|
||
| @Component({ | ||
| selector: 'atl-fixture', | ||
| template: ` {{ firstName }} {{ lastName }} `, | ||
| }) | ||
| class FixtureComponent { | ||
| @Input() firstName = 'Sarah'; | ||
| @Input() lastName; | ||
| } | ||
|
|
||
| test('changes the component with updated props', async () => { | ||
| const { change } = await render(FixtureComponent); | ||
| expect(screen.getByText('Sarah')).toBeInTheDocument(); | ||
|
|
||
| const firstName = 'Mark'; | ||
| change({ firstName }); | ||
|
|
||
| expect(screen.getByText(firstName)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('changes the component with updated props while keeping other props untouched', async () => { | ||
| const firstName = 'Mark'; | ||
| const lastName = 'Peeters'; | ||
| const { change } = await render(FixtureComponent, { | ||
| componentProperties: { | ||
| firstName, | ||
| lastName, | ||
| }, | ||
| }); | ||
|
|
||
| expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument(); | ||
|
|
||
| const firstName2 = 'Chris'; | ||
| change({ firstName: firstName2 }); | ||
|
|
||
| expect(screen.getByText(`${firstName2} ${lastName}`)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| @Component({ | ||
| selector: 'atl-fixture', | ||
| template: ` {{ name }} `, | ||
| }) | ||
| class FixtureWithNgOnChangesComponent implements OnChanges { | ||
| @Input() name = 'Sarah'; | ||
| @Input() nameChanged: (name: string, isFirstChange: boolean) => void; | ||
|
|
||
| ngOnChanges(changes: SimpleChanges) { | ||
| if (changes.name && this.nameChanged) { | ||
| this.nameChanged(changes.name.currentValue, changes.name.isFirstChange()); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| test('will call ngOnChanges on change', async () => { | ||
| const nameChanged = jest.fn(); | ||
| const componentProperties = { nameChanged }; | ||
| const { change } = await render(FixtureWithNgOnChangesComponent, { componentProperties }); | ||
| expect(screen.getByText('Sarah')).toBeInTheDocument(); | ||
|
|
||
| const name = 'Mark'; | ||
| change({ name }); | ||
|
|
||
| expect(screen.getByText(name)).toBeInTheDocument(); | ||
| expect(nameChanged).toHaveBeenCalledWith(name, false); | ||
| }); | ||
|
|
||
| @Component({ | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| selector: 'atl-fixture', | ||
| template: ` <div data-testid="number" [class.active]="activeField === 'number'">Number</div> `, | ||
| }) | ||
| class FixtureWithOnPushComponent { | ||
| @Input() activeField: string; | ||
| } | ||
|
|
||
| test('update properties on change', async () => { | ||
| const { change } = await render(FixtureWithOnPushComponent); | ||
| const numberHtmlElementRef = screen.queryByTestId('number'); | ||
|
|
||
| expect(numberHtmlElementRef).not.toHaveClass('active'); | ||
| change({ activeField: 'number' }); | ||
| expect(numberHtmlElementRef).toHaveClass('active'); | ||
| }); |
Oops, something went wrong.