From 784169321206db0072ef8120af90120e6083fbcd Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 16 Jan 2023 08:33:48 +0100 Subject: [PATCH] Fix Angular storyshots --- code/addons/storyshots-core/package.json | 4 +- .../src/frameworks/angular/loader.ts | 6 +- .../src/frameworks/angular/renderTree.ts | 36 ++---- code/frameworks/angular/package.json | 2 +- code/frameworks/angular/src/renderer.ts | 3 +- code/yarn.lock | 103 ++++++------------ 6 files changed, 51 insertions(+), 103 deletions(-) diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index f4da6b8d4c48..9ad7fc655346 100644 --- 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 index 7b2406c3c92e..f472ff8f9ada 100644 --- 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 index 5385f4a85d7b..9de180774184 100644 --- 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 () in snapshot diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index e39a24a867d7..b988b4137aed 100644 --- 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 index 4b5603b948c2..11d729059f2f 100644 --- 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 index 729d334dd7a1..52f8c93657b4 100644 --- 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"