@storybook/angular 7.0.0-beta.40 → 7.0.0-beta.42

package/dist/client/angular-beta/AbstractRenderer.js

@@ -27,12 +27,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
-const animations_1 = require("@angular/platform-browser/animations");
 const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 const applicationRefs = new Set();
 class AbstractRenderer {
     /**
@@ -72,11 +72,6 @@ class AbstractRenderer {
     async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
         const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-        const hasAnimationsDefined = !!storyFnAngular.moduleMetadata?.imports?.includes(animations_1.BrowserAnimationsModule);
-        if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) {
-            // eslint-disable-next-line no-param-reassign
-            storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter((importedModule) => importedModule !== animations_1.BrowserAnimationsModule);
-        }
         if (!this.fullRendererRequired({
             storyFnAngular,
             moduleMetadata: {
@@ -93,13 +88,13 @@ class AbstractRenderer {
         }
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
+        const providers = [
+            // Providers for BrowserAnimations & NoopAnimationsModule
+            (0, PropertyExtractor_1.extractSingletons)(storyFnAngular.moduleMetadata),
+            (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+        ];
         const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
-        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
-            providers: [
-                ...(hasAnimationsDefined ? [(0, animations_1.provideAnimations)()] : []),
-                (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
-            ],
-        });
+        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, { providers });
         applicationRefs.add(applicationRef);
         await this.afterFullRender();
     }

package/dist/client/angular-beta/__testfixtures__/test.module.d.ts

@@ -0,0 +1,4 @@
+export declare class WithAnimationsModule {
+}
+export declare class WithOfficialModule {
+}

package/dist/client/angular-beta/__testfixtures__/test.module.js

@@ -0,0 +1,34 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithOfficialModule = exports.WithAnimationsModule = void 0;
+const common_1 = require("@angular/common");
+const http_1 = require("@angular/common/http");
+const core_1 = require("@angular/core");
+const platform_browser_1 = require("@angular/platform-browser");
+const animations_1 = require("@angular/platform-browser/animations");
+let WithAnimationsModule = class WithAnimationsModule {
+};
+WithAnimationsModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [
+            //
+            platform_browser_1.BrowserModule,
+            animations_1.BrowserAnimationsModule,
+        ],
+    })
+], WithAnimationsModule);
+exports.WithAnimationsModule = WithAnimationsModule;
+let WithOfficialModule = class WithOfficialModule {
+};
+WithOfficialModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [common_1.CommonModule, http_1.HttpClientModule],
+    })
+], WithOfficialModule);
+exports.WithOfficialModule = WithOfficialModule;

package/dist/client/angular-beta/utils/PropertyExtractor.d.ts

@@ -1,13 +1,29 @@
-import { Provider } from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
 import { NgModuleMetadata } from '../../types';
+export declare const REMOVED_MODULES: InjectionToken<unknown>;
 /**
- * Extract Imports from NgModule
+ * Analyze NgModule Metadata
  *
- * CommonModule is always imported
+ * - Removes Restricted Imports
+ * - Extracts providers from ModuleWithProviders
+ * - Flattens imports
+ * - Returns a new NgModuleMetadata object
  *
- * metadata.imports are flattened deeply and extracted into a new array
  *
- * - If ModuleWithProviders (e.g. forRoot() & forChild() ) is used, the ngModule is extracted without providers.
+ */
+export declare const analyzeMetadata: (metadata: NgModuleMetadata) => {
+    imports: any;
+    providers: any[];
+    singletons: any[];
+    declarations: any[];
+    entryComponents?: any[];
+    schemas?: any[];
+};
+/**
+ * Extract Imports from NgModule
+ *
+ * CommonModule is always imported
+ * Only standalone components are imported
  *
  */
 export declare const extractImports: (metadata: NgModuleMetadata) => any[];
@@ -18,10 +34,10 @@ export declare const extractImports: (metadata: NgModuleMetadata) => any[];
  *   - metadata.providers
  *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
  *
- * - Use this in combination with extractImports to get all providers for a specific module
  *
  */
 export declare const extractProviders: (metadata: NgModuleMetadata) => Provider[];
+export declare const extractSingletons: (metadata: NgModuleMetadata) => Provider[];
 /**
  * Extract declarations from NgModule
  *

package/dist/client/angular-beta/utils/PropertyExtractor.js

@@ -1,32 +1,109 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractDeclarations = exports.extractProviders = exports.extractImports = void 0;
+exports.extractDeclarations = exports.extractSingletons = exports.extractProviders = exports.extractImports = exports.analyzeMetadata = exports.REMOVED_MODULES = void 0;
 const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const platform_browser_1 = require("@angular/platform-browser");
+const animations_1 = require("@angular/platform-browser/animations");
 const NgComponentAnalyzer_1 = require("./NgComponentAnalyzer");
 const NgModulesAnalyzer_1 = require("./NgModulesAnalyzer");
 const uniqueArray = (arr) => {
     return arr.flat(Number.MAX_VALUE).filter((value, index, self) => self.indexOf(value) === index);
 };
+const analyzeRestricted = (ngModule) => {
+    /**
+     * BrowserModule is restricted,
+     * because bootstrapApplication API, which mounts the component to the DOM,
+     * automatically imports BrowserModule
+     */
+    if (ngModule === platform_browser_1.BrowserModule) {
+        return [true];
+    }
+    /**
+     * BrowserAnimationsModule imports BrowserModule, which is restricted,
+     * because bootstrapApplication API, which mounts the component to the DOM,
+     * automatically imports BrowserModule
+     */
+    if (ngModule === animations_1.BrowserAnimationsModule) {
+        return [true, (0, animations_1.provideAnimations)()];
+    }
+    /**
+     * NoopAnimationsModule imports BrowserModule, which is restricted,
+     * because bootstrapApplication API, which mounts the component to the DOM,
+     * automatically imports BrowserModule
+     */
+    if (ngModule === animations_1.NoopAnimationsModule) {
+        return [true, (0, animations_1.provideNoopAnimations)()];
+    }
+    return [false];
+};
+exports.REMOVED_MODULES = new core_1.InjectionToken('REMOVED_MODULES');
 /**
- * Extract Imports from NgModule
+ * Analyze NgModule Metadata
  *
- * CommonModule is always imported
+ * - Removes Restricted Imports
+ * - Extracts providers from ModuleWithProviders
+ * - Flattens imports
+ * - Returns a new NgModuleMetadata object
  *
- * metadata.imports are flattened deeply and extracted into a new array
  *
- * - If ModuleWithProviders (e.g. forRoot() & forChild() ) is used, the ngModule is extracted without providers.
+ */
+const analyzeMetadata = (metadata) => {
+    const declarations = [...(metadata?.declarations || [])];
+    const providers = [...(metadata?.providers || [])];
+    const singletons = [];
+    const imports = [...(metadata?.imports || [])]
+        .reduce((acc, ngModule) => {
+        // remove ngModule and use only its providers if it is restricted
+        // (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
+        const [isRestricted, restrictedProviders] = analyzeRestricted(ngModule);
+        if (isRestricted) {
+            singletons.unshift(restrictedProviders || []);
+            return acc;
+        }
+        // destructure into ngModule & providers if it is a ModuleWithProviders
+        if (ngModule?.providers) {
+            providers.unshift(ngModule.providers || []);
+            // eslint-disable-next-line no-param-reassign
+            ngModule = ngModule.ngModule;
+        }
+        // extract providers, declarations, singletons from ngModule
+        // eslint-disable-next-line no-underscore-dangle
+        const ngMetadata = ngModule?.__annotations__?.[0];
+        if (ngMetadata) {
+            const newMetadata = (0, exports.analyzeMetadata)(ngMetadata);
+            acc.unshift(...newMetadata.imports);
+            providers.unshift(...newMetadata.providers);
+            singletons.unshift(...newMetadata.singletons);
+            declarations.unshift(...newMetadata.declarations);
+            if (ngMetadata.standalone === true) {
+                acc.push(ngModule);
+            }
+            // keeping a copy of the removed module
+            providers.push({ provide: exports.REMOVED_MODULES, useValue: ngModule, multi: true });
+            return acc;
+        }
+        // include Angular official modules as-is
+        if (ngModule.ɵmod) {
+            acc.push(ngModule);
+            return acc;
+        }
+        return acc;
+    }, [])
+        .flat(Number.MAX_VALUE);
+    return { ...metadata, imports, providers, singletons, declarations };
+};
+exports.analyzeMetadata = analyzeMetadata;
+/**
+ * Extract Imports from NgModule
+ *
+ * CommonModule is always imported
+ * Only standalone components are imported
  *
  */
 const extractImports = (metadata) => {
-    const imports = [common_1.CommonModule];
-    const modules = (metadata.imports || []).flat(Number.MAX_VALUE);
-    const withProviders = modules.filter((moduleDef) => !!moduleDef?.ngModule);
-    const withoutProviders = modules.filter((moduleDef) => !withProviders.includes(moduleDef));
-    return uniqueArray([
-        imports,
-        withoutProviders,
-        withProviders.map((moduleDef) => moduleDef.ngModule),
-    ]);
+    const { imports } = (0, exports.analyzeMetadata)(metadata);
+    return uniqueArray([common_1.CommonModule, imports]);
 };
 exports.extractImports = extractImports;
 /**
@@ -36,18 +113,18 @@ exports.extractImports = extractImports;
  *   - metadata.providers
  *   - providers from each **ModuleWithProviders** (e.g. forRoot() & forChild() )
  *
- * - Use this in combination with extractImports to get all providers for a specific module
  *
  */
 const extractProviders = (metadata) => {
-    const providers = (metadata.providers || []);
-    const moduleProviders = (metadata.imports || [])
-        .flat(Number.MAX_VALUE)
-        .filter((moduleDef) => !!moduleDef?.ngModule)
-        .map((moduleDef) => moduleDef.providers || []);
-    return uniqueArray([].concat(moduleProviders, providers));
+    const { providers } = (0, exports.analyzeMetadata)(metadata);
+    return uniqueArray(providers);
 };
 exports.extractProviders = extractProviders;
