# Automation Props

### Automation PropTypes handling for components
The common pattern through out the components library.

`{component}.propTypes.js file configurations`
```
import automationProps, {  automationPropsName } from "propTypes/automation.propTypes.js";
import defaultCustomId from "{component}.customId.js";

const listPropTypes = {
     variant,
     direction,
    ...automationProps
}

const listItemPropTypes = {
     value,
    ...automationProps
}

const listDefaultProps = {
     direction : 'horizontal'
     [automationPropsName] :  defaultCustomId
}

const listItemDefaultProps = {
     [automationPropsName] :  defaultCustomId
}

export { listItemPropTypes, listDefaultProps,  listItemDefaultProps };
export default listPropTypes;

```

`How we will use propTypes file in our component. example`
```
import listPropTypes, { listItemDefaultProps } from '{component.propTypes.js}'
MyComponent.propTypes=listPropTypes;    
MyComponent.defaultProps=listItemDefaultProps;
```


### Automation Props support in component
These props are used to webdriver automation test cases. They need to identify (data-id) the element in component and write the test cases and trigger respective event of element based on test case. So, we planning to offer those identifier (data-id) in component a common way called Automation Props- customId, customIdPrefix , customIdSuffix.
Also, we will use methods to compile the prefix and suffix.
###### Why we doing this in separate file {component}.customId.js ?
- Keep the automation test details separation from component
- Easy to catchup what identifer (data-id) are provided from component
- In future, we can plan to provide separate builds 1. automation identifers and 2. No identifers. The  identifers are not need to end user website html. Few applications tying to provide the html customizations so.
 
`Note: data-id value should small case-sensitive, use underscore _ to when multiple words.`
###### how to use dataId , data-id to prevent console error
`React.clone(ele,{ dataId: '' })  ❌.`
`React.clone(ele,{ 'data-id': '' })  ✅`
`<div data-id={} />`

#### List.customId.js - {component}.customId.js code Example 
```
    import createTemplateLiteral from "libraries/createTemplateLiteral"
    export default {
        list : createTemplateLiteral`${0}_list_${1}`,
        list_item : createTemplateLiteral`${0}_list_item_${1}`,
        list_item_title : createTemplateLiteral`${0}_list_item_title_${1}`,
        list_item_subtitle : createTemplateLiteral`${0}_list_item_subtitle_${1}`,
        list_item_action : createTemplateLiteral`${0}_list_item_action_{1}_${2}`
    }
    
```
${0} -denotes prefix prop.
${1} -denotes suffix prop.
${2},...${n} -denotes a component offers something to identify special.

#### {component}.customId.js in HTML Part of component
We should use this in skeleton.js files means presention (HTML) part of component.
List.js
```
import getCompliedCustomId from 'utils/getCompliedCustomId';
export default (props)=>{

    let { customId, customIdPrefix, customIdSuffix } = props;
    let automationProps = {customId, customIdPrefix, customIdSuffix};
    
    return <div className={styles.list} data-id={getCompliedCustomId( automationProps, customId.list )}>
                {  listItems.map((item)=>{  
                    return 
                      <div className={styles.list_item}
                      data-id={getCompliedCustomId( automationProps, customId.list_item )}>
                        <span data-id={getCompliedCustomId( automationProps, customId.list_item_title )}>
                          {item.title}
                         </span>
                        <span data-id={getCompliedCustomId( automationProps, customId.list_item_subtitle )}>
                        {item.subtitle}
                        </span>
                         <div className={styles.action_options}>  
                                <button data-id={
                                getCompliedCustomId( automationProps, customId.list_item_action, ['edit'] )}>
                                Edit option 
                                </button>
                                <button data-id={  
                                getCompliedCustomId( automationProps, customId.list_item_action, ['delete'] )}>
                                Delete option
                                </button>
                                <button data-id={
                                getCompliedCustomId( automationProps, customId.list_item_action, ['permalink'] )}>
                                Permalink option
                                </button>
                         </div>
                    </div>
                    
                })
                 }   
    </div>
    
}

```
#### Passing customIdPrefix, customIdSuffix props in component
```
<List customIdPrefix="ticket" customIdSuffix="classic" />
```
#### Output html for above exmaple
```html
  <div class="list" data-id="ticket_list_classic">
        <div  class="list_item" data-id="ticket_list_item_classic">
              <span data-id="ticket_list_item_title_classic">Unable to access my ticket detail view</span>
              <span data-id="ticket_list_item_subtitle_classic">...</span>
              <div class="action_options">
                     <button data-id="ticket_list_item_action_edit_classic">Edit option</button>
                     <button data-id="ticket_list_item_action_delete_classic">Delete option</button>
                     <button data-id="ticket_list_item_action_permalink_classic">Permalink option</button>
              </div>
        </div>
        <div data-id="tciket_list_item_classic">....</div>
        ...
        ...
  </div>
```

### To avoid prefix and suffix in nested level of tags in html structure, how to handle 

