docs: add selector with attribute example (#264)

Closes #263

Author: mleimer

apps/example-app/src/app/examples/02-input-output.spec.ts

@@ -33,8 +33,8 @@ test('is possible to set input and listen for output', async () => {
 test('is possible to set input and listen for output with the template syntax', async () => {
   const sendSpy = jest.fn();
 
-  await render(InputOutputComponent, {
-    template: '<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>',
+  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', {
+    declarations: [InputOutputComponent],
     componentProperties: {
       sendValue: sendSpy,
     },

apps/example-app/src/app/examples/11-ng-content.spec.ts

@@ -1,14 +1,12 @@
-import { TestBed } from '@angular/core/testing';
 import { render, screen } from '@testing-library/angular';
 
 import { CellComponent } from './11-ng-content';
 
 test('it is possible to test ng-content without selector', async () => {
   const projection = 'it should be showed into a p element!';
 
-  TestBed.overrideComponent(CellComponent, { set: { selector: 'cell' } });
-  await render(CellComponent, {
-    template: `<cell data-testid="one-cell-with-ng-content">${projection}</cell>`,
+  await render(`<app-fixture data-testid="one-cell-with-ng-content">${projection}</app-fixture>`, {
+    declarations: [CellComponent]
   });
 
   expect(screen.getByText(projection)).toBeInTheDocument();

apps/example-app/src/app/examples/11-ng-content.ts

@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+  selector: 'app-fixture',
   template: `
     <p>
       <ng-content></ng-content>

apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/angular';
+import {ComponentWithAttributeSelectorComponent} from './17-component-with-attribute-selector';
+
+// Note: At this stage it is not possible to use the render(ComponentWithAttributeSelectorComponent, {...}) syntax
+// for components with attribute selectors!
+test('is possible to set input of component with attribute selector through template', async () => {
+  await render(`<app-fixture-component-with-attribute-selector [value]="42"></app-fixture-component-with-attribute-selector>`, {
+    declarations: [ComponentWithAttributeSelectorComponent]
+  });
+
+  const valueControl = screen.getByTestId('value');
+
+  expect(valueControl).toHaveTextContent('42');
+});

apps/example-app/src/app/examples/17-component-with-attribute-selector.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-fixture-component-with-attribute-selector[value]',
+  template: `
+    <span data-testid="value">{{ value }}</span>
+  `,
+})
+export class ComponentWithAttributeSelectorComponent {
+  @Input() value!: number;
+}