https://github.com/training360/angular-im-2023-unit-testing
https://github.com/training360/angular-im-2023-unit-testing
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/training360/angular-im-2023-unit-testing
- Owner: Training360
- Created: 2023-12-06T09:00:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-12T15:49:11.000Z (over 2 years ago)
- Last Synced: 2025-02-01T14:46:31.119Z (over 1 year ago)
- Language: TypeScript
- Size: 1.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Unit Testing
## Start
- `npm run dev`
## Intro
- [tsconfig.spec.json: explain](tsconfig.spec.json)
- command: `ng test`
## Smart and dump components
- [ForbiddenComp: a dumb example](src/app/page/forbidden/forbidden.component.ts)
- [ForbiddenSpec: moved to](src/tests/forbidden.component.spec.ts)
- change the component path:
```typescript
import { ForbiddenComponent } from "../app/page/forbidden/forbidden.component";
```
- [package.json](package.json)
- create/modify test scripts:
```json
"test:01": "ng test --include=**/tests/forbidden.component.spec.ts",
"test": "ng test --include=**/tests/*.spec.ts --browsers ChromeHeadless --watch false",
```
- commands:
- `npm run test:01`
- `npm test`
## HTML elements
- [ForbiddenSpec](src/tests/forbidden.component.spec.ts)
- testing h1:
```typescript
it("should have a h1", () => {
const h1 = fixture.nativeElement.querySelector("h1");
expect(h1).toBeTruthy();
expect(h1.textContent).toContain("Forbidden");
});
it('h1 content should be "forbidden"', () => {
const h1 = fixture.nativeElement.querySelector("h1");
expect(h1.textContent).toMatch(/forbidden/i);
});
```
- command: `npm test`
## Testing a method call
- [ForbiddenComp](src/app/page/forbidden/forbidden.component.ts)
```typescript
onHomeClick() {
console.log('home');
}
```
- [ForbiddenComp html](src/app/page/forbidden/forbidden.component.html)
```html
Go to the home page
```
- [ForbiddenSpec](src/tests/forbidden.component.spec.ts)
```typescript
it("should have a button to the home page", () => {
const button = fixture.nativeElement.querySelector("button");
expect(button).toBeTruthy();
});
it('button text should be "go to the home page"', () => {
const button = fixture.nativeElement.querySelector("button");
expect(button.textContent).toMatch(/go to the home page/i);
});
it("click on button shuld be trigger the onHomeClick method", () => {
const button = fixture.nativeElement.querySelector("button");
spyOn(component, "onHomeClick");
button.click();
expect(component.onHomeClick).toHaveBeenCalled();
});
```
## Testing and Dependency Injection
- [CustomerEditor: copy to](src/tests/customer-editor.component.spec.ts)
- fix component path:
- `import { CustomerEditorComponent } from '../app/page/customer-editor/customer-editor.component';`
- add imports:
```typescript
HttpClientTestingModule,
BrowserAnimationsModule,
```
- mock CustomerService:
- [CustomerServiceMock: create](src/tests/mocks/customer.service.mock.ts)
- set providers:
- [CustomerEditor: edit](src/tests/customer-editor.component.spec.ts)
```typescript
providers: [
{
provide: CustomerService,
useClass: CustomerServiceMock,
},
],
```
```typescript
it("customer should be the first customer in the list", () => {
component.id = 1;
component.ngOnInit();
setTimeout(() => {
expect(component.customer()).toBe(component.store.list()[0]);
});
});
```
## Form testing
- [CustomerEditorComponentSpec](src/tests/customer-editor.component.spec.ts)
- find the comment: // Form testing