docs: add component with service spec (#114)

Author: timdeschryver

src/app/examples/12-service-component.spec.ts

@@ -0,0 +1,65 @@
+import { of } from 'rxjs';
+import { render, screen } from '@testing-library/angular';
+import { createMock } from '@testing-library/angular/jest-utils';
+
+import { Customer, CustomersComponent, CustomersService } from './12-service-component';
+
+test('renders the provided customers with manual mock', async () => {
+  const customers: Customer[] = [
+    {
+      id: '1',
+      name: 'sarah',
+    },
+    {
+      id: '2',
+      name: 'charlotte',
+    },
+  ];
+  await render(CustomersComponent, {
+    componentProviders: [
+      {
+        provide: CustomersService,
+        useValue: {
+          load() {
+            return of(customers);
+          },
+        },
+      },
+    ],
+  });
+
+  const listItems = screen.getAllByRole('listitem');
+  expect(listItems.length).toBe(customers.length);
+
+  customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
+});
+
+test('renders the provided customers with createMock', async () => {
+  const customers: Customer[] = [
+    {
+      id: '1',
+      name: 'sarah',
+    },
+    {
+      id: '2',
+      name: 'charlotte',
+    },
+  ];
+
+  const customersService = createMock(CustomersService);
+  customersService.load = jest.fn(() => of(customers));
+
+  await render(CustomersComponent, {
+    componentProviders: [
+      {
+        provide: CustomersService,
+        useValue: customersService,
+      },
+    ],
+  });
+
+  const listItems = screen.getAllByRole('listitem');
+  expect(listItems.length).toBe(customers.length);
+
+  customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
+});

src/app/examples/12-service-component.ts

@@ -0,0 +1,31 @@
+import { Component, Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export class Customer {
+  id: string;
+  name: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CustomersService {
+  load(): Observable<Customer[]> {
+    return of([]);
+  }
+}
+
+@Component({
+  selector: 'app-fixture',
+  template: `
+    <ul>
+      <li *ngFor="let customer of customers$ | async">
+        {{ customer.name }}
+      </li>
+    </ul>
+  `,
+})
+export class CustomersComponent {
+  customers$ = this.service.load();
+  constructor(private service: CustomersService) {}
+}

src/app/issues/issue-106.spec.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { tap } from 'rxjs/operators';
 import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
 
 @Component({
@@ -28,8 +27,16 @@ it('https://github.com/testing-library/angular-testing-library/issues/106', asyn
   // await waitFor(() => expect(hiddenText).not.toBeNull());
 
   // succeeds
-  // await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
+  await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
+});
+
+it('better https://github.com/testing-library/angular-testing-library/issues/106', async () => {
+  await render(TestSelectComponent);
+  const toggle = screen.getByTestId('toggle');
+  const hiddenText = screen.queryByTestId('getme');
+
+  expect(hiddenText).toBeNull();
+  fireEvent.click(toggle);
 
-  // better
   screen.getByTestId('getme');
 });