test(behaviors): make behavior tests and specification mandatory (#455)

* first raw changes adding specification tag

* make tests mandatory

* make tests mandatory

* small fix in name

* reverting change, which have not been done by purpose

* fix number of ticket

* adding test if description and specification is missing in the file

* adressing comments from PR

* fix2 after review

* adressing changes after PR, another fixes

* adressing changes after PR 2

* rename parameter

Author: kolaps33

build/gulp/plugins/gulp-component-menu-behaviors.ts

@@ -14,10 +14,16 @@ type BehaviorMenuItem = {
   type: string
   variations: {
     name: string
-    text: string
+    description: string
+    specification: string
   }
 }
 
+const getTextFromCommentToken = (commentTokens, tokenTitle): string => {
+  const token = commentTokens.find(token => token.title === tokenTitle)
+  return token ? token.description : ''
+}
+
 export default () => {
   const result: BehaviorMenuItem[] = []
   function bufferContents(file, enc, cb) {
@@ -37,28 +43,25 @@ export default () => {
       const componentType = _.lowerFirst(path.basename(path.dirname(dir)).replace(/s$/, ''))
       const behaviorVariantName = file.basename
       const behaviorName = path.basename(dir)
-
-      let description
       const fileContent = fs.readFileSync(file.path).toString()
       const blockComments = extract(fileContent).filter(comment => comment.type === 'BlockComment') // filtering only block comments
-      const emptyDescriptionText = 'Behavior file has no description.'
+      const variation = {
+        name: behaviorVariantName,
+        description: '',
+        specification: '',
+      }
 
-      // getting object that describes '@description' part of the comment's text
+      // getting description and specification of the comment's text
       if (!_.isEmpty(blockComments)) {
         const commentTokens = doctrine.parse(blockComments[0].raw, { unwrap: true }).tags
-        const descriptionToken = commentTokens.find(token => token.title === 'description')
-        description = descriptionToken ? descriptionToken.description : emptyDescriptionText
-      } else {
-        description = emptyDescriptionText
+        variation.description = getTextFromCommentToken(commentTokens, 'description')
+        variation.specification = getTextFromCommentToken(commentTokens, 'specification')
       }
 
       result.push({
         displayName: behaviorName,
         type: componentType,
-        variations: {
-          name: behaviorVariantName,
-          text: description,
-        },
+        variations: variation,
       })
       cb()
     } catch (err) {

docs/src/components/DocsBehaviorRoot.tsx

@@ -71,14 +71,24 @@ class DocsBehaviorRoot extends React.Component<any, any> {
                 <div style={{ padding: '1em' }}>
                   <span> Description: </span>
                   <br />
-                  {variation.text.split('\n').map((splittedText, keyValue) => {
-                    return (
-                      <span key={keyValue}>
-                        {splittedText}
-                        <br />
-                      </span>
-                    )
-                  })}
+                  {variation.description &&
+                    variation.description.split('\n').map((splittedText, keyValue) => {
+                      return (
+                        <span key={keyValue}>
+                          {splittedText}
+                          <br />
+                        </span>
+                      )
+                    })}
+                  {variation.specification &&
+                    variation.specification.split('\n').map((splittedText, keyValue) => {
+                      return (
+                        <span key={keyValue}>
+                          {splittedText}
+                          <br />
+                        </span>
+                      )
+                    })}
                 </div>
               </Grid.Row>
             ))}

src/lib/accessibility/Behaviors/Button/buttonBehavior.ts

@@ -2,9 +2,9 @@ import { Accessibility } from '../../types'
 import * as _ from 'lodash'
 
 /**
- * @description
- *  Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button.
- *  Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
+ * @specification
+ * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button.
+ * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  */
 
 const buttonBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/Button/buttonGroupBehavior.ts

@@ -1,7 +1,7 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
- * @description
+ * @specification
  * Adds role 'presentation' to 'root' component's part.
  * Wraps component in FocusZone allowing arrow key navigation through the children of the component.
  */

src/lib/accessibility/Behaviors/Button/toggleButtonBehavior.ts

@@ -2,7 +2,7 @@ import { Accessibility } from '../../types'
 import * as _ from 'lodash'
 
 /**
- * @description
+ * @specification
  * Adds role='button' if element type is other than 'button'. This allows screen readers to handle the component as a button
  * Adds attribute 'aria-pressed=true' based on the property 'active'. This can be overriden by providing 'aria-presssed' property directly to the component.
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.

src/lib/accessibility/Behaviors/Dialog/dialogBehavior.ts

@@ -6,6 +6,8 @@ import * as _ from 'lodash'
  * @description
  * Adds role='button' to 'trigger' component's part, if it is not focusable element and no role attribute provided.
  * Adds tabIndex='0' to 'trigger' component's part, if it is not tabbable element and no tabIndex attribute provided.
+ *
+ * @specification
  * Adds attribute 'aria-disabled=true' to 'trigger' component's part based on the property 'disabled'.
  * Adds attribute 'aria-modal=true' to 'popup' component's part.
  * Adds attribute 'role=dialog' to 'popup' component's part.

src/lib/accessibility/Behaviors/Grid/gridBehavior.ts

@@ -1,7 +1,7 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
- * @description
+ * @specification
  * Wraps component in FocusZone allowing circular arrow key navigation through the children of the component.
  */
 const gridBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/Icon/iconBehavior.ts

@@ -2,8 +2,10 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Adds attribute 'aria-hidden=true' to icon.
  * Icon is usually only visual representation and therefore is hidden from screen readers.
+ *
+ * @specification
+ * Adds attribute 'aria-hidden=true' to icon.
  */
 
 const iconBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/Image/imageBehavior.ts

@@ -2,8 +2,10 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
  * Image is usually only visual representation and therefore is hidden from screen readers.
+ *
+ * @specification
+ * Adds attribute 'aria-hidden=true', if there is no 'alt' property provided.
  */
 
 const imageBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/Input/inputBehavior.ts

@@ -2,7 +2,7 @@ import { Accessibility } from '../../types'
 import * as _ from 'lodash'
 
 /**
- * @description
+ * @specification
  * Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  */
 

src/lib/accessibility/Behaviors/List/basicListBehavior.ts

@@ -2,8 +2,10 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Adds role='list'.
  * The 'list' role is used to identify an element that creates a list.
+ *
+ * @specification
+ * Adds role='list'.
  */
 
 const basicListBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/List/basicListItemBehavior.ts

@@ -2,8 +2,10 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Adds role='listitem'.
  * The 'listitem' role is used to identify an element that is a single item in a list.
+ *
+ * @specification
+ * Adds role='listitem'.
  */
 
 const basicListItemBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/List/selectableListBehavior.ts

@@ -3,8 +3,10 @@ import { Accessibility } from '../../types'
 
 /**
  * @description
- * Adds role='listbox'.
  * The listbox role is used to identify an element that creates a list from which a user may select one or more items.
+ *
+ * @specification
+ * Adds role='listbox'.
  */
 
 const selectableListBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/List/selectableListItemBehavior.ts

@@ -1,7 +1,7 @@
 import { Accessibility } from '../../types'
 
 /**
- * @description
+ * @specification
  * Adds role='option'. This role is used for a selectable item in a list.
  * Adds attribute 'aria-selected=true' based on the property 'active'. Based on this screen readers will recognize the selected state of the item.
  */

src/lib/accessibility/Behaviors/Menu/menuBehavior.ts

@@ -2,8 +2,10 @@ import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
  * @description
- * Adds role='menu'.
  * The 'menu' role is used to identify an element that creates a list of common actions or functions that a user can invoke.
+ *
+ * @specification
+ * Adds role='menu'.
  * Wraps component in FocusZone allowing circular arrow key navigation through the children of the component.
  */
 

src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts

@@ -4,14 +4,16 @@ import * as keyboardKey from 'keyboard-key'
 
 /**
  * @description
+ * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
+ *
+ * @specification
  * Adds role 'presentation' to 'root' component's part.
  * Adds role 'menuitem' to 'anchor' component's part.
  * Adds attribute 'tabIndex=0' to 'anchor' component's part.
  * Adds attribute 'data-is-focusable=true' to 'anchor' component's part.
  * Adds attribute 'aria-label' based on the property 'aria-label' to 'anchor' component's part.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'anchor' component's part.
  * Adds attribute 'aria-describedby' based on the property 'aria-describedby' to 'anchor' component's part.
- * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
  */
 
 const menuItemBehavior: Accessibility = (props: any) => ({

src/lib/accessibility/Behaviors/Popup/popupBehavior.ts

@@ -4,9 +4,11 @@ import * as _ from 'lodash'
 
 /**
  * @description
- *  Adds role='button' to 'trigger' component's part, if it is not focusable element and no role attribute provided.
- *  Adds tabIndex='0' to 'trigger' component's part, if it is not tabbable element and no tabIndex attribute provided.
- *  Adds attribute 'aria-disabled=true' to 'trigger' component's part based on the property 'disabled'.
+ * Adds role='button' to 'trigger' component's part, if it is not focusable element and no role attribute provided.
+ * Adds tabIndex='0' to 'trigger' component's part, if it is not tabbable element and no tabIndex attribute provided.
+ *
+ * @specification
+ * Adds attribute 'aria-disabled=true' to 'trigger' component's part based on the property 'disabled'.
  */
 const popupBehavior: Accessibility = (props: any) => ({
   attributes: {

src/lib/accessibility/Behaviors/Popup/popupFocusTrapBehavior.ts

@@ -6,6 +6,8 @@ import * as _ from 'lodash'
  * @description
  * Adds role='button' to 'trigger' component's part, if it is not focusable element and no role attribute provided.
  * Adds tabIndex='0' to 'trigger' component's part, if it is not tabbable element and no tabIndex attribute provided.
+ *
+ * @specification
  * Adds attribute 'aria-disabled=true' to 'trigger' component's part based on the property 'disabled'.
  * Traps focus inside component.
  */

src/lib/accessibility/Behaviors/Radio/radioGroupBehavior.ts

@@ -2,7 +2,7 @@ import { Accessibility } from '../../types'
 import * as keyboardKey from 'keyboard-key'
 
 /**
- * @description
+ * @specification
  *  Adds role='radiogroup'. This allows screen readers to handle the component as a radio group.
  *  Performs 'nextItem' action on ArrowDown, ArrowRight.
  *  Performs 'prevItem' action on ArrowUp, ArrowLeft.

src/lib/accessibility/Behaviors/Radio/radioGroupItemBehavior.ts

@@ -2,7 +2,7 @@ import { Accessibility } from '../../types'
 import * as _ from 'lodash'
 
 /**
- * @description
+ * @specification
  *  Adds role='radio'. This allows screen readers to handle the component as a radio button.
  *  Adds attribute 'aria-checked=true' based on the property 'checked'.
  *  Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.

src/lib/accessibility/Behaviors/Tab/tabBehavior.ts

@@ -4,7 +4,7 @@ import { IS_FOCUSABLE_ATTRIBUTE } from '../../FocusZone/focusUtilities'
 import * as _ from 'lodash'
 
 /**
- * @description
+ * @specification
  * Adds role 'presentation' to 'root' component's part.
  * Adds role 'tab' to 'anchor' component's part.
  * Adds attribute 'tabIndex=0' to 'anchor' component's part.

src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts

@@ -1,7 +1,7 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
- * @description
+ * @specification
  * Adds role 'tablist' to 'root' component's part.
  * Wraps component in FocusZone allowing arrow key navigation through the children of the component.
  */

src/lib/accessibility/Behaviors/Toolbar/toolbarBehavior.ts

@@ -1,7 +1,7 @@
 import { Accessibility, FocusZoneMode } from '../../types'
 
 /**
- * @description
+ * @specification
  * Adds role 'toolbar' to 'root' component's part.
  * Wraps component in FocusZone allowing arrow key navigation through the children of the component.
  */

src/lib/accessibility/Behaviors/Toolbar/toolbarButtonBehavior.ts

@@ -5,6 +5,9 @@ import * as _ from 'lodash'
 
 /**
  * @description
+ * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
+ *
+ * @specification
  * Adds role 'presentation' to 'root' component's part.
  * Adds role 'button' to 'anchor' component's part.
  * Adds attribute 'tabIndex=0' to 'anchor' component's part.
@@ -13,7 +16,6 @@ import * as _ from 'lodash'
  * Adds attribute 'aria-describedby' based on the property 'aria-describedby' to 'anchor' component's part.
  * Adds attribute 'aria-disabled=true' to 'anchor' component's part based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
  * Performs click action with 'Enter' and 'Spacebar' on 'anchor'.
- * The behavior is designed for particular structure of menu item. The item consists of root element and anchor inside the root element.
  */
 const toolbarButtonBehavior: Accessibility = (props: any) => ({
   attributes: {