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 ed262f6

Browse files
docs: add example for issue testing-library#304 (testing-library#305)
1 parent bf9cbd4 commit ed262f6

File tree

4 files changed

+70
-3
lines changed

4 files changed

+70
-3
lines changed
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { Location } from '@angular/common';
3+
import { render, screen } from '@testing-library/angular';
4+
import userEvent from '@testing-library/user-event';
5+
import { TestBed } from '@angular/core/testing';
6+
7+
// with goBackSpy, the implementation of goBack won't be invoked (because it's using the spy)
8+
test('should call a goBack when user click in the button', async () => {
9+
const goBackSpy = jest.fn();
10+
await render(HeaderBackButtonComponent, {
11+
declarations: [IconButtonComponent],
12+
componentProperties: {
13+
goBack: goBackSpy,
14+
},
15+
});
16+
17+
const button = screen.getByLabelText(/iconbutton/i);
18+
userEvent.click(button);
19+
expect(goBackSpy).toHaveBeenCalled();
20+
});
21+
22+
// don't spy on goBack, this way the implementation of goBack is invoked, and you can test if location.back() is called
23+
test('should call a Location.back when user click in the button', async () => {
24+
await render(HeaderBackButtonComponent, {
25+
declarations: [IconButtonComponent],
26+
});
27+
28+
const location = TestBed.inject(Location);
29+
jest.spyOn(location, 'back');
30+
31+
const button = screen.getByLabelText(/iconbutton/i);
32+
userEvent.click(button);
33+
expect(location.back).toHaveBeenCalled();
34+
});
35+
36+
@Component({
37+
selector: 'app-cebs-header-back-button',
38+
template: `
39+
<header>
40+
<app-cebs-icon-button icon="chevron_left" aria-label="back button" (clickEvent)="goBack()"></app-cebs-icon-button>
41+
</header>
42+
`,
43+
})
44+
class HeaderBackButtonComponent {
45+
constructor(private location: Location) {}
46+
47+
goBack(): void {
48+
this.location.back();
49+
}
50+
}
51+
52+
@Component({
53+
selector: 'app-cebs-icon-button',
54+
template: `
55+
<button (click)="onClick()" aria-label="icon button">
56+
<span class="material-symbols-outlined icon">{{ icon }}</span>
57+
</button>
58+
`,
59+
})
60+
class IconButtonComponent {
61+
@Output() clickEvent = new EventEmitter();
62+
@Input() icon!: string;
63+
64+
onClick(): void {
65+
this.clickEvent.emit();
66+
}
67+
}

‎apps/example-app/tsconfig.app.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"outDir": "../../dist/out-tsc",
55
"types": [],
66
"allowJs": true,
7-
"target": "ES2017"
7+
"target": "ES2020"
88
},
99
"files": ["src/main.ts", "src/polyfills.ts"],
1010
"include": ["src/**/*.d.ts"],

‎projects/testing-library/tsconfig.schematics.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "../../tsconfig.base.json",
33
"compilerOptions": {
44
"strict": true,
5-
"target": "es6",
5+
"target": "ES2020",
66
"module": "commonjs",
77
"moduleResolution": "node",
88
"esModuleInterop": true,

‎tsconfig.base.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"moduleResolution": "node",
1212
"outDir": "./dist/out-tsc",
1313
"sourceMap": true,
14-
"target": "es2015",
14+
"target": "ES2020",
1515
"typeRoots": ["node_modules/@types"],
1616
"strict": true,
1717
"exactOptionalPropertyTypes": true,

0 commit comments

Comments
(0)

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