@dxc-technology/halstack-react 0.0.0-aa03ee1 → 0.0.0-aa15b96

package/footer/Footer.test.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _linkedin = _interopRequireDefault(require("../../app/src/images/linkedin.svg"));
+
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+describe("Footer component tests", function () {
+  test("Footer renders with default logo", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null)),
+        getByTitle = _render.getByTitle;
+
+    expect(getByTitle("DXC Logo")).toBeTruthy();
+  });
+  test("Footer renders with social links", function () {
+    var social = [{
+      href: "https://www.test.com/test",
+      logo: _linkedin["default"]
+    }];
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+      socialLinks: social
+    })),
+        getByRole = _render2.getByRole;
+
+    var socialIcon = getByRole("link");
+    expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/test");
+  });
+  test("Footer renders with bottom links", function () {
+    var bottom = [{
+      href: "https://www.test.com/test",
+      text: "bottom-link-text"
+    }];
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+      bottomLinks: bottom
+    })),
+        getByText = _render3.getByText;
+
+    var link = getByText("bottom-link-text");
+    expect(link.getAttribute("href")).toBe("https://www.test.com/test");
+  });
+  test("Footer renders with copyright text", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+      copyright: "test-copyright"
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("test-copyright")).toBeTruthy();
+  });
+  test("Footer renders with correct children", function () {
+    //We need to force the offsetWidth value
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 1024
+    });
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
+        getByText = _render5.getByText;
+
+    expect(getByText("footer-child-text")).toBeTruthy();
+  });
+  test("Footer renders with children in mobile", function () {
+    //425 is mobile width
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 425
+    });
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
+        queryByText = _render6.queryByText;
+
+    expect(queryByText("footer-child-text")).toBeTruthy();
+  });
+  test("Footer is fully rendered", function () {
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 1024
+    });
+    var social = [{
+      href: "https://www.test.com/social",
+      logo: _linkedin["default"]
+    }];
+    var bottom = [{
+      href: "https://www.test.com/bottom",
+      text: "bottom-link-text"
+    }];
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+      socialLinks: social,
+      bottomLinks: bottom,
+      copyright: "test-copyright"
+    }, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
+        getAllByRole = _render7.getAllByRole,
+        getByText = _render7.getByText;
+
+    var socialIcon = getAllByRole("link")[0];
+    expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
+    var bottomLink = getByText("bottom-link-text");
+    expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
+    expect(getByText("test-copyright")).toBeTruthy();
+    expect(getByText("footer-child-text")).toBeTruthy();
+  });
+});

package/header/Header.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _linkedin = _interopRequireDefault(require("../../app/src/images/linkedin.svg"));
+
+describe("Header component tests", function () {
+  test("Header renders with default logo", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], null)),
+        getByTitle = _render.getByTitle;
+
+    expect(getByTitle("DXC Logo")).toBeTruthy();
+  });
+  test("Call correct function on logo click", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      onClick: onClick
+    })),
+        getByTitle = _render2.getByTitle;
+
+    var logo = getByTitle("DXC Logo");
+
+    _react2.fireEvent.click(logo);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Header renders with correct children", function () {
+    // We need to force the offsetWidth value
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 1024
+    });
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      content: /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text")
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("header-child-text")).toBeTruthy();
+  });
+  test("Header renders menu button in mobile", function () {
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 425
+    });
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      responsiveContent: function responsiveContent(closeMenu) {
+        return /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text");
+      }
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("Menu")).toBeTruthy();
+  });
+});

package/heading/Heading.test.js

@@ -0,0 +1,186 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Heading = _interopRequireDefault(require("./Heading"));
+
+describe("Heading component tests", function () {
+  test("Heading renders with default level", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test"
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 1
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 1", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 1
+    })),
+        getByText = _render2.getByText,
+        getByRole = _render2.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 1
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 2", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 2
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 2
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 3", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 3
+    })),
+        getByText = _render4.getByText,
+        getByRole = _render4.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 3
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 4", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 4
+    })),
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with default level and as h5", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      as: "h5"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 1 and as h5", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 1,
+      as: "h5"
+    })),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 2 and as h4", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 2,
+      as: "h4"
+    })),
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 3 and as h2", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 3,
+      as: "h2"
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 2
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 4 and as h3", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 4,
+      as: "h3"
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 3
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5 as h4", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5,
+      as: "h4"
+    })),
+        getByText = _render12.getByText,
+        getByRole = _render12.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5 and invalid as", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5,
+      as: "h4afdssf"
+    })),
+        getByText = _render13.getByText,
+        getByRole = _render13.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+});

package/link/Link.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Link = _interopRequireDefault(require("./Link"));
+
+describe("Link component tests", function () {
+  test("Link renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Link")).toBeTruthy();
+  });
+  test("Link renders with correct href", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link",
+      href: "/testPage"
+    })),
+        getByRole = _render2.getByRole;
+
+    expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
+  });
+  test("Link renders with correct disabled state", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link",
+      href: "/testPage",
+      disabled: true
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("Link").hasAttribute("href")).toBeFalsy();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "LinkButton",
+      onClick: function onClick() {
+        return console.log("Andorra");
+      },
+      disabled: true
+    })),
+        getByTextLinkButton = _render4.getByText;
+
+    expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
+  });
+  test("Link open new tab", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link",
+      href: "/testPage",
+      newWindow: true
+    })),
+        getByRole = _render5.getByRole;
+
+    expect(getByRole("link").getAttribute("target")).toEqual("_blank");
+  });
+  test("Link onClick called", function () {
+    var onClick = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link",
+      onClick: onClick
+    })),
+        getByText = _render6.getByText;
+
+    var link = getByText("Link");
+
+    _react2.fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Disabled link onClick not called", function () {
+    var onClick = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      text: "Link",
+      onClick: onClick,
+      disabled: true
+    })),
+        getByText = _render7.getByText;
+
+    var link = getByText("Link");
+
+    _react2.fireEvent.click(link);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+});