Mocking standalone with spectator.

[grosch]

Sorry to open this as a "bug" but I wanted to move us out of the stack overflow post and into here while trying to make it work.

I just saw your reply there pointing at the spectator example, but I still can't make what you're showing work. Here's a complete example I finally put together to help debug this. If I run that test, it still throws the error from the ngOnInit of the HeaderComponent, which it shouldn't be doing since I mocked that component away, right?

import {Component, OnInit} from '@angular/core'
import {createComponentFactory, Spectator} from '@ngneat/spectator/jest'
import {MockBuilder} from 'ng-mocks'

@Component({
    selector: 'app-header',
    standalone: true,
    template: ''
})
class HeaderComponent implements OnInit {
    ngOnInit(): void {
        throw new Error('Why did I get called?')
    }
}

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [HeaderComponent],
    template: '<app-header></app-header>'
})
class ExampleComponent {
}

describe('ExampleComponent', () => {
    let spectator: Spectator<ExampleComponent>
    let component: ExampleComponent

    const dependencies = MockBuilder(HeaderComponent).build()

    const createComponent = createComponentFactory({
        component: ExampleComponent,
        ...dependencies
    })

    beforeEach(() => {
        spectator = createComponent()
        component = spectator.component
    })

    it('should create', () => {
        expect(component).toBeTruthy()
    })
})

[grosch]

Oh wow, that's counter-intuitive at first glance, but I guess makes sense. What all is it generating at that point? Do I essentially now no longer need to specify any imports on spectator's createComponentFactory once I use MockBuilder? What about when the component uses RouterModule, where in the test I'd instead use RouterTestingModule

[satanTime]

it works the next way MockBuilder(ThingsToKeepAsItIsForTesting, ThingsToMockForTesting), starting the version 14 there is an additional behavior for ThingsToKeepAsItIsForTesting, if it's a standalone declaration, then MockBuilder will mock all imports and redeclare the decoration:

so instead of having

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [HeaderComponent],
    template: '<app-header></app-header>'
})
``

during testing, it will be 

```ts
@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [MockComponent(HeaderComponent)], // <- MockComponent
    template: '<app-header></app-header>'
})

Because you are testing ExampleComponent, you need to set it in the MockBuilder:

describe('ExampleComponent', () => {
    let spectator: Spectator<ExampleComponent>
    let component: ExampleComponent

    // HERE use ExampleComponent, not HeaderComponent
    const dependencies = MockBuilder(ExampleComponent).build();

    const createComponent = createComponentFactory({
        component: ExampleComponent,
        ...dependencies
    })

    beforeEach(() => {
        spectator = createComponent()
        component = spectator.component
    })

    it('should create', () => {
        expect(component).toBeTruthy()
    })
})

---

Regarding imports in spectator, right, you don't need them anymore. You should call MockBuilder to build what you want, and add the built TestingModule to createComponentFactory: https://ng-mocks.sudo.eu/extra/with-3rd-party#ngneatspectator-and-mockbuilder.

const dependencies = MockBuilder(MyComponent, [ItsModule, AnotherService, DependencyStandaloneForMock])
  .mock(AnotherService, {auth$: of(true)}, // <- customizing a mock service
  .build();

const createComponent = createComponentFactory({
  component: MyComponent,
  ...dependencies,
});

---

For RouterModule and RouterTestingModule, if they aren't imported in your module (for example lazy loaded modules), then you need to specify them additionally in MockBuilder: https://ng-mocks.sudo.eu/guides/route.

const dependencies = MockBuilder(
    // Things to keep and export.
    [
      ComponentForTesting,
      RouterModule,
      RouterTestingModule.withRoutes([]),
    ], 
    // Things to mock.
    TheModuleOfTheComponentForTesting,
  )

const createComponent = createComponentFactory({
  component: ComponentForTesting,
  ...dependencies,
});

[satanTime]

Hi @grosch, is anything left unanswered here?

[grosch]

This is great, thank you so much for your amazing support. I think I understand what you're saying, but it's 3am for me. I'll try to play with this tomorrow and see if I actually understand :)

[satanTime]

You are more than welcome. Keep me posted and feel free to ping me if you've stumbled over whatever.

[satanTime]

I've converted the issue to a Q&A discussion. A bit messy with comments now :) my excuses.

[grosch]

So I'm making good progress, but I've run into two confusing things.

Why don't I always need the imports

In one of my standalone components, I import like so: imports: [RouterModule, NgbDropdownModule, NgbCollapseModule]. In the unit test I'm doing this:

    const dependencies = MockBuilder(HeaderComponent).build()

    const createComponent = createRoutingFactory({
        component: HeaderComponent,
        ...dependencies
    })

Why don't I have to import either of the Ngb modules?

Standalone directive complains about a module

I have a standalone directive, TabLinkDirective. When trying to test a standalone component that uses it:

    const dependencies = MockBuilder(
        [DisplaySubSpaceContactsComponent, ...],
        [TabLinkDirective, ...]
    ).build()

    const createComponent = createComponentFactory({
        component: DisplaySubSpaceContactsComponent,
        detectChanges: false,
        ...dependencies
    })

it tells me:

Error: Unexpected directive 'MockOfTabLinkDirective' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

[satanTime]

Hi @grosch,

first of all, I'm very sorry for the mess. This is a github discussion, you should post here answers only, or comment an existing answer.

For the first question - could you post it as a new discussion?
For the second question - could you post it as a new discussion too, and, also, could you provide decorators of all declarations there?

For the first one, the answer should be understanding how MockBuilder works: https://ng-mocks.sudo.eu/api/MockBuilder#shallow-flag. It detects imports of HeaderComponent and simply mocks them.
For the second one, I need to dig deeper, if TabLinkDirective is an import of DisplaySubSpaceContactsComponent, the it should be in a chain .mock method, instead of the second parameter of MockBuilder.

[grosch]

Let's close this out as we've opened other issues/discussions.