I'm starting to learn unit testing, and understand the primary objective is to test

a system in isolation. Therefore, any dependencies should be stubbed, mocked, etc.

According to the Angular documentation on testing, you should mock whatever is

provided via dependency injection. So far, so good. But then, as shown in the code
below, you can simply import other required modules, components, directive, pipes
through a shared or feature module.

Is this really unit testing then? If the target system under test is a component,
isn't this actually testing its entire module?

Or is this just a concession that it'd be near impossible to mock all the
requirements in a real world application?

beforeEach(async(() => {
const routerSpy = createRouterSpy();

TestBed.configureTestingModule({
imports: [ SharedModule ],
declarations: [ HeroDetailComponent ],
providers: [
{ provide: ActivatedRoute, useValue: activatedRoute },
{ provide: HeroService, useClass: TestHeroService },
{ provide: Router, useValue: routerSpy},
]
})
.compileComponents();
}));

<cdk-virtual-scroll-viewport class="virtual-scroll-list">
<div *cdkVirtualFor="let element of myList;>
<div fxFlexFill (mouseenter)="over()">
//data to print
</div>
</div>
</cdk-virtual-scroll-viewport>

mouseenter and scrolling.

I have a long list of elements, I'm using virtual scrolling for showing this long
list, and what I want to do is change the style to the one that has the mouse.

It works if I move the mouse, but not if it's fixed and I scroll the list using
arrows from the keyboard or the mouse wheel.

After some research I see the problem is mouseenter event is not fired if the mouse
is not moved, but I have no clue how to solve it.