feat: release v14 (#381)

* feat: upgrade to @testing-library/dom 9 (#376)

BREAKING CHANGE:

For more info see https://github.com/testing-library/dom-testing-library/releases/tag/v9.0.0

* feat: remove change and changeInput in favor of rerender (#378)

BREAKING CHANGE:

Use `rerender` instead of `change`.
Use `rerender` 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' } });
 

package.json

@@ -40,7 +40,7 @@
     "@ngrx/store": "15.1.0",
     "@nrwl/angular": "15.4.5",
     "@nrwl/nx-cloud": "15.0.2",
-    "@testing-library/dom": "^8.19.1",
+    "@testing-library/dom": "^9.0.0",
     "rxjs": "7.5.6",
     "tslib": "~2.3.1",
     "zone.js": "~0.11.4"

projects/testing-library/package.json

@@ -35,7 +35,7 @@
     "@angular/core": ">= 15.1.0"
   },
   "dependencies": {
-    "@testing-library/dom": "^8.0.0",
+    "@testing-library/dom": "^9.0.0",
     "tslib": "^2.3.1"
   },
   "publishConfig": {

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

@@ -133,12 +133,7 @@ export async function render<SutType, WrapperType = SutType>(
     >,
   ) => {
     const newComponentInputs = properties?.componentInputs ?? {};
-    for (const inputKey of renderedInputKeys) {
-      if (!Object.prototype.hasOwnProperty.call(newComponentInputs, inputKey)) {
-        delete (fixture.componentInstance as any)[inputKey];
-      }
-    }
-    setComponentInputs(fixture, newComponentInputs);
+    const changesInComponentInput = update(fixture, renderedInputKeys, newComponentInputs, setComponentInputs);
     renderedInputKeys = Object.keys(newComponentInputs);
 
     const newComponentOutputs = properties?.componentOutputs ?? {};
@@ -151,43 +146,21 @@ export async function render<SutType, WrapperType = SutType>(
     renderedOutputKeys = Object.keys(newComponentOutputs);
 
     const newComponentProps = properties?.componentProperties ?? {};
-    const changes = updateProps(fixture, renderedPropKeys, newComponentProps);
+    const changesInComponentProps = update(fixture, renderedPropKeys, newComponentProps, setComponentProperties);
+    renderedPropKeys = Object.keys(newComponentProps);
+
     if (hasOnChangesHook(fixture.componentInstance)) {
-      fixture.componentInstance.ngOnChanges(changes);
+      fixture.componentInstance.ngOnChanges({
+        ...changesInComponentInput,
+        ...changesInComponentProps,
+      });
     }
-    renderedPropKeys = Object.keys(newComponentProps);
 
     if (properties?.detectChangesOnRender !== false) {
       fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
     }
   };
 
-  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 +207,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
@@ -389,27 +360,32 @@ function getChangesObj(oldProps: Record<string, any> | null, newProps: Record<st
   );
 }
 
-function updateProps<SutType>(
+function update<SutType>(
   fixture: ComponentFixture<SutType>,
-  prevRenderedPropsKeys: string[],
-  newProps: Record<string, any>,
+  prevRenderedKeys: string[],
+  newValues: Record<string, any>,
+  updateFunction: (
+    fixture: ComponentFixture<SutType>,
+    values: RenderTemplateOptions<SutType>['componentInputs' | 'componentProperties'],
+  ) => void,
 ) {
   const componentInstance = fixture.componentInstance as Record<string, any>;
   const simpleChanges: SimpleChanges = {};
 
-  for (const key of prevRenderedPropsKeys) {
-    if (!Object.prototype.hasOwnProperty.call(newProps, key)) {
+  for (const key of prevRenderedKeys) {
+    if (!Object.prototype.hasOwnProperty.call(newValues, key)) {
       simpleChanges[key] = new SimpleChange(componentInstance[key], undefined, false);
       delete componentInstance[key];
     }
   }
 
-  for (const [key, value] of Object.entries(newProps)) {
+  for (const [key, value] of Object.entries(newValues)) {
     if (value !== componentInstance[key]) {
       simpleChanges[key] = new SimpleChange(componentInstance[key], value, false);
     }
   }
-  setComponentProperties(fixture, newProps);
+
+  updateFunction(fixture, newValues);
 
   return simpleChanges;
 }

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 () => {
@@ -47,7 +48,42 @@ test('rerenders the component with updated inputs', async () => {
   expect(screen.getByText(firstName)).toBeInTheDocument();
 });
 
-test('rerenders the component with updated props and resets other props', async () => {
+test('rerenders the component with updated inputs 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, {