Resolve lint and add test for TagList

packages/terra-tag/src/RollupTag.jsx

@@ -1,9 +1,5 @@
-import React, {
-useRef,
-} from 'react';
-import {
-  KEY_SPACE, KEY_RETURN,
-} from 'keycode-js';
+import React, { useRef } from 'react';
+import { KEY_SPACE, KEY_RETURN } from 'keycode-js';
 import { injectIntl } from 'react-intl';
 import classNamesBind from 'classnames/bind';
 import PropTypes from 'prop-types';

packages/terra-tag/src/TagList.jsx

@@ -288,12 +288,11 @@ const TagList = (props) => {
     customProps.className,
   );
 
-  const navigationHint = intl.formatMessage({ id: 'Terra.tags.tagList.navigation.hint' })
-  tagGroupInteractionHint = `${tagGroupInteractionHint} ${navigationHint}`
-
   const tagGroupInteractionHintID = `terra-tags-group-interaction-hint-${uuidv4()}`;
   const tagGroupAriaDescribedBy = ariaDescribedBy ? `${ariaDescribedBy} ${tagGroupInteractionHintID}` : tagGroupInteractionHintID;
   let tagGroupInteractionHint = intl.formatMessage({ id: 'Terra.tags.hint.tagList' }, { numberOfTags: React.Children.count(children) });
+  const navigationHint = intl.formatMessage({ id: 'Terra.tags.tagList.navigation.hint' });
+  tagGroupInteractionHint = `${tagGroupInteractionHint} ${navigationHint}`;
   if (isCollapsible && (rollUpCount > 0) && isCollapsed) {
     tagGroupInteractionHint += `, ${intl.formatMessage({ id: 'Terra.tags.hint.rollupNotVisible' }, { tagsNotVisibleCount: rollUpCount })}`;
   }

packages/terra-tag/tests/jest/RollUpTag.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { mountWithIntl } from 'terra-enzyme-intl';
-import {v4 as uuidv4}  from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import RollupTag from '../../src/RollupTag';
 
 describe('Rollup Tag', () => {
@@ -28,4 +28,4 @@ describe('Rollup Tag', () => {
     const wrapper = mountWithIntl(<RollupTag isCollapsed rollupCount={0} />);
     expect(wrapper).toMatchSnapshot();
   });
-});
+});

packages/terra-tag/tests/jest/TagList.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { shallowWithIntl } from 'terra-enzyme-intl';
+import TagList from '../../src/TagList';
+
+describe('TagList Component', () => {
+
+  it('should render tagList with 2 items"', () => {
+    const wrapper = shallowWithIntl(<TagList ariaLabel="Tag List">
+        <div id="tag1">Tag 1</div>
+        <div id="tag2">Tag 2</div>
+    </TagList>);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

packages/terra-tag/tests/jest/__snapshots__/RollUpTag.test.jsx.snap

@@ -68,11 +68,11 @@ exports[`Rollup Tag should render rollup tag with the label "4 more" 1`] = `
       role="button"
     >
       <button
-        aria-describedby="terra-rollup-tag-38b5a23c-0ac2-4589-8196-2adc5673235d"
+        aria-describedby="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         className="rollup-tag"
         data-terra-rollup-tag={true}
         data-terra-rollup-tag-show-focus-styles={true}
-        id="terra-rollup-tag-cd0cdd55-92e6-447f-94b1-97cf3c3225cd"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         onBlur={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -88,13 +88,13 @@ exports[`Rollup Tag should render rollup tag with the label "4 more" 1`] = `
       </button>
       <VisuallyHiddenText
         aria-hidden="true"
-        id="terra-rollup-tag-38b5a23c-0ac2-4589-8196-2adc5673235d"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         text="Terra.tags.hint.rollupTag"
       >
         <span
           aria-hidden="true"
           className="visually-hidden-text"
-          id="terra-rollup-tag-38b5a23c-0ac2-4589-8196-2adc5673235d"
+          id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         >
           Terra.tags.hint.rollupTag
         </span>
@@ -172,11 +172,11 @@ exports[`Rollup Tag should render rollup tag with the label "show less" when isC
       role="button"
     >
       <button
-        aria-describedby="terra-rollup-tag-debc6549-f99e-4fb0-b6ed-f18b56990812"
+        aria-describedby="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         className="rollup-tag"
         data-terra-rollup-tag={true}
         data-terra-rollup-tag-show-focus-styles={true}
-        id="terra-rollup-tag-abd026a1-f094-46da-aa46-d5e0fd4c2764"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         onBlur={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -192,13 +192,13 @@ exports[`Rollup Tag should render rollup tag with the label "show less" when isC
       </button>
       <VisuallyHiddenText
         aria-hidden="true"
-        id="terra-rollup-tag-debc6549-f99e-4fb0-b6ed-f18b56990812"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         text="Terra.tags.hint.showLess"
       >
         <span
           aria-hidden="true"
           className="visually-hidden-text"
-          id="terra-rollup-tag-debc6549-f99e-4fb0-b6ed-f18b56990812"
+          id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         >
           Terra.tags.hint.showLess
         </span>
@@ -276,11 +276,11 @@ exports[`Rollup Tag should render rollup tag with the label "show less" when isC
       role="button"
     >
       <button
-        aria-describedby="terra-rollup-tag-3a8f64c9-141e-405e-8fc5-11defd062c5b"
+        aria-describedby="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         className="rollup-tag"
         data-terra-rollup-tag={true}
         data-terra-rollup-tag-show-focus-styles={true}
-        id="terra-rollup-tag-8d71d23f-69ff-49d3-88fb-5df3630ba6d0"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         onBlur={[Function]}
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -296,13 +296,13 @@ exports[`Rollup Tag should render rollup tag with the label "show less" when isC
       </button>
       <VisuallyHiddenText
         aria-hidden="true"
-        id="terra-rollup-tag-3a8f64c9-141e-405e-8fc5-11defd062c5b"
+        id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         text="Terra.tags.hint.rollupTag"
       >
         <span
           aria-hidden="true"
           className="visually-hidden-text"
-          id="terra-rollup-tag-3a8f64c9-141e-405e-8fc5-11defd062c5b"
+          id="terra-rollup-tag-00000000-0000-0000-0000-000000000000"
         >
           Terra.tags.hint.rollupTag
         </span>

packages/terra-tag/tests/jest/__snapshots__/TagList.test.jsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagList Component should render tagList with 2 items" 1`] = `
+<TagList
+  ariaLabel="Tag List"
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  isCollapsible={false}
+>
+  <div
+    id="tag1"
+  >
+    Tag 1
+  </div>
+  <div
+    id="tag2"
+  >
+    Tag 2
+  </div>
+</TagList>
+`;