Update Guideline (#22450) (#22645)

* Update Guideline

* Update Unit tests section

* Updated Guideline

packages/kbn-i18n/GUIDELINE.md

@@ -7,16 +7,16 @@
 The message ids chosen for message keys are descriptive of the string, and its role in the interface (button, label, header, etc.). Each message id ends with a descriptive type. Types are defined at the end of message id by combining to the last segment using camel case.
 
 The following types are supported:
-- header
-- label
-- button
-- dropDown
-- placeholder
-- tooltip
-- aria
-- errorMessage
-- toggleSwitch
-- link and etc.
+- Title
+- Label
+- ButtonLabel
+- DropDown
+- Placeholder
+- Tooltip
+- AriaLabel
+- ErrorMessage
+- ToggleSwitch
+- LinkLabel and etc.
 
 There is one more complex case, when we have to divide a single expression into different labels. 
 
@@ -45,7 +45,7 @@ For example:
 
 ```js
 {
-  'kbn.management.editIndexPattern.scripted.deprecationLangLabel.painlessLink': 'Painless'
+  'kbn.management.editIndexPattern.scripted.deprecationLangLabel.painlessLinkLabel': 'Painless'
 }
 ```
 
@@ -83,7 +83,7 @@ In case when `indicesLength` has value 1, the result string will be "`1 index`".
 
 The message ids chosen for message keys should always be descriptive of the string, and its role in the interface (button label, title, etc.). Think of them as long variable names. When you have to change a message id, adding a progressive number to the existing key should always be used as a last resort.
 
-- Message id should start with namespace (`kbn`, `common.ui` and etc.). 
+- Message id should start with namespace that identifies a functional area of the app (`common.ui` or `common.server`) or a plugin (`kbn`, `vega`, etc.).
 
     For example:
 
@@ -97,10 +97,10 @@ The message ids chosen for message keys should always be descriptive of the stri
 - Each message id should end with a type. For example:
 
   ```js
-  'kbn.management.editIndexPattern.createIndexButton'
-  'kbn.management.editIndexPattern.mappingConflictHeader'
+  'kbn.management.editIndexPattern.createIndexButtonLabel'
+  'kbn.management.editIndexPattern.mappingConflictTitle'
   'kbn.management.editIndexPattern.mappingConflictLabel'
-  'kbn.management.editIndexPattern.fields.filterAria'
+  'kbn.management.editIndexPattern.fields.filterAriaLabel'
   'kbn.management.editIndexPattern.fields.filterPlaceholder'
   'kbn.management.editIndexPattern.refreshTooltip'
   'kbn.management.editIndexPattern.fields.allTypesDropDown'
@@ -153,12 +153,12 @@ Each message id should end with a type of the message.
 
 | type | example message id |
 | --- | --- |
-| header | `kbn.management.createIndexPatternHeader` |
+| header | `kbn.management.createIndexPatternTitle` |
 | label | `kbn.management.createIndexPatternLabel ` |
-| button | `kbn.management.editIndexPattern.scripted.addFieldButton` |
+| button | `kbn.management.editIndexPattern.scripted.addFieldButtonLabel` |
 | drop down | `kbn.management.editIndexPattern.fields.allTypesDropDown` |
 | placeholder | `kbn.management.createIndexPattern.stepTime.options.patternPlaceholder` |
-| `aria-label` attribute | `kbn.management.editIndexPattern.removeAria` |
+| `aria-label` attribute | `kbn.management.editIndexPattern.removeAriaLabel` |
 | tooltip | `kbn.management.editIndexPattern.removeTooltip` |
 | error message | `kbn.management.createIndexPattern.step.invalidCharactersErrorMessage` |
 | toggleSwitch | `kbn.management.createIndexPattern.includeSystemIndicesToggleSwitch` |
@@ -170,7 +170,7 @@ For example:
   ```js
   <h1>
       <FormattedMessage
-        id="kbn.management.createIndexPatternHeader"
+        id="kbn.management.createIndexPatternTitle"
         defaultMessage="Create index pattern"
       />
   </h1>
@@ -192,7 +192,7 @@ For example:
   ```js
 
   <EuiButton data-test-subj="addScriptedFieldLink" href={addScriptedFieldUrl}>
-       <FormattedMessage id="kbn.management.editIndexPattern.scripted.addFieldButton" defaultMessage="Add scripted field"/>
+       <FormattedMessage id="kbn.management.editIndexPattern.scripted.addFieldButtonLabel" defaultMessage="Add scripted field"/>
   </EuiButton>
   ```
 
@@ -221,7 +221,7 @@ For example:
 
   ```js
   <button
-      aria-label="{{'kbn.management.editIndexPattern.removeAria' | i18n: {defaultMessage: 'Remove index pattern'} }}"
+      aria-label="{{'kbn.management.editIndexPattern.removeAriaLabel' | i18n: {defaultMessage: 'Remove index pattern'} }}"
       tooltip="{{'kbn.management.editIndexPattern.removeTooltip' | i18n: {defaultMessage: 'Remove index pattern'} }}"
       >
   </button>
@@ -283,13 +283,19 @@ Splitting sentences into several keys often inadvertently presumes a grammar, a
 
 ### Unit tests
 
-When testing React component that use the injectI18n higher-order component, use the shallowWithIntl helper function defined in test_utils/enzyme_helpers to render the component. This will shallow render the component with Enzyme and inject the necessary context and props to use the intl mock defined in test_utils/mocks/intl.
+Testing React component that uses the `injectI18n` higher-order component is more complicated because `injectI18n()` creates a wrapper component around the original component.
+
+With shallow rendering only top level component is rendered, that is a wrapper itself, not the original component. Since we want to test the rendering of the original component, we need to access it via the wrapper's `WrappedComponent` property. Its value will be the component we passed into `injectI18n()`.
+
+When testing such component, use the `shallowWithIntl` helper function defined in `test_utils/enzyme_helpers` and pass the component's `WrappedComponent` property to render the wrapped component. This will shallow render the component with Enzyme and inject the necessary context and props to use the `intl` mock defined in `test_utils/mocks/intl`.
+
+Use the `mountWithIntl` helper function to mount render the component.
 
 For example, there is a component that is wrapped by `injectI18n`, like in the `AddFilter` component:
 
 ```js
 // ...
-export class AddFilterComponent extends Component {
+class AddFilterUi extends Component {
   // ...
   render() {
     const { filter } = this.state;
@@ -311,16 +317,16 @@ export class AddFilterComponent extends Component {
   }
 }
 
-export const AddFilter = injectI18n(AddFilterComponent);
+export const AddFilter = injectI18n(AddFilterUi);
 ```
 
-To test the `AddFilterComponent` component it is needed to render it using `shallowWithIntl` function to pass `intl` object into the `props`.
+To test the `AddFilter` component it is needed to render its `WrappedComponent` property using `shallowWithIntl` function to pass `intl` object into the `props`.
 
 ```js
 // ...
 it('should render normally', async () => {
     const component = shallowWithIntl(
-      <AddFilterComponent onAddFilter={() => {}}/>
+      <AddFilter.WrappedComponent onAddFilter={() => {}}/>
     );
 
     expect(component).toMatchSnapshot();