Storybook: Inject a mocked provider/service at component level

Question

I have an Angular component that has a component level provider.

@Component({
  selector: 'storybook-di-component',
  templateUrl: './di.component.html',
  providers: [{ provide: TEST_TOKEN, useValue: 123 }],
})
export class DiComponent {
  @Input()
  title: string;

  constructor(
    protected injector: Injector,
    protected elRef: ElementRef,
    @Inject(TEST_TOKEN) protected testToken: number
  ) {}

In such cases, how do I get storybook to inject a different provider so that I can provide an alternate/mock service? For example, in the DiComponent above, what if I wanted to inject { provide: TEST_TOKEN, useValue: 456 } instead?

The real world use case is that I'm using ngrx/component-store and need to provide a dummy, prepopulated store for the component.

(Additional info:) Injecting it at module level (like below) doesn't work as the component still goes and creates it's own instance of the provider:

moduleMetadata: {
        providers: [
            { provide: StateStore, useValue: stateStore }
        ],
        imports: [...],
    },

score 3 · Accepted Answer · answered Nov 11 '20 at 15:00

I ended up solving this problem using a low tech approach.

Subclass the component in the .stories.ts file
In the sub class, declare the constructor to inject everything other than the service needing to be mocked.
Call super(...) with the injected services + the mocked service.

Given that my actual need was to inject a mock of the ngrx/component-store my stories.ts has something like the following now:

const stateStore = new RecordSuggestionsPageStore(mockSuggestionsService);
stateStore.setState(() => ({
    selectableRecords: [
        { name: "John Legend", recordType: "employee" },
        { name: "Allan Davies", recordType: "employee" },
    ]
}));

@Component({
    selector: "myapp-suggested-records-page",
    templateUrl: "./suggested-records-page.component.html",
    styleUrls: ["./suggested-records-page.component.scss"]
})
class SuggestedRecordsPageComponentStubbed extends SuggestedRecordsPageComponent {

    constructor(router: Router) {
        super(stateStore, router);
    }
}

score 1 · Answer 2 · answered Jun 21 '21 at 10:37

The TypeProvider works for me. For your example it is something like the following, where the parameters for setState would need to match the method being mocked:

class MockRecordSuggestionsPageStore implements Partial<RecordSuggestionsPageStore> {
  setState() {
    return [
      { name: "John Legend", recordType: "employee" },
      { name: "Allan Davies", recordType: "employee" },
    ]
  }
}

For providers in your story for SuggestedRecordsPageComponent

    moduleMetadata: {
      declarations: [...],
      imports: [...],
      providers: [
        { provide: StateStore, useClass: MockRecordSuggestionsPageStore }
      ],
    },

Storybook: Inject a mocked provider/service at component level

2 Answers2