diff --git a/app/angular/jest.config.js b/app/angular/jest.config.js new file mode 100644 index 000000000000..d1edfe27c2d1 --- /dev/null +++ b/app/angular/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + preset: 'jest-preset-angular', + setupFilesAfterEnv: ['/setup-jest.ts'], +}; diff --git a/app/angular/package.json b/app/angular/package.json index 7987091aa671..ed219283ea02 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -63,7 +63,11 @@ "@angular/forms": "^11.0.0", "@angular/platform-browser": "^11.0.0", "@angular/platform-browser-dynamic": "^11.0.0", - "@types/autoprefixer": "^9.4.0" + "@types/autoprefixer": "^9.4.0", + "@types/jest": "^25.1.1", + "jest": "^26.0.0", + "jest-preset-angular": "^8.3.2", + "ts-jest": "^26.4.4" }, "peerDependencies": { "@angular-devkit/build-angular": ">=0.8.9", diff --git a/app/angular/setup-jest.ts b/app/angular/setup-jest.ts new file mode 100644 index 000000000000..a910afad9002 --- /dev/null +++ b/app/angular/setup-jest.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import 'jest-preset-angular'; diff --git a/app/angular/src/client/preview/angular/RenderNgAppService.test.ts b/app/angular/src/client/preview/angular/RenderNgAppService.test.ts new file mode 100644 index 000000000000..26f533cfb6e6 --- /dev/null +++ b/app/angular/src/client/preview/angular/RenderNgAppService.test.ts @@ -0,0 +1,52 @@ +import { Component } from '@angular/core'; +import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { StoryFnAngularReturnType } from '../types'; +import { RenderNgAppService } from './RenderNgAppService'; + +jest.mock('@angular/platform-browser-dynamic'); + +declare const document: Document; +describe('RenderNgAppService', () => { + let renderNgAppService: RenderNgAppService; + + beforeEach(async () => { + document.body.innerHTML = '
'; + (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting); + renderNgAppService = new RenderNgAppService(); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should initialize', () => { + expect(renderNgAppService).toBeDefined(); + }); + + it('should add storybook-wrapper for story template', async () => { + await renderNgAppService.render( + (): StoryFnAngularReturnType => ({ template: '🦊', props: {} }), + false + ); + + expect(document.body.innerHTML).toBe( + '
🦊
' + ); + }); + + it('should add storybook-wrapper for story component', async () => { + @Component({ selector: 'foo', template: '🦊' }) + class FooComponent {} + + await renderNgAppService.render( + (): StoryFnAngularReturnType => ({ component: FooComponent, props: {} }), + false + ); + + expect(document.body.innerHTML).toBe( + '
🦊
' + ); + }); +}); diff --git a/app/angular/src/server/__tests__/angular-cli_config.test.ts b/app/angular/src/server/__tests__/angular-cli_config.test.ts index 25c22a7e3ea9..ae09891c0209 100644 --- a/app/angular/src/server/__tests__/angular-cli_config.test.ts +++ b/app/angular/src/server/__tests__/angular-cli_config.test.ts @@ -58,7 +58,7 @@ describe('angular-cli_config', () => { getLeadingAngularCliProject(angularJsonWithNoBuildOptions); - const config = getAngularCliWebpackConfigOptions('/'); + const config = getAngularCliWebpackConfigOptions('/' as Path); expect(config).toBeNull(); }); diff --git a/app/angular/tsconfig.spec.json b/app/angular/tsconfig.spec.json new file mode 100644 index 000000000000..d52945662591 --- /dev/null +++ b/app/angular/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "types": ["webpack-env", "jest", "node"], + "typeRoots": ["../../node_modules/@types", "node_modules/@types"], + "allowJs": true + }, + "include": ["**/*.test.ts", "**/*.d.ts", "setup-jest.ts"] +} diff --git a/jest.config.js b/jest.config.js index 3a5bced8bbb6..b51aa50d433f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -24,6 +24,7 @@ module.exports = { }, projects: [ '', + '/app/angular', '/examples/cra-kitchen-sink', '/examples/cra-ts-kitchen-sink', '/examples/html-kitchen-sink', @@ -52,6 +53,7 @@ module.exports = { '/prebuilt/', 'addon-jest.test.js', '/cli/test/', + '/app/angular/*', '/examples/cra-kitchen-sink/src/*', '/examples/cra-react15/src/*', '/examples/cra-ts-kitchen-sink/src/components/*', diff --git a/tsconfig.json b/tsconfig.json index 0f4719660e9c..4e065f6f6fd8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,7 @@ "**/node_modules", "**/*.spec.ts", "**/__tests__", - "**/*.test.ts" + "**/*.test.ts", + "**/setup-jest.ts" ] }