@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ec6fe9

package/test/PasswordInput.test.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DxcPasswordInput from "../src/password-input/PasswordInput";
+
+describe("Password input component tests", () => {
+  test("Password input renders with label", () => {
+    const { getByText } = render(<DxcPasswordInput label="Password input label" />);
+    expect(getByText("Password input label")).toBeTruthy();
+  });
+
+  test("Password input renders with helper text", () => {
+    const { getByText } = render(<DxcPasswordInput helperText="Helper text" />);
+    expect(getByText("Helper text")).toBeTruthy();
+  });
+
+  test("Password input renders error", () => {
+    const { getByText } = render(<DxcPasswordInput error="Error message." />);
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+
+  test("onChange function is called correctly", () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(<DxcPasswordInput label="Password input" onChange={onChange} />);
+    const passwordInput = getByRole("textbox");
+    userEvent.type(passwordInput, "Pa$$w0rd");
+    expect(onChange).toHaveBeenCalledWith({ value: "P", error: null });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+
+  test("onBlur function is called correctly", () => {
+    const onBlur = jest.fn();
+    const { getByRole } = render(<DxcPasswordInput label="Password input" onBlur={onBlur} />);
+    const passwordInput = getByRole("textbox");
+    userEvent.type(passwordInput, "Pa$$w0rd");
+    fireEvent.blur(passwordInput);
+    expect(onBlur).toHaveBeenCalledWith({ value: "Pa$$w0rd", error: null });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+
+  test("Clear password input value", () => {
+    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
+    const passwordInput = getByRole("textbox");
+    userEvent.type(passwordInput, "Pa$$w0rd");
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    const clearButton = getAllByRole("button")[0];
+    userEvent.click(clearButton);
+    expect(passwordInput.value).toBe("");
+  });
+
+  test("Non clearable password input has no clear icon", () => {
+    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" />);
+    const passwordInput = getByRole("textbox");
+    userEvent.type(passwordInput, "Pa$$w0rd");
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    const buttons = getAllByRole("button");
+    expect(buttons.length).toBe(1);
+  });
+
+  test("Show/hide password input button works correctly", () => {
+    const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
+    const passwordInput = getByRole("textbox");
+    userEvent.type(passwordInput, "Pa$$w0rd");
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    expect(passwordInput.type).toBe("password");
+    const showButton = getAllByRole("button")[1];
+    userEvent.click(showButton);
+    expect(passwordInput.type).toBe("text");
+  });
+
+  test("Password input has correct accesibility attributes", () => {
+    const { getByRole } = render(<DxcPasswordInput label="Password input" />);
+    const passwordInput = getByRole("textbox");
+    expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
+    expect(passwordInput.getAttribute("aria-controls")).toBeNull();
+    const showButton = getByRole("button");
+    expect(showButton.getAttribute("aria-expanded")).toBe("false");
+    expect(showButton.getAttribute("aria-label")).toBe("Show");
+    userEvent.click(showButton);
+    expect(showButton.getAttribute("aria-expanded")).toBe("true");
+    expect(showButton.getAttribute("aria-label")).toBe("Hide");
+  });
+});

package/test/ResultsetTable.test.js

@@ -244,7 +244,7 @@ describe("ResultsetTable component tests", () => {
     expect(getByText("Louis")).toBeTruthy();
     expect(getByText("Lana")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
-    const nextButton = getAllByRole("button")[3];
+    const nextButton = getAllByRole("button")[2];
     fireEvent.click(nextButton);
     expect(getByText("4 to 6 of 10")).toBeTruthy();
     // expect(getByText("Page: 2 of 4")).toBeTruthy();
@@ -255,6 +255,8 @@ describe("ResultsetTable component tests", () => {
   });
 
   test("Resultsettable goToPage works as expected", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
     const { getByText, getAllByRole, getByRole } = render(
       <DxcResultsetTable columns={columns} showGoToPage={true} rows={rows} itemsPerPage={3}></DxcResultsetTable>
     );
@@ -266,13 +268,12 @@ describe("ResultsetTable component tests", () => {
     act(() => {
       userEvent.click(goToPageSelect);
     });
-    const goToPageOption = getByRole("option", { name: /2/i });
+    const goToPageOption = getByText("2");
     act(() => {
       userEvent.click(goToPageOption);
     });
 
     expect(getByText("4 to 6 of 10")).toBeTruthy();
-    // expect(getByText("Page: 2 of 4")).toBeTruthy();
     expect(getByText("Rick")).toBeTruthy();
     expect(getByText("Mark")).toBeTruthy();
     expect(getByText("Cris")).toBeTruthy();
@@ -283,8 +284,7 @@ describe("ResultsetTable component tests", () => {
     const { getByText, getAllByRole } = render(
       <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
     );
-    debugger;
-    const lastButton = getAllByRole("button")[4];
+    const lastButton = getAllByRole("button")[3];
     fireEvent.click(lastButton);
     expect(getByText("10 to 10 of 10")).toBeTruthy();
     expect(getAllByRole("row")).toHaveLength(2);
@@ -320,7 +320,7 @@ describe("ResultsetTable component tests", () => {
         itemsPerPageOptions={[2, 3]}
       ></DxcResultsetTable>
     );
-    const lastButton = getAllByRole("button")[5];
+    const lastButton = getAllByRole("button")[3];
     fireEvent.click(lastButton);
     expect(getAllByRole("row").length - 1).toEqual(1);
     rerender(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={6}></DxcResultsetTable>);