commerce/Test-Design.md

Component Hierarchy and Data-Test Attributes

Voici un schéma Mermaid qui représente les composants et les hiérarchies des attributs data-test pour le composant ThreeItemGrid.

%%{init: {'theme': 'dark'}}%%

graph TD

%% Utilisation d'un vert plus foncé (#339966) avec du texte blanc (#fff) pour améliorer le contraste
classDef grid-item-class fill:#339966,stroke:#aaa,stroke-width:2px,color:#fff;

%% Bleu foncé (#336699) avec texte blanc (#fff) pour les conteneurs
classDef container-class fill:#336699,stroke:#aaa,stroke-width:2px,color:#fff;

%% Rouge foncé (#cc3333) avec texte blanc (#fff) pour les composants React
classDef react-component-class fill:#cc3333,stroke:#aaa,stroke-width:2px,color:#fff;

%% Subgraph représentant la structure globale de la grille
subgraph ThreeItemGrid
    style ThreeItemGrid fill:#333,stroke:#aaa,stroke-width:2px;

    %% Grid Item avec taille configurable
    ThreeItemGridItem[⚛️ Three Item Grids]
    class ThreeItemGridItem react-component-class

    GridItem[🗂️ data-test: three-item-grid]
    ThreeItemGridItem --> GridItem
    class GridItem container-class

    GridItemSize[🔍 data-test: grid-item <br>⬛ full / ⬜ half]
    GridItem --> GridItemSize
    class GridItemSize grid-item-class

    %% Grid Product Link pour GridItemSize
    GridItemSize --> GridProductLink[🔍 data-test: grid-product-link]
    class GridProductLink grid-item-class

    GridProductLink --> GridTileImage[⚛️ GridTileImage]
    class GridTileImage react-component-class

    GridTileImage --> GridTileContainer[🗂️ data-test: grid-tile-container]
    class GridTileContainer container-class

    GridTileContainer --> GridTileImageItem[🔍 data-test: grid-tile-image]
    class GridTileImageItem grid-item-class

    GridTileContainer --> Label[⚛️ Label]
    class Label react-component-class

    Label --> LabelContainer[🗂️ data-test: label-container]
    class LabelContainer container-class

    LabelContainer --> LabelContentWrapper[🗂️ data-test: label-content-wrapper]
    class LabelContentWrapper container-class

    LabelContentWrapper --> LabelTitleText[🔍 data-test: label-title-text]
    class LabelTitleText grid-item-class

    LabelContentWrapper --> Price[⚛️ Price]
    class Price react-component-class

    Price --> PriceAmount[🔍 data-test: price-amount]
    class PriceAmount grid-item-class

    Price --> PriceCurrencyCode[🔍 data-test: price-currency-code]
    class PriceCurrencyCode grid-item-class
end

%% Subgraph pour la légende
subgraph Légende
    direction LR
    ReactComp[⚛️ Composants React]
    class ReactComp react-component-class

    DataTestCont[🗂️ Conteneur data-test]
    class DataTestCont container-class

    TestableElem[🔍 Éléments testables]
    class TestableElem grid-item-class
end