{"id":2934,"date":"2022-06-30T12:03:59","date_gmt":"2022-06-30T12:03:59","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=2934"},"modified":"2022-08-12T11:45:44","modified_gmt":"2022-08-12T11:45:44","slug":"snapshot-testing-mit-angular-und-storybook","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/","title":{"rendered":"Snapshot Testing mit Angular und Storybook"},"content":{"rendered":"\n

Storybook ist ein komponentengetriebenes Werkzeug f\u00fcr die Erstellung von visuellen Styleguides und zur Demonstration von UI-Komponenten aus React, Angular, Vue sowie Web Components.<\/p>\n\n\n\n

Speziell das Snapshot Testing bietet die M\u00f6glichkeit, ungewollte Anpassungen des Stylings fr\u00fchzeitig zu erkennen und zu korrigieren.<\/p>\n\n\n\n

\"Symbolbild:<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Snapshot Testing in Storybook<\/strong><\/h2>\n\n\n\n

Snapshot-Tests sind ein sehr n\u00fctzliches Werkzeug, wenn Sie sicherstellen m\u00f6chten, dass sich Ihre Benutzeroberfl\u00e4che nicht unerwartet \u00e4ndert.<\/p>\n\n\n\n

Ein typischer Snapshot-Testfall rendert eine UI-Komponente, erstellt einen Snapshot und vergleicht ihn dann mit einer Referenz-Snapshot-Datei, die neben dem Test gespeichert ist. Der Test schl\u00e4gt fehl, wenn die beiden Snapshots nicht \u00fcbereinstimmen: Entweder ist die \u00c4nderung unerwartet oder der Referenz-Snapshot muss auf die neue Version der UI-Komponente aktualisiert werden.<\/p>\n\n\n\n

Storybook bietet mehrere M\u00f6glichkeiten, eine Anwendung zu testen. Angefangen mit Chromatic. Diese sogenannte Werkzeugkette setzt allerdings voraus, dass der Quellcode in GitHub versioniert ist und kostet f\u00fcr den professionellen Gebrauch eine monatliche Geb\u00fchr.<\/p>\n\n\n\n

Eine weitere M\u00f6glichkeit ist das schlanke Add-on Storyshots, welches auf dem Testframework \u201cJest\u201d basiert. Es wird in der Kommandozeile gestartet und listet dort Abweichungen der Komponente zum vorherigen Stand auf. Der Programmierer muss pr\u00fcfen, ob diese \u00c4nderung erw\u00fcnscht oder ein Fehler ist.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Einrichtung f\u00fcr Angular<\/strong><\/h2>\n\n\n\n

Diese Anleitung setzt voraus, dass Storybook bereits f\u00fcr die Angular-Anwendung installiert ist. Eine Setup-Anleitung finden Sie unter diesem Link<\/a>. Angular bringt von Haus aus die Testumgebung Karma mit. Um die Anwendung auf Jest umzustellen, sind folgende Schritte n\u00f6tig:<\/p>\n\n\n\n

<\/div>\n\n\n\n

Installation der Jest Dependencies<\/strong><\/h3>\n\n\n\n

Zum Installieren von Jest einfach die Zeile \u201enpm install jest jest-preset-angular –save-dev\u201c in der Kommandozeile ausf\u00fchren.<\/p>\n\n\n\n

Jest Setup-Datei erstellen<\/strong><\/h3>\n\n\n\n

Im root-Verzeichnis ihres Angular Projektes die neue Typescript-Datei setupJest.ts mit dem Inhalt import ‚jest-preset-angular‘; erzeugen.<\/p>\n\n\n\n

package.json anpassen<\/strong><\/h3>\n\n\n\n

Die package.json ihres Angular-Projektes muss um einen Absatz f\u00fcr das Testframework Jest erg\u00e4nzt werden:<\/p>\n\n\n\n

{\n \"jest\": {\n \"preset\": \"jest-preset-angular\",\n \"setupFilesAfterEnv\": [\n \"<rootDir>\/setupJest.ts\"\n },\n}<\/pre>\n\n\n\n
Au\u00dferdem muss die Script-Ausf\u00fchrung f\u00fcr Test angepasst werden. Anstatt \u201ctest\u201c: \u201cngtest\u201c, muss \u201ctest\u201c: \u201cjest\u201d verwendet werden.<\/p>\n\n\n\n
Karma entfernen (optional)<\/strong><\/h3>\n\n\n\n
Zum Entfernen von Karma muss folgende Kommandozeile ausgef\u00fchrt werden:<\/p>\n\n\n\n
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine \nkarma-jasmine-html-reporter<\/pre>\n\n\n\n
Im Anschluss sollten auch die Dateien Karma.config.js und test.ts im <root>\/src Verzeichnis gel\u00f6scht werden und der Abschnitt f\u00fcr Test in der angular.json entfernt werden.<\/p>\n\n\n\n
Migration von Jasmine (optional)<\/strong><\/h3>\n\n\n\n
F\u00fcr die Migration nach Jest m\u00fcssen Anpassungen vorgenommen werden:<\/p>\n\n\n\n
\u2022 Kommandozeile: npm uninstall @types\/jasmine<\/p>\n\n\n\n
\u2022 jasmine.createSpyObj(’name‘, [‚key‘]) wird zu jest.fn({key: jest.fn()})<\/p>\n\n\n\n
\u2022 jasmine.createSpy(’name‘) wird zu jest.fn()<\/p>\n\n\n\n
\u2022 spyOn mit returnValue() muss in jest.spyOn(…).mockReturnValue(\u2026) umgewandelt werden<\/p>\n\n\n\n
\u2022 spyOn mit callFacke() muss in jest.spyOn(…).mockImplementation(\u2026) umgewandelt werden<\/p>\n\n\n\n
\u2022 Asymmetric matchers: jasmine.any, jasmine.objectContaining, etc. wird zu expect.any,<\/p>\n\n\n\n
expect.objectContaining<\/p>\n\n\n\n
Storyshots Dependencies installieren<\/strong><\/h3>\n\n\n\n
Nun wird Storyshots installiert. Um Storyshots zu installieren, sollen diese zwei Kommandozeilen ausgef\u00fchrt werden:<\/p>\n\n\n\n
npm i -D @storybook\/addon-storyshots\nnpm i -D @storybook\/addon-storyshots-puppeteer puppeteer<\/pre>\n\n\n\n
Nach der Installation sollten folgende Dependencies in der package.json vorhanden sein (Stand 12.11.2021; wichtig f\u00fcr den Installations-Workaround unter Angular):<\/p>\n\n\n\n
\"jest\": \"^27.3.1\",\n\"jest-preset-angular\": \"^10.0.1\",\n\"@storybook\/addon-storyshots\": \"^6.3.12\"\n\"@storybook\/addon-storyshots-puppeteer\": \"^6.3.12\"<\/pre>\n\n\n\n
Storyshots Installationsdatei erstellen<\/strong><\/h3>\n\n\n\n
Nach der Installation von Storyshots muss die Erweiterung noch eingestellt werden. Daf\u00fcr muss im Verzeichnis <root>\/src die Datei Storyshorts.test.js mit folgendem Inhalt erstellt werden:<\/p>\n\n\n\n
import initStoryshots from '@storybook\/addon-storyshots';\nimport { imageSnapshot } from '@storybook\/addon-storyshots-puppeteer';\nimport path from 'path';\n\n\/\/ Function to customize the snapshot location\nconst getMatchOptions = ({ context: { fileName } }) => {\n \/\/ Generates a custom path based on the file name and the custom directory.\n const snapshotPath = path.join(path.dirname(fileName), 'snapshot-images');\n return { customSnapshotsDir: snapshotPath };\n};\n\ninitStoryshots({\n \/\/ your own configuration\n test: imageSnapshot({\n \/\/ invoke the function above here\n getMatchOptions,\n }),\n});<\/pre>\n\n\n\n
tsconfig.json f\u00fcr Storyshots erweitern<\/strong><\/h3>\n\n\n\n
Des Weiteren muss noch die tsconfig.json angepasst werden. Daf\u00fcr muss der compilerOptions Abschnitt in tsconfig.json wie folgt erweitert werden:<\/p>\n\n\n\n
\"compilerOptions\": { \n \"esModuleInterop\": true,<\/pre>\n\n\n\n
Package.json f\u00fcr Storyshots erweitern<\/strong><\/h3>\n\n\n\n
Zuletzt muss der in der Package.json enthaltene Abschnitt f\u00fcr Jest umkonfiguriert werden:<\/p>\n\n\n\n
\"jest\": {\n \"preset\": \"jest-preset-angular\",\n \"setupFilesAfterEnv\": [\n \"<rootDir>\/setupJest.ts\"\n ],\n \"transformIgnorePatterns\": [\n \"<rootDir>\/node_modules\/(?!(@storybook\/addon-docs))\"\n ],\n \"moduleNameMapper\": {\n \"jest-preset-angular\/build\/setup-jest\": \"jest-preset-angular\/setup-jest\",\n \"jest-preset-angular\/build\/AngularNoNgAttributesSnapshotSerializer\": \"jest-presetangular\/build\/serializers\/no-ng-attributes\",\n \"jest-preset-angular\/build\/AngularSnapshotSerializer\": \"jest-presetangular\/build\/serializers\/ng-snapshot\",\n \"jest-preset-angular\/build\/HTMLCommentSerializer\": \"jest-presetangular\/build\/serializers\/html-comment\"\n }\n},<\/pre>\n\n\n\n
Diese Anpassungen sind speziell f\u00fcr die gew\u00e4hlte Version, da die Ordnerstruktur in Jest umgemappt werden muss. Das kann sich in sp\u00e4teren Versionen von Storyshorts wieder \u00e4ndern.<\/p>\n\n\n\n
Test der Komponenten<\/strong><\/h3>\n\n\n\n
F\u00fcr den Test gibt es eine Beispielanwendung, welche aus vier Einzelkomponenten besteht. Die erste Komponente zeigt die Uhrzeit inklusive Datum und Wochentag an. Die zweite Komponente gibt das aktuelle Wetter in Schaubild mit Gradzahl, Tagesh\u00f6chst- und Tagestiefsttemperatur an. \u00dcber eine weitere Komponente werden die Stra\u00dfenbahnabfahrten am Beispiel Dresden Striesen abgebildet. Zuletzt gibt es noch eine Komponente, welche 3 Aktienkurse anzeigt mitsamt Graph und Indikatoren.<\/p>\n\n\n\n
\"\"
Abbildung 1: Storybook f\u00fcr eine Anwendung bestehend aus vier Komponenten<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Bespielhaft sieht der Quellcode der Uhrzeitkomponente wie folgt aus:<\/p>\n\n\n\n
export default {\n title: 'WidgetMonitor\/Clock',\n component: ClockComponent,\n timeIsRunning: false,\n} as Meta;\n\nexport const Morning = () => {\n return({\n props: {\n timeIsRunning: false,\n time: new Date(2021, 10, 9, 9, 9, 9, 9)\n },\n parameter: {\n time: new Date(2021, 10, 9, 9, 9, 9, 9)\n }\n })\n}\n\nexport const Afternoon = () => {\n return({\n props: {\n timeIsRunning: false,\n time: new Date(2021, 10, 9, 15, 15, 15, 15)\n }\n })\n}\n\nconst Template: Story<ClockComponent> = (args: ClockComponent) => ({\n props: args\n});\n\nexport const Running = Template.bind({});\n\nRunning.args = {\n timeIsRunning: true,\n};\n\nRunning.parameters = {\n storyshots: { disable: true }\n};<\/pre>\n\n\n\n
Diese beinhaltet drei Zust\u00e4nde, von denen die ersten beiden jeweils statische Zeitpunkte sind. Der dritte Zustand \u201cRunning\u201d zeigt die aktuelle Uhrzeit an, d. h. er ist nicht statisch.<\/p>\n\n\n\n
Voraussetzung f\u00fcr Snapshot Tests unter Storybook<\/strong><\/h3>\n\n\n\n
Es ist wichtig, dass wir unter Storybook einen statischen Zustand haben, damit die Anwendung getestet werden kann. Im Uhrzeitbespiel ist der Zustand \u201eRunning\u201c nicht statisch. Diesen kann man \u00fcberspringen, indem man den parameter storyshots: { disable: true } hinzuf\u00fcgt (siehe Quellcode weiter oben).<\/p>\n\n\n\n
Test starten<\/strong><\/h3>\n\n\n\n
Mit der Kommandozeile npm test, wird der Test in der Kommandozeile im Angular-Projektverzeichnis gestartet. Der initiale Snapshot Test erstellt nun ein Snapshot Image von jedem Komponentenzustand.<\/p>\n\n\n\n
\"\"
Abbildung 2: Test starten in Storybook<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Zum Aufzeigen von Fehlern wird nun beispielhaft die Schrift der Uhrzeit in der Clock-Komponente sowohl kleiner als auch in Rot im SCSS umgestellt und der Test erneut gestartet.<\/p>\n\n\n\n
\"\"
Abbildung 3: Aufzeigen von Fehlern in Storybook<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Das Ergebnis des Snapshot Tests zeigt, dass die beiden aktiven Zust\u00e4nde der Clock-Komponente umgefallen sind und auf ein Diff Image verwiesen wird. Dieses sieht wie folgt aus:<\/p>\n\n\n\n
\"\"
Abbildung 4: Ergebnis des Snapshot Tests<\/em><\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n
Links ist der urspr\u00fcngliche Zustand zu sehen, rechts der Zustand nach der \u00c4nderung. In der Mitte sieht man den Zustand, wie sich beide \u00fcberschneiden. Nun gibt es die M\u00f6glichkeit, diesen Zustand entweder zu \u00fcbernehmen oder den Test \u2013 nach Anpassung der Anwendung \u2013 erneut auszuf\u00fchren.<\/p>\n\n\n\n
Das \u00dcbernehmen des Zustands wird mittels der Kommandozeile npm test — -u erzwungen. Damit werden die Differenzbilder gel\u00f6scht und ein neuer Snapshot des Zustands der Komponente erstellt. Das erneute Aufrufen der Kommandozeile npm test sollte nun ohne Fehler durchlaufen.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Fazit<\/h2>\n\n\n\n
Einen Zustand f\u00fcr Storybook zu pflegen, bedeutet auch immer einen Mehraufwand im Projekt. Wer sich vor diesem Aufwand nicht scheut, hat mittels Jest und der Erweiterung StoryShots die M\u00f6glichkeit, einen bestimmten Zustand gekapselt pr\u00fcfen zu k\u00f6nnen. Dies ist besonders hilfreich zur Fr\u00fcherkennung von Styling Bugs, welche schwierig in Unit- und Ende-Zu-Ende-Tests gefunden werden k\u00f6nnen und meist erst beim manuellen Testen auffallen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Storybook ist ein komponentengetriebenes Werkzeug f\u00fcr die Erstellung von visuellen Styleguides und zur Demonstration von UI-Komponenten aus React, Angular, Vue sowie Web Components. Speziell das Snapshot Testing bietet die M\u00f6glichkeit, ungewollte Anpassungen des Stylings fr\u00fchzeitig zu erkennen und zu korrigieren.<\/p>\n","protected":false},"author":146,"featured_media":3090,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[11],"tags":[665,169,304,337,570,662,663,664],"topics":[],"class_list":["post-2934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-komponenten","tag-angular","tag-web","tag-editorschoice","tag-zeiss-digital-innovation","tag-snapshot-testing","tag-storybook","tag-installation"],"acf":[],"yoast_head":"\nSnapshot Testing mit Angular und... - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Snapshot Testing mit Angular und Storybook\" \/>\n<meta property=\"og:description\" content=\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T12:03:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-12T11:45:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1693\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Steffen Kaemmerer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Snapshot Testing mit Angular und Storybook\" \/>\n<meta name=\"twitter:description\" content=\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\" \/>\n<meta name=\"twitter:creator\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:site\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steffen Kaemmerer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/\",\"name\":\"Snapshot Testing mit Angular und... - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"datePublished\":\"2022-06-30T12:03:59+00:00\",\"dateModified\":\"2022-08-12T11:45:44+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/296f149f098c80a1bf3f046c34784f68\"},\"description\":\"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg\",\"width\":2560,\"height\":1693},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snapshot Testing mit Angular und Storybook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/296f149f098c80a1bf3f046c34784f68\",\"name\":\"Steffen Kaemmerer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/kaemmerer_steffen-scaled-e1656670430250-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/kaemmerer_steffen-scaled-e1656670430250-150x150.jpg\",\"caption\":\"Steffen Kaemmerer\"},\"description\":\"Steffen Kaemmerer ist Diplomingenieur f\u00fcr Informatik (FH) und als Senior Softwareconsultant bei der ZEISS Digital Innovation besch\u00e4ftigt. Als Fullstackentwickler mit den Schwerpunkten Angular und .Net Core besch\u00e4ftigt er sich insbesondere mit Webtechnologien und .NET.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/steffenkaemmerer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Snapshot Testing mit Angular und... - ZEISS Digital Innovation Blog","description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/","og_locale":"de_DE","og_type":"article","og_title":"Snapshot Testing mit Angular und Storybook","og_description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/","og_site_name":"Digital Innovation Blog","article_publisher":"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/","article_published_time":"2022-06-30T12:03:59+00:00","article_modified_time":"2022-08-12T11:45:44+00:00","og_image":[{"width":2560,"height":1693,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","type":"image\/jpeg"}],"author":"Steffen Kaemmerer","twitter_card":"summary_large_image","twitter_title":"Snapshot Testing mit Angular und Storybook","twitter_description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","twitter_creator":"@ZEISS_di","twitter_site":"@ZEISS_di","twitter_misc":{"Verfasst von":"Steffen Kaemmerer","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/","name":"Snapshot Testing mit Angular und... - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","datePublished":"2022-06-30T12:03:59+00:00","dateModified":"2022-08-12T11:45:44+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/296f149f098c80a1bf3f046c34784f68"},"description":"Dieser Blogbeitrag besch\u00e4ftigt sich mit dem Werkzeug Storybook und geht auf dessen M\u00f6glichkeit des Snapshot Testings ein.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-scaled.jpg","width":2560,"height":1693},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/snapshot-testing-mit-angular-und-storybook\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/"},{"@type":"ListItem","position":2,"name":"Snapshot Testing mit Angular und Storybook"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/296f149f098c80a1bf3f046c34784f68","name":"Steffen Kaemmerer","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/kaemmerer_steffen-scaled-e1656670430250-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/kaemmerer_steffen-scaled-e1656670430250-150x150.jpg","caption":"Steffen Kaemmerer"},"description":"Steffen Kaemmerer ist Diplomingenieur f\u00fcr Informatik (FH) und als Senior Softwareconsultant bei der ZEISS Digital Innovation besch\u00e4ftigt. Als Fullstackentwickler mit den Schwerpunkten Angular und .Net Core besch\u00e4ftigt er sich insbesondere mit Webtechnologien und .NET.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/steffenkaemmerer\/"}]}},"author_meta":{"display_name":"Steffen Kaemmerer","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/steffenkaemmerer\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2022\/07\/202207_Snapshot_Testing-600x397.jpg","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Komponenten<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Angular<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">web<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Editor's Choice<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Snapshot Testing<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Storybook<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Installation<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Komponenten<\/span>","<span class=\"advgb-post-tax-term\">Angular<\/span>","<span class=\"advgb-post-tax-term\">web<\/span>","<span class=\"advgb-post-tax-term\">Editor's Choice<\/span>","<span class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/span>","<span class=\"advgb-post-tax-term\">Snapshot Testing<\/span>","<span class=\"advgb-post-tax-term\">Storybook<\/span>","<span class=\"advgb-post-tax-term\">Installation<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4\u00a0Jahren ago","modified":"Updated 4\u00a0Jahren ago"},"absolute_dates":{"created":"Posted on Juni 30, 2022","modified":"Updated on August 12, 2022"},"absolute_dates_time":{"created":"Posted on Juni 30, 2022 12:03 p.m.","modified":"Updated on August 12, 2022 11:45 a.m."},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/comments?post=2934"}],"version-history":[{"count":10,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2934\/revisions"}],"predecessor-version":[{"id":3247,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2934\/revisions\/3247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media\/3090"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media?parent=2934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/categories?post=2934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/tags?post=2934"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/topics?post=2934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}