feat: remove change and changeInput in favor of rerender

BREAKING CHANGE:

Use 
erender instead of change.
Use 
erender instead of changechangeInput

For more info see #365

Author: timdeschryver

apps/example-app-karma/src/app/issues/issue-222.spec.ts

@@ -13,16 +13,3 @@ it('https://github.com/testing-library/angular-testing-library/issues/222 with r
 
   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();
-});

apps/example-app/src/app/examples/16-input-getter-setter.spec.ts

@@ -10,20 +10,6 @@ test('should run logic in the input setter and getter', async () => {
   expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
 });
 
-test('should run logic in the input setter and getter while changing', async () => {
-  const { change } = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
-  const valueControl = screen.getByTestId('value');
-  const getterValueControl = screen.getByTestId('value-getter');
-
-  expect(valueControl).toHaveTextContent('I am value from setter Angular');
-  expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
-
-  await change({ value: 'React' });
-
-  expect(valueControl).toHaveTextContent('I am value from setter React');
-  expect(getterValueControl).toHaveTextContent('I am value from getter React');
-});
-
 test('should run logic in the input setter and getter while re-rendering', async () => {
   const { rerender } = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
 

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

@@ -63,22 +63,6 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
       'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
     >,
   ) => Promise<void>;
-  /**
-   * @deprecated
-   * Use rerender instead. For more info see {@link https://github.com/testing-library/angular-testing-library/issues/365 GitHub Issue}
-   *
-   * @description
-   * Keeps the current fixture intact and invokes ngOnChanges with the updated properties.
-   */
-  change: (changedProperties: Partial<ComponentType>) => void;
-  /**
-   * @deprecated
-   * Use rerender instead. For more info see {@link https://github.com/testing-library/angular-testing-library/issues/365 GitHub Issue}
-   *
-   * @description
-   * Keeps the current fixture intact, update the @Input properties and invoke ngOnChanges with the updated properties.
-   */
-  changeInput: (changedInputProperties: Partial<ComponentType>) => void;
 }
 
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {

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

@@ -162,32 +162,6 @@ export async function render<SutType, WrapperType = SutType>(
     }
   };
 
-  const changeInput = (changedInputProperties: Partial<SutType>) => {
-    if (Object.keys(changedInputProperties).length === 0) {
-      return;
-    }
-
-    setComponentInputs(fixture, changedInputProperties);
-
-    fixture.detectChanges();
-  };
-
-  const change = (changedProperties: Partial<SutType>) => {
-    if (Object.keys(changedProperties).length === 0) {
-      return;
-    }
-
-    const changes = getChangesObj(fixture.componentInstance as Record<string, any>, changedProperties);
-
-    setComponentProperties(fixture, changedProperties);
-
-    if (hasOnChangesHook(fixture.componentInstance)) {
-      fixture.componentInstance.ngOnChanges(changes);
-    }
-
-    fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
-  };
-
   const navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
     const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
     const [path, params] = (basePath + href).split('?');
@@ -234,8 +208,6 @@ export async function render<SutType, WrapperType = SutType>(
     detectChanges: () => detectChanges(),
     navigate,
     rerender,
-    change,
-    changeInput,
     // @ts-ignore: fixture assigned
     debugElement: fixture.debugElement,
     // @ts-ignore: fixture assigned

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

@@ -35,6 +35,7 @@ test('rerenders without props', async () => {
   await rerender();
 
   expect(screen.getByText('Sarah')).toBeInTheDocument();
+  expect(ngOnChangesSpy).toHaveBeenCalledTimes(1); // one time initially and one time for rerender
 });
 
 test('rerenders the component with updated inputs', async () => {
@@ -48,6 +49,41 @@ test('rerenders the component with updated inputs', async () => {
 });
 
 test('rerenders the component with updated props and resets other props', async () => {
+  const firstName = 'Mark';
+  const lastName = 'Peeters';
+  const { rerender } = await render(FixtureComponent, {
+    componentInputs: {
+      firstName,
+      lastName,
+    },
+  });
+
+  expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument();
+
+  const firstName2 = 'Chris';
+  await rerender({ componentInputs: { firstName: firstName2 } });
+
+  expect(screen.getByText(firstName2)).toBeInTheDocument();
+  expect(screen.queryByText(firstName)).not.toBeInTheDocument();
+  expect(screen.queryByText(lastName)).not.toBeInTheDocument();
+
+  expect(ngOnChangesSpy).toHaveBeenCalledTimes(2); // one time initially and one time for rerender
+  const rerenderedChanges = ngOnChangesSpy.mock.calls[1][0] as SimpleChanges;
+  expect(rerenderedChanges).toEqual({
+    lastName: {
+      previousValue: 'Peeters',
+      currentValue: undefined,
+      firstChange: false,
+    },
+    firstName: {
+      previousValue: 'Mark',
+      currentValue: 'Chris',
+      firstChange: false,
+    },
+  });
+});
+
+test('rerenders the component with updated props and resets other props with componentProperties', async () => {
   const firstName = 'Mark';
   const lastName = 'Peeters';
   const { rerender } = await render(FixtureComponent, {