+const extractSingletons = (metadata) => {
+    const { singletons } = (0, exports.analyzeMetadata)(metadata);
+    return uniqueArray(singletons);
+};
+exports.extractSingletons = extractSingletons;
 /**
  * Extract declarations from NgModule
  *
@@ -58,7 +135,7 @@ exports.extractProviders = extractProviders;
  *
  */
 const extractDeclarations = (metadata, storyComponent) => {
-    const declarations = metadata.declarations || [];
+    const { declarations } = (0, exports.analyzeMetadata)(metadata);
     if (storyComponent) {
         const isStandalone = (0, NgComponentAnalyzer_1.isStandaloneComponent)(storyComponent);
         const isDeclared = (0, NgModulesAnalyzer_1.isComponentAlreadyDeclared)(storyComponent, declarations, metadata.imports);

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const common_1 = require("@angular/common");
 const core_1 = require("@angular/core");
+const platform_browser_1 = require("@angular/platform-browser");
+const animations_1 = require("@angular/platform-browser/animations");
+const http_1 = require("@angular/common/http");
 const PropertyExtractor_1 = require("./PropertyExtractor");
+const test_module_1 = require("../__testfixtures__/test.module");
 const TEST_TOKEN = new core_1.InjectionToken('testToken');
 const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
 const TestService = (0, core_1.Injectable)()(class {
@@ -23,43 +27,103 @@ const TestModuleWithImportsAndProviders = (0, core_1.NgModule)({
 })(class {
 });
 describe('PropertyExtractor', () => {
+    describe('analyzeMetadata', () => {
+        it('should remove BrowserModule', () => {
+            const metadata = {
+                imports: [platform_browser_1.BrowserModule],
+            };
+            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
+        });
+        it('should remove BrowserAnimationsModule and use its providers instead', () => {
+            const metadata = {
+                imports: [animations_1.BrowserAnimationsModule],
+            };
+            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
+        });
+        it('should remove NoopAnimationsModule and use its providers instead', () => {
+            const metadata = {
+                imports: [animations_1.NoopAnimationsModule],
+            };
+            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideNoopAnimations)());
+        });
+        it('should remove Browser/Animations modules recursively', () => {
+            const metadata = {
+                imports: [test_module_1.WithAnimationsModule],
+            };
+            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([
+                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: test_module_1.WithAnimationsModule, multi: true },
+            ]);
+            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
+        });
+        it('should not destructure Angular official module', () => {
+            const metadata = {
+                imports: [test_module_1.WithOfficialModule],
+            };
+            const { imports, providers, singletons } = (0, PropertyExtractor_1.analyzeMetadata)(metadata);
+            expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule, http_1.HttpClientModule]);
+            expect(providers.flat(Number.MAX_VALUE)).toEqual([
+                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: test_module_1.WithOfficialModule, multi: true },
+            ]);
+            expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
+        });
+    });
     describe('extractImports', () => {
-        it('should return an array of imports', () => {
+        it('should return Angular official modules', () => {
             const imports = (0, PropertyExtractor_1.extractImports)({ imports: [TestModuleWithImportsAndProviders] });
-            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
+            expect(imports).toEqual([common_1.CommonModule]);
+        });
+        it('should return standalone components', () => {
+            const imports = (0, PropertyExtractor_1.extractImports)({
+                imports: [TestModuleWithImportsAndProviders, StandaloneTestComponent],
+            });
+            expect(imports).toEqual([common_1.CommonModule, StandaloneTestComponent]);
         });
-        it('should return an array of unique imports without providers', () => {
+        it('should not return any regular modules (they get destructured)', () => {
             const imports = (0, PropertyExtractor_1.extractImports)({
                 imports: [
-                    TestModuleWithImportsAndProviders,
+                    TestModuleWithDeclarations,
                     { ngModule: TestModuleWithImportsAndProviders, providers: [] },
                 ],
             });
-            expect(imports).toEqual([common_1.CommonModule, TestModuleWithImportsAndProviders]);
+            expect(imports).toEqual([common_1.CommonModule]);
         });
     });
     describe('extractDeclarations', () => {
-        it('should return an array of declarations', () => {
+        it('should return an array of declarations that contains `storyComponent`', () => {
             const declarations = (0, PropertyExtractor_1.extractDeclarations)({ declarations: [TestComponent1] }, TestComponent2);
             expect(declarations).toEqual([TestComponent1, TestComponent2]);
         });
-        it('should ignore pre-declared components', () => {
-            // TestComponent1 is declared as part of TestModuleWithDeclarations
-            // TestModuleWithDeclarations is imported by TestModuleWithImportsAndProviders
+        it('should ignore `storyComponent` if it is already declared', () => {
             const declarations = (0, PropertyExtractor_1.extractDeclarations)({
                 imports: [TestModuleWithImportsAndProviders],
                 declarations: [TestComponent2, StandaloneTestComponent, TestDirective],
             }, TestComponent1);
-            expect(declarations).toEqual([TestComponent2, StandaloneTestComponent, TestDirective]);
+            expect(declarations).toEqual([
+                TestComponent1,
+                TestComponent2,
+                StandaloneTestComponent,
+                TestDirective,
+            ]);
         });
-        it('should ignore standalone components', () => {
+        it('should ignore `storyComponent` if it is standalone', () => {
             const declarations = (0, PropertyExtractor_1.extractDeclarations)({
                 imports: [TestModuleWithImportsAndProviders],
                 declarations: [TestComponent1, TestComponent2, TestDirective],
             }, StandaloneTestComponent);
             expect(declarations).toEqual([TestComponent1, TestComponent2, TestDirective]);
         });
-        it('should ignore non components/directives/pipes', () => {
+        it('should ignore `storyComponent` if it is not a component/directive/pipe', () => {
             const declarations = (0, PropertyExtractor_1.extractDeclarations)({
                 imports: [TestModuleWithImportsAndProviders],
                 declarations: [TestComponent1, TestComponent2, StandaloneTestComponent],
@@ -78,7 +142,12 @@ describe('PropertyExtractor', () => {
             const providers = (0, PropertyExtractor_1.extractProviders)({
                 imports: [{ ngModule: TestModuleWithImportsAndProviders, providers: [TestService] }],
             });
-            expect(providers).toEqual([TestService]);
+            expect(providers).toEqual([
+                { provide: TEST_TOKEN, useValue: 123 },
+                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
+                TestService,
+                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithImportsAndProviders, multi: true },
+            ]);
         });
         it('should return an array of unique providers', () => {
             const providers = (0, PropertyExtractor_1.extractProviders)({
@@ -86,12 +155,25 @@ describe('PropertyExtractor', () => {
                 providers: [TestService, { provide: TEST_TOKEN, useValue: 123 }],
             });
             expect(providers).toEqual([
+                { provide: TEST_TOKEN, useValue: 123 },
+                { provide: PropertyExtractor_1.REMOVED_MODULES, useValue: TestModuleWithDeclarations, multi: true },
                 TestService,
                 {
                     provide: new core_1.InjectionToken('testToken'),
                     useValue: 123,
                 },
+                {
+                    provide: PropertyExtractor_1.REMOVED_MODULES,
+                    useValue: TestModuleWithImportsAndProviders,
+                    multi: true,
+                },
             ]);
         });
+        it('should return an array of singletons extracted', () => {
+            const singeltons = (0, PropertyExtractor_1.extractSingletons)({
+                imports: [animations_1.BrowserAnimationsModule],
+            });
+            expect(singeltons).toEqual((0, animations_1.provideAnimations)());
+        });
     });
 });

package/jest.config.js

@@ -9,4 +9,23 @@ module.exports = {
     escapeString: true,
     printBasicPrototype: true,
   },
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: './coverage/testapp',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.[jt]s?(x)',
+    '<rootDir>/src/**/?(*.)+(spec|test).[jt]s?(x)',
+  ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-beta.40",
+  "version": "7.0.0-beta.42",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-beta.40",
-    "@storybook/cli": "7.0.0-beta.40",
-    "@storybook/client-logger": "7.0.0-beta.40",
-    "@storybook/core-client": "7.0.0-beta.40",
-    "@storybook/core-common": "7.0.0-beta.40",
-    "@storybook/core-events": "7.0.0-beta.40",
-    "@storybook/core-server": "7.0.0-beta.40",
-    "@storybook/core-webpack": "7.0.0-beta.40",
-    "@storybook/docs-tools": "7.0.0-beta.40",
+    "@storybook/builder-webpack5": "7.0.0-beta.42",
+    "@storybook/cli": "7.0.0-beta.42",
+    "@storybook/client-logger": "7.0.0-beta.42",
+    "@storybook/core-client": "7.0.0-beta.42",
+    "@storybook/core-common": "7.0.0-beta.42",
+    "@storybook/core-events": "7.0.0-beta.42",
+    "@storybook/core-server": "7.0.0-beta.42",
+    "@storybook/core-webpack": "7.0.0-beta.42",
+    "@storybook/docs-tools": "7.0.0-beta.42",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-beta.40",
-    "@storybook/node-logger": "7.0.0-beta.40",
-    "@storybook/preview-api": "7.0.0-beta.40",
-    "@storybook/types": "7.0.0-beta.40",
+    "@storybook/manager-api": "7.0.0-beta.42",
+    "@storybook/node-logger": "7.0.0-beta.42",
+    "@storybook/preview-api": "7.0.0-beta.42",
+    "@storybook/types": "7.0.0-beta.42",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "9c68cc3a66e996e91ccd520d9d0adf0fa7094ad4"
+  "gitHead": "0b8d11c61742ba9283a6889d0bdac9ac5a8a508f"
 }

package/template/stories/core/moduleMetadata/with-noop-browser-animations.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/angular';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
+
+export default {
+  component: OpenCloseComponent,
+} as Meta;
+
+export const WithNoopBrowserAnimations: StoryFn = () => ({
+  template: `<app-open-close></app-open-close>`,
+  moduleMetadata: {
+    declarations: [OpenCloseComponent],
+    imports: [NoopAnimationsModule],
+  },
+});
+
+WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const opened = canvas.getByText('The box is now Open!');
+  expect(opened).toBeDefined();
+  const submitButton = canvas.getByRole('button');
+  await userEvent.click(submitButton);
+  const closed = canvas.getByText('The box is now Closed!');
+  expect(closed).toBeDefined();
+};