test: add test for RenderNgAppService

Configure app/angular package as jest projects
Allow to use jest-preset-angular for app/angular tests

app/angular/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+};

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",

app/angular/setup-jest.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'jest-preset-angular';

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 = '<div id="root"></div>';
+    (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(
+      '<div id="root"><storybook-wrapper ng-version="11.0.0">🦊</storybook-wrapper></div>'
+    );
+  });
+
+  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(
+      '<div id="root"><storybook-wrapper ng-version="11.0.0"><foo>🦊</foo></storybook-wrapper></div>'
+    );
+  });
+});

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();
   });
 

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"]
+}

jest.config.js

@@ -24,6 +24,7 @@ module.exports = {
   },
   projects: [
     '<rootDir>',
+    '<rootDir>/app/angular',
     '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/cra-ts-kitchen-sink',
     '<rootDir>/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/*',

tsconfig.json

@@ -22,6 +22,7 @@
     "**/node_modules",
     "**/*.spec.ts",
     "**/__tests__",
-    "**/*.test.ts"
+    "**/*.test.ts",
+    "**/setup-jest.ts"
   ]
 }