feat: release v13 (#327)

* feat: update to Angular 15 * feat: rename ɵcomponentImports to componentImports BREAKING CHANGE: The render property ɵcomponentImports is not experimental anymore, and is renamed to componentImports BEFORE: ```ts render(ParentComponent, { ɵcomponentImports: [ChildComponent], }); ``` AFTER: ```ts render(ParentComponent, { componentImports: [ChildComponent], }); ``` * docs: update material inputs example (#324) * fix: don't fire router events on render (#325) Closes #318 * fix: don't invoke ngOnChanges when no properties are provided (#326) Closes #323 BREAKING CHANGE: This change is made to have the same behavior as the run time behavior. BEFORE: The `ngOnChanges` lifecycle is always invoked when a component is rendered. AFTER: The `ngOnChanges` lifecycle is only invoked if a component is rendered with `componentProperties`. * feat: add more fine-grained control over inputs and outputs (#328) BREAKING CHANGE: `rerender` expects properties to be wrapped in an object containing `componentProperties` (or `componentInputs` and `componentOutputs` to have a more fine-grained control). BEFORE: ```ts await render(PersonComponent, { componentProperties: { name: 'Sarah' } }); await rerender({ name: 'Sarah 2' }); ``` AFTER: ```ts await render(PersonComponent, { componentProperties: { name: 'Sarah' } }); await rerender({ componentProperties: { name: 'Sarah 2' } }); ``` * feat: add ability to turn off auto detect changes (#329) * chore: update peer dependencies (#330) BREAKING CHANGE: BEFORE: The minimum version of Angular is v14.0.0 AFTER: The minimum version of Angular is v14.1.0 * feat: childComponentOverrides is stable (#338) * fix: invoke changeChanges once on input change (#339) * feat: remove detectChanges in favor of detectChangesOnRender (#341) BREAKING CHANGE: The config property detectChanges is renamed to detectChangesOnRender. BEFORE: ```ts const component = await render(AppComponent, { detectChanges: false }); ``` AFTER: ```ts const component = await render(AppComponent, { detectChangesOnRender: false }); ``` * test: extra tests for ngOnChanges (#342) * test: add test example for harness (#343)
testing-library · Dec 14, 2022 · 6ae1363 · 6ae1363
1 parent 63c27e2
commit 6ae1363
Show file tree

Hide file tree

Showing 30 changed files with 574 additions and 225 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,7 +27,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: install
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: build
         run: npm run build -- --skip-nx-cache
       - name: test

diff --git a/apps/example-app-karma/.browserslistrc b/apps/example-app-karma/.browserslistrc
diff --git a/apps/example-app-karma/project.json b/apps/example-app-karma/project.json
@@ -1,4 +1,5 @@
 {
+  "name": "example-app-karma",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/example-app-karma/src",

diff --git a/apps/example-app-karma/src/app/issues/issue-222.spec.ts b/apps/example-app-karma/src/app/issues/issue-222.spec.ts
@@ -9,7 +9,7 @@ it('https://github.com/testing-library/angular-testing-library/issues/222 with r
 
   expect(screen.getByText('Hello Sarah')).toBeTruthy();
 
-  await rerender({ name: 'Mark' });
+  await rerender({ componentProperties: { name: 'Mark' } });
 
   expect(screen.getByText('Hello Mark')).toBeTruthy();
 });

diff --git a/apps/example-app-karma/src/test.ts b/apps/example-app-karma/src/test.ts
@@ -9,11 +9,5 @@ beforeEach(() => {
   jasmine.addMatchers(JasmineDOM);
 });
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {});
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/apps/example-app-karma/tsconfig.app.json b/apps/example-app-karma/tsconfig.app.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": [],
-    "allowJs": true
+    "allowJs": true,
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

diff --git a/apps/example-app-karma/tsconfig.spec.json b/apps/example-app-karma/tsconfig.spec.json
@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node", "@testing-library/jasmine-dom"]
+    "types": ["jasmine", "node", "@testing-library/jasmine-dom"],
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/test.ts", "src/polyfills.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

diff --git a/apps/example-app/.browserslistrc b/apps/example-app/.browserslistrc
diff --git a/apps/example-app/project.json b/apps/example-app/project.json
@@ -1,4 +1,5 @@
 {
+  "name": "example-app",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/example-app/src",
@@ -75,7 +76,7 @@
       "options": {
         "jestConfig": "apps/example-app/jest.config.ts"
       },
-      "outputs": ["coverage/"]
+      "outputs": ["{workspaceRoot}/coverage/"]
     }
   },
   "tags": []

