Prechádzať zdrojové kódy

[ui-doc] Documenting data-testid attribute in contributing-frontend.md file (#3732)

* Documenting data-testid attribute in contributing-frontend.md file

* Removing the extra ts variable from the code text
Ananya_Agarwal 1 rok pred
rodič
commit
d5ab133582
1 zmenil súbory, kde vykonal 20 pridanie a 0 odobranie
  1. 20 0
      contributing-frontend.md

+ 20 - 0
contributing-frontend.md

@@ -128,6 +128,26 @@ import { Pagination } from 'antd';
 import PrimaryButton from 'cuix/dist/components/Button/PrimaryButton';
 ```
 
+## Adding data-testid attribute
+
+data-testid attributes are custom attributes that can be added to HTML elements to identify them for testing purposes. They are commonly used in testing frameworks and tools to locate and interact with elements on web pages. 
+
+Hue follows a pattern of 
+```
+area--action--role
+```
+while adding data-testids
+
+Example:
+editor-coordinator--save-as--button , editor-sql-assist--refresh--button
+
+In this manner, these data-testids can be added along with the other HTML attributes. 
+
+Example:
+```
+<i class="fa fa-chevron-left assist-breadcrumb-back" data-testid="assist-sql--databases-breadcrumb-back--button"></i>
+```
+
 ## Styling
 
 Hue uses `Sass` while both cuix and Ant Design use `Less` for writing CSS. The core cuix variables are however stil available in sass.