[#154] Add UI-based unit tests for demo application

.github/DEVELOP.md

@@ -122,6 +122,40 @@ Indeed for new tests the tool makes snapshots of the views, thus for the first r
 
 Such tests here are used to as to be sure the look and feel of any components and tokens rendering remaing the expected ones.
 
+### Steps to Use swift-snapshot-testing
+
+1. Navigate to the Project :
+ - Open your project in Xcode and go to the directory:
+ ```shell
+ Showcase -> ShowcaseTests -> OUDSTokensBorderUITests
+ ```
+2. Locate Reference Images:
+ - Inside the `OUDSTokensBorderUITests` folder, you will find the `OrangeTheme` and `InverseTheme` directories. These folders contain the reference screenshots for the Orange and Inverse themes, which will serve as comparison points.
+3. Open the Test File:
+ - Open the file `OUDSTokensBorderUITests.swift`.
+4. Run the Snapshot Test:
+ - Locate and execute the function `testBorderToken_OrangeTheme_SectionWidth_BorderWidthNone_Light()`.
+ <img width="898" alt="Capture d’écran 2024-10-18 à 16 44 46" src="https://github.com/user-attachments/assets/bc2d6cb4-3854-499a-82b2-6b5676e2505b">
+
+ - Running this test will launch the selected simulator and create a new snapshot of the `BorderTokenPage`.
+ <img width="909" alt="Capture d’écran 2024-10-18 à 16 53 55" src="https://github.com/user-attachments/assets/d07dfc72-1034-4b40-8875-6fff22dad412">
+
+5. Run the Snapshot Test:
+ - After the snapshot has been generated, re-run the same test after the error indicating that there is no snapshot, so it can use the newly created snapshot as a comparison against the reference image.
+ <img width="910" alt="Capture d’écran 2024-10-18 à 16 55 15" src="https://github.com/user-attachments/assets/2588e0a5-6571-4049-97dd-c92a92e2a4d2">
+
+6. Verify the Output:
+ - The test will check the rendered output of the `BorderTokenPage`, which is instantiated with the `Orange theme`:
+ ```swift
+ BorderTokenPage().environment(\.theme, OrangeTheme())
+ ```
+ - If the generated screenshot matches the reference image, the test will pass. If they do not match, the test will fail, indicating a discrepancy
+7. Verify the Output:
+ - **Important:** If you change the device or simulator you are using, **delete the snapshots** located in the `__Snapshots__` folder to avoid mismatches:
+ - Snapshots should **never be committed** to the repository, as they are meant for local testing purposes only
+<img width="548" alt="Capture d’écran 2024-10-18 à 17 00 42" src="https://github.com/user-attachments/assets/9e11e225-6218-4cb5-bae1-933d305aefa6">
+
+
 ## Build phases
 
 The project contains several custom build phases so as to automatize several steps:
@@ -277,4 +311,4 @@ Our currant plan does not allow to make GitHub mirroring, so we use GitHub HTTP
 If you want to set up your runners, feel free to have a look on */docs_release/README.md*
 However of course you will have to define all the variables, secrets and have the mandatory files listed above.
 
-You can find more details about the pipelines and script [in the wiki](https://github.com/Orange-OpenSource/ouds-ios/wiki/5-%E2%80%90-About-continuous-integration-and-delivery).
+You can find more details about the pipelines and script [in the wiki](https://github.com/Orange-OpenSource/ouds-ios/wiki/5-%E2%80%90-About-continuous-integration-and-delivery).

CHANGELOG.md

@@ -10,10 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- [DemoApp] Update opacity screen with new design ([#200](https://github.com/Orange-OpenSource/ouds-ios/issues/200))
+- [DemoApp] Update opacity screen with new design ([#200](https://github.com/Orange-OpenSource/ouds-ios/issues/200)) 
 - [DemoApp] Add color tokens screen in demo app ([#152](https://github.com/Orange-OpenSource/ouds-ios/issues/152))
 - [Library] Add semantic tokens `spacePaddingInlineTallest`, `spacePaddingBlockTallest`, `spaceColumnGapTaller`, `spaceColumnGapWithArrowShortest`, `spaceRowGapShortest` (Figjam final synchronization of October 16th)
 - [Library] Add semantic color tokens ([#124](https://github.com/Orange-OpenSource/ouds-ios/issues/124))
+- [DemoApp] Add more UI tests on demo app ([#154](https://github.com/Orange-OpenSource/ouds-ios/issues/154))
 - [DemoApp] Fix some design issues and mutualize some UI elements ([#189](https://github.com/Orange-OpenSource/ouds-ios/issues/189))
 - [DemoApp] Add sizing tokens screen in demo app ([#150](https://github.com/Orange-OpenSource/ouds-ios/issues/150))
 - [DemoApp] Add spacing tokens screen in demo app ([#149](https://github.com/Orange-OpenSource/ouds-ios/issues/149))