jscutlery / devkit

Cutleries to help you cook better apps
MIT License
246 stars 15 forks source link

[cypress-mount] `mountStory` cannot handle a story with `template` #34

Open lacolaco opened 3 years ago

lacolaco commented 3 years ago

https://github.com/jscutlery/test-utils/blob/main/packages/cypress-mount/src/lib/cypress-mount.ts#L25-L30

export function mountStory(
  story: Story,
  options: MountStoryOptions = {}
): Cypress.Chainable<void> {
  const args = story.args;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { component, moduleMetadata } = story({ args }, { args } as any);
  return mount(component, {
    ...moduleMetadata,
    ...options,
    inputs: args,
  });
}

Component Story Format for Angular supports component and template. But the current implementation of mountStory cannot handle a story with template.

https://storybook.js.org/docs/angular/writing-stories/introduction

// Always an empty list, not super interesting
export const Empty: Story<List> = (args: List) => ({
  props: args,
  template: `<app-list></<app-list>`,
});

export const OneItem: Story<List> = (args) => ({
  props: args,
  template: `
    <app-list>
      <app-listitem></app-listitem>
    </<app-list>`,
});
Marklb commented 3 years ago

I recently wrote @storybook/testing-angular that provides a method to compose a Story with the story, default export Meta, and global Meta as a single StoryFn. Instead of returning a component and moduleMetadata it currently returns a component and NgModule.

It is new and hasn't been thoroughly tested yet, but I have been trying it with various testing libraries. I have tried it with Cypress using this libraries mount function without any problems, yet, with stories returning a component or template. I don't mind submitting a PR to switch the mountStory function to use it or to answer questions or suggestions about it if there is a change that could make it fit better. https://github.com/storybookjs/testing-angular

I mainly used the story composing logic that had already been written for @storybook/testing-react and @storybook/testing-vue then stripped the storybook Angular renderer down to basically just the Story component and module creation.

I got stopped by #51 when trying to use the component testing on my library's more complicated stories, but they seemed to render as I would expect without the styles and assets.