From 0c2444fe5c7eee9161deebedb777e307c87c20dc Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 26 Jul 2023 14:49:06 +0200
Subject: [PATCH] test: add integration test with ng-mocks

---
 package.json                                  |  1 +
 .../tests/integrations/ng-mocks.spec.ts       | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 projects/testing-library/tests/integrations/ng-mocks.spec.ts

diff --git a/package.json b/package.json
index 858b01a..fc7af3d 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^12.1.6",
+    "ng-mocks": "^14.11.0",
     "ng-packagr": "16.0.0",
     "nx": "16.1.4",
     "postcss": "^8.4.5",
diff --git a/projects/testing-library/tests/integrations/ng-mocks.spec.ts b/projects/testing-library/tests/integrations/ng-mocks.spec.ts
new file mode 100644
index 0000000..a3f141b
--- /dev/null
+++ b/projects/testing-library/tests/integrations/ng-mocks.spec.ts
@@ -0,0 +1,62 @@
+import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import { MockComponent } from 'ng-mocks';
+import { render } from '../../src/public_api';
+
+test('sends the correct value to the child input', async () => {
+  const utils = await render(TargetComponent, {
+    imports: [MockComponent(ChildComponent)],
+    componentInputs: { value: 'foo' },
+  });
+
+  const children = utils.fixture.debugElement.queryAll(By.directive(ChildComponent));
+  expect(children).toHaveLength(1);
+
+  const mockComponent = children[0].componentInstance;
+  expect(mockComponent.someInput).toBe('foo');
+});
+
+test('sends the correct value to the child input 2', async () => {
+  const utils = await render(TargetComponent, {
+    imports: [MockComponent(ChildComponent)],
+    componentInputs: { value: 'bar' },
+  });
+
+  const children = utils.fixture.debugElement.queryAll(By.directive(ChildComponent));
+  expect(children).toHaveLength(1);
+
+  const mockComponent = children[0].componentInstance;
+  expect(mockComponent.someInput).toBe('bar');
+});
+
+@Component({
+  selector: 'atl-child',
+  template: 'child',
+  standalone: true,
+})
+class ChildComponent {
+  @ContentChild('something')
+  public injectedSomething: TemplateRef<void> | undefined;
+
+  @Input()
+  public someInput = '';
+
+  @Output()
+  public someOutput = new EventEmitter();
+
+  public childMockComponent() {
+    /* noop */
+  }
+}
+
+@Component({
+  selector: 'atl-target-mock-component',
+  template: `<atl-child [someInput]="value" (someOutput)="trigger($event)"></atl-child> `,
+  standalone: true,
+  imports: [ChildComponent],
+})
+class TargetComponent {
+  @Input() value = '';
+  public trigger = (obj: any) => obj;
+}