test: add test case for #435 (#436)

Closes #435

Author: timdeschryver

package.json

@@ -57,6 +57,7 @@
     "@angular/compiler-cli": "17.1.0",
     "@angular/forms": "17.1.0",
     "@angular/language-service": "17.1.0",
+    "@nx/eslint": "17.2.8",
     "@nx/eslint-plugin": "17.2.8",
     "@nx/jest": "17.2.8",
     "@nx/node": "17.2.8",
@@ -77,6 +78,7 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "~2.25.4",
     "eslint-plugin-jasmine": "~4.1.3",
+    "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-jest-dom": "~4.0.1",
     "eslint-plugin-testing-library": "~5.0.1",
     "jasmine-core": "4.2.0",
@@ -102,7 +104,6 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.2.2",
-    "@nx/eslint": "17.2.8"
+    "typescript": "5.2.2"
   }
 }

projects/testing-library/tests/issues/issue-435.spec.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import { Component, Inject, Injectable } from '@angular/core';
+import { screen, render } from '../../src/public_api';
+
+// Service
+@Injectable()
+class DemoService {
+  buttonTitle = new BehaviorSubject<string>('Click me');
+}
+
+// Component
+@Component({
+  selector: 'atl-issue-435',
+  standalone: true,
+  imports: [CommonModule],
+  providers: [DemoService],
+  template: `
+    <button>
+      <!-- 👇 I only get the Inject error when I use the async pipe here -->
+      {{ demoService.buttonTitle | async }}
+    </button>
+  `,
+})
+class DemoComponent {
+  constructor(@Inject(DemoService) public demoService: DemoService) {}
+}
+
+// Test
+describe('DemoComponent', () => {
+  it('should render button', async () => {
+    await render(DemoComponent);
+
+    const button = screen.getByRole('button', {
+      name: /Click me/,
+    });
+
+    expect(button).toBeVisible();
+  });
+});