Error with angular storybook host component

[jogelin]

I have an issue when not using the component directly in storybook configuration but when using it inside a template:

I reproduce it on my fork: https://github.com/jogelin/cypress-storybook/tree/issue_with_host_component

I didn't investigate yet but this is an Angular error. If you don't know Angular, @NgModule.entryComponents was used to declare components that could be generated dynamically, on-demand like dialog or snack bar.

This is deprecated since Angular 10 with Ivy but it seems Storybook doesn't use Ivy.

It is using an AppComponent inside @storybook/angular when we use a template approach and it seems it needs to be declared in the entryComponents when using your implementation of component loading....I don't know why because I never had to do that in my storybook

[diminutivesloop]

Any updates @jogelin? It's not clear to me why this issue would only manifest when testing Storybook w/ Cypress and not when viewing the Storybook directly.

[diminutivesloop]

I was able to work around the issue by calling cy.visit directly with the Storybook iframe path and query params. The full reload is better for my needs anyways because it resets the ui state in between tests.

[jogelin]

@diminutivesloop no updates on my side. I am also just using the normal cy.visit approach

[NicholasBoll]

I'm not very familiar with Angular or this error. Thanks for the reproduction. I can look into it when I have time.

It is good there is a workaround. State is supposed to be reset between load calls, so that is failing as well...

[diminutivesloop]

@NicholasBoll The state reset issue may be specific to my setup. I use Angular components and they have some state that isn't controlled by the Storybook knobs.

[ahaskell35]

@jogelin ...was seeing the same issue on my end. Adding "import 'cypress-storybook/angular';" to the cypress test seemed to resolve the issue (at least for my setup).

Hoping its a similar fix for you as well...

[jogelin]

@ahaskell35 I tried again and I still have an error

My configurations:

preview.js

import 'cypress-storybook/angular';

chip-list.spec.ts

  before(() => {
    cy.visitStorybook();
  });

  beforeEach(() => {
    cy.loadStory('chip-list', 'default-story');
  });

  it.only('should display a list of chips', () => {
    // GIVEN
    // cy.visit('/iframe.html?id=chip-list--default-story');

    // WHEN

    // THEN
    cy.pipe(chipList.getChips()).should('have.length', 3);
  });

support.ts

import 'cypress-storybook/cypress';

chip-list.stories.ts

export const defaultStory = () => ({
  template: `
        <sg-chip-list
            formControlName="items">
          <ng-template let-item>
            {{item.name}}
          </ng-template>
        </sg-chip-list>
      </mat-form-field>
    </form>
  `,
  props: {
    form: new FormGroup<{ items: Item[] }>({
      items: new FormControl<Item[]>([
        { id: '123', name: 'Kronos' },
        { id: '456', name: 'Borg' },
        { id: '789', name: 'Vulcan' },
      ]),
    }),
  },
});
defaultStory.storyName = 'Default';

And I get:

what do I miss ?