final update with working storybook and vr tests

Author: rainerhahnekamp

Diff for: .storybook/preview-head.html

@@ -0,0 +1,11 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
+  rel="stylesheet"
+/>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+<style>
+  div#root {
+    background: white;
+    padding: 2em;
+  }
+</style>

Diff for: .storybook/tsconfig.json

@@ -8,6 +8,7 @@
   "exclude": [
     "../src/test.ts",
     "../src/**/*.spec.ts",
+    "../src/**/*.spec-vr.ts",
     "../projects/**/*.spec.ts"
   ],
   "include": [

Diff for: documentation.json

@@ -0,0 +1,8 @@
+module.exports = {
+  moduleNameMapper: {
+    '@core/(.*)': '<rootDir>/src/app/core/$1',
+  },
+  testMatch: ['**/stories/storyshot.spec.ts'],
+  preset: 'jest-preset-angular'
+};
+

Diff for: jest.config-story.js

@@ -0,0 +1,11 @@
+const ts_preset = require("ts-jest/jest-preset");
+const puppeteer_preset = require("jest-puppeteer/jest-preset");
+
+const
+  config = {
+    ...ts_preset, ...puppeteer_preset,
+    testMatch: ["**/*.spec-vr.ts"],
+    setupFilesAfterEnv: ["<rootDir>/setup-jest-vr.ts"]
+  };
+
+module.exports = config;

Diff for: jest.config-vr.js

@@ -6,6 +6,9 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
+    "test:vr": "jest --config jest.config-vr.js",
+    "test:vr:watch": "jest --watch --config jest.config-vr.js",
+    "test:story": "jest --config jest.config-story.js",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
@@ -40,19 +43,30 @@
     "@storybook/addon-actions": "^6.1.20",
     "@storybook/addon-essentials": "^6.1.20",
     "@storybook/addon-links": "^6.1.20",
+    "@storybook/addon-storyshots": "^6.1.21",
+    "@storybook/addon-storyshots-puppeteer": "^6.1.21",
     "@storybook/angular": "^6.1.20",
-    "@types/jasmine": "~3.6.0",
+    "@types/jest": "^26.0.20",
+    "@types/jest-environment-puppeteer": "^4.4.1",
+    "@types/jest-image-snapshot": "^4.3.0",
     "@types/node": "^12.11.1",
+    "@types/puppeteer": "^5.4.3",
     "babel-loader": "^8.2.2",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
+    "jest": "^26.6.3",
+    "jest-image-snapshot": "^4.4.0",
+    "jest-preset-angular": "^8.3.2",
+    "jest-puppeteer": "^4.4.0",
     "karma": "~6.1.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
+    "puppeteer": "^8.0.0",
+    "ts-jest": "^26.5.2",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~4.1.2"

Diff for: package.json

@@ -0,0 +1,2 @@
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+expect.extend({ toMatchImageSnapshot });

Diff for: setup-jest-vr.ts

@@ -4,4 +4,8 @@ mat-card {
   mat-card-actions {
     text-align: center;
   }
+
+  mat-button {
+
+  }
 }

Diff for: src/app/app.component.spec.ts

@@ -0,0 +1,8 @@
+describe('Holidays', () => {
+  it('should make a single snapshot', async () => {
+    await page.setViewport({width: 1280, height: 720});
+    await page.goto('http://localhost:4200/holidays', {waitUntil: 'networkidle0'});
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot();
+  });
+});

Diff for: src/app/holidays/+state/holidays.effects.spec.ts

@@ -1,14 +1,14 @@
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { HolidayCardComponent } from './holiday-card.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {RouterTestingModule} from '@angular/router/testing';
+import {Meta, moduleMetadata, Story} from '@storybook/angular';
+import {HolidayCardComponent} from './holiday-card.component';
 
 export default {
   title: 'Eternal/HolidayCard',
   component: HolidayCardComponent,
-  decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule, RouterTestingModule] })],
-  argTypes: { holiday: { name: 'Holiday', description: 'JSON object for the Holiday' } }
+  decorators: [moduleMetadata({imports: [MatButtonModule, MatCardModule, RouterTestingModule]})],
+  argTypes: {holiday: {name: 'Holiday', description: 'JSON object for the Holiday'}}
 } as Meta;
 
 const Template: Story<HolidayCardComponent> = (args: HolidayCardComponent) => ({
@@ -21,7 +21,8 @@ Default.args = {
   holiday: {
     id: 1,
     title: 'Holiday',
+    teaser: 'Experience an Old Empire',
     description: 'A holiday',
-    imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg'
+    imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg',
   }
 };

Diff for: src/app/holidays/+state/holidays.reducer.spec.ts

@@ -6,10 +6,6 @@ interface Holiday {
   teaser: string;
   description: string;
   imageUrl: string;
-  typeId: number;
-  durationInDays: number;
-  minCount: number;
-  maxCount: number;
 }
 
 @Component({