linear-react-components-ui 0.4.75 → 0.4.76-beta.11

package/lib/list/index.js

@@ -58,27 +58,34 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var List = function List(props) {
-  var _useState = (0, _react.useState)(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
-
   var children = props.children,
       customClass = props.customClass,
       condensed = props.condensed,
       transparent = props.transparent,
       style = props.style,
-      selectable = props.selectable;
+      selectable = props.selectable,
+      onSelectItem = props.onSelectItem;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedItemId = _useState2[0],
+      setSelectedItemId = _useState2[1];
+
   var contextValues = {
     selectable: selectable,
     selectedItemId: selectedItemId,
-    handleSelectItem: function handleSelectItem(selectedId) {
-      setSelectedItemId(selectedId);
+    handleSelectItem: function handleSelectItem(selectedId, onClick) {
+      if (!onSelectItem && onClick) setSelectedItemId(selectedId);
+      if (onSelectItem) onSelectItem(selectedId);
     }
   };
+  (0, _react.useEffect)(function () {
+    if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
+  }, [props.selectedItemId]);
   return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
     value: contextValues
   }, /*#__PURE__*/_react["default"].createElement("ul", {
+    "data-testid": "list-component",
     style: style,
     className: "list-component ".concat(condensed && '-condensed', " ").concat(customClass, " ").concat(!transparent && '-listbackground')
   }, children));
@@ -90,14 +97,18 @@ List.propTypes = {
   customClass: _propTypes["default"].string,
   condensed: _propTypes["default"].bool,
   selectable: _propTypes["default"].bool,
-  style: _propTypes["default"].object
+  style: _propTypes["default"].object,
+  onSelectItem: _propTypes["default"].func,
+  selectedItemId: _propTypes["default"].string
 };
 List.defaultProps = {
   customClass: '',
   condensed: false,
   transparent: false,
   selectable: false,
-  style: {}
+  style: {},
+  onSelectItem: undefined,
+  selectedItemId: ''
 };
 var _default = List;
 exports["default"] = _default;

package/lib/list/list.spec.js

@@ -0,0 +1,611 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _index = _interopRequireWildcard(require("./index"));
+
+var _buttons = _interopRequireDefault(require("../buttons"));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+var _storageMock = _interopRequireWildcard(require("../../../config/jest/storageMock"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+describe('Components', function () {
+  // O componente BrowserRouter foi adicionado devido a thread:
+  // https://stackoverflow.com/questions/48640280/you-should-not-use-link-outside-a-router
+  var list = function list(listProps, listHeaderProps, listItemProps) {
+    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react["default"].createElement(_index["default"], listProps, /*#__PURE__*/_react["default"].createElement(_index.ListHeader, _extends({
+      title: "defaut"
+    }, listHeaderProps), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "listheader-child"
+    }, "saas")), /*#__PURE__*/_react["default"].createElement(_index.ListItem, listItemProps, /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+      customClass: "childbuttontest",
+      label: "Teste Child"
+    }))));
+  };
+
+  var setSessionStorageMock = function setSessionStorageMock() {
+    Object.defineProperty(window, 'sessionStorage', {
+      value: (0, _storageMock["default"])()
+    });
+  };
+
+  describe('List', function () {
+    it('should render correctly', function () {
+      var _render = (0, _react2.render)(list()),
+          container = _render.container;
+
+      expect(container.firstChild).toHaveClass('list-component');
+    });
+    it('prop transparent should remove css class -listbackground', function () {
+      var _render2 = (0, _react2.render)(list({
+        transparent: true
+      })),
+          container = _render2.container;
+
+      expect(container.firstChild).not.toHaveClass('-listbackground');
+    });
+    it('should apply customClass', function () {
+      var customClass = 'teste';
+
+      var _render3 = (0, _react2.render)(list({
+        customClass: customClass
+      })),
+          container = _render3.container;
+
+      expect(container.firstChild).toHaveClass(customClass);
+    });
+    it('prop condensed should apply css class -condensed', function () {
+      var _render4 = (0, _react2.render)(list({
+        condensed: true
+      })),
+          container = _render4.container;
+
+      expect(container.firstChild).toHaveClass('-condensed');
+    });
+    it('should apply style', function () {
+      var style = {
+        marginTop: '10px',
+        paddingBottom: '2px'
+      };
+
+      var _render5 = (0, _react2.render)(list({
+        style: style
+      })),
+          container = _render5.container;
+
+      expect(container.firstChild).toHaveStyle(style);
+    });
+    it('should select item by id', function () {
+      var listItemProps = {
+        itemId: '1'
+      };
+
+      var _render6 = (0, _react2.render)(list({
+        selectable: true,
+        onSelectItem: jest.fn(),
+        selectedItemId: '1'
+      }, {}, listItemProps)),
+          container = _render6.container;
+
+      var listItem = container.querySelector('.item-container');
+      expect(listItem).toHaveClass('-activedlist');
+    });
+    describe('prop selectable', function () {
+      it('should allow ListItem to be selected', function () {
+        var listItemProps = {
+          itemId: '1',
+          onClick: jest.fn()
+        };
+
+        var _render7 = (0, _react2.render)(list({
+          selectable: true
+        }, {}, listItemProps)),
+            container = _render7.container;
+
+        var listItem = container.querySelector('.item-container');
+
+        _react2.fireEvent.click(listItem);
+
+        expect(listItem).toHaveClass('-activedlist');
+      });
+      it('should call onSelectItem', function () {
+        var mockOnSelectItem = jest.fn();
+
+        var mockList = /*#__PURE__*/_react["default"].createElement(_index["default"], {
+          selectable: true,
+          onSelectItem: function onSelectItem(itemId) {
+            return mockOnSelectItem(itemId);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_index.ListItem, {
+          itemId: "1",
+          text: "Teste Foo"
+        }));
+
+        var _render8 = (0, _react2.render)(mockList),
+            container = _render8.container;
+
+        var listItem = container.querySelector('.item-container');
+
+        _react2.fireEvent.click(listItem);
+
+        expect(mockOnSelectItem).toHaveBeenCalledWith('1');
+      });
+    });
+  });
+  describe('ListHeader', function () {
+    it('should render correctly', function () {
+      var _render9 = (0, _react2.render)(list()),
+          container = _render9.container;
+
+      expect(container.querySelector('.list-header')).toBeTruthy();
+    });
+    it('should apply title', function () {
+      var title = 'Teste Header';
+
+      var _render10 = (0, _react2.render)(list({}, {
+        title: title
+      })),
+          container = _render10.container;
+
+      var listHeaderTitle = container.querySelector('.list-header > .title');
+      expect(listHeaderTitle).toBeTruthy();
+      expect(listHeaderTitle).toHaveTextContent(title);
+    });
+    it('should apply style', function () {
+      var style = {
+        marginTop: '10px',
+        paddingBottom: '2px'
+      };
+
+      var _render11 = (0, _react2.render)(list({}, {
+        style: style
+      })),
+          container = _render11.container;
+
+      var listHeader = container.querySelector('.list-header');
+      expect(listHeader).toHaveStyle(style);
+    });
+    it('should apply customClass', function () {
+      var customClass = 'teste-listheader';
+
+      var _render12 = (0, _react2.render)(list({}, {
+        customClass: customClass
+      })),
+          container = _render12.container;
+
+      var listHeader = container.querySelector('.list-header');
+      expect(listHeader).toHaveClass(customClass);
+    });
+    it('should render children', function () {
+      var _render13 = (0, _react2.render)(list()),
+          container = _render13.container;
+
+      var listHeaderChild = container.querySelector('.list-header > .listheader-child');
+      expect(listHeaderChild).toBeTruthy();
+    });
+  });
+  describe('ListItem', function () {
+    it('should render correctly', function () {
+      var _render14 = (0, _react2.render)(list()),
+          container = _render14.container;
+
+      var listItem = container.querySelector('.item-container');
+      expect(listItem).toBeTruthy();
+    });
+    it('should apply text', function () {
+      var text = 'Teste Item 1';
+
+      var _render15 = (0, _react2.render)(list({}, {}, {
+        text: text
+      })),
+          container = _render15.container;
+
+      var listItemText = container.querySelector('.item-container .text');
+      expect(listItemText).toBeTruthy();
+      expect(listItemText).toHaveTextContent(text);
+    });
+    it('should apply subtext', function () {
+      var subText = 'Teste Item 1';
+
+      var _render16 = (0, _react2.render)(list({}, {}, {
+        subText: subText
+      })),
+          container = _render16.container;
+
+      var listItemSubText = container.querySelector('.item-container .subtext');
+      expect(listItemSubText).toBeTruthy();
+      expect(listItemSubText).toHaveTextContent(subText);
+    });
+    it('should apply style', function () {
+      var style = {
+        marginTop: '10px',
+        paddingBottom: '2px'
+      };
+
+      var _render17 = (0, _react2.render)(list({}, {}, {
+        style: style
+      })),
+          container = _render17.container;
+
+      var listItem = container.querySelector('.item-container');
+      expect(listItem).toHaveStyle(style);
+    });
+    describe('prop separator', function () {
+      var separator = true;
+      it('apply list-separator css class to text/subtext/children container', function () {
+        var _render18 = (0, _react2.render)(list({}, {}, {
+          text: 'Teste',
+          separator: separator
+        })),
+            container = _render18.container;
+
+        var listItemTextContainer = container.querySelector('.item-container .item');
+        expect(listItemTextContainer).toHaveClass('list-separator');
+      });
+      it('apply list-separator css class to leftIcon/leftElement container', function () {
+        var _render19 = (0, _react2.render)(list({}, {}, {
+          leftIconName: 'pencil',
+          separator: separator
+        })),
+            container = _render19.container;
+
+        var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
+        expect(listItemLeftElContainer).toHaveClass('list-separator');
+      });
+      it('apply list-separator css class to rightIcon/rightElement container', function () {
+        var _render20 = (0, _react2.render)(list({}, {}, {
+          rightIconName: 'pencil',
+          separator: separator
+        })),
+            container = _render20.container;
+
+        var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
+        expect(listItemRightElContainer).toHaveClass('list-separator');
+      });
+    });
+    it('prop hovered should apply css class hovered ', function () {
+      var _render21 = (0, _react2.render)(list({}, {}, {
+        hovered: true
+      })),
+          container = _render21.container;
+
+      var listItem = container.querySelector('.item-container');
+      expect(listItem).toHaveClass('hovered');
+    });
+    describe('prop disabled', function () {
+      var disabled = true;
+      it('should disable onClick event', function () {
+        var mockFunc = jest.fn();
+
+        var _render22 = (0, _react2.render)(list({}, {}, {
+          disabled: disabled,
+          onClick: mockFunc
+        })),
+            container = _render22.container;
+
+        var listItem = container.querySelector('.item-container');
+
+        _react2.fireEvent.click(listItem);
+
+        expect(mockFunc).not.toBeCalled();
+      });
+      it('apply disabled css class to text/subtext/children container', function () {
+        var _render23 = (0, _react2.render)(list({}, {}, {
+          text: 'Teste',
+          disabled: disabled
+        })),
+            container = _render23.container;
+
+        var listItemTextContainer = container.querySelector('.item-container .item');
+        expect(listItemTextContainer).toHaveClass('disabled');
+      });
+      it('apply disabled css class to leftIcon/leftElement container', function () {
+        var _render24 = (0, _react2.render)(list({}, {}, {
+          leftIconName: 'pencil',
+          disabled: disabled
+        })),
+            container = _render24.container;
+
+        var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
+        expect(listItemLeftElContainer).toHaveClass('disabled');
+      });
+      it('apply disabled css class to rightIcon/rightElement container', function () {
+        var _render25 = (0, _react2.render)(list({}, {}, {
+          rightIconName: 'pencil',
+          disabled: disabled
+        })),
+            container = _render25.container;
+
+        var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
+        expect(listItemRightElContainer).toHaveClass('disabled');
+      });
+      it('should hide url', function () {
+        var _render26 = (0, _react2.render)(list({}, {}, {
+          disabled: disabled,
+          url: 'saas'
+        })),
+            container = _render26.container;
+
+        var linkitem = container.querySelector('.linkitem');
+        expect(linkitem).not.toBeInTheDocument();
+      });
+    });
+    it('prop displayCheckbox should render Checkbox within subject', function () {
+      var _render27 = (0, _react2.render)(list({}, {}, {
+        displayCheckbox: true
+      })),
+          container = _render27.container;
+
+      var checkboxComponent = container.querySelector('.item-container .item.-icon-left .checkbox-component');
+      expect(checkboxComponent).toBeTruthy();
+      expect(checkboxComponent.name).toEqual('checkbox');
+    });
+    it('should render leftElement', function () {
+      var leftElement = /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+        customClass: "leftElTeste"
+      });
+
+      var _render28 = (0, _react2.render)(list({}, {}, {
+        leftElement: leftElement
+      })),
+          container = _render28.container;
+
+      var leftElementHTML = container.querySelector('.item-container .item.-icon-left .leftElTeste');
+      expect(leftElementHTML).toBeTruthy();
+    });
+    it('should render rightElement', function () {
+      var rightElement = /*#__PURE__*/_react["default"].createElement(_buttons["default"], {
+        customClass: "rightElTeste"
+      });
+
+      var _render29 = (0, _react2.render)(list({}, {}, {
+        rightElement: rightElement
+      })),
+          container = _render29.container;
+
+      var rightElementHTML = container.querySelector('.item-container .item.-icon-right .rightElTeste');
+      expect(rightElementHTML).toBeTruthy();
+    });
+    it('should render leftIcon', function () {
+      var leftIcon = /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        name: "code",
+        customClass: "iconTeste",
+        size: 24,
+        color: "#000"
+      });
+
+      var _render30 = (0, _react2.render)(list({}, {}, {
+        leftIcon: leftIcon
+      })),
+          container = _render30.container;
+
+      var leftIconHTML = container.querySelector('.item-container .item.-icon-left .icon-component.iconTeste');
+      expect(leftIconHTML).toBeTruthy();
+    });
+    it('should render rightIcon', function () {
+      var rightIcon = /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+        name: "code",
+        customClass: "iconTeste",
+        size: 24,
+        color: "#000"
+      });
+
+      var _render31 = (0, _react2.render)(list({}, {}, {
+        rightIcon: rightIcon
+      })),
+          container = _render31.container;
+
+      var rightIconHTML = container.querySelector('.item-container .item.-icon-right .icon-component.iconTeste');
+      expect(rightIconHTML).toBeTruthy();
+    });
+    it('prop leftIconName should render Icon', function () {
+      var _render32 = (0, _react2.render)(list({}, {}, {
+        leftIconName: 'code'
+      })),
+          container = _render32.container;
+
+      var leftIcon = container.querySelector('.item-container .item.-icon-left .icon-component');
+      expect(leftIcon).toBeTruthy();
+    });
+    it('prop rightIconName should render Icon', function () {
+      var _render33 = (0, _react2.render)(list({}, {}, {
+        rightIconName: 'code'
+      })),
+          container = _render33.container;
+
+      var rightIcon = container.querySelector('.item-container .item.-icon-right .icon-component');
+      expect(rightIcon).toBeTruthy();
+    });
+    it('should apply onClick', function () {
+      var mockFunc = jest.fn();
+      var listItemId = '1';
+
+      var mockList = /*#__PURE__*/_react["default"].createElement(_index["default"], null, /*#__PURE__*/_react["default"].createElement(_index.ListItem, {
+        itemId: listItemId,
+        text: "Teste Foo",
+        onClick: function onClick(_, itemId) {
+          return mockFunc(itemId);
+        }
+      }));
+
+      var _render34 = (0, _react2.render)(mockList),
+          container = _render34.container;
+
+      var listItem = container.querySelector('.item-container');
+
+      _react2.fireEvent.click(listItem);
+
+      expect(mockFunc).toBeCalledWith(listItemId);
+    });
+    describe('prop customClass', function () {
+      var customClass = 'customclassTeste';
+      it('apply customClass css class to text/subtext/children container', function () {
+        var _render35 = (0, _react2.render)(list({}, {}, {
+          text: 'Teste',
+          customClass: customClass
+        })),
+            container = _render35.container;
+
+        var listItemTextContainer = container.querySelector('.item-container .item');
+        expect(listItemTextContainer).toHaveClass(customClass);
+      });
+      it('apply customClass css class to leftIcon/leftElement container', function () {
+        var _render36 = (0, _react2.render)(list({}, {}, {
+          leftIconName: 'pencil',
+          customClass: customClass
+        })),
+            container = _render36.container;
+
+        var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
+        expect(listItemLeftElContainer).toHaveClass(customClass);
+      });
+      it('apply customClass css class to rightIcon/rightElement container', function () {
+        var _render37 = (0, _react2.render)(list({}, {}, {
+          rightIconName: 'pencil',
+          customClass: customClass
+        })),
+            container = _render37.container;
+
+        var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
+        expect(listItemRightElContainer).toHaveClass(customClass);
+      });
+    });
+    it('prop url should render Link', function () {
+      var _render38 = (0, _react2.render)(list({}, {}, {
+        url: 'saas'
+      })),
+          container = _render38.container;
+
+      var linkComponent = container.querySelector('.item-container .linkitem');
+      expect(linkComponent).toBeTruthy();
+    });
+    describe('prop visible', function () {
+      it('when true(default) should allow subject to render', function () {
+        var _render39 = (0, _react2.render)(list({}, {}, {
+          visible: true
+        })),
+            container = _render39.container;
+
+        var listItem = container.querySelector('.item-container');
+        expect(listItem).toBeTruthy();
+      });
+      it('when false should not let subject render', function () {
+        var _render40 = (0, _react2.render)(list({}, {}, {
+          visible: false
+        })),
+            container = _render40.container;
+
+        var listItem = container.querySelector('.item-container');
+        expect(listItem).not.toBeInTheDocument();
+      });
+    });
+    it('should render children', function () {
+      var _render41 = (0, _react2.render)(list()),
+          container = _render41.container;
+
+      var listItemButtonChild = container.querySelector('.item-container .childbuttontest');
+      expect(listItemButtonChild).toBeTruthy();
+      expect(listItemButtonChild).toHaveTextContent('Teste Child');
+    });
+    describe('prop permissionAttr', function () {
+      describe('when permission granted', function () {
+        it('should render subject', function () {
+          setSessionStorageMock();
+
+          var _render42 = (0, _react2.render)(list({}, {}, {
+            permissionAttr: (0, _storageMock.permissionAttrMockAuthorized)('disabled')
+          })),
+              container = _render42.container;
+
+          var listItem = container.querySelector('.item-container');
+          expect(listItem).toBeTruthy();
+        });
+      });
+      describe('when permission denied', function () {
+        it('onDenied.unvisible option should not render subject', function () {
+          setSessionStorageMock();
+
+          var _render43 = (0, _react2.render)(list({}, {}, {
+            permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('unvisible')
+          })),
+              container = _render43.container;
+
+          var listItem = container.querySelector('.item-container');
+          expect(listItem).not.toBeInTheDocument();
+        });
+        describe('onDenied.disabled option should', function () {
+          var permissionProp = {
+            permissionAttr: (0, _storageMock.permissionAttrMockUnauthorized)('disabled')
+          };
+          it('disable onClick event', function () {
+            var mockFunc = jest.fn();
+
+            var _render44 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+              onClick: mockFunc
+            }))),
+                container = _render44.container;
+
+            var listItem = container.querySelector('.item-container');
+
+            _react2.fireEvent.click(listItem);
+
+            expect(mockFunc).not.toBeCalled();
+          });
+          it('apply disabled css class to text/subtext/children container', function () {
+            var _render45 = (0, _react2.render)(list({}, {}, _extends({
+              text: 'Teste'
+            }, permissionProp))),
+                container = _render45.container;
+
+            var listItemTextContainer = container.querySelector('.item-container .item');
+            expect(listItemTextContainer).toHaveClass('disabled');
+          });
+          it('apply disabled css class to leftIcon/leftElement container', function () {
+            var _render46 = (0, _react2.render)(list({}, {}, _extends({
+              leftIconName: 'pencil'
+            }, permissionProp))),
+                container = _render46.container;
+
+            var listItemLeftElContainer = container.querySelector('.item-container .item.-icon-left');
+            expect(listItemLeftElContainer).toHaveClass('disabled');
+          });
+          it('apply disabled css class to rightIcon/rightElement container', function () {
+            var _render47 = (0, _react2.render)(list({}, {}, _extends({
+              rightIconName: 'pencil'
+            }, permissionProp))),
+                container = _render47.container;
+
+            var listItemRightElContainer = container.querySelector('.item-container .item.-icon-right');
+            expect(listItemRightElContainer).toHaveClass('disabled');
+          });
+          it('hide url', function () {
+            var _render48 = (0, _react2.render)(list({}, {}, _extends({}, permissionProp, {
+              url: 'saas'
+            }))),
+                container = _render48.container;
+
+            var linkitem = container.querySelector('.linkitem');
+            expect(linkitem).not.toBeInTheDocument();
+          });
+        });
+      });
+    });
+  });
+});