fixup! fixup! Add writing-tests-guidelines.md (#612)

Author: lukasbriza

src/docs/contribute/writing-tests-guidelines.md

@@ -1,4 +1,4 @@
-## Playwright Testing Structure
+# Playwright Testing Structure
 
 This document outlines the structure and guidelines for writing Playwright
 tests, ensuring consistency and maintainability throughout the codebase.
@@ -32,7 +32,7 @@ described below.
 in tests. These components should be functional without requiring any
 properties to be passed from the tests.
 
-##  File Structure of `<ComponentName>.spec.tsx`
+## File Structure of `<ComponentName>.spec.tsx`
 
 Playwright tests follow a structured format to ensure readability
 and scalability. Each displayed level represents a `test.describe(...)` block.
@@ -65,7 +65,7 @@ Test block categories can be expanded or removed depending on the nature
 of the tested component and whether a predefined test block is applicable
 in a specific case.
 
-##  File Structure of `<ComponentName>.story.tsx`
+## File Structure of `<ComponentName>.story.tsx`
 
 The `<ComponentName>.story.tsx` file should include all component variants
 tested in `<ComponentName>.spec.tsx`. Components should be organized
@@ -93,9 +93,22 @@ test scenario.
 
 ## Formatting and code style
 
-- When writing visual tests, the test for the default component properties
-should always be placed first. This test is always represented by
-`propTests.defaultComponentPropTest`, defined in the global `propTests`.
+### Rules
+
+- Test for the default component properties should always be placed first.
+This test is always represented by `propTests.defaultComponentPropTest`,
+defined in the global `propTests`.
+
+- When possible, try to re-use globally defined `propTests`
+for visual tests, located in `tests/playwright/propTests`.
+
+- It is essential to test all combinations of props that have a significant
+visual impact on the appearance of the component.
+
+- For all possible combinations of multiple `propTests` should be used
+function `mixPropTests`.
+
+### Formate
 
 - Prop test variants should be sorted alphabetically. If there are multiple
 prop tests like `feedbackColor`, `neutralColor`, etc., they should still be
@@ -119,9 +132,6 @@ ordered alphabetically under the category of color.
 
   ```
 
-- When possible, try to re-use globally defined `propTests`
-for visual tests, located in `tests/playwright/propTests`.
-
 - Naming convention for propTests `name` property should follow this pattern:
 
   ```text
@@ -132,9 +142,6 @@ for visual tests, located in `tests/playwright/propTests`.
     someProp:shape[nested]
   ```
 
-- For all possible combinations of multiple `propTests` should be used
-function `mixPropTests`.
-
 ## Templates
 
 ### Template for `<ComponentName>.story.tsx`