Fix Angular storyshots

storybookjs · Jan 16, 2023 · d015495 · d015495
1 parent d58d0c8
commit d015495
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 103 deletions.
diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
@@ -67,7 +67,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "jest-preset-angular": "^8.3.2",
+    "jest-preset-angular": "^12.2.3",
     "jest-vue-preprocessor": "^1.7.1",
     "react-test-renderer": "^16",
     "rimraf": "^3.0.2",
@@ -82,7 +82,7 @@
     "@storybook/vue": "*",
     "@storybook/vue3": "*",
     "jest": "*",
-    "jest-preset-angular": "*",
+    "jest-preset-angular": " >= 12.2.3",
     "jest-vue-preprocessor": "*",
     "preact": "^10.5.13",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

diff --git a/code/addons/storyshots-core/src/frameworks/angular/loader.ts b/code/addons/storyshots-core/src/frameworks/angular/loader.ts
@@ -17,11 +17,7 @@ function setupAngularJestPreset() {
   // is running inside jest -  one of the things that `jest-preset-angular/build/setupJest` does is
   // extending the `window.Reflect` with all the needed metadata functions, that are required
   // for emission of the TS decorations like 'design:paramtypes'
-  try {
-    jest.requireActual('jest-preset-angular/build/setupJest');
-  } catch (e) {
-    jest.requireActual('jest-preset-angular/build/setup-jest');
-  }
+  jest.requireActual('jest-preset-angular/setup-jest');
 }
 
 function test(options: StoryshotsOptions): boolean {

diff --git a/code/addons/storyshots-core/src/frameworks/angular/renderTree.ts b/code/addons/storyshots-core/src/frameworks/angular/renderTree.ts
@@ -1,9 +1,8 @@
-import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
-import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
+import AngularSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';
+import HTMLCommentSerializer from 'jest-preset-angular/build/serializers/html-comment';
 import { TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { addSerializer } from 'jest-specific-snapshot';
-import { getStorybookModuleMetadata } from '@storybook/angular/renderer';
+import { getApplication, storyPropsProvider } from '@storybook/angular/renderer';
 import { BehaviorSubject } from 'rxjs';
 
 addSerializer(HTMLCommentSerializer);
@@ -12,31 +11,20 @@ addSerializer(AngularSnapshotSerializer);
 function getRenderedTree(story: any) {
   const currentStory = story.render();
 
-  const moduleMeta = getStorybookModuleMetadata(
-    {
-      storyFnAngular: currentStory,
-      component: story.component,
-      // TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
-      targetSelector: 'storybook-wrapper',
-    },
-    new BehaviorSubject(currentStory.props)
-  );
-
-  TestBed.configureTestingModule({
-    imports: [...moduleMeta.imports],
-    declarations: [...moduleMeta.declarations],
-    providers: [...moduleMeta.providers],
-    schemas: [...moduleMeta.schemas],
+  const application = getApplication({
+    storyFnAngular: currentStory,
+    component: story.component,
+    // TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
+    targetSelector: 'storybook-wrapper',
   });
 
-  TestBed.overrideModule(BrowserDynamicTestingModule, {
-    set: {
-      entryComponents: [...moduleMeta.entryComponents],
-    },
+  TestBed.configureTestingModule({
+    imports: [application],
+    providers: [storyPropsProvider(new BehaviorSubject(currentStory.props))],
   });
 
   return TestBed.compileComponents().then(() => {
-    const tree = TestBed.createComponent(moduleMeta.bootstrap[0] as any);
+    const tree = TestBed.createComponent(application);
     tree.detectChanges();
 
     // Empty componentInstance remove attributes of the internal main component (<storybook-wrapper>) in snapshot

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -81,7 +81,7 @@
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
     "jest": "^29.3.1",
-    "jest-preset-angular": "^12.0.0",
+    "jest-preset-angular": "^12.2.3",
     "jest-specific-snapshot": "^7.0.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",

diff --git a/code/frameworks/angular/src/renderer.ts b/code/frameworks/angular/src/renderer.ts
@@ -1,4 +1,5 @@
+export { storyPropsProvider } from './client/angular-beta/StorybookProvider';
 export { computesTemplateSourceFromComponent } from './client/angular-beta/ComputesTemplateFromComponent';
 export { rendererFactory } from './client/render';
 export { AbstractRenderer } from './client/angular-beta/AbstractRenderer';
-export { getApplication as getStorybookModuleMetadata } from './client/angular-beta/StorybookModule';
+export { getApplication } from './client/angular-beta/StorybookModule';
diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5480,7 +5480,7 @@ __metadata:
     enzyme-adapter-react-16: ^1.15.5
     enzyme-to-json: ^3.6.1
     glob: ^7.1.6
-    jest-preset-angular: ^8.3.2
+    jest-preset-angular: ^12.2.3
     jest-specific-snapshot: ^7.0.0
     jest-vue-preprocessor: ^1.7.1
     preact-render-to-string: ^5.1.19
@@ -5499,7 +5499,7 @@ __metadata:
     "@storybook/vue": "*"
     "@storybook/vue3": "*"
     jest: "*"
-    jest-preset-angular: "*"
+    jest-preset-angular: " >= 12.2.3"
     jest-vue-preprocessor: "*"
     preact: ^10.5.13
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5669,7 +5669,7 @@ __metadata:
     cross-spawn: ^7.0.3
     find-up: ^5.0.0
     jest: ^29.3.1
-    jest-preset-angular: ^12.0.0
+    jest-preset-angular: ^12.2.3
     jest-specific-snapshot: ^7.0.0
     read-pkg-up: ^7.0.1
     rimraf: ^3.0.2
@@ -11332,7 +11332,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-from@npm:1.x, buffer-from@npm:^1.0.0":
+"buffer-from@npm:^1.0.0":
   version: 1.1.2
   resolution: "buffer-from@npm:1.1.2"
   checksum: 124fff9d66d691a86d3b062eff4663fe437a9d9ee4b47b1b9e97f5a5d14f6d5399345db80f796827be7c95e70a8e765dd404b7c3ff3b3324f98e9b0c8826cc34
@@ -18614,7 +18614,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-preset-angular@npm:^12.0.0":
+"jest-preset-angular@npm:^12.2.3":
   version: 12.2.3
   resolution: "jest-preset-angular@npm:12.2.3"
   dependencies:
@@ -18638,20 +18638,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-preset-angular@npm:^8.3.2":
-  version: 8.4.0
-  resolution: "jest-preset-angular@npm:8.4.0"
-  dependencies:
-    pretty-format: 26.x
-    ts-jest: 26.x
-  peerDependencies:
-    "@angular/core": ">=2.0.0"
-    "@angular/platform-browser-dynamic": ">=2.0.0"
-    jest: ^26.0.0
-  checksum: 723e636ad260290982b7700c0c3d9c85e8bca9dd1733d5fb2e1f47054644888e5ab5ef769891f462f32b3d7281894bf9e8e492caca02053cdd770050cb752c09
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^26.0.0":
   version: 26.0.0
   resolution: "jest-regex-util@npm:26.0.0"
@@ -18804,7 +18790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^26.1.0, jest-util@npm:^26.6.2":
+"jest-util@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-util@npm:26.6.2"
   dependencies:
@@ -19230,15 +19216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:2.x, json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.1, json5@npm:^2.2.2":
-  version: 2.2.3
-  resolution: "json5@npm:2.2.3"
-  bin:
-    json5: lib/cli.js
-  checksum: 5a04eed94810fa55c5ea138b2f7a5c12b97c3750bc63d11e511dcecbfef758003861522a070c2272764ee0f4e3e323862f386945aeb5b85b87ee43f084ba586c
-  languageName: node
-  linkType: hard
-
 "json5@npm:^0.5.1":
   version: 0.5.1
   resolution: "json5@npm:0.5.1"
@@ -19259,6 +19236,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.1, json5@npm:^2.2.2":
+  version: 2.2.3
+  resolution: "json5@npm:2.2.3"
+  bin:
+    json5: lib/cli.js
+  checksum: 5a04eed94810fa55c5ea138b2f7a5c12b97c3750bc63d11e511dcecbfef758003861522a070c2272764ee0f4e3e323862f386945aeb5b85b87ee43f084ba586c
+  languageName: node
+  linkType: hard
+
 "jsonc-parser@npm:3.2.0, jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0":
   version: 3.2.0
   resolution: "jsonc-parser@npm:3.2.0"
@@ -20076,7 +20062,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.x, lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
+"lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -20894,15 +20880,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:1.x, mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "mkdirp@npm:1.0.4"
-  bin:
-    mkdirp: bin/cmd.js
-  checksum: 46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^0.5.0, mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.4, mkdirp@npm:^0.5.6":
   version: 0.5.6
   resolution: "mkdirp@npm:0.5.6"
@@ -20914,6 +20891,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "mkdirp@npm:1.0.4"
+  bin:
+    mkdirp: bin/cmd.js
+  checksum: 46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
+  languageName: node
+  linkType: hard
+
 "mktemp@npm:~0.4.0":
   version: 0.4.0
   resolution: "mktemp@npm:0.4.0"
@@ -23094,7 +23080,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:26.x, pretty-format@npm:^26.6.2":
+"pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
   dependencies:
@@ -27154,29 +27140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-jest@npm:26.x":
-  version: 26.5.6
-  resolution: "ts-jest@npm:26.5.6"
-  dependencies:
-    bs-logger: 0.x
-    buffer-from: 1.x
-    fast-json-stable-stringify: 2.x
-    jest-util: ^26.1.0
-    json5: 2.x
-    lodash: 4.x
-    make-error: 1.x
-    mkdirp: 1.x
-    semver: 7.x
-    yargs-parser: 20.x
-  peerDependencies:
-    jest: ">=26 <27"
-    typescript: ">=3.8 <5.0"
-  bin:
-    ts-jest: cli.js
-  checksum: f86db9a8489409549c61c007c37f6f745b7e1b2c88af5118b3fdff729cf897d97f20eb11af1ae9cdbeb709d942c945a49272555ba5c1d274ab382e46566fbbdb
-  languageName: node
-  linkType: hard
-
 "ts-jest@npm:^28.0.0":
   version: 28.0.8
   resolution: "ts-jest@npm:28.0.8"
@@ -29399,13 +29362,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:20.x, yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
-  version: 20.2.9
-  resolution: "yargs-parser@npm:20.2.9"
-  checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:21.1.1, yargs-parser@npm:>=21.0.1, yargs-parser@npm:^21.0.1, yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"
@@ -29433,6 +29389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.3, yargs-parser@npm:^20.2.9":
+  version: 20.2.9
+  resolution: "yargs-parser@npm:20.2.9"
+  checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72
+  languageName: node
+  linkType: hard
+
 "yargs@npm:17.6.2, yargs@npm:^17.2.1, yargs@npm:^17.3.1, yargs@npm:^17.6.2":
   version: 17.6.2
   resolution: "yargs@npm:17.6.2"