Merge pull request #218 from otto-de/B2BDS-182

B2BDS-182 Migrate to Storybook 7

Author: AnnaHoege

.dockerignore

@@ -0,0 +1,24 @@
+.DS_Store
+Thumbs.db
+node_modules/
+**/dist/
+**/build/
+
+# VS-CODE
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+#JETBRAINS
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+# Authomatically ignores what it needs to ignore
+/.idea/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "files.eol": "\n"
+}

DEV-GUIDELINES.md

@@ -189,30 +189,12 @@ To be able to capture accurate and consistent renders of our components we need
 
 If you are able to use [Docker Desktop](https://docs.docker.com/desktop/) you can use this tool, otherwise for Mac users [Colima](https://github.com/abiosoft/colima) is a good alternative.
 
-Once you have one of this two runtime envs, you can follow this steps:
+Once you have one of this two runtime envs, you can follow these steps:
 
-You will need to have storybook running on your host machine:
-```shell
-cd packages/core-components
-npm run storybook
-# storybook runs on localhost:6006
-```
-
-Now, you can either use the following shell shortcuts, or run the docker commands directly (you can find the commands in the `do` file):
-```shell
-# shell shortcuts
-./do build-test-image
-./do visual-tests
-```
+1. Run `docker-compose up` or `docker-compose up --build` if you have created the services before. This creates a storybook service
+  and a service that runs the tests against storybook. If any test failed, you will find a new folder inside `__snapshots__` called `__diff_output__`.
+2. If the differences were expected (because you made visual changes to an existing component), run `docker-compose run run-tests npx test-storybook --verbose --url http://storybook:6006 -u`
 
-If you're using windows, make sure that you exchange the `$(pwd)` in the docker commands for Windows equivalent `${pwd}`, otherwise the tests cannot run.
-
-If any test failed, you will find a new folder inside `__snapshots__` called `__diff_output__`.
-
-If the differences where expected run:
-```shell
-./do visual-tests-update
-```
 
 #### Making changes to the docker image
 

do

@@ -0,0 +1,29 @@
+version: '3.8'
+
+services:
+  storybook:
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:6006"]
+      interval: 5s
+      timeout: 20s
+      retries: 5
+    build:
+      context: .
+      dockerfile: test.Dockerfile
+    ports:
+      - "6006:6006"
+    command: npm run storybook -- -h 0.0.0.0
+    working_dir: /b2b/packages/core-components
+    volumes:
+      - ./packages/core-components/__snapshots__:/b2b/packages/core-components/__snapshots__
+
+  run-tests:
+    build:
+      context: .
+      dockerfile: test.Dockerfile
+    volumes:
+      - ./packages/core-components/__snapshots__:/b2b/packages/core-components/__snapshots__
+    depends_on:
+      storybook:
+        condition: service_healthy
+    command: npx test-storybook --verbose --url http://storybook:6006