Тёмный

How do I test Components & Routing with the RouterTestingHarness 

Rainer Hahnekamp
Подписаться 4,6 тыс.
Просмотров 604
50% 1

Tired of writing boilerplate code to test Angular components with router-specific data?
The RouterTestingHarness is your new best friend! This video dives deep into this under-appreciated Angular testing tool, showing you how to:
- Simplify tests involving ActivatedRoute and dynamic router parameters.
- Reduce boilerplate code and write cleaner, more maintainable tests.
- Navigate to specific routes and verify component behavior.
Whether you're a seasoned Angular developer or just starting out with testing, this video will equip you with the skills to write more efficient and effective tests.
0:00 Introduction
0:05 Theory
2:08 Test without RouterTestingHarness
6:40 Testing with RouterTestingHarness
11:53 Farewell

Наука

Опубликовано:

 

3 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 4   
@BruceMcGivern
@BruceMcGivern 3 месяца назад
Does that also take care of the Problems with nested components? I ran into the Problem, that if I have Component A which includes Component B which includes Component C,... and I regulary have the issue that Karma has Problemns rendering the Child Components (e.g. triggering/rendering Errors on reactive Forms Fields of the field is in a Child Component)
@RainerHahnekamp
@RainerHahnekamp 3 месяца назад
Yes, it also works with nested components. Do you have an example for your issue. Sounds like this should not happen. You can try out this code. @Component({ template: ``, imports: [RouterOutlet], standalone: true, }) class MiddleComponent { constructor() { console.log('hallo'); } } describe('Detail Component', () => { it('should test verify the id is 5', waitForAsync(async () => { TestBed.configureTestingModule({ providers: [ provideRouter([ { path: 'detail', component: MiddleComponent, children: [{ path: ':id', component: DetailComponent }], }, ]), ], }); const harness = await RouterTestingHarness.create('detail/5'); const p: HTMLParagraphElement = harness.fixture.debugElement.query( By.css('p'), ).nativeElement; expect(p.textContent).toBe('Current Id: 5'); await harness.navigateByUrl('/detail/6'); expect(p.textContent).toBe('Current Id: 6'); })); });
@paulh6933
@paulh6933 3 месяца назад
i'm guessing the only part of the route that matters is the :id. detail/ could be foo/ and the test would work the same, correct?
@RainerHahnekamp
@RainerHahnekamp 3 месяца назад
Exactly!
Далее
How do I test Signals (signal / computed / effect)
20:15
Angular Unit Tests with the inject() function
29:58
Просмотров 5 тыс.
NgRx Best Practices - Episode 4: Facade Pattern
36:20
Просмотров 4,1 тыс.
Programmatic Navigation in SwiftUI explained
17:50
Просмотров 1,1 тыс.
Type-Safe TypeScript with Type Narrowing
33:36
Просмотров 1,5 тыс.
How do test code using inject()
15:41
Просмотров 1 тыс.
NgRx Signal Store Trilogy, Part 1: Why, When, and How?
51:04
Introducing Playwright
48:53
Просмотров 2,8 тыс.
Улучшил свои Apple Watch!
0:25
Просмотров 38 тыс.
Blackview N6000SE Краш Тест!
1:00
Просмотров 26 тыс.
iPhone перегрелся, что делать?!
1:01
YOTAPHONE 2 - СПУСТЯ 10 ЛЕТ
15:13
Просмотров 156 тыс.