Skip to content

feat: support ngOnChanges with correct simpleChange object within rerender #366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 10, 2023
Merged

feat: support ngOnChanges with correct simpleChange object within rerender #366

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e4acbbd
feat: support ngOnChanges with correct simple change object within re…
shaman-apprentice Feb 11, 2023
66ba0c7
Update projects/testing-library/tests/rerender.spec.ts
shaman-apprentice Feb 21, 2023
4c5a255
feat: support detectChangesOnRender within rerender
shaman-apprentice Mar 5, 2023
d218907
feat: only check for own detectChangesOnRender flag
shaman-apprentice Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/testing-library/src/lib/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
rerender: (
properties?: Pick<
RenderTemplateOptions<ComponentType>,
'componentProperties' | 'componentInputs' | 'componentOutputs'
'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
>,
) => Promise<void>;
/**
Expand Down
12 changes: 10 additions & 2 deletions projects/testing-library/src/lib/testing-library.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,10 @@ export async function render<SutType, WrapperType = SutType>(
let renderedInputKeys = Object.keys(componentInputs);
let renderedOutputKeys = Object.keys(componentOutputs);
const rerender = async (
properties?: Pick<RenderTemplateOptions<SutType>, 'componentProperties' | 'componentInputs' | 'componentOutputs'>,
properties?: Pick<
RenderTemplateOptions<SutType>,
'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
>,
) => {
const newComponentInputs = properties?.componentInputs ?? {};
for (const inputKey of renderedInputKeys) {
Expand All @@ -154,7 +157,12 @@ export async function render<SutType, WrapperType = SutType>(
}
renderedPropKeys = Object.keys(newComponentProps);

fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
if (
properties?.detectChangesOnRender === true ||
(properties?.detectChangesOnRender === undefined && detectChangesOnRender === true)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we need this check to use the existing config?
I didn't think of it, and I assumed it would only use the property passed to this function.

Copy link
Author

@shaman-apprentice shaman-apprentice Mar 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My first intuition is to respect the initial flag from render unless explicit overwritten in rerender. But my personal goal is to never use any of those two flags - so I have no real opinion here ;) Should I only check for properties?.detectChangesOnRender === true?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea that's my personal goal as well 😅
I would only check for the properties if you don't mind.

Copy link
Author

@shaman-apprentice shaman-apprentice Mar 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done with d218907

) {
fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
}
};

const changeInput = (changedInputProperties: Partial<SutType>) => {
Expand Down
37 changes: 37 additions & 0 deletions projects/testing-library/tests/rerender.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,40 @@ test('rerenders the component with updated props and resets other props', async
},
});
});

describe('detectChangesOnRender', () => {
test('change detection gets not called if disabled within render', async () => {
const { rerender, detectChanges } = await render(FixtureComponent, { detectChangesOnRender: false });
detectChanges();
expect(screen.getByText('Sarah')).toBeInTheDocument();

const firstName = 'Mark';
await rerender({ componentInputs: { firstName } });

expect(screen.getByText('Sarah')).toBeInTheDocument();
expect(screen.queryByText(firstName)).not.toBeInTheDocument();
});

test('change detection gets called if disabled within render but enabled within rerender', async () => {
const { rerender, detectChanges } = await render(FixtureComponent, { detectChangesOnRender: false });
detectChanges();
expect(screen.getByText('Sarah')).toBeInTheDocument();

const firstName = 'Mark';
await rerender({ componentInputs: { firstName }, detectChangesOnRender: true });

expect(screen.getByText(firstName)).toBeInTheDocument();
expect(screen.queryByText('Sarah')).not.toBeInTheDocument();
});

test('change detection gets not called if disabled within rerender', async () => {
const { rerender } = await render(FixtureComponent);
expect(screen.getByText('Sarah')).toBeInTheDocument();

const firstName = 'Mark';
await rerender({ componentInputs: { firstName }, detectChangesOnRender: false });

expect(screen.getByText('Sarah')).toBeInTheDocument();
expect(screen.queryByText(firstName)).not.toBeInTheDocument();
});
});