THEMES-967: finished converting tests to react testing library in ads…

… block.
WPMedia · Oct 18, 2023 · 8bdf9d4 · 8bdf9d4
1 parent 7403f62
commit 8bdf9d4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 60 deletions.
diff --git a/blocks/ads-block/features/ads/_children/AdUnit/index.test.jsx b/blocks/ads-block/features/ads/_children/AdUnit/index.test.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
 import AdUnit from "./index";
 import ArcAdsInstance from "../ArcAdsInstance";
 import { setPageTargeting } from "../../ad-helper";
@@ -79,11 +79,12 @@ describe("<AdUnit/>", () => {
 	});
 
 	it("renders and registers ad unit on published page", () => {
-		const wrapper = mount(<AdUnit adConfig={AD_CONFIG_MOCK} featureConfig={FEATURE_CONFIG_MOCK} />);
-		expect(wrapper).toBeDefined();
+		const { container } = render(
+			<AdUnit adConfig={AD_CONFIG_MOCK} featureConfig={FEATURE_CONFIG_MOCK} />
+		);
 		// id with the ad config
-		const adUnitEl = wrapper.find(`#${AD_CONFIG_MOCK_ID}`);
-		expect(adUnitEl).toHaveLength(1);
+		const adUnitEl = container.querySelector(`#${AD_CONFIG_MOCK_ID}`);
+		expect(adUnitEl).not.toBeNull();
 
 		expect(ArcAdsInstance.getInstance).toHaveBeenCalledTimes(1);
 		expect(setPageTargeting).toBeCalledWith(expect.objectContaining(FEATURE_CONFIG_MOCK));

diff --git a/blocks/ads-block/features/ads/_children/ArcAdminAd/index.test.jsx b/blocks/ads-block/features/ads/_children/ArcAdminAd/index.test.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { mount } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import ArcAdminAd from "./index";
 
 const defaults = {
@@ -17,26 +17,16 @@ const defaults = {
 
 describe("<ArcAdminAd>", () => {
 	it("renders with ad name", () => {
-		const wrapper = mount(<ArcAdminAd {...defaults.props} />);
-		expect(wrapper).toBeDefined();
-		const container = wrapper.find("div.b-ads-block--admin");
-		expect(container).toHaveLength(1);
-		const adNameEl = container.find("p").at(0);
-		expect(adNameEl).toHaveLength(1);
-		expect(adNameEl.text()).toEqual("test-ad-name");
+		render(<ArcAdminAd {...defaults.props} />);
+		expect(screen.getByText("test-ad-name")).not.toBeNull();
 	});
 
 	it("renders with default ad name", () => {
 		const adProps = {
 			...defaults.props,
 			adType: undefined,
 		};
-		const wrapper = mount(<ArcAdminAd {...adProps} />);
-		expect(wrapper).toBeDefined();
-		const container = wrapper.find("div.b-ads-block--admin");
-		expect(container).toHaveLength(1);
-		const adNameEl = container.find("p").at(0);
-
-		expect(adNameEl.text()).toEqual("Ad Name N/A");
+		render(<ArcAdminAd {...adProps} />);
+		expect(screen.getByText("Ad Name N/A")).not.toBeNull();
 	});
 });
diff --git a/blocks/ads-block/features/ads/default.test.jsx b/blocks/ads-block/features/ads/default.test.jsx
@@ -79,51 +79,45 @@ describe("<ArcAd>", () => {
 				expect(screen.getByTestId("lazy-load-placeholder")).not.toBeNull();
 			});
 		});
-	});
 
-	describe("Reserve Space", () => {
-		it("renders with width only", () => {
-			const adProps = {
-				...AD_PROPS_MOCK,
-				customFields: {
-					reserveSpace: false,
-				},
-			};
-			const wrapper = mount(<ArcAd {...adProps} />);
-			const adContainer = wrapper.find("div.b-ads-block > div");
-			expect(adContainer).toHaveLength(1);
-			expect(adContainer.prop("style").maxWidth).toBeDefined();
-			expect(adContainer.prop("style").minHeight).toBe(null);
-		});
+		describe("Reserve Space", () => {
+			it("renders with width only", () => {
+				const adProps = {
+					...AD_PROPS_MOCK,
+					customFields: {
+						reserveSpace: false,
+					},
+				};
+				const { container } = render(<ArcAd {...adProps} />);
+				const adContainer = container.querySelector("div.b-ads-block > div");
+				expect(adContainer.style.maxWidth).not.toBe("");
+				expect(adContainer.style.minHeight).toBe("");
+			});
 
-		it("renders with height and width", () => {
-			const wrapper = mount(<ArcAd {...AD_PROPS_MOCK} />);
-			const adContainer = wrapper.find("div.b-ads-block > div");
-			expect(adContainer).toHaveLength(1);
-			expect(adContainer.prop("style").maxWidth).toBeDefined();
-			expect(adContainer.prop("style").minHeight).not.toBe(null);
+			it("renders with height and width", () => {
+				const { container } = render(<ArcAd {...AD_PROPS_MOCK} />);
+				const adContainer = container.querySelector("div.b-ads-block > div");
+				expect(adContainer.style.maxWidth).not.toBe("");
+				expect(adContainer.style.minHeight).not.toBe("");
+			});
 		});
-	});
 
-	describe("Advertisement Label", () => {
-		it("renders no advertisement label when disabled", () => {
-			const adProps = {
-				...AD_PROPS_MOCK,
-				customFields: {
-					displayAdLabel: false,
-				},
-			};
-			const wrapper = mount(<ArcAd {...adProps} />);
-			const container = wrapper.find("div.b-ads-block");
-			expect(container).toHaveLength(1);
-			expect(container.text()).toEqual("");
-		});
+		describe("Advertisement Label", () => {
+			it("renders no advertisement label when disabled", () => {
+				const adProps = {
+					...AD_PROPS_MOCK,
+					customFields: {
+						displayAdLabel: false,
+					},
+				};
+				render(<ArcAd {...adProps} />);
+				expect(screen.queryByText(/ads-block.ad-label/)).toBeNull();
+			});
 
-		it("renders advertisement label when enabled", () => {
-			const wrapper = mount(<ArcAd {...AD_PROPS_MOCK} />);
-			const container = wrapper.find("div.b-ads-block");
-			expect(container).toHaveLength(1);
-			expect(container.text()).toEqual("ads-block.ad-label");
+			it("renders advertisement label when enabled", () => {
+				render(<ArcAd {...AD_PROPS_MOCK} />);
+				expect(screen.getByText(/ads-block.ad-label/)).not.toBeNull();
+			});
 		});
 	});
 });