test: add a standalone component test with child

Author: jadengis

apps/example-app/src/app/examples/19-standalone-component.spec.ts

@@ -1,10 +1,22 @@
-import { render, screen } from "@testing-library/angular";
-import { StandaloneComponent } from "./19-standalone-component";
+import { render, screen } from '@testing-library/angular';
+import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component';
 
 test('is possible to render a standalone component', async () => {
   await render(StandaloneComponent);
 
   const content = screen.getByTestId('standalone');
 
-  expect(content).toHaveTextContent("Standalone Component")
+  expect(content).toHaveTextContent('Standalone Component');
+});
+
+test('is possibl to render a standalone component with a child', async () => {
+  await render(StandaloneWithChildComponent, {
+    componentProperties: { name: 'Bob' },
+  });
+
+  const childContent = screen.getByTestId('standalone');
+  expect(childContent).toHaveTextContent('Standalone Component');
+
+  expect(screen.getByText('Hi Bob')).toBeInTheDocument();
+  expect(screen.getByText('This has a child')).toBeInTheDocument();
 });

apps/example-app/src/app/examples/19-standalone-component.ts

@@ -1,8 +1,21 @@
-import { Component } from "@angular/core";
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-standalone',
   template: `<div data-testid="standalone">Standalone Component</div>`,
   standalone: true,
 })
-export class StandaloneComponent {}
+export class StandaloneComponent { }
+
+@Component({
+  selector: 'app-standalone-with-child',
+  template: `<h1>Hi {{ name }}</h1>
+    <p>This has a child</p>
+    <app-standalone></app-standalone> `,
+  standalone: true,
+  imports: [StandaloneComponent],
+})
+export class StandaloneWithChildComponent {
+  @Input()
+  name?: string;
+}