diff --git a/blocks/ads-block/features/ads/_children/AdUnit/index.test.jsx b/blocks/ads-block/features/ads/_children/AdUnit/index.test.jsx index 56af328860..0e230956ae 100644 --- 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("", () => { }); it("renders and registers ad unit on published page", () => { - const wrapper = mount(); - expect(wrapper).toBeDefined(); + const { container } = render( + + ); // 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 index d7a312e843..856a3dc52b 100644 --- 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,13 +17,8 @@ const defaults = { describe("", () => { it("renders with ad name", () => { - const wrapper = mount(); - 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(); + expect(screen.getByText("test-ad-name")).not.toBeNull(); }); it("renders with default ad name", () => { @@ -31,12 +26,7 @@ describe("", () => { ...defaults.props, adType: undefined, }; - const wrapper = mount(); - 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(); + 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 index 532c8807f1..ce7ce5c647 100644 --- 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 index 0da7cade55..b06d909a12 100644 --- 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) =>
} + renderPlaceholder={(ref) =>
} > diff --git a/blocks/ads-block/features/ads/default.test.jsx b/blocks/ads-block/features/ads/default.test.jsx index 35ef14332b..b7a63d967b 100644 --- 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("", () => { }); it("renders no ad unit in admin dashboard", () => { - const wrapper = mount(); - 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(); + expect(screen.getByText("cube")).not.toBeNull(); + expect(screen.queryByText(/ads-block.ad-label/)).toBeNull(); }); }); @@ -67,15 +62,8 @@ describe("", () => { describe("when lazy loading is disabled", () => { it("renders ad unit with disabled lazy-load container", () => { - const wrapper = mount(); - 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(); + expect(screen.getByText(/ads-block.ad-label/)).not.toBeNull(); }); }); @@ -87,58 +75,49 @@ describe("", () => { lazyLoad: true, }, }; - const wrapper = mount(); - expect(wrapper).toBeDefined(); - const lazyLoaderEl = wrapper.find("LazyLoad"); - expect(lazyLoaderEl).toHaveLength(1); - expect(lazyLoaderEl.prop("enabled")).toBe(true); + render(); + 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(); - 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(); + 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(); - 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(); + 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(); - 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(); + expect(screen.queryByText(/ads-block.ad-label/)).toBeNull(); + }); - it("renders advertisement label when enabled", () => { - const wrapper = mount(); - 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(); + expect(screen.getByText(/ads-block.ad-label/)).not.toBeNull(); + }); }); }); });