Feature/screenshot test crop screenshots to content

[adrianjost]

Issue: Screenshot Tests should fail earlier

Sorry for the gigantic PR! Most of the changed files are only the new cropped screenshots.

Description

• take full screenshots using puppeteer so long stories will be captured completly
• mocked all external images with base64 or repo internal Images
• auto crop screenshots to its actual content using sharp
• adjusted some stories to work with this setup (puppeteer screenshots actually have some bugs)
  • puppeteer only takes a really small screenshot if only position: fixed or absolute elements are on the page. The solution is to add a grey rectangle anywhere on the page (was required for FloatingFAB component)
  • added some rectangles around some stories for the same reason but I couldn't find the reason for that.
• reduced the diff threshold to fail more often (should not happen that often anymore, because all screenshot updates are on the same system when using the sc-bot update command)
• added an documentation hint to the screenshot action, how to update screenshots.

[hpi-schul-clud-bot]

❤️ I have deployed this pull-request for you:

Docs: http://docs.524.nuxt.schul-cloud.surge.sh
Storybook: http://stories.524.nuxt.schul-cloud.surge.sh

[codecov]

Codecov Report

Merging #524 into develop will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop     #524   +/-   ##
========================================
  Coverage    85.45%   85.45%           
========================================
  Files          118      118           
  Lines         1155     1155           
  Branches       176      176           
========================================
  Hits           987      987           
  Misses         163      163           
  Partials         5        5

Impacted Files	Coverage Δ
src/components/base/BaseInput/BaseInputDefault.vue	100% <ø> (ø)	⬆️
src/components/molecules/MintEcLinkContainer.vue	100% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4593699...9610601. Read the comment docs.

[adrianjost]

@schul-cloud-bot update screenshots

[adrianjost]

@schul-cloud-bot update screenshots