@dxc-technology/halstack-react 0.0.0-1e19032 → 0.0.0-1e57e26

package/tag/Tag.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("./Tag"));
+
+describe("Tag component tests", function () {
+  test("Tag renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct label before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      labelPosition: "before"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct icon", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      icon: "/test-icon.jpg"
+    })),
+        getByRole = _render3.getByRole;
+
+    expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
+  });
+  test("Tag renders with link href", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      linkHref: "/test/page"
+    })),
+        getByRole = _render4.getByRole;
+
+    expect(getByRole("link").getAttribute("href")).toBe("/test/page");
+  });
+  test("Call correct function on click", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      onClick: onClick
+    })),
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.click(getByText("tag-test"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/text-input/TextInput.js

@@ -135,6 +135,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
       helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
@@ -169,7 +171,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
       inputId = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(defaultValue),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       innerValue = _useState4[0],
       setInnerValue = _useState4[1];

package/text-input/TextInput.stories.tsx

@@ -70,7 +70,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered action" theme="light" level={4} />
-      <DxcTextInput label="Text input" value="Text" clearable />
+      <DxcTextInput label="Text input" defaultValue="Text" clearable />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Without label" theme="light" level={4} />
@@ -82,13 +82,13 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Helper text, optional, and clearable" theme="light" level={4} />
-      <DxcTextInput label="Text input" clearable value="Text" helperText="Help message" optional />
+      <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Clearable and large icon action" theme="light" level={4} />
       <DxcTextInput
         label="Text input"
-        value="Text text text text text text text text text text"
+        defaultValue="Text text text text text text text text text text"
         clearable
         action={actionLargeIcon}
       />
@@ -107,7 +107,7 @@ export const Chromatic = () => (
         label="Error text input"
         helperText="Help message"
         error="Error message."
-        value="Text"
+        defaultValue="Text"
         clearable
         optional
         action={action}
@@ -133,7 +133,7 @@ export const Chromatic = () => (
         helperText="Help message"
         disabled
         optional
-        value="Text"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
@@ -146,7 +146,7 @@ export const Chromatic = () => (
         optional
         prefix="+34"
         suffix="USD"
-        value="Text"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
@@ -163,7 +163,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered action" theme="dark" level={4} />
-          <DxcTextInput label="Text input" value="Text" clearable />
+          <DxcTextInput label="Text input" defaultValue="Text" clearable />
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Helper text, placeholder, optional and action" theme="dark" level={4} />
@@ -182,7 +182,7 @@ export const Chromatic = () => (
             label="Error text input"
             helperText="Help message"
             error="Error message."
-            value="Text"
+            defaultValue="Text"
             clearable
             action={action}
           />
@@ -211,7 +211,7 @@ export const Chromatic = () => (
             helperText="Help message"
             disabled
             optional
-            value="Text"
+            defaultValue="Text"
             action={action}
           />
         </ExampleContainer>
@@ -224,7 +224,7 @@ export const Chromatic = () => (
             optional
             prefix="+34"
             suffix="USD"
-            value="Text"
+            defaultValue="Text"
             action={action}
           />
         </ExampleContainer>