I'm trying to write a test that is attempting to trigger the activate event of a <router-outlet> element. Here's my setup:
App routes:
const routes: Routes = [{
path: 'path/for/component/:id',
component: MyComponent,
children: [
{ path: '', pathMatch: 'full', component: MySubComponent, outlet: 'outletname' }
]
}];
MyComponent HTML:
<mat-tab-group>
<mat-tab label="Tab 1">
<ng-template mat-tab-label>Tab 1</ng-template>
<router-outlet name="outletname" (activate)="onActivate($event)"></router-outlet>
</mat-tab>
<mat-tab label="Tab 2">
<!-- more content here -->
</mat-tab>
</mat-tab-group>
MyComponent TS:
export class MyComponent {
constructor(private route: ActivatedRoute) { }
onActivate(obj: any): void { /* do the things */ }
}
MyComponent Spec:
describe('MyComponent', () => {
let activatedRoute: ActivatedRoute;
beforeAll(() => {
activatedRoute = new ActivatedRoute();
});
beforeEach(() => {
/*
* set activatedRoute properties such as URL and component to try
* to get the onActivate() callback to fire on component render
*/
});
it('should test results of onActivate event', async () => {
/*
* 1. setup and construct the component
* 2. test result of onActivate() callback
*/
});
});
For anyone who's curious, all that's really happening in the full component implementation is that the activate callback just notifies MyComponent as to which tab is currently being displayed so that I can throw up a dialog box should the user navigate to the other tab when necessary.
My issue is that I can't figure out how to properly mock up the ActivatedRoute object to get the activate event to fire when MyComponent is constructed in my test. As I understand it, and I could be totally wrong here, the <router-outlet> should fire when the current route matches the path in my list of routes. Ideally, I'd like to fire the activate callback without having to explicitly call it in my test, i.e. I do not want to have to say component.onActivate(eventObj) in my test. I expect the <router-outlet> to render as part of the component construction as long as ActivatedRoute has the proper information. So, the question is: how much of ActivatedRoute must be specified in the beforeEach() function in order to get the <router-outlet> to render properly? Is this even possible? Am I completely on the wrong track? Am I overthinking this?
I'd like to eventually use an ActivatedRoute mock class instead of the actual class to reduce the amount of overhead and only provide the minimum necessary functionality to facilitate further tests, but I have to get this one to work first before I can properly abstract out a utility class.
Any help would be greatly appreciated! Thanks in advance!