THEMES-967: Node 16 | Remove enzyme tests from ad block (#1749)

* THEMES-967: saving work * THEMES-967: finished converting tests to react testing library in ads block. * THEMES-967: improved coverage for ad block tests.
WPMedia · Oct 19, 2023 · db0ac0a · db0ac0a
1 parent c5d889c
commit db0ac0a
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 85 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/ad-helper.test.js b/blocks/ads-block/features/ads/ad-helper.test.js
@@ -212,7 +212,7 @@ describe("ad-helper", () => {
 	});
 
 	describe("getTags()", () => {
-		it('returns empty string with invalid "globalContent"', () => {
+		it("returns empty string with invalid 'globalContent'", () => {
 			const tags = getTags();
 			expect(tags).toBeDefined();
 			expect(tags).toBe("");
@@ -224,6 +224,17 @@ describe("ad-helper", () => {
 				expect(tags).toContain(tag.slug);
 			});
 		});
+		it("returns empty sting when tags are empty", () => {
+			const tags = getTags({
+				globalContent: {
+					taxonomy: {
+						tags: [{}, {}],
+					},
+				},
+			});
+			expect(tags).toBeDefined();
+			expect(tags).toBe("");
+		});
 	});
 
 	describe("getPageType()", () => {

diff --git a/blocks/ads-block/features/ads/default.jsx b/blocks/ads-block/features/ads/default.jsx
@@ -42,7 +42,7 @@ export const ArcAdDisplay = (props) => {
 						offsetLeft={0}
 						offsetRight={0}
 						offsetTop={200}
-						renderPlaceholder={(ref) => <div ref={ref} />}
+						renderPlaceholder={(ref) => <div data-testid="lazy-load-placeholder" ref={ref} />}
 					>
 						<AdUnit adConfig={config} featureConfig={propsWithContext} />
 					</LazyLoad>

diff --git a/blocks/ads-block/features/ads/default.test.jsx b/blocks/ads-block/features/ads/default.test.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useFusionContext } from "fusion:context";
-import { mount } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import ArcAd from "./default";
 
 jest.mock("@wpmedia/arc-themes-components", () => ({
@@ -45,14 +45,9 @@ describe("<ArcAd>", () => {
 		});
 
 		it("renders no ad unit in admin dashboard", () => {
-			const wrapper = mount(<ArcAd {...AD_PROPS_MOCK} />);
-			expect(wrapper).toBeDefined();
-			const arcAdminAd = wrapper.find("ArcAdminAd");
-			expect(arcAdminAd.prop("adClass")).toEqual(AD_PROPS_MOCK.customFields.adType);
-			expect(arcAdminAd.prop("adType")).toEqual("cube");
-			expect(arcAdminAd.prop("slotName")).toEqual("news");
-			expect(typeof arcAdminAd.prop("dimensions")).toEqual("object");
-			expect(wrapper.find("AdUnit")).toHaveLength(0);
+			render(<ArcAd {...AD_PROPS_MOCK} />);
+			expect(screen.getByText("cube")).not.toBeNull();
+			expect(screen.queryByText(/ads-block.ad-label/)).toBeNull();
 		});
 	});
 
@@ -67,15 +62,8 @@ describe("<ArcAd>", () => {
 
 		describe("when lazy loading is disabled", () => {
 			it("renders ad unit with disabled lazy-load container", () => {
-				const wrapper = mount(<ArcAd {...AD_PROPS_MOCK} />);
-				expect(wrapper).toBeDefined();
-				const lazyLoaderEl = wrapper.find("LazyLoad");
-				expect(lazyLoaderEl).toHaveLength(1);
-				expect(lazyLoaderEl.prop("enabled")).toBe(false);
-				const adUnitEl = lazyLoaderEl.find("AdUnit");
-				expect(adUnitEl).toHaveLength(1);
-				expect(typeof adUnitEl.prop("adConfig")).toEqual("object");
-				expect(typeof adUnitEl.prop("featureConfig")).toEqual("object");
+				render(<ArcAd {...AD_PROPS_MOCK} />);
+				expect(screen.getByText(/ads-block.ad-label/)).not.toBeNull();
 			});
 		});
 
@@ -87,58 +75,49 @@ describe("<ArcAd>", () => {
 						lazyLoad: true,
 					},
 				};
-				const wrapper = mount(<ArcAd {...adProps} />);
-				expect(wrapper).toBeDefined();
-				const lazyLoaderEl = wrapper.find("LazyLoad");
-				expect(lazyLoaderEl).toHaveLength(1);
-				expect(lazyLoaderEl.prop("enabled")).toBe(true);
+				render(<ArcAd {...adProps} />);
+				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();
+			});
 		});
 	});
 });