Skip to content

Storyshots: fix broken storyshots with angular#23555

Merged
valentinpalkovic merged 2 commits intostorybookjs:nextfrom
mattlewis92:fix-angular-storyshots
Jul 24, 2023
Merged

Storyshots: fix broken storyshots with angular#23555
valentinpalkovic merged 2 commits intostorybookjs:nextfrom
mattlewis92:fix-angular-storyshots

Conversation

@mattlewis92
Copy link
Contributor

@mattlewis92 mattlewis92 commented Jul 21, 2023

Closes #23549

What I did

Storyshots + angular is broken in 7.x due to the ngModule metadata not being passed, which results in a crash here due to analyzedMetadata being undefined:

const { imports, declarations, providers } = analyzedMetadata;

Storyshots › Deprecated/Button V1 › A button without cu3ButtonV1 directive
    TypeError: Cannot destructure property 'imports' of 'analyzedMetadata' as it is undefined.

      at createStorybookWrapperComponent (../../../node_modules/.pnpm/@storybook+angular@7.1.0_@angular-devkit+build-angular@16.1.4_@angular-devkit+core@16.1.4_@an_wdonu775mvtxixlddoeavvll2m/node_modules/@storybook/angular/dist/client/angular-beta/StorybookWrapperComponent.js:40:13)
      at getApplication (../../../node_modules/.pnpm/@storybook+angular@7.1.0_@angular-devkit+build-angular@16.1.4_@angular-devkit+core@16.1.4_@an_wdonu775mvtxixlddoeavvll2m/node_modules/@storybook/angular/dist/client/angular-beta/StorybookModule.js:16:76)
      at getRenderedTree (../../../node_modules/.pnpm/@storybook+addon-storyshots@7.1.0_@angular+core@16.1.4_@angular+platform-browser-dynamic@16.1_a7fb6jifdhialxquhbkhs7obzy/node_modules/@storybook/addon-storyshots/dist/frameworks/angular/renderTree.js:18:55)
      at ../../../node_modules/.pnpm/@storybook+addon-storyshots@7.1.0_@angular+core@16.1.4_@angular+platform-browser-dynamic@16.1_a7fb6jifdhialxquhbkhs7obzy/node_modules/@storybook/addon-storyshots/dist/test-bodies.js:9:24
      at ../../../node_modules/.pnpm/@storybook+addon-storyshots@7.1.0_@angular+core@16.1.4_@angular+platform-browser-dynamic@16.1_a7fb6jifdhialxquhbkhs7obzy/node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:20:29
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:421:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../../node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3091:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:420:56)
      at Zone.Object.<anonymous>.Zone.run (../../../node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:175:47)
      at Object.wrappedFunc (../../../node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3580:34)

Fixed by correcting the type to no longer make analyzedMetadata optional and passing in the expected analyzedMetadata value.

How to test

I applied this patch locally to our application and verified that storyshots with angular now work.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]

@mattlewis92 mattlewis92 reopened this Jul 21, 2023
@valentinpalkovic valentinpalkovic changed the title fix(storyshots): fix broken storyshots with angular Storyshots: fix broken storyshots with angular Jul 24, 2023
@valentinpalkovic valentinpalkovic self-assigned this Jul 24, 2023
@valentinpalkovic valentinpalkovic added ci:daily Run the CI jobs that normally run in the daily job. bug patch:yes Bugfix & documentation PR that need to be picked to main branch labels Jul 24, 2023
@valentinpalkovic valentinpalkovic merged commit e3fc35b into storybookjs:next Jul 24, 2023
@kasperpeulen kasperpeulen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Aug 9, 2023
@kasperpeulen kasperpeulen removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:daily Run the CI jobs that normally run in the daily job.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Angular + storyshots broken in 7.1.0

3 participants