Skip to content

Test/remove enzyme from widgets #1736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Test/remove enzyme from widgets #1736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ff9e3f
test(fieldset-web): remove enzyme from fieldset widget
samuelreichert Jun 27, 2025
a01d8d8
fix: wip
samuelreichert Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/pluggableWidgets/fieldset-web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"publish-marketplace": "rui-publish-marketplace",
"release": "pluggable-widgets-tools release:web",
"start": "pluggable-widgets-tools start:server",
"test": "pluggable-widgets-tools test:unit:web",
"test": "pluggable-widgets-tools test:unit:web:enzyme-free",
"update-changelog": "rui-update-changelog-widget",
"verify": "rui-verify-package-format"
},
Expand Down
11 changes: 6 additions & 5 deletions packages/pluggableWidgets/fieldset-web/src/__tests__/Fieldset.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { shallow } from "enzyme";
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import { createElement, Fragment, ReactNode } from "react";

import { Fieldset, FieldsetProps } from "../components/Fieldset";
Expand All @@ -20,17 +21,17 @@ describe("Fieldset", () => {
);

it("renders children and legend", () => {
const fieldset = shallow(<Fieldset {...defaultFieldsetProps}>{defaultChildren}</Fieldset>);
const fieldset = render(<Fieldset {...defaultFieldsetProps}>{defaultChildren}</Fieldset>);

expect(fieldset).toMatchSnapshot();
expect(fieldset.asFragment()).toMatchSnapshot();
});
it("renders only children when no legend is passed", () => {
const fieldset = shallow(
const fieldset = render(
<Fieldset {...defaultFieldsetProps} legend={undefined}>
{defaultChildren}
</Fieldset>
);

expect(fieldset).toMatchSnapshot();
expect(fieldset.asFragment()).toMatchSnapshot();
});
});
68 changes: 35 additions & 33 deletions packages/pluggableWidgets/fieldset-web/src/__tests__/__snapshots__/Fieldset.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Fieldset renders children and legend 1`] = `
<fieldset
className="className"
name="fieldset"
style={{}}
tabIndex={0}
>
<legend>
legend
</legend>
<label>
Name:
</label>
<input
id="employee_name"
name="employee_name"
type="text"
/>
</fieldset>
<DocumentFragment>
<fieldset
class="className"
name="fieldset"
tabindex="0"
>
<legend>
legend
</legend>
<label>
Name:
</label>
<input
id="employee_name"
name="employee_name"
type="text"
/>
</fieldset>
</DocumentFragment>
`;

exports[`Fieldset renders only children when no legend is passed 1`] = `
<fieldset
className="className"
name="fieldset"
style={{}}
tabIndex={0}
>
<label>
Name:
</label>
<input
id="employee_name"
name="employee_name"
type="text"
/>
</fieldset>
<DocumentFragment>
<fieldset
class="className"
name="fieldset"
tabindex="0"
>
<label>
Name:
</label>
<input
id="employee_name"
name="employee_name"
type="text"
/>
</fieldset>
</DocumentFragment>
`;
65 changes: 36 additions & 29 deletions packages/pluggableWidgets/image-web/src/components/__tests__/Image.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import userEvent, { UserEvent } from "@testing-library/user-event";

Check warning on line 3 in packages/pluggableWidgets/image-web/src/components/__tests__/Image.spec.tsx

View workflow job for this annotation

GitHub Actions / Run code quality check 

'UserEvent' is defined but never used. Allowed unused vars must match /^_|createElement/u

Check warning on line 3 in packages/pluggableWidgets/image-web/src/components/__tests__/Image.spec.tsx

View workflow job for this annotation

GitHub Actions / Run code quality check 

'userEvent' is defined but never used. Allowed unused vars must match /^_|createElement/u
import { createElement } from "react";
import { mount, render } from "enzyme";
import { ModalProps } from "react-overlays/esm/Modal";
import { Image, ImageProps } from "../Image/Image";
import { Lightbox } from "../Lightbox";
import { ModalProps } from "react-overlays/esm/Modal";

jest.mock("../../assets/ic24-close.svg", () => "close-button-icon-svg");

Expand Down Expand Up @@ -70,33 +72,38 @@

describe("Image", () => {
it("renders the structure with an image", () => {
expect(render(<Image {...imageProps} />)).toMatchSnapshot();
const image = render(<Image {...imageProps} />);
expect(image.asFragment()).toMatchSnapshot();
});

it("renders the structure with an image and percentage dimensions", () => {
expect(
render(<Image {...imageProps} height={100} width={100} heightUnit="auto" widthUnit="percentage" />)
).toMatchSnapshot();
const image = render(
<Image {...imageProps} height={100} width={100} heightUnit="auto" widthUnit="percentage" />
);
expect(image.asFragment()).toMatchSnapshot();
});

it("renders the structure with a glyph icon", () => {
expect(render(<Image {...glyphiconProps} />)).toMatchSnapshot();
const image = render(<Image {...glyphiconProps} />);
expect(image.asFragment()).toMatchSnapshot();
});

it("renders the structure with an icon", () => {
expect(render(<Image {...iconProps} />)).toMatchSnapshot();
const image = render(<Image {...iconProps} />);
expect(image.asFragment()).toMatchSnapshot();
});

it("renders the structure as a background image", () => {
expect(
render(<Image {...imageProps} renderAsBackground backgroundImageContent={<div>Image content</div>} />)
).toMatchSnapshot();
const image = render(
<Image {...imageProps} renderAsBackground backgroundImageContent={<div>Image content</div>} />
);
expect(image.asFragment()).toMatchSnapshot();
});

describe("when the onClickType is action", () => {
it("calls the onClick when clicking on an image", () => {
const onClickMock = jest.fn();
const imageRender = mount(<Image {...imageProps} onClick={onClickMock} onClickType="action" />);
const imageRender = render(<Image {...imageProps} onClick={onClickMock} onClickType="action" />);

const image = imageRender.find("img");
expect(image).toHaveLength(1);
Expand All @@ -107,7 +114,7 @@

it("has tabindex if there is an action with OnClick", () => {
const onClickMock = jest.fn();
const imageRender = mount(
const imageRender = render(
<Image {...imageProps} onClick={onClickMock} onClickType="action" tabIndex={1} />
);
const image = imageRender.find("img");
Expand All @@ -117,15 +124,15 @@
});

it("has no tabindex if there is no action with OnClick", () => {
const imageRender = mount(<Image {...imageProps} />);
const imageRender = render(<Image {...imageProps} />);
const image = imageRender.find("img");

expect(image.prop("tabIndex")).toBeUndefined();
});

it("calls the onClick when clicking on a glyph icon", () => {
const onClickMock = jest.fn();
const imageRender = mount(<Image {...glyphiconProps} onClick={onClickMock} onClickType="action" />);
const imageRender = render(<Image {...glyphiconProps} onClick={onClickMock} onClickType="action" />);

const glyphicon = imageRender.find("span");
expect(glyphicon).toHaveLength(1);
Expand All @@ -136,7 +143,7 @@

it("calls the onClick when clicking on an icon", () => {
const onClickMock = jest.fn();
const imageRender = mount(<Image {...iconProps} onClick={onClickMock} onClickType="action" />);
const imageRender = render(<Image {...iconProps} onClick={onClickMock} onClickType="action" />);

const glyphicon = imageRender.find("span");
expect(glyphicon).toHaveLength(1);
Expand All @@ -148,7 +155,7 @@

describe("when the onClickType is enlarge", () => {
it("shows a lightbox when the user clicks on the image", () => {
const imageRender = mount(<Image {...imageProps} onClickType="enlarge" />);
const imageRender = render(<Image {...imageProps} onClickType="enlarge" />);
expect(imageRender.find(Lightbox)).toHaveLength(0);

const image = imageRender.find("img");
Expand All @@ -159,7 +166,7 @@
});

it("closes the lightbox when the user clicks on the close button after opening it", () => {
const imageRender = mount(<Image {...imageProps} onClickType="enlarge" />);
const imageRender = render(<Image {...imageProps} onClickType="enlarge" />);

const image = imageRender.find("img");
expect(image).toHaveLength(1);
Expand All @@ -178,7 +185,7 @@
it("does not trigger on clicks from containers if clicked on the image", () => {
const onClickOuterMock = jest.fn();
const onClickImageMock = jest.fn();
const imageRender = mount(
const imageRender = render(
<div onClick={onClickOuterMock}>
<Image {...imageProps} onClickType="action" onClick={onClickImageMock} />
</div>
Expand All @@ -194,20 +201,20 @@

describe("when there is an accessibility alt text", () => {
it("is set properly on an image", () => {
const imageRender = mount(<Image {...imageProps} altText="this is an awesome image" />);
const imageRender = render(<Image {...imageProps} altText="this is an awesome image" />);
const image = imageRender.find("img");
expect(image.prop("alt")).toBe("this is an awesome image");
});

it("is set properly on a glyphicon", () => {
const imageRender = mount(<Image {...glyphiconProps} altText="this is an awesome glyphicon" />);
const imageRender = render(<Image {...glyphiconProps} altText="this is an awesome glyphicon" />);
const image = imageRender.find("span");
expect(image.prop("aria-label")).toBe("this is an awesome glyphicon");
expect(image.prop("role")).toBe("img");
});

it("is set properly on an icon", () => {
const imageRender = mount(<Image {...iconProps} altText="this is an awesome icon" />);
const imageRender = render(<Image {...iconProps} altText="this is an awesome icon" />);
const image = imageRender.find("span");
expect(image.prop("aria-label")).toBe("this is an awesome icon");
expect(image.prop("role")).toBe("img");
Expand All @@ -216,20 +223,20 @@

describe("when there is no accessibility alt text", () => {
it("nothing is set on an image", () => {
const imageRender = mount(<Image {...imageProps} />);
const imageRender = render(<Image {...imageProps} />);
const image = imageRender.find("img");
expect(image.prop("alt")).toBe(undefined);
});

it("nothing is set on a glyphicon", () => {
const imageRender = mount(<Image {...glyphiconProps} />);
const imageRender = render(<Image {...glyphiconProps} />);
const image = imageRender.find("span");
expect(image).not.toHaveProperty("aria-label");
expect(image).not.toHaveProperty("role");
});

it("nothing is set on an icon", () => {
const imageRender = mount(<Image {...iconProps} />);
const imageRender = render(<Image {...iconProps} />);
const image = imageRender.find("span");
expect(image).not.toHaveProperty("aria-label");
expect(image).not.toHaveProperty("role");
Expand All @@ -238,13 +245,13 @@

describe("when showing an image as a thumbnail", () => {
it("includes the thumb=true URL param in the image", () => {
const imageRender = mount(<Image {...imageProps} displayAs="thumbnail" />);
const imageRender = render(<Image {...imageProps} displayAs="thumbnail" />);
const image = imageRender.find("img");
expect(image.prop("src")).toContain("thumb=true");
});

it("does not include the thumb=true URL param in the lightbox image", () => {
const imageRender = mount(<Image {...imageProps} displayAs="thumbnail" onClickType="enlarge" />);
const imageRender = render(<Image {...imageProps} displayAs="thumbnail" onClickType="enlarge" />);

const image = imageRender.find("img");
expect(image.prop("src")).toContain("thumb=true");
Expand All @@ -264,15 +271,15 @@

describe("when showing as a background image", () => {
it("shows the content", () => {
const imageRender = mount(
const imageRender = render(
<Image {...imageProps} renderAsBackground backgroundImageContent={<div>Image content</div>} />
);
expect(imageRender.text()).toContain("Image content");
});

it("properly handles on click event if configured by the user", () => {
const onClickMock = jest.fn();
const imageRender = mount(
const imageRender = render(
<Image
{...imageProps}
renderAsBackground
Expand Down
Loading