##### List.customId.js - Example code
```
    import createTemplateLiteral from "libraries/createTemplateLiteral"
    export default {
        list : createTemplateLiteral`${0}_list_${1}`,
        list_item : 'list_item',
        list_item_title : 'list_item_title',
        list_item_subtitle : 'list_item_subtitle',
        list_item_action : createTemplateLiteral`list_item_action_${0}`
    }
    
```
${0} -denotes prefix prop.
${1} -denotes suffix prop.
${2},...${n} -denotes a component offers something to identify.
`Here list_item_action - we won't pass prefix and suffix prop to compile the customId.`

##### A {component}.customId.js in HTML Part of component for only root level supported prefix/suffix
We should use this in skeleton.js files means presention (HTML) part of component.

List.js
```
import { getCompliedCustomIdOnly } from 'utils/getCompliedCustomId';
export default (props)=>{

    let { customId, customIdPrefix, customIdSuffix } = props;
    let automationProps = {customId, customIdPrefix, customIdSuffix};
    
    return <div className={styles.list} data-id={getCompliedCustomId( automationProps, customId.list )}>
                {  listItems.map((item)=>{  
                    return 
                      <div className={styles.list_item}
                      data-id={getCompliedCustomIdOnly( customId.list_item )}>
                        <span data-id={getCompliedCustomIdOnly( customId.list_item_title )}>
                          {item.title}
                         </span>
                        <span data-id={getCompliedCustomIdOnly( customId.list_item_subtitle )}>
                        {item.subtitle}
                        </span>
                         <div className={styles.action_options}>  
                                <button data-id={
                                getCompliedCustomIdOnly( customId.list_item_action, ['edit'] )}>
                                Edit option 
                                </button>
                                <button data-id={  
                                getCompliedCustomIdOnly(customId.list_item_action, ['delete'] )}>
                                Delete option
                                </button>
                                <button data-id={
                                getCompliedCustomIdOnly( customId.list_item_action, ['permalink'] )}>
                                Permalink option
                                </button>
                         </div>
                    </div>
                    
                })
                 }   
    </div>
    
}

```
#### Passing customIdPrefix, customIdSuffix props in component
```
<List customIdPrefix="ticket" customIdSuffix="classic" />
```
##### Output html for above example
```html
  <div class="list" data-id="ticket_list_classic">
        <div  class="list_item" data-id="list_item">
              <span data-id="list_item_title">Unable to access my ticket detail view</span>
              <span data-id="list_item_subtitle">...</span>
              <div class="action_options">
                     <button data-id="list_item_action_edit">Edit option</button>
                     <button data-id="list_item_action_delete">Delete option</button>
                     <button data-id="list_item_action_permalink">Permalink option</button>
              </div>
        </div>
        <div data-id="list_item">....</div>
        ...
        ...
  </div>
```


### The HTML Attributes are attached within the complie automation methods.
By using these methods you don't need to know/write data-id attribute in tag.
Easier to change the attribute over the application.
```
import getCompliedCustomIdProps, { getCompliedCustomIdOnlyProps } from 'utils/getCompliedCustomId';

export default (props)=>{

    let { customId, customIdPrefix, customIdSuffix } = props;
    let automationProps = {customId, customIdPrefix, customIdSuffix};
    
    return <div className={styles.list} {...getCompliedCustomIdProps( automationProps, customId.list )}>
                {  listItems.map((item)=>{  
                    return 
                      <div className={styles.list_item}
                      {...getCompliedCustomIdOnlyProps( customId.list_item )}>
                        <span {...getCompliedCustomIdOnlyProps( customId.list_item_title )}>
                          {item.title}
                         </span>
                        <span {...getCompliedCustomIdOnlyProps( customId.list_item_subtitle )}>
                        {item.subtitle}
                        </span>
                         <div className={styles.action_options}>  
                                <button {
                                ...getCompliedCustomIdOnlyProps( customId.list_item_action, ['edit'] )}>
                                Edit option 
                                </button>
                                <button {
                                ...getCompliedCustomIdOnlyProps( customId.list_item_action, ['delete'] )}>
                                Delete option
                                </button>
                                <button {
                                ...getCompliedCustomIdOnlyProps( customId.list_item_action, ['permalink'] )}>
                                Permalink option
                                </button>
                         </div>
                    </div>
                    
                })
                 }   
    </div>
}
    
```

##### Output html for above example
```html
  <div class="list" data-id="ticket_list_classic">
        <div  class="list_item" data-id="list_item">
              <span data-id="list_item_title">Unable to access my ticket detail view</span>
              <span data-id="list_item_subtitle">...</span>
              <div class="action_options">
                     <button data-id="list_item_action_edit">Edit option</button>
                     <button data-id="list_item_action_delete">Delete option</button>
                     <button data-id="list_item_action_permalink">Permalink option</button>
              </div>
        </div>
        <div data-id="list_item">....</div>
        ...
        ...
  </div>
```