Feature/screenshot test crop screenshots to content

.github/workflows/test.yml

@@ -48,12 +48,15 @@ jobs:
       - name: build storybook
         run: "npm run build:storybook"
       - name: npm run test:screenshot
-        run: npm run test:screenshot
+        run: npm run test:screenshot:ci
       - uses: actions/upload-artifact@v1
         if: failure()
         with:
           name: screenshot-diff
           path: tests/screenshot/__image_snapshots__/__diff_output__
+      - name: failure hint
+        if: failure()
+        run: echo "if you want to update the screenshots, comment \"@schul-cloud-bot update screenshots\" on this PR."
   integration:
     runs-on: ubuntu-latest
     steps:
@@ -68,9 +71,8 @@ jobs:
   # build:
   #   strategy:
   #     matrix:
-  #       os: [ubuntu-latest, macos-latest, windows-latest]
-  #       theme: [default, brb, n21, open]
-  #   runs-on: ${{ matrix.os }}
+  #       theme: [default, brb, n21, open, thr]
+  #   runs-on: ubuntu-latest
   #   steps:
   #     - uses: actions/checkout@v2
   #     - name: npm ci

docs/1-Tutorials/WritingTests/ScreenshotTests.md

@@ -4,22 +4,11 @@
 
 We use screenshot tests to ensure that we do not accidently break components visually.
 
-::: warning Challenges
-
-Be aware that each system (OS, version, settings) may render fonts/shadows/gradients differently. You can read more about these issues [here](https://storybook.js.org/docs/testing/automated-visual-testing/#challenges).
-
-:::
-
 ## Run screenshot tests
 
-For development, it is recommended to start the storybook dev server with hot reload: `npm run dev:storybook`. Then you can start the screenshot tests with the command: `npm run test:screenshot:jest`
+It is **not** recommended to execute the screenshot tests localy, because each system (OS, version, settings) renders fonts/shadows/gradients differently. You can read more about these issues [here](https://storybook.js.org/docs/testing/automated-visual-testing/#challenges).
 
-Alternatively you can build the project and start a static server for testing.
-
-```bash
-npm run build:storybook
-npm run test:screenshot
-```
+But on every push to github, a github action will be triggered that you can use to get the screenshot diffs.
 
 ### Get diff for failed tests
 
@@ -29,29 +18,23 @@ On CI (GitHub Actions) Build, this directory is made available as an artifact to
 
 ![download artifacts](../../.vuepress/public/screenshot-test-artifacts.png)
 
+## Update screenshots
+
+It's as simple as commenting `@schul-cloud-bot update screenshots` on any PR. This will trigger a github action that will update the failing screenshots.
+
 ## Write a screenshot test
 
 Writing a new screenshot test is easy. We snapshot all storybook stories by default. You do not have to do anything.
 
 ### Exclude stories from screenshot tests
 
-But some things are not useful to test with a static screenshot (such as a loading spinner). To exclude these stories you can add them to the list of excluded stories.
+But some things are not useful to test with a static screenshot (like a loading spinner, because the state at which the screenshot will be done is not static). To exclude these stories you can add them to the list of excluded stories at `@/tests/screenshot/ignoredStories.js`.
 
 <<< @/tests/screenshot/ignoredStories.js
 
-### What to not test
+### What not to test
 
 In general you should not test:
 
 - dynamic components that move
 - text heavy components, because of the challenges explained at the top
-
-## Update screenshots
-
-It happens that you really want to update a component. In this case, you can update the screenshots by running the test command with the `-u` or `--updateSnapshot`. Note the leading double hyphen!
-
-```bash
-npm run test:screenshot:jest -- -u
-# or
-npm run test:screenshot -- -u
-```

docs/1-Tutorials/WritingTests/UnitTests.md

@@ -65,7 +65,7 @@ describe("@components/base/BaseCard", () => {
 
 Die soeben beschriebenen Tests werden so häufig verwendet, dass wir sie ausgelagert haben. Die Nutzung ist folgendermaßen möglich:
 
-```js{4-5}
+```js {4-5}
 import BaseCard from "./BaseCard";
 
 describe("@components/base/BaseCard", () => {
@@ -78,7 +78,7 @@ describe("@components/base/BaseCard", () => {
 
 Soll das `v-model` einer Komponente getestet werden, so kann die Komponente nicht direkt gemountet werden, sondern muss per template eingebunden werden. Die Vue-Test-Utils stellen leider keine bessere Möglichkeit bereit. Das setzen der für das v-model verwendeten Prop klappt leider nicht, da der verwendete Wert nicht automatisch durch das `v-model-update-event` verändert wird.
 
-```js{8-13}
+```js {8-13}
 import BaseInput from "./BaseInput";
 
 describe("@components/base/BaseInput", () => {

jest-puppeteer.config.js

@@ -1,7 +1,7 @@
 const viewPort = {
-	// HD Screen with reduced height
+	// HD Landscape Screen (old Laptop)
 	width: 1280,
-	height: 500,
+	height: 720,
 	isLandscape: true,
 };