diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index bc5e9b5d..0bfd43a5 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -1,28 +1,36 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
import React from "react";
import Form from "./Form";
describe("Form ", () => {
it("renders", () => {
- const wrapper = shallow(
);
- expect(wrapper).toMatchSnapshot();
+ render(
+
+ );
+ expect(screen.getByRole("form")).toMatchSnapshot();
});
it("can be inline", () => {
- const wrapper = shallow();
- expect(wrapper.prop("className").includes("p-form--inline")).toBe(true);
+ render();
+ expect(screen.getByRole("form")).toHaveClass("p-form--inline");
});
it("can be stacked", () => {
- const wrapper = shallow();
- expect(wrapper.prop("className").includes("p-form--stacked")).toBe(true);
+ render();
+ expect(screen.getByRole("form")).toHaveClass("p-form--stacked");
});
it("can add additional classes", () => {
- const wrapper = shallow();
- const className = wrapper.prop("className");
- expect(className.includes("p-form")).toBe(true);
- expect(className.includes("extra-class")).toBe(true);
+ render(
+
+ );
+ const form = screen.getByRole("form");
+ expect(form).toHaveClass("p-form");
+ expect(form).toHaveClass("extra-class");
});
});
diff --git a/src/components/Form/__snapshots__/Form.test.tsx.snap b/src/components/Form/__snapshots__/Form.test.tsx.snap
index db1420c9..83ded498 100644
--- a/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -2,7 +2,8 @@
exports[`Form renders 1`] = `
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
index 6e927f59..af0e0911 100644
--- a/src/components/Icon/Icon.test.tsx
+++ b/src/components/Icon/Icon.test.tsx
@@ -1,27 +1,31 @@
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react";
import React from "react";
import Icon, { ICONS } from "./Icon";
describe("Icon", () => {
it("renders", () => {
- const wrapper = shallow();
- expect(wrapper).toMatchSnapshot();
+ const { container } = render();
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.firstChild).toMatchSnapshot();
});
it("sets correct class name based on given name", () => {
- const wrapper = shallow();
- expect(wrapper.prop("className").includes("p-icon--test")).toBe(true);
+ const { container } = render();
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.firstChild).toHaveClass("p-icon--test");
});
it("can be given a custom class name", () => {
- const wrapper = shallow();
- expect(wrapper.prop("className")).toBe("custom-class p-icon--test");
+ const { container } = render();
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.firstChild).toHaveClass("custom-class p-icon--test");
});
it("can be given standard HTML props", () => {
const style = { width: "200px" };
- const wrapper = shallow();
- expect(wrapper.prop("style")).toBe(style);
+ const { container } = render();
+ // eslint-disable-next-line testing-library/no-node-access
+ expect(container.firstChild).toHaveAttribute("style", "width: 200px;");
});
});
diff --git a/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index 64f1461b..ba64d549 100644
--- a/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -2,6 +2,6 @@
exports[`Icon renders 1`] = `
`;
diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
index ce26742e..80a75d8d 100644
--- a/src/components/Input/Input.test.tsx
+++ b/src/components/Input/Input.test.tsx
@@ -1,73 +1,84 @@
import { render, screen } from "@testing-library/react";
-import { mount, shallow } from "enzyme";
import React from "react";
import Input from "./Input";
describe("Input", () => {
+ it("displays the field label for text inputs", () => {
+ render();
+ expect(screen.getByText("text label")).toHaveClass("p-form__label");
+ });
+
it("moves the label for radio buttons", () => {
- const wrapper = shallow();
- expect(wrapper.prop("label")).toBe("");
+ render();
+ expect(
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-radio__label")
+ ).toBeInTheDocument();
+ expect(
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-form__label")
+ ).not.toBeInTheDocument();
});
it("moves the label for checkboxes", () => {
- const wrapper = shallow();
- expect(wrapper.prop("label")).toBe("");
+ render();
+ expect(
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-checkbox__label")
+ ).toBeInTheDocument();
+ expect(
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-form__label")
+ ).not.toBeInTheDocument();
});
it("can take focus on first render", () => {
- const container = document.createElement("div");
- document.body.appendChild(container);
- const wrapper = mount(, { attachTo: container });
- expect(wrapper.find("input").getDOMNode()).toBe(document.activeElement);
- document.body.removeChild(container);
+ render();
+ expect(screen.getByRole("textbox")).toHaveFocus();
});
it("sets aria-invalid to false when there is no error", () => {
- const wrapper = mount();
- expect(wrapper.find("input").prop("aria-invalid")).toBe(false);
+ render();
+ expect(screen.getByRole("textbox")).not.toBeInvalid();
});
it("sets aria-invalid to true when there is an error", () => {
- const wrapper = mount();
- expect(wrapper.find("input").prop("aria-invalid")).toBe(true);
+ render();
+ expect(screen.getByRole("textbox")).toBeInvalid();
});
it("sets required field on input", () => {
- const wrapper = mount();
- expect(wrapper.find("input").prop("required")).toBe(true);
+ render();
+ expect(screen.getByRole("textbox")).toBeRequired();
});
it("can set required for a radiobutton", () => {
- const wrapper = mount();
- expect(wrapper.find("input").prop("required")).toBe(true);
+ render();
+ expect(screen.getByRole("radio")).toBeRequired();
});
it("can set required for a checkbox", () => {
- const wrapper = mount();
- expect(wrapper.find("input").prop("required")).toBe(true);
+ render();
+ expect(screen.getByRole("checkbox")).toBeRequired();
});
it("can set a label class name for a radiobutton", () => {
- const wrapper = mount(
-
- );
+ render();
expect(
- wrapper.find("label").prop("className").includes("label-class-name")
- ).toBe(true);
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-radio")
+ ).toHaveClass("label-class-name");
});
it("can set a label class name for a checkbox", () => {
- const wrapper = mount(
-
- );
+ render();
expect(
- wrapper.find("label").prop("className").includes("label-class-name")
- ).toBe(true);
+ // eslint-disable-next-line testing-library/no-node-access
+ document.querySelector(".p-checkbox")
+ ).toHaveClass("label-class-name");
});
-});
-describe("Input RTL", () => {
it("renders", () => {
const { container } = render();
expect(container).toMatchSnapshot();
diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap
index 551ba024..3f870888 100644
--- a/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Input RTL renders 1`] = `
+exports[`Input renders 1`] = `