@pedidopago/ui 1.5.21 → 1.5.23

package/dist/components/Grid/grid.test.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Grid', function () {
+  it('should render the grid container', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      container: true,
+      "data-testid": "grid-container"
+    }));
+    expect(_react.screen.getByTestId('grid-container')).toBeInTheDocument();
+  });
+  it('should render grid container with item element', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      container: true,
+      "data-testid": "grid-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item"
+      })
+    }));
+    expect(_react.screen.getByTestId('grid-item')).toBeInTheDocument();
+  });
+  it('should render grid container with multiple items', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+      container: true,
+      templateColumns: "repeat(12, 1fr)",
+      "data-testid": "grid-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-4"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-5"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-6"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-7"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-8"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-9"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-10"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-11"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-12"
+      })]
+    }));
+    expect(_react.screen.getByTestId('grid-item-1')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-2')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-3')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-4')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-5')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-6')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-7')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-8')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-9')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-10')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-11')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-12')).toBeInTheDocument();
+  });
+  it('should render grid container with multiply elements of different sizes', function () {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+      container: true,
+      gridGap: 6,
+      "data-testid": "grid-container",
+      templateColumns: "repeat(12, 1fr)",
+      templateRows: "repeat(2, 1fr)",
+      style: {
+        height: '200px'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 2,
+        "data-testid": "grid-item-xs-2",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 4,
+        "data-testid": "grid-item-xs-4",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 6,
+        "data-testid": "grid-item-xs-6",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 10,
+        "data-testid": "grid-item-xs-10",
+        style: {
+          background: '#000'
+        }
+      })]
+    }));
+    expect(_react.screen.getByTestId('grid-container')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-xs-2')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-xs-4')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-xs-6')).toBeInTheDocument();
+    expect(_react.screen.getByTestId('grid-item-xs-10')).toBeInTheDocument();
+  });
+});