@occmundial/occ-atomic 3.0.0-beta.45 → 3.0.0-beta.47

package/build/Tabs/index.test.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _ = _interopRequireDefault(require("./"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _context = require("./context");
+
+var _Tab = _interopRequireDefault(require("./Tab"));
+
+var _TabContent = _interopRequireDefault(require("./TabContent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('Tab', function () {
+  global.ResizeObserver = jest.fn().mockImplementation(function () {
+    return {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    };
+  });
+  it('should throw an error', function () {
+    expect(function () {
+      return (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_["default"], {
+        classes: classes,
+        size: "large"
+      }, "Pruebas"));
+    }).toThrow('useTabsContext must be used within a TabsProvider');
+  });
+  it('should not render text child', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, "Tab prueba")));
+    expect(wrapper.find('Tab prueba').length).toBe(0);
+  });
+  it('should render tabs children', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Tab prueba"))));
+    expect(wrapper.find({
+      children: 'Tab prueba'
+    }).length).toBe(1);
+  });
+  it('should be selected the first child', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    }))));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+  });
+  it('should be displayed the first child content', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    })), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 0,
+      testId: "tab-content-1"
+    }, "Tab child 1 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 1,
+      testId: "tab-content-2"
+    }, "Tab child 2 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 2,
+      testId: "tab-content-3"
+    }, "Tab child 3 content")));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-2'
+    }).prop('className')).not.toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).prop('className')).not.toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-1'
+    }).prop('className')).not.toContain('hide');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-2'
+    }).prop('className')).toContain('hide');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-3'
+    }).prop('className')).toContain('hide');
+  });
+  it('should display content on click', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_context.TabsProviderUncontrolled, null, /*#__PURE__*/_react["default"].createElement(_["default"], {
+      classes: classes,
+      size: "large"
+    }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 1",
+      testId: "tab-child-1"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 2",
+      testId: "tab-child-2"
+    }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
+      title: "child 3",
+      testId: "tab-child-3"
+    })), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 0,
+      testId: "tab-content-1"
+    }, "Tab child 1 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 1,
+      testId: "tab-content-2"
+    }, "Tab child 2 content"), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
+      value: 2,
+      testId: "tab-content-3"
+    }, "Tab child 3 content")));
+    expect(wrapper.find({
+      'data-testid': 'tab-child-1'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-1'
+    }).prop('className')).not.toContain('hide');
+    wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).simulate('click');
+    expect(wrapper.find({
+      'data-testid': 'tab-child-3'
+    }).prop('className')).toContain('selected');
+    expect(wrapper.find({
+      'data-testid': 'tab-content-3'
+    }).prop('className')).not.toContain('hide');
+  });
+});

package/build/Tabs/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  container: {
+    display: 'flex',
+    position: 'relative',
+    overflowX: 'auto',
+    boxShadow: 'inset 0 -1px 0px 0px #EDEDF1',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    scrollbarWidth: 'none'
+  }
+};
+exports["default"] = _default;

package/build/index.js

@@ -84,6 +84,10 @@ var _functions = require("./Toaster/functions");
 
 var _Fab = _interopRequireDefault(require("./Fab"));
 
+var _Tab = _interopRequireDefault(require("./Tabs/Tab"));
+
+var _TabContent = _interopRequireDefault(require("./Tabs/TabContent"));
+
 var _NavTab = _interopRequireDefault(require("./NavTab"));
 
 var _NavItem = _interopRequireDefault(require("./NavItem"));
@@ -92,6 +96,10 @@ var _NavIcon = _interopRequireDefault(require("./NavIcon"));
 
 var _NavAside = _interopRequireDefault(require("./NavAside"));
 
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+
+var _context = require("./Tabs/context");
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
 var _Header = _interopRequireDefault(require("./Header"));
@@ -195,5 +203,10 @@ module.exports = {
   WindowSize: _WindowSize["default"],
   tokens: tokens,
   AtomicProvider: _Provider["default"],
-  Fab: _Fab["default"]
+  Fab: _Fab["default"],
+  Tabs: _Tabs["default"],
+  TabsProviderControlled: _context.TabsProviderControlled,
+  TabsProviderUncontrolled: _context.TabsProviderUncontrolled,
+  Tab: _Tab["default"],
+  TabContent: _TabContent["default"]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.45",
+  "version": "3.0.0-beta.47",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",