diff --git a/apps/example-app/src/app/app-routing.module.ts b/apps/example-app/src/app/app-routing.module.ts
@@ -95,7 +95,7 @@ export const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/apps/example-app/src/app/examples/04-forms-with-material.ts b/apps/example-app/src/app/examples/04-forms-with-material.ts
@@ -6,10 +6,12 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
   template: `
     <form [formGroup]="form" name="form">
       <mat-form-field>
+        <mat-label>Name</mat-label>
         <input matInput placeholder="Name" name="name" formControlName="name" required />
       </mat-form-field>
 
       <mat-form-field>
+        <mat-label>Score</mat-label>
         <input
           matInput
           type="number"
@@ -23,6 +25,7 @@ import { UntypedFormBuilder, Validators } from '@angular/forms';
       </mat-form-field>
 
       <mat-form-field>
+        <mat-label>Color</mat-label>
         <mat-select placeholder="Color" name="color" formControlName="color">
           <mat-select-trigger>
             {{ colorControlDisplayValue }}

diff --git a/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts b/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts
@@ -30,7 +30,7 @@ test('should run logic in the input setter and getter while re-rendering', async
   expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter Angular');
   expect(screen.getByTestId('value-getter')).toHaveTextContent('I am value from getter Angular');
 
-  await rerender({ value: 'React' });
+  await rerender({ componentProperties: { value: 'React' } });
 
   // note we have to re-query because the elements are not the same anymore
   expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter React');

diff --git a/apps/example-app/src/app/examples/20-test-harness.spec.ts b/apps/example-app/src/app/examples/20-test-harness.spec.ts
@@ -0,0 +1,33 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatSnackBarHarness } from '@angular/material/snack-bar/testing';
+import { render, screen } from '@testing-library/angular';
+import user from '@testing-library/user-event';
+
+import { SnackBarComponent } from './20-test-harness';
+
+test('can be used with TestHarness', async () => {
+  const view = await render(`<app-harness></app-harness>`, {
+    imports: [SnackBarComponent],
+  });
+  const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);
+
+  const buttonHarness = await loader.getHarness(MatButtonHarness);
+  const button = await buttonHarness.host();
+  button.click();
+
+  const snackbarHarness = await loader.getHarness(MatSnackBarHarness);
+  expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
+});
+
+test('can be used in combination with TestHarness', async () => {
+  const view = await render(SnackBarComponent);
+  const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);
+
+  user.click(screen.getByRole('button'));
+
+  const snackbarHarness = await loader.getHarness(MatSnackBarHarness);
+  expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
+
+  expect(screen.getByText(/Pizza Party!!!/i)).toBeInTheDocument();
+});
diff --git a/apps/example-app/src/app/examples/20-test-harness.ts b/apps/example-app/src/app/examples/20-test-harness.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-harness',
+  standalone: true,
+  imports: [MatButtonModule, MatSnackBarModule],
+  template: `
+    <button mat-stroked-button (click)="openSnackBar()" aria-label="Show an example snack-bar">Pizza party</button>
+  `,
+})
+export class SnackBarComponent {
+  constructor(private snackBar: MatSnackBar) {}
+
+  openSnackBar() {
+    return this.snackBar.open('Pizza Party!!!');
+  }
+}
diff --git a/apps/example-app/tsconfig.app.json b/apps/example-app/tsconfig.app.json
@@ -4,7 +4,8 @@
     "outDir": "../../dist/out-tsc",
     "types": [],
     "allowJs": true,
-    "target": "ES2020"
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

diff --git a/nx.json b/nx.json
@@ -15,13 +15,6 @@
       "environment": "all"
     }
   },
-  "implicitDependencies": {
-    "package.json": {
-      "dependencies": "*",
-      "devDependencies": "*"
-    },
-    ".eslintrc.json": "*"
-  },
   "tasksRunnerOptions": {
     "default": {
       "runner": "@nrwl/nx-cloud",
@@ -75,7 +68,27 @@
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"]
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    },
+    "test": {
+      "inputs": ["default", "^production"]
+    },
+    "lint": {
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
     }
+  },
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": [],
+    "production": [
+      "default",
+      "!{projectRoot}/**/*.spec.[jt]s",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/karma.conf.js",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/.eslintrc.json"
+    ]
   }
 }
diff --git a/package.json b/package.json
@@ -28,51 +28,51 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "14.1.3",
-    "@angular/cdk": "14.1.3",
-    "@angular/common": "14.1.3",
-    "@angular/compiler": "14.1.3",
-    "@angular/core": "14.1.3",
-    "@angular/material": "14.1.3",
-    "@angular/platform-browser": "14.1.3",
-    "@angular/platform-browser-dynamic": "14.1.3",
-    "@angular/router": "14.1.3",
+    "@angular/animations": "15.0.0",
+    "@angular/cdk": "15.0.0",
+    "@angular/common": "15.0.0",
+    "@angular/compiler": "15.0.0",
+    "@angular/core": "15.0.0",
+    "@angular/material": "15.0.0",
+    "@angular/platform-browser": "15.0.0",
+    "@angular/platform-browser-dynamic": "15.0.0",
+    "@angular/router": "15.0.0",
     "@ngrx/store": "14.0.2",
-    "@nrwl/angular": "14.5.8",
-    "@nrwl/nx-cloud": "14.4.1",
+    "@nrwl/angular": "15.2.1",
+    "@nrwl/nx-cloud": "15.0.2",
     "@testing-library/dom": "^8.11.1",
     "rxjs": "7.5.6",
     "tslib": "~2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.1.3",
+    "@angular-devkit/build-angular": "15.0.0",
     "@angular-eslint/builder": "14.0.2",
-    "@angular-eslint/eslint-plugin": "14.0.2",
-    "@angular-eslint/eslint-plugin-template": "14.0.2",
+    "@angular-eslint/eslint-plugin": "14.0.4",
+    "@angular-eslint/eslint-plugin-template": "14.0.4",
     "@angular-eslint/schematics": "14.0.2",
-    "@angular-eslint/template-parser": "14.0.2",
-    "@angular/cli": "~14.1.0",
-    "@angular/compiler-cli": "14.1.3",
-    "@angular/forms": "14.1.3",
-    "@angular/language-service": "14.1.3",
-    "@nrwl/cli": "14.5.8",
-    "@nrwl/eslint-plugin-nx": "14.5.8",
-    "@nrwl/jest": "14.5.8",
-    "@nrwl/linter": "14.5.8",
-    "@nrwl/node": "14.5.8",
-    "@nrwl/nx-plugin": "14.5.8",
-    "@nrwl/workspace": "14.5.8",
+    "@angular-eslint/template-parser": "14.0.4",
+    "@angular/cli": "~15.0.0",
+    "@angular/compiler-cli": "15.0.0",
+    "@angular/forms": "15.0.0",
+    "@angular/language-service": "15.0.0",
+    "@nrwl/cli": "15.2.1",
+    "@nrwl/eslint-plugin-nx": "15.2.1",
+    "@nrwl/jest": "15.2.1",
+    "@nrwl/linter": "15.2.1",
+    "@nrwl/node": "15.2.1",
+    "@nrwl/nx-plugin": "15.2.1",
+    "@nrwl/workspace": "15.2.1",
     "@swc-node/register": "^1.4.2",
     "@swc/core": "^1.2.173",
     "@testing-library/jasmine-dom": "^1.2.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jasmine": "4.0.3",
-    "@types/jest": "28.1.7",
+    "@types/jest": "28.1.8",
     "@types/node": "18.7.1",
-    "@typescript-eslint/eslint-plugin": "5.29.0",
-    "@typescript-eslint/parser": "5.29.0",
+    "@typescript-eslint/eslint-plugin": "5.36.1",
+    "@typescript-eslint/parser": "5.36.1",
     "cpy-cli": "^3.1.1",
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.3.0",
@@ -84,15 +84,15 @@
     "jasmine-core": "4.2.0",
     "jasmine-spec-reporter": "7.0.0",
     "jest": "28.1.3",
-    "jest-environment-jsdom": "^28.1.1",
-    "jest-preset-angular": "12.1.0",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-preset-angular": "12.2.2",
     "karma": "6.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^12.1.6",
-    "ng-packagr": "14.1.0",
-    "nx": "14.5.8",
+    "ng-packagr": "15.0.0",
+    "nx": "15.2.1",
     "postcss": "^8.4.5",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
@@ -102,6 +102,6 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "28.0.8",
     "ts-node": "10.9.1",
-    "typescript": "4.7.4"
+    "typescript": "4.8.4"
   }
 }
diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json
@@ -29,10 +29,10 @@
     "migrations": "./schematics/migrations/migration.json"
   },
   "peerDependencies": {
-    "@angular/common": ">= 14.0.0",
-    "@angular/platform-browser": ">= 14.0.0",
-    "@angular/router": ">= 14.0.0",
-    "@angular/core": ">= 14.0.0"
+    "@angular/common": ">= 14.1.0",
+    "@angular/platform-browser": ">= 14.1.0",
+    "@angular/router": ">= 14.1.0",
+    "@angular/core": ">= 14.1.0"
   },
   "dependencies": {
     "@testing-library/dom": "^8.0.0",