Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d0380b7

Browse files
docs: add component with service spec (testing-library#114)
1 parent d5c1ee5 commit d0380b7

File tree

3 files changed

+106
-3
lines changed

3 files changed

+106
-3
lines changed
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { of } from 'rxjs';
2+
import { render, screen } from '@testing-library/angular';
3+
import { createMock } from '@testing-library/angular/jest-utils';
4+
5+
import { Customer, CustomersComponent, CustomersService } from './12-service-component';
6+
7+
test('renders the provided customers with manual mock', async () => {
8+
const customers: Customer[] = [
9+
{
10+
id: '1',
11+
name: 'sarah',
12+
},
13+
{
14+
id: '2',
15+
name: 'charlotte',
16+
},
17+
];
18+
await render(CustomersComponent, {
19+
componentProviders: [
20+
{
21+
provide: CustomersService,
22+
useValue: {
23+
load() {
24+
return of(customers);
25+
},
26+
},
27+
},
28+
],
29+
});
30+
31+
const listItems = screen.getAllByRole('listitem');
32+
expect(listItems.length).toBe(customers.length);
33+
34+
customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
35+
});
36+
37+
test('renders the provided customers with createMock', async () => {
38+
const customers: Customer[] = [
39+
{
40+
id: '1',
41+
name: 'sarah',
42+
},
43+
{
44+
id: '2',
45+
name: 'charlotte',
46+
},
47+
];
48+
49+
const customersService = createMock(CustomersService);
50+
customersService.load = jest.fn(() => of(customers));
51+
52+
await render(CustomersComponent, {
53+
componentProviders: [
54+
{
55+
provide: CustomersService,
56+
useValue: customersService,
57+
},
58+
],
59+
});
60+
61+
const listItems = screen.getAllByRole('listitem');
62+
expect(listItems.length).toBe(customers.length);
63+
64+
customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
65+
});
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, Injectable } from '@angular/core';
2+
import { Observable, of } from 'rxjs';
3+
4+
export class Customer {
5+
id: string;
6+
name: string;
7+
}
8+
9+
@Injectable({
10+
providedIn: 'root',
11+
})
12+
export class CustomersService {
13+
load(): Observable<Customer[]> {
14+
return of([]);
15+
}
16+
}
17+
18+
@Component({
19+
selector: 'app-fixture',
20+
template: `
21+
<ul>
22+
<li *ngFor="let customer of customers$ | async">
23+
{{ customer.name }}
24+
</li>
25+
</ul>
26+
`,
27+
})
28+
export class CustomersComponent {
29+
customers$ = this.service.load();
30+
constructor(private service: CustomersService) {}
31+
}

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component } from '@angular/core';
22
import { BehaviorSubject } from 'rxjs';
3-
import { tap } from 'rxjs/operators';
43
import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
54

65
@Component({
@@ -28,8 +27,16 @@ it('https://github.com/testing-library/angular-testing-library/issues/106', asyn
2827
// await waitFor(() => expect(hiddenText).not.toBeNull());
2928

3029
// succeeds
31-
// await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
30+
await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
31+
});
32+
33+
it('better https://github.com/testing-library/angular-testing-library/issues/106', async () => {
34+
await render(TestSelectComponent);
35+
const toggle = screen.getByTestId('toggle');
36+
const hiddenText = screen.queryByTestId('getme');
37+
38+
expect(hiddenText).toBeNull();
39+
fireEvent.click(toggle);
3240

33-
// better
3441
screen.getByTestId('getme');
3542